first of all I apologize with people that usually read this blog if I didn’t insert any new post since last year but I’m working a lots in these few months to open a new market opporunity for my company out of Italy and I’m totally absorbed in this new activity, but in the meanwhile I’m studying during my spare time and I’d like to share with you my thoughts about “Introducing Starling”.

This book is for any Flash Platform developer that is looking to create next generation of mobile and desktop apps (or games).
It’s a book so practical that introduce you to the Starling framework, explaining how it works with simple examples of code that you can put in practice in a while.
Thibault guides you showing each object presents in this framework, that is an abstraction of Stage3D API introduced with Flash Player 11 and AIR 3.
With Starling you can aim better performance in your 2D applications thankfully the GPU acceleration added on Stage3D, with this book you can discover what there is behind and starting to develop with it.

In fact yesterday Adobe announced that they stop the development of Flash Player on Mobile devices (on Desktop they are going ahead).
The road is clear HTML 5 inside the browser and Flash Platform for RIAs, Games and out of browser in combination with Adobe AIR.

For me Adobe for the second time (the first one was during Adobe MAX) has totally mistaken how to communicate this news and obviously tech blogs bring this announcement like the end of Flash…
Personally I don’t think that is the end of Flash but I think that Flash is moving on a new position in multimedia world probably out of browser.
I’m an Adobe addicted, like you know, and in particular I’m a Flash Platform supporter, so I think that we have to move on and make something to spread the word about this foggy situation, guys, Flash Platform is ALIVE!
To do this, I start making a pdf file called Flash Platform Galaxy that could help people to have an idea of what is Flash Platform and why choose it ( I know, I’m not a graphic designer but I think it could be useful), if you want to add more informations or change something feel free to leave a comment at this post or drop me a line via email.
Let’s go guys, we have a platform to save

This is an important signal from Adobe, in 2 keynotes they mentioned Flex 2/3 times maybe, all the new stuff for Flash was focused on games and 3D and AIR had only 5 mins to show the new release and its new features.

So the message from Adobe is quite clear: “Use HTML 5 for the web and Flash for the game and out of browser”.
This recommendation from Adobe would change online web design classes significantly in the future.

It seems crazy but it’s the truth… the same company that in the beginning of 2000 was scared from the little Macromedia and its best technology Flash, today substitued the player with a new one.

In latest years I took part of different Flash Platform projects, mainly desktop and mobile applications and I hoped to embrace the right direction with the Flash Platform, with this MAX I’m pretty sure  that I made the right decision.
I’m disappointed that my favorite platform will be out of the browser but I’m more disappointed that Adobe is following the market instead of make it.

Today I can say that it’s time to move on and start again to study new “trendy” technology instead of a good and solid technology like Flash Platform.
Could Flash be the new mobile and desktop technology? I really don’t know but I’m sure that this year a new milestone of the web was put by Adobe.

For now Google has published only public APIs that allow you to retrieve user’s informations and his activities list, all API are made in RESTful and JSON that are so easy to add in your project.
When Google will release next APIs, I hope soon, you can consume them with an oAuth 2.0 authentication, like Facebook.
I made a simple example to retrieve data from my Google+ profile in Actionscript for Android, you can download the source files directly from here.

If you want to play with Google+ API, first of all you have to request your Google+ API key; to do that go to Google API console and activate Google+ service, then in the details page you can find your key.

Google+ RESTful services get us a JSON response, to read it in your Flash/Flex application remember that you need as3corelib that have the JSON deserializer, for example you can push in a generic Object all data retrieved from Google+ service or if you prefer you could create a Value Object that it could be more useful.
In this case I decode directly in a generic Object, like you can see in this code snippet:

var data:Object= JSON.decode(dataToRead, true);

then now you can easily access to informations:

var icon:String = data.image.url;
var name:String = data.displayName;
var tagline:String = data.tagline;
var description:String = data.aboutMe;

Another easy feature that you can add in your Google+ application is a static image of the map, like in your web page, using Google Maps Static API.
You can easily make a query to Google Maps passing in GET params like: the dimension of image, the location and the zoom; you can also add more params that you find in the docs of Google Maps Static API.
Here a code sample to add this feature in your Flash application, in those line I request for an image with width 480px, height 200px, with roadmap skin and with a zoom of 15x:

var mapLoader:Loader = new Loader();
//city is a variable with the name of the place that you have to retrieve.
mapLoader.load(new URLRequest("http://maps.googleapis.com/maps/api/staticmap?center="
+city+"&zoom=15&size=480x200&maptype=roadmap&sensor=true"));
mapLoader.y = this.stage.stageHeight - 200;
addChild(mapLoader);

Like you can see work with those APIs are pretty easy, so now we have to wait for final release and then we can start to create our Google+ integration with the Flash Platform.

• Use quality property of stage
  This is a really good technique to use when you have to improve performance of your project, when you need to make a fluid tween before launch it, set stage quality to low and when tween will finish set stage quality to high or best.
  Avoid to use this technique when you have vectors (textfield for example) on the stage because you could have a worst result.
• Use cacheAsBitmap and cacheAsBitmapMatrix
  If you have vector object that you’d like to animate in your project remember to cache them and then animate; remember also to set your application with GPU acceleration and you can see a really good performance with this technique.
  Avoid to cache objects that you need to remove from display list, it will be so expensive for your memory.
• System.gc() works!
  I tried in few sample to use it on Android and I saw a good result, so the “old” tip to call System.gc() twice in a try/catch statement works on mobile device too (only on AIR apps)
• Take care with multiple animations on iPad and iPhone
  On iOS devices we don’t have AIR runtime so LLVM translate our AIR project for us in Native Binary so it could help if you move few objects per time in particular if you have big objects to move like a background or something like that
• Greensocks tweens are the best
  I tried tweener and other tween libraries for AS3, but the best one for me are the Greensock tween library, in particular on iOS devices.
• Last but not least, remember to test your animation on the device because you could see “funny” results
  Sometimes happen that on your computer everything works well but when you port your content on a tablet or smartphone everything works not so well.
  Before hurt your head, remember to test a lots of times your mobile content on the device, it could save your projects!

In my case I needed a Multicast UDP socket in a local application that communicate with an hardware that was my server, so I thought to realize a Python application for Mac OS X and Windows that could help me to solve this problem.
Python is my second favorite programming language after ActionScript (obviously) and this time Python saves me to accomplish my project.
I want to start with Python side, my goal is to connect to a multicast socket and get all data and then send them to a unicast UDP socket server that we will create in Adobe AIR in next example.

#!/usr/bin/env python
# encoding: utf-8

import socket, select

ANY = '0.0.0.0'
MCAST_ADDR = '239.0.1.1'
MCAST_PORT = 10300

sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM, socket.IPPROTO_UDP)
sock.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
sock.bind((ANY,MCAST_PORT))
sock.setsockopt(socket.IPPROTO_IP, socket.IP_MULTICAST_TTL, 255)
status = sock.setsockopt(socket.IPPROTO_IP, socket.IP_ADD_MEMBERSHIP,
socket.inet_aton(MCAST_ADDR) + socket.inet_aton(ANY));

sock.setblocking(0)
print 'socket UDP multicast ready'

udp = socket.socket(socket.AF_INET, socket.SOCK_DGRAM);

while 1:
	ins, outs, errs = select.select( [ sock ] , [], [], 1.0)
	try:
	    data, addr = sock.recvfrom(1024)
	except socket.error, e:
	    pass
	else:
	    print data
	    udp.sendto(data, (socket.gethostbyname('127.0.0.1'), 10303))

socket.close()

First few lines we define the multicast socket server ip (that in my case is pointing to the hardware) and the socket port to communicate with.
Then I create the UDP multicast socket and the UDP unicast socket (udp var); in the while loop I set the socket timeout and if I receive data trough the multicast socket I send everything to unicast one.
After that to create an application without any dependency in Windows or Mac OS X, you need to use a couple of Python libraries called py2app and py2exe.
Both allow you to create an executable file from your Python script for mac or win without any dependencies, in Windows side you have only to remember which kind of Python dll you have to incapsulate in your AIR application but we take a look at that in a while.
To create the executable file you have to create a setup script in Python for both operating systems, I suggest to create something like that:

FOR WINDOWS:

from distutils.core import setup
import py2exe,sys,os

origIsSystemDLL = py2exe.build_exe.isSystemDLL
def isSystemDLL(pathname):
        if os.path.basename(pathname).lower() in ("msvcp71.dll", "dwmapi.dll"):
                return 0
        return origIsSystemDLL(pathname)
py2exe.build_exe.isSystemDLL = isSystemDLL

setup(windows=['myPythonScript.py'])

FOR MAC:

from setuptools import setup

APP = ['myPythonScript.py']
DATA_FILES = []
OPTIONS = {'argv_emulation': True}

setup(
    app=APP,
    data_files=DATA_FILES,
    options={'py2app': OPTIONS},
    setup_requires=['py2app'],
)

Then if you want to create your executable files you have only need to launch the command on command prompt or terminal (you can find more informations on how to customize those setup scripts in each library’s website):
FOR WINDOWS:

python setup.py py2exe

FOR MAC:

python setup.py py2app

Now we can start with the AIR part, like you know with AIR 2 you can work with Native Process and this is the case to use them:

const WIN_PATH:String = "win/socket.exe";
const OSX_PATH:String = "socket.app/Contents/MacOS/socket";

var nativep:NativeProcessStartupInfo = new NativeProcessStartupInfo();

var finalPath:String;

var f:File
if(Capabilities.os.substr(0, 3) == "Win"){
   finalPath = WIN_PATH
}else{
   finalPath = OSX_PATH
}

f = File.applicationDirectory.resolvePath(finalPath);

nativep.executable = f;

var process:NativeProcess = new NativeProcess();

process.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, onOutputData);
process.addEventListener(NativeProcessExitEvent.EXIT, onExit);
process.addEventListener(IOErrorEvent.STANDARD_OUTPUT_IO_ERROR, onIOError);
process.addEventListener(IOErrorEvent.STANDARD_ERROR_IO_ERROR, onIOError);

process.start(nativep);

var udp:DatagramSocket = new DatagramSocket();
udp.addEventListener(DatagramSocketDataEvent.DATA, getData);
udp.bind(10303);
udp.receive();

function getData(e:DatagramSocketDataEvent):void{
	trace(">>>>>" + e.data.readUTFBytes( e.data.bytesAvailable ))
}

function onOutputData(event:ProgressEvent):void{
   trace(process.standardOutput.readUTFBytes(process.standardOutput.bytesAvailable));
}

function onErrorData(event:ProgressEvent):void{
    trace(process.standardError.readUTFBytes(process.standardError.bytesAvailable));
}

function onExit(event:NativeProcessExitEvent):void{
   trace(event.exitCode);
}

function onIOError(event:IOErrorEvent):void{
  trace(event.toString());
}

In this simple script I’m choosing the right executable file for the operating system where my AIR application is working on and then I launch the native process to start the multicast socket.
Finally I listen for the unicast socket and I trace on the output panel the messages that I receive from the hardware.
I think this is an interesting way to extend Adobe AIR with Python that open new possibilities on the desktop side, think for example to create a Python bluetooth extension for Adobe AIR, it could be so interesting add this feature to AIR apps isn’t it?

Our goal

For a developer find a way to have a good project architecture to maintain it’s so important, usually when you start a project you try to define the parts that could be re-usable in different part of the same project or in different project too.
So our aim is find a way to write less code but it will cover the project needs and that could be portable in different screens / operating systems easily.

What is Presentation Model design pattern?

My mentor Martin Fowler describes it with those words: “Represent the state and behavior of the presentation independently of the GUI controls used in the interface”  (here the full article of Martin Fowler).
In fact with this pattern we divide UI (components, movieclips, sprites…) from their behaviors; each view will have one and only that one presentation model and only the presentation model will interact with the whole architecture (like with model or proxy…).
Probably with this image you can easily understand better this concept (from Martin Fowler website):

Like you can see we have 3 class, AlbumTitle that is a view with a textfield, AlbumPresentationModel that is the presentation model of AlbumTitle and it has the copy of the view but storing datas inside and finally the main model Album where we have the data that could be used for the whole application.
There aren’t any connection trough the views and the application model because only the presentation model has access to the whole project, so the view is only a bunch of components and custom graphics, this it means that if you have to change UI on a mobile project for a different device, changing the views and anything else, you will have done your job.
In fact with this easy technique you perfectly solve our problem and you should create the same content for different devices changing only the views.
Probably your application in different devices will have the same functionalities but with a different UI dedicated for the OS is running on.
With this sample design pattern you’ll have a solid infrastructure that will solve the big problem to port the same application in different screen sizes.
So in next paragraph we can take a look on how to organize our files project.

Manage a project for different screen sizes

Another important thing before starts the project is understand how to organize the project for different OS, in fact if you work with Adobe AIR on Android you’ll have only the XML descriptor with Android permissions described in this file, on Playbook you’ll have another XML file dedicated to this platform and so on.
So, my suggestion is to organize the project in different projects that work together.
In this image you can see how I organize it for our final scope, I’ve a common project (Runtime Shared Libraries in this case but you can use also an Actionscript or AIR project if you work with Flash for example) where I’ll put all classes that are common for different target, so in my case all the presentation models, main models, utils classes, my notification bus and views that are common for different projects like components for example.

In the target device projects I add only what I need for that device, in this case only a couple of views and assets but in big projects could be more stuff that those one:

When you have a specific behavior only for a target device, you can easily extends the common presentation model and add new functionalities or create a side class that you’ll add in the specific view.
So with this infrastructure you can solve bugs and change stuff directly on the common project and all the platforms will be ready to package the project and upload to their store. That’s cool, isn’t it?

Summary

So in this post I hope to give you some ideas on how to solve the big problem to create a common base code that could be useful for different purpose.
In next post I’ll show you how to implement it in practice, for now if you have any feedback or suggestions for the second part of this article please add a comment to this post.

Nothing chases away users (or invites bad reviews!) like an app that is slow or drains battery life too quickly. New research from AT&T and University of Michigan offers insight into how applications can be modified to prevent these issues from occurring. Historically, wireless optimization best practices have focused on how to optimize content for smaller screens and slower processors. In this article, the researchers describe how mobile wireless networks are different than wired networks, and how simple changes to your app can work WITH the network to improve your application’s efficiency.

What is truly fascinating about this study is that developers are given a peek at network architecture and lower-level protocols that are usually hidden from them. The researchers describe in detail the connection latencies and state machines that exist in wireless networks, and how much longer these timeframes are than in traditional networks. The main takeaway for developers is that all connections open and close on the order of seconds (as compared to milliseconds in the wired web). These latencies make content downloads appear slow, and can drain the battery quickly.
The researchers point out that it is more efficient to utilize fewer connections to send more data per connection. For example: 5 connections of 1 KB each utilize 90 seconds of radio, while one 5 KB transfer uses 19 seconds (a 79% decrease in battery usage for the same amount of data!).

Each network connection causes a power drain to the battery, and can make your application appear slow to the end user. By sending more data per connection (and using fewer total connections), you can drastically improve your application’s performance. The researchers provide the example of a news application that downloads data on demand (e.g., images are downloaded when the user scrolls to them). They found that prefetching images (sending many files in anticipation of future use) can reduce power consumption by 15-18%. Since the images are downloaded in advance, they are available for display immediately, and your application appears faster. However, the researchers are quick to point out that prefetching data is a delicate balance, as downloading content that is never used also wastes the battery (and can cause your users to exceed their monthly data caps).

In the case of a popular music streaming service, periodic audience measurements were draining battery life, causing the app to use more than 40% of its power to transmit just 0.2% of its data. By lengthening the time between these measurements, it is possible to greatly reduce the battery drain, and allow users to listen to more music (and at the same time view more revenue-producing advertisements)!
AT&T has begun working with developers of popular applications (like Pandora and Facebook) to enthusiastic responses. The biggest response has been that the solutions to optimize wireless applications are straightforward and benefit both the developer and the end user!

Finally I’d like to thanks the Flash Mind, Adobe Flash Platform User Group Italy, to give me this opportunity, WhyMCA staff for the amazing organization, other speakers of Flash Camp for great time spent together and people that came to talk with us during the Flash Camp and to the beer party too.
I leave also a link to some photos took during Flash Camp in Milan.

All the topics of the Flash Camp will be focused on mobile side, so Flex for mobile device, iOS, Android and Playbook development, code technique for mobile applications, optimizing video content for mobile, design pattern and architecture for mobile project.
Flash camp will be hosted by the whymca the mobile developer conference, that for the second year will show the mobile opportunities not only with Flash Platform but with any technology could be use for mobile purpose.
The event will be in Milan in Milanofiori (Assago), you can find more information on whymca web site.

Back on the Flash Camp side, speakers will be:

• Mihai Corlan – Adobe Evangelist
• Fabio Sonnati
• Piergiorgio Niero
• Andrea Trento
• Luca Mezzalira

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.

I’ve just released on Android market the CookBooks Reader application where you can read all new recipes about Flash Platform technologies.
It’s FREE and it’s based on Flex 4 and Adobe AIR so remember to download it before download CookBooks Reader.

If you try it, feel free to leave here comments with new features or suggestions…  I’m looking for you! Let’s go Flash Platform geeks!

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

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.

I suggest to take a look at Adobe TV, Adobe labs and Adobe Opensource to start work with Flex HERO!

UPDATE

take a look here to the Flex mobile performance

//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.