Android development with Flash Platform (FREE SEMINAR)

First of all a big thank you to Padova Java User Group that give me an opportunity to speak in the end of September in a JUG meeting.
My speech will cover Android development with Flash Platform, so I share my mobile experience and I’ll talk about those main topics:

  1. UI design for mobile device
  2. Working with Flash Platform to create mobile content
  3. Actionscript 3 overview
  4. tips & tricks on mobile development
  5. testing on device

Seminar will take part in Padova in the end of September, you can take a look at the program directly from JUG event site.
It will be totally FREE but I suggest to register yourself very soon because venue isn’t so big.

For any questions feel free to contact me directly or leave a comment here.

Finally, in November I’ll be speaker at WebTechCon in Milan, I’ll talk about AS3 design patterns and Multiscreen development with Flash Platform so if you want to know more about this event take a look at WebTechCon official site.

Flash Platform on Android

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?!).

Creative Suite SDK

Last few months CS5 was presented and few people talked about a new opportunity that is CS5 SDK that allow flex developers to create native panels for Illustrator, Photoshop, InDesign and so on.

There are great opportunities because you can automatize any kind of process in your daily workflow and create your personal panel made with Flex and Actionscript 3.
If you are familiar with JS opportunities for InDesign or Photoshop, you know the power of those solutions but now you can have an interface that help your daily work.
You can also dialog with other softwares like AIR apps or native apps like a Digital Assets Management or again with other panels made with Flex!
So, believe me, now we have new and amazing opportunities with this new SDK.
The most important thing to start develop for those design softwares is to know how they work and then everything will be so natural.

With my company, we start a new project called Creative Suite Panels where people could download or buy new creative suite panels, ask us to develop one or other developers could sell own panels directly from this site (this last service soon).
We’d like to create a panels store where people can buy, sell or simple download new functionalities for own favorite design software.
In Creative Suite Panels you can also download a Flickr panel made for InDesign CS5 that allow you to search images on Flickr, download them and

For more information take a look at cs5 sdk team blog.

Observer Pattern Actionscript 3

One of the most useful design pattern when you don’t want to work with framework like Swiz, Cairngorm, Mate or PureMVC but you’d like to work with a comfortable utility to manage events in your application or web site is Observer Pattern.

The definition from Wikipedia is:

The observer pattern (a subset of the publish/subscribe pattern) is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. It is mainly used to implement distributed event handling systems.


For more information and if you want to see UML diagram, take a look at wikipedia site.

You can use this design pattern when you want to notify to all object that are interesting in a particular notification; for example if you have 100 buttons you can show or hide only even or odd ones; it’s not important where they are added, if in the same displaylist or in another one, because it’s observer pattern that substitute event handling to notify something.
If you think how you usually work with event handling you must know where is situated your component  and if it’s nested in 10 different containers you must dispatch that event trough each component… it’s totally crazy!

Observer Pattern solve this problem because it’s like an event engine where knows all object that could be interesting in a notification and it notifies to all components.
When you start to work with it, you could use everywhere in your productions, believe me!

So how Observer Pattern works:

First of all you must create an Interface (IObserver) that has an update method that will be called from Observer manager when a notification will be called:

public interface IObserver {
    function update(_notification:String):void;
}
Then you must have an Observer Manager that manage all objects that implements IObserver interface.
This manager will have 3 public methods: subscribe, unsubscribe and notify.
You call subscribe when you want to add an object that is update from Observer; unsubscribe when you remove an object from a displaylist or if you don’t need to update anymore  and notify when you want to notify something to all subscribed objects:
public class ObserverManager {
private static var instance : ObserverManager;
private var observerData : Array;
public function ObserverManager():void{
observerData = new Array();
}
public static function getInstance() : ObserverManager{
if(instance == null)
instance = new ObserverManager();
return instance;
}
public function subscribe(observer:IObserver):void{
observerData.push(observer);
}
public function unsubscribe(observer : IObserver) : void {
var totObs:int = observerData.length;
for(var i:int = 0; i < totObs; i++){
if(observer === observerData[i]){
observerData.splice(i, 1);
break;
}
}
}
              
       public function notify(_notification:String):void{
var totObs:int = observerData.length;
for(var i:int = 0; i < totObs; i++){
observerData[i].update(_notification);
}
}
}

Ok now you are ready to work with observer, so we create an object that implements IObserver and another one that add on displaylist all IObserver objects and notify to all some notifications:

custom button that implements IObserver interface:

public class ObserverButton extends Button implements IObserver

{

	public static const HIDE_BUTTON:String = "hideBtnEvt";

	public static const SHOW_BUTTON:String = "showBtnEvt";

		

	public function ObserverButton()

	{

		super();			

	}

		

	public function update(_notification:String):void

	{	

		switch(_notification){			

			case HIDE_BUTTON:

				this.alpha = .2;

				break;

				

			case SHOW_BUTTON:

				this.alpha = 1;

				break;

		}			

	}

}

subscribe some custom buttons to observer manager:			

protected var observer:ObserverManager;

protected function init():void{				

	observer = ObserverManager.getInstance();

	for(var i:int = 0; i < 100; i++){			

		var btn:ObserverButton = new ObserverButton();

		btn.label = i.toString()

		addElement(btn);




		if((i & 1) == 0)

			observer.subscribe(btn);

					

		btn.x = Math.random() * 800;

		btn.y = Math.random() * 500 + 70;

					

}

That’s it! You can see the Flex 4 sample that use Observer Pattern here (with right click you can see and download source code).
If you have any questions or suggestions feel free to leave a comment.

Working with zip files and Flash Platform

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!

Creating video snapshot with BitmapData and…

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!

Bye bye

Directly from Barcelona: MWC 2010 impressions

I’m here in Barcelona at 3GSM world congress, crisis is arrived here too.
There isn’t Nokia stand, only few evening party, there are less people than last previous editions so really, I hope that 2010 could be a new year with new opportunity for everyone because this is NOT the mobile world congress and this is NOT a good scenario to see.

Come back home and start to talk about Adobe news… first of all, my favorite one: Adobe AIR 2 on mobile!

Yes finally is arrived or better, finally I’ve seen it! We really don’t know when will be released we only know that it runs on Android, probably on NVIDA Tegra II, probably on Symbian devices and for sure on Blackberry; so a new market opportunity will be open with Blackberry adoption.
And WIN mobile?! They said to wait 2/3 weeks and there will be a press release about that, meanwhile I see Window phone 7 and it looks nice, not bad but I’m interesting to know how will be integrated with Flash Platform.

Flash Player 10.1 on mobile devices will implement AVM 1 and AVM 2 so probably there will be retro-compatibility  with Flash Lite contents, I say probably because I’d like to test it before to say: “YES It’s alive!!!”.
But I’m sure that AS3 contents will run so well if they will be optimize for mobile; I’m scared that AS3 developers approach this new opportunity like Flash Lite one where everybody know AS2 was automatically a Flash Lite developer, but believe me it’s not the same thing also with Flash Player 10.1 and AIR 2 on mobile.

Both mobile technologies will be the same of desktop one so we don’t lost any API and it’s great announcement, finally could we start to work in a real platform experience!? I think so!

And Flash Lite?! So now we have a new versione Flash Lite 4 that you’ll can use with Actionscript 3 and will be distributed on S40 and low powerful devices.

I asked also about distribution and probably we will find FP 10.1 and AIR 2 directly with a firmware upgrade of own phone; for now we don’t know there will be OTA distribution also.

So finally, I see great Adobe technologies… but for the future, because when will be release there will be more time to wait to have a great distribution so if you think that will solve all your mobile problems, I think that you’ll wait few months again.

Today is my last day here, I’ll try to grab more information about those news and if you go to FITC in Amsterdam next week, see you there mate!

Apple did it again…

It’s not possible, Apple did it again!!!

Another device without Flash Player or AIR runtime… I really angry!
They talk about a “full web experience” but you can’t think web experience without FLASH!
I know that they don’t want put Flash Player for marketing purposes, I know that if Flash landed on iPhone OS, tons of applications and games will be based on that technology, but it’s not possible to hide Flash content only for marketing purposes! I WANT FLASH AND AIR! AND I WANT THEM NOW!

I can’t imagine anything like this image, it’s not web, it’s a filtered web.

Ok, they are Apple Computer inc. and they can do everything but there is a limit, it’s like that one day, they decide to hide HTML 5 contents or other technologies… I’m only waiting for a new Apple press release that says: “Sorry but from today we block all Flash Player in macbook, macbook PRO, iMac and…”.

Guys we must start to spread the word and push Apple to change their point of view, so please join in this cause and spread the word!

How to prepare yourself for Flash CS4 ACE exam

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!

Multitouch with Actionscript 3 and AIR 2.0

AIR 2.0 is out with a BETA version on labs since a couple of weeks ago more or less.
It introduces a lots of new features like UDP protocol, Socket server implementation, access to raw micrhophone data, multitouch and gesture support and so on.

When I see multitouch and gesture support I start to think how many devices are touchscreen based and they are growing a lots in those months, so I start to investigate about that features.
First of all I suggest to read a cool article on devnet made by Christian Cantrell, he goes in deep about this new features and give you a lots of information about Multitouch, TouchEvent and gestures.
It’s so interesting because you can see compatibility of that features with different OS also.

In this post, I’d like to share with you a little sample on how you can create an AIR 2.0 application with Flash Builder and test it with a macbook trackpad.
In fact, you can use macbook trackpad gesture because they are supported on AIR and it’s so interesting, for example, if you want to test an application for new Wacom Bamboo pen & touch and you haven’it.
Wacom Bamboo has a new AS3 SDK for Flex and Flash that allow you to work with multitouch and gesture too, it could be so interesting if you don’t have a multitouch for an expo and you want to buy a cheap solution to give a cool interaction for your possible new clients.
Bamboo has also the availability to create “minis” that are applications dedicated to Wacom Bamboo, but you can read more at Wacom developer website.

So, in this sample we load an external image and we use gesture to try our macbook trackpad:

package {


import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.events.TransformGestureEvent;
import flash.text.TextField;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;


public class MultiTouchSample {


Multitouch.inputMode = MultitouchInputMode.GESTURE;
private var sq:Sprite;


public function MultiTouchSample() {


sq = new Sprite()
addChild(sq);


this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, scaleObj);
this.addEventListener(TransformGestureEvent.GESTURE_PAN, panObj);
this.addEventListener(TransformGestureEvent.GESTURE_ROTATE, rotObj);


var l:Loader = new Loader();
l.contentLoaderInfo.addEventListener(Event.COMPLETE, addImg);
l.load(new URLRequest("img/sample.jpg"));
}


private function addImg(e:Event):void{
sq.addChild(e.target.content);
sq.scaleY = sq.scaleX = .2;
}


private function rotObj(e:TransformGestureEvent):void{
sq.rotation += e.rotation;
}


private function panObj(e:TransformGestureEvent):void{
sq.x += e.offsetX * 2;
sq.y += e.offsetY * 2;
}


private function scaleObj(e:TransformGestureEvent):void{
sq.scaleX *= e.scaleX;
sq.scaleY *= e.scaleY;
}
}
}

You can see that is so simple work with gesture, a couple of suggestions before starting work with them:

  • remember to verify which gesture are supported on your system, more information you can read on devnet article about multitouch and gesture
  • TransformGestureEvent is event class dedicated to gesture
  • you can use TouchEvent also

Feel free to leave a comment and thank you to visit this blog.