First of all a big THANKS to Mihai Corlan, Adobe Evangelist, that is helping me during this “journey”.
Everything start last year during MAX when I saw for the first time the new BlackBerry tablet: the Playbook 😀
It looked so nice, I thought that it was really amazing.
So after few months I decide to try… and now, I finally can announce that with Mihai we are working on a book on Playbook application development with Flash Platform!
It’ll be an hard job but I want to do it, I hope to receive useful suggestions and questions about this topic and believe me that I’ll be free to talk with you about that.
It will be a book made by developers for developers so I hope that you’ll enjoy it when will be released this september (more or less).
This book will cover following topics:
Build, port and optimize apps for the BlackBerry PlayBook tablet device
Work with the PlayBook OS APIs, ActionScript, Flex, AIR and other Flash tools/APIs for PlayBook
Build a simple app and consuming data
Create multimedia and gaming apps for the BlackBerry PlayBook
Debug and optimize your PlayBook app
For any news about this book and about Flash Platform development follow this blog and my twitter or facebook account.
Like you know I love work with mobile and embedded stuff, in particular I love working with Flash Platform on mobile devices.
In latest months I worked on Android and iOS with Flash Professional but in latest weeks I started to work with Flex HERO sdk.
I love so much work with Flex but on mobile I’ve never tried yet.
First impression is that work with Flex on mobile stuff is quite fast respect Flash because it adds a lots of usual features that a mobile application needs.
Splash page
Any mobile application that is called like that, needs a splash page to introduce the real application.
In Flex you can set it very easily directly in main MXML file.
The executable MXML file on mobile project is called ViewNavigatorApplication instead of WindowedApplication like every AIR application, this new class allow you to set splashScreenImage, splashScreenScaleMode and splashScreenMinimumDisplayTime.
Those properties allow you to choose an image file for the splash screen, set its minimum duration and finally how it works in each screen’s dimensions where application runs.
Views
I mention ViewNavigatorApplication, this is a new concept of Flex mobile applications, in fact each application is composed by different View components.
Views are so interesting because they have a lots of things pre-builted like ActionBar, activation and deactivation events, View title, caching data and so on.
Every view is managed by a navigator, with the navigator you can push or pop views (like an array) to change them.
You can also choose how they will be animated, by default you can see a simple slide left or right (depends if you are adding or removing a view).
ActionBar is a new interesting component composed by 3 elements:
navigationContent
titleContent
actionContent
Usually actionBar could be used like a context menu of the view, remember that on mobile development is necessary to go back in the previous mask and also remember that your user doesn’t work on an application like uses a desktop application so shortcuts are so important.
Mobile Components
The new Flex framework “Hero” added optimized components for mobile purpose.
Until now I worked with textinputs, labels and lists that works very well, I tried in 3 different Android phones and performance are quite good.
Another new component added is IconItemRenderer that is an optimized item renderer for list component for example.
This component could be customized with: title, message field, icon and a decorator class that allow you to add for example another image. This is an IconItemRenderer sample where I added also filters (a drop shadow in this case)
Device Interaction & Flex Performance
Another cool thing that allow you to save time is that back button on the smartphone is managed by the application and it automatically goes to the previous view when a user click on hit.
In my few samples I tried to work without using cacheAsBitmap and cacheAsBitmapMatrix to have better performance and believe me that you remain astonished by the performance.
In fact performance are so good, it is so optimized for mobile purpose and everything works well, I tried to add custom effects and filters but performance were amazing too.
Mobile project Architecture
This is my favorite topic, when I started to work on mobile stuff with Actionscript 3 I thought on how to have great performances but with a good architecture that allow me to maintain my application during own life.
So I investigated on how new mobile technologies work and I found that Nokia QT works on mobile with a MVVM architecture, usually instead of controllers you can use delegates but depends of the application.
Working with MVVM architecture and a good design pattern like observer you can solve any problem in a mobile project, performances are perfect and you can optimize your code in the best way you like.
There are other tests that I want to try, the first one will be using Signals instead of Observer, I’d like to know performances in a mobile project (stay tuned :P).
Final Conclusion
The new Flex framework is an interesting step to the future, with this framework I’m sure you can create cool application in few days focusing on details and not on the application skeleton.
Recently I made some test on iPad to test how to update contents of my mobile applications.
I tried some new AIR 2 API like open default program with PDF or XLS files but I get error #3000 (privileges error).
My idea is to create a routine where I’ll be able to update all contents on my application without passing trough Apple store.
So I tried with URLStream and AIR filesystem API, everything works well.
Code is so easy, take a look here:
//RETRIEVING IMAGE FROM ANY WEBSERVER
var urlS:URLStream = new URLStream();
urlS.addEventListener(Event.COMPLETE, downloadComplete);
urlS.addEventListener(ProgressEvent.PROGRESS, showPerc);
urlS.load(new URLRequest("http://192.168.1.9:8888/oliviaWilde.jpg"))
//DOWNLOADED IMAGE BYTEARRAY AND LOADING IN LOADER
function downloadComplete(e:Event):void {
perc_txt.text = "";
fileData = new ByteArray();
urlS.readBytes(fileData,0,urlS.bytesAvailable);
bytes = urlS.bytesAvailable;
l.loadBytes(fileData);
l.addEventListener(MouseEvent.CLICK, saveIt);
}
//SAVE IMAGE INTO APPLICATIONSTORAGEDIRECTORY
function saveIt(e:MouseEvent):void{
f = File.applicationStorageDirectory.resolvePath("a.jpg");
var fs:FileStream = new FileStream();
fs.open(f, FileMode.WRITE)
fs.writeBytes(fileData);
fs.close();
}
//LOAD IMAGE FROM APPLICATIONSTORAGEDIRECTORY
function loadLocalImg(e:MouseEvent):void{
var finalBA:ByteArray = new ByteArray();
var fs:FileStream = new FileStream();
fs.open(f, FileMode.READ);
fs.readBytes(finalBA, 0, bytes);
fs.close();
l.loadBytes(finalBA);
}
Using applicationStorageDirectory, you can save data into your application and retrieve it with AIR API.
In the video below, you can see a little demo where I load an image from a server, I save it, I unload click on the black right button and finally I load again but from ApplicationStorageDirectory, with the black left one, instead of loading from webserver.
A couple of weeks ago I became blogger reviewer for O’really, so I take this opportunity to open my mind and learn new stuff about new technologies, programmation languages, etc.
So this is my first review and I start with an HTML5 video course.
Why am I talking about HTML5 in this blog? Because I think it’s important to know and learn if it could be useful in some projects or not.
Starting with this idea I’ve decided to watch this video course about HTML5 on mobile development.
Video courses aren’t my favorite media to learn new stuff because I love to sign my books, add some notes…you know what I mean… but this time I was really impressed about how O’Reilly organized it.
Seems you are in a real classroom with teacher in front of you that show code examples, tips & tricks using HTML5, CSS3 on iPad or iPhone.
Course is focused on mobile development, Jake Carter, the author, shows also Android world, how to configure your computer to work with emulator and simulator for Android, iPhone and so on.
I really love the way that he works in the classroom because first of all he explains the powerful of a particular feature, then show how to implement it and finally a little part of Q&A from internet people (I suppose).
During this video course you can learn useful stuff, take a look at table of contents in O’reilly website.
It was my first time with HTML5 and I think is an interesting technology, in particular, during this course I learn how to work with geolocation, with JS and Canvas, with audio and video API and again how to save data directly on the device in a database.
I appreciate a lot al meta and css dedicated to iPhone and iPad, very useful.
Finally if you are interesting to learn a new way to develop on mobile, I suggest to take a look at this reference.
It’s useful, easy and I think is a fast method to learn.
First of all I’d like to say thank you to JUG Padova that give me opportunity to talk about Flash Platform in own Java User Group.
Saturday morning I got a talk about Android development with Flash Platform in a school in Padova.
There were 40/50 people more or less, students, Flash Platform devs and Java devs, so I’m glad about the final result.
I talked about my experience on working with Flash Platform on Android, suggested some tips & tricks to improve own applications made with AIR or web site for Flash Player on Android and finally I reported latest news from Flash on the Beach general session.
Adobe has just released Adobe AIR for Android so from last weekend you can download it and start to develop your own Flash Platform contents for Android devices.
Sorry if I don’t post anything until now but I study a lot during last months and finally I’ve time to write a new post about Flash Platform on Android.
I’m glad to talk about this argument because after Flash Lite experience I was not so excited to work with these technologies on mobile, but finally I can say that we can forget Flash Lite experience in this new way to think mobile.
First of all I’d like to share with you a thought about Adobe mobile direction.
Adobe is releasing 3 cool mobile technologies Flash, Flex and obviously AIR; the most interesting for me is Flex 4.1 (codename HERO) that allow to create contents for RIAs, Dekstop Apps, Mobile RIAs and Mobile Apps.
In fact with HERO, Adobe gives us opportunity to develop better and faster with the same framework! Yes, you read well, 1 framework for everything!
They add some cool components dedicated for mobile development like ActionBar or ViewNavigator. It’s really impressive!
If you have an Android FroYo device, try to download some .apk file made with Flex on Coenraets blog.
I think Adobe is going to the right direction and new technologies that will be released in next months give us a new opportunity to bring our contents and deliver them to mobile! So THANK YOU ADOBE!
After these considerations, I’d like to talk about few experiments that I tried during last weeks.
Flash Platform on Android works very well, cool performance and with a good coding you can create great stuff.
I’m working on a mobile library with some useful components like grid, list, image and so on; I think that work with Flash Platform on mobile is so easy if you have an idea on how to work for mobile.
Obviously, if you are a Flash developer you are not a Flash mobile developer automatically! But you can become a mobile developer in few easy steps:
1. Optimize your code: remember to remove all listeners, put variables to null, using object pooling instead of create and destroy variables, use design patterns and so on. 2. System.gc() finally works! On Flash Player 10.1 if you run this command it works very well and save lots of memory for your porjects! 3. Don’t insert tons of stuff on your screen: when you design UI of your application remember that you have a small screen so remember to work with 14px fonts (minimum size), big hit button area (50px minimum), optimized images, avoid vector strokes.
Remember also to test if an asset is better in pixels instead of vectors or viceversa, because sometimes trying on device is the best way to find an answer! 4. Test on device anytime you add a consistent feature.
Don’t test your application only when you finish it, but test anytime you add a new feature because what you see on your computer could not be the same on your Android device!
Those are only few suggestions to start to work with Flash Platform on Android; on Amazon I saw that many people will release some cool books about Flash Platform development on mobile device so please take a look!
Finally, I give you a couple of videos about a runtime image manipulation on Android with Convolution filter made in less then 50 lines of code and a new component that I develop for our library called Skeleton component that simulate navigation of iPad Wired app but made for Android with Flash Platform.
I’m finishing it but for now I’m glad for final result; it’s totally XML driven and you can add swf, videos or images, send data to swf files and so on.
A cool test that I made is to port it on an AIR app for desktop and without changing a line of code I have the same result!
So if you plan your development well you can have one core and different deploy, thank you again Adobe!
Now I want to try it on an Android tablet and then I’ll post some results about that.
For now I can say that Flash on Android will revolutionize Android mobile development experience and if Adobe goes in this direction I can say that they will revolutionize mobile developer life (not for all, isn’t it Steve?!).
In our last Flash / AIR project we are working with tons of automations to create files, save them on computer, download files from the web and so on.
A library that I think could be interesting not only for us but also for other people that will work with zip files is FZIP from codeazur.
I saw it a couple of years ago and finally I used it, I think it’s so cool for your desktop or web projects based on Flex, Flash or AIR.
Working with FZIP is so easy, if you want to add a file into a new zip file you only write:
var zip:FZip = new FZip(); zip.addFile(f.name, f.data); //f is a File object instance
You can also set a particular position for your file with addFileAt method, remove a file, read each file and working with it without using any different language; all with Actionscript 3!
When you are ready to create your zip file you can save it with FileStream object like this:
var ba:ByteArray = new ByteArray(); zip.serialize(ba) ba.position = 0; var finalZIP:File = File.desktopDirectory.resolvePath("AIRZIPPER.zip"); var fs:FileStream = new FileStream(); fs.open(finalZIP, FileMode.WRITE); fs.writeBytes(ba); fs.close();
So easy, isn’t it?!
One of the main thing that could be interesting to know about FZIP is that library doesn’t read zip file with data descriptor like you can read on official website in Limitations paragraph:
FZip generally can’t read ZIPs that make use of Data Descriptors. Examples of such ZIPs are those created by the Mac OS X Archiver utility, SWCs, JARs, etc.
So to solve this problem I made a simple AIR application that zip your files (only files for now but soon I also work with folders and subfolders) and give a perfect zip file without any data descriptor, so you can use to work with FZIP lib.
You can download it for free from this link (I think they are on dedicated servers), I hope that you enjoy it and if you have any requests feel free to ask me via email or adding a comment to this post!
UPDATE
I’ve just received a mail from Claus of codeazur that gives me a new repository for FZIP where they solved data descriptor issue; thank you Claus!
This evening I’d like to share with you a little trick on how to create a simple snapshot of a Flash video.
It’s easy, isn’t it?! NO, it’s not so easy!!!
if you have your Video object on the stage that is bigger than real video dimensions and you try to make a snapshot you’ll have something like this:
So I think to create an utility class that solve this problem; I start to think how to get only image pixels and not the white one.
I add transparent pixels instead of white pixels and I check on image which is the first transparent pixel I can find in my image.
I use those coordinates to make a new bitmapData with only image pixels and I draw again and scale it with video width and height.
This is final result:
You can download source code from this link.
When I’ll have enough time, I’d like to optimize it maybe with bitwise operations, but meanwhile you can start from this scratch!
Just passed! I become Adobe Certified Expert on Flash CS4!
Like Flex with AIR certification I’d like to share my experience to prepare yourself for ACE exam of Flash CS4.
First of all… EXPERIENCE! You must work, play and work & play with Flash CS4 IDE and Actionscript 3.
More experience you have on Flash development less you must study for the exam and you have more chance to pass.
Obviously, it’s so difficult to know everything about Flash CS4 from all IDE controls to Actionscript 3 and OOP so there are 2 books that could be helpful to solve this “issue”.
With those book you can create a good base to try ACE exam for Flash CS4 but, if you have read Essential Actionscript 3 could be better for Actionscript side and for your daily work ;).
Another good suggestion is to read Help guide of Flash, in fact Adobe made an impressive job on that guide and you can find lots of interesting stuff; you can download a guide PDF file directly from this link.
Try everything, from import PSD or AI files to prepare files for web or desktop application with AIR, because you may find some questions about AIR and own code syntax!
Finally test yourself before real exam with a very good service (I really appreciate it) like acequestions.com with less then $10 you can try how Flash CS4 exam works and also which kind of questions you could find in that certification.
That’s it! Take a look at Adobe site to read all information to become Adobe Certified Expert and… GOOD LUCK!
I’d like to begin 2010 with a design pattern argument.
First design pattern of this year is Memento pattern, that could be very useful if you are working on an AIR desktop application or in a Flex RIA and you want to make an history of user’s actions.
In fact this pattern is used to make undo and redo in an application.
Memento pattern is tightly coupled with originator object and it’s usually composed by 3 different parts:
memento
caretaker
originator
Originator is object that pass data to caretaker and it saved them in a couple of arrays (undoArray and redoArray).
So caretaker is an object that stores a memento snapshot and, if originator needs, pass undo or redo data to this object.
I prepare a sample to understand better what could you use Memento pattern in your applications (“view source” option is activated).
I wrote a Memento class with a Singleton to centralize all users actions,then I create a MementoVO that is a dynamic class to help me store data from each object used by the user, you could use a simple Object instead of a dynamic class to save more memory if you prefer.
Sample is very easy but useful for Memento pattern purpose, in fact you can move windows trough the stage and our “history” class (Memento.as) saves their positions when saveAction method is called by the originator (an instance of CustomWin).
Memento class has 4 essentials methods that are:
undo()
redo()
saveAction(_obj:Object)
saveRedoAction(_obj:Object)
I start from the end, saveRedoAction, last method, is used to save the position of a window before I restore its positions, usually Redo action is used only one time, but if you want you could create an Array and work with multiple Redo.
Another important method is saveAction that is called when mouse down event was triggered and it stores in memento class own old position and object itselfs.
First two methods need to undo and redo an user action, it’s easy isn’t it?!
I think that in this year I’ll share lots of those patterns with you to share our knowledge together so feel free to add comment at this post and we could make an interesting and useful conversation, I’m totally sure!
lucamezzalira.com 