Photoshop, Edge Reflow and Edge Inspect: the new responsive workflow

Today I’d like to talk about something that is not strictly related to development process but that it’s very useful when you are running your company as freelance or entrepreneur or if you are team leader of a team.
One of the most important thing for me when you approach a new technology is not only understand if it could fit all your needs but also understand when you introduce in your team or company how to have the best result as soon as possible.
That’s why I keep always a lot of attention on how to create a flexible and elastic workflow that allow my team to create or modify client side solutions without waste our time.
In last years we rapidly see the grow of an hot topic, strictly related to HTML5 and Javascript, like Responsive Design, so the capability to create an interface that is viewable and usable on different devices (from smartphones to web browsers for instance).
Personally, if I didn’t find anything that help my team to be immediately very productive I usually avoid to introduce new softwares in the actual workflow, but this time we are in the middle of a big revolution where HTML5 and Javascript are the main protagonists.
During last Adobe MAX I saw a couple of interesting demo on Edge “family” and I was impressed on the capability of Edge Reflow and its interaction with Photoshop CC to create user interfaces for different devices in really few time, that’s why I was really waiting to test this feature and I’d like to share with you my first experiment.


Photoshop CC and Edge Reflow

I think a lot of designers create the UI for a project with Photoshop, last Monday (9th September) Adobe released an update of Photoshop CC and Edge Reflow, but we start with Photoshop because the news are really cool.
One of the most boring activity for a designer (or for me when I did it as freelance :D) is to cut all images and prepare assets in different folders for the developers.
Photoshop CC helps us introducing a new feature called Adobe Generator, a new way to automate this long and tedious phase, where the designer has only to follow some simple rules on how to nominate Photoshop levels and the software automatically export all the assets for us, ready to be delivered to the developers team!
For instance if you want to export a particular level as PNG you need only to nominate the level with a PNG extension (for example: “background.png”) and run the new Photoshop command Generate > Image Assets to have all our files ready to be added on the real project.

Photoshop Generate command

To know more about Adobe Generator and in particular to know how to set the name of each level I warmly suggest to take a look to where there are all the information to do that.
Another option that we have (as you can see in the image above) is the capability to export the UI structure and the assets to Edge Reflow.
If you don’t know what is Edge Reflow I explain it in few words.
Edge Reflow is a tool useful to create responsive design layout and, from yesterday, completely integrated with Photoshop CC.
In fact now you can import in Edge Reflow your layout and you can start to customise it visually for any screen resolution your project will work.

Edge Reflow

The most interesting thing is that you can export from Photoshop an Edge Reflow project, or you can synchronise in real time the changes when the 2 softwares are open.
Then you can create your layout for different resolutions only copying and paste the code generate from Edge Reflow in your favorite code IDE; I mean copy and paste for now instead of import because probably (at 99%) you’ll have to improve or change it a little bit after paste but it’s really a good step forward for a software in preview like Edge Reflow.
With Edge Reflow you can create <div> adding box elements in your layout and you can show or hide elements present in different screen resolution simply with the options in the left side of the software interface.
Another very cool thing is the capability to work with your Typekit account (integrated in your Creative Cloud subscription) to download the fonts needed in the layout made with Photoshop.

Edge Reflow and Edge Inspect

Last but not least, Edge Reflow is integrated with another cool product of the Edge family called Inspect.
Edge Inspect is a simple application that you can add as plug-in in Chrome or you can download in your iOS or Android device from the relative store, and it allows you to test in real time all the changes you are doing in a website or more in general in HTML, JS or CSS file checking in real time the final result in one or more than one device simultaneously.
This is a capability that partially missed in the flash development workflow where the mobile test was a real pain (in particular the first releases of Adobe AIR on mobile), in this case with all those new technologies Adobe decides to evolve and improve this experience giving good tools to develop.

From a developer perspective

Personally I think that the integration of a technology like Node.JS in last Adobe softwares (Brackets, Adobe Generator, Edge Reflow and so on) is giving a real boost to them, and they are opening new horizons in the desktop application field, in particular I suggest to take a look to Node-Webkit, an open source project that allow you to work with HTML5, Javascript (Node.JS obviously) and WebGL to create desktop application for different platforms.
There are many other tools that could help to achieve the same goal like TideSDK for example, but I think Node-Webkit could be very interesting if the project will be well approach by the community.


Demo Photoshop and Edge Reflow

Finally the big players on the market are delivering tools that allow us to create engaging and amazing experience with HTML5 and Javascript like other technologies did in the past (Flash Platform in primis).
The combination of Photoshop CC, Adobe Generator, Edge Reflow and Edge Inspect give us a real flexible and integrated workflow where in few steps we can save a lot of hours spent on the code with great results.
Obviously those tools are new and in “preview” so they are not perfect but they are stable and useful enough at this point to be integrated in the actual daily workflow giving immediately importart results.
I really hope this is the first steps to give us the freedom to create instead became crazy to have layouts working in different browsers and devices.

Tricks for tween on mobile devices with Flash Platform

In this quick post I’d like to share with you my experience about Tween on Flash Platform projects delivered on a mobile devices.
I started work on mobile since Flash Lite 1.1 so I grew up with mobile, I lived all the Flash mobile evolution and now, on tablet and smartphone, I had some good tricks to share with you, I really hope that those tips could help you during your developer life.
OK, let’s start:

  • 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!
Finally I suggest to take a look at dev center mobile development zone of Adobe site because you can find many tutorials and helpful tips on mobile development.
That’s all folks for now, I hope you enjoy those tips.

Flash Camp Milan review

Yesterday in Milan we had the Flash Camp about Mobile topics and then we had the Flash Camp Party at NH Hotel… really wonderful time.
Like you know, in Italy it’s not so easy to organize those kind of events because usually people don’t move to another city like other foreign countries but Flash Camp had a great success.
This camp was organized in the same place of WhyMCA the mobile revolution, an italian conference focused on mobile topics.
We had 50/60 people per session and I’m glad to say that my session had 80 people so I’m happy about this little success.
All the sessions surfed in deep about CG, design patterns, video optimization for mobile, flex on mobile and so on, so I was really excited to take part in this event.
My session was about Design Pattern for Mobile, I talked about 3 design patterns: Singleton, Observer and Presentation Model.
With a couple of samples (that you can download from this link) and few slides I made an application that run with the same base code on tablet and smartphone; this is an hot topic now on mobile world in particular on Flash Platform side.

In next few weeks I’ll make a post about Presentation Model to share my thoughts about this argument and how to use it in your project , but if you want to start with this topic, take a look at this great post on RIArockstars.

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.

Flex on mobile: first impressions…

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.


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.

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


take a look here to the Flex mobile performance

Working with Adobe AIR FileSystem API on iPad

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:

var urlS:URLStream = new URLStream();
urlS.addEventListener(Event.COMPLETE, downloadComplete);
urlS.addEventListener(ProgressEvent.PROGRESS, showPerc);
urlS.load(new URLRequest(""))

function downloadComplete(e:Event):void {

  perc_txt.text = "";
  fileData = new ByteArray();
  bytes = urlS.bytesAvailable;
  l.addEventListener(MouseEvent.CLICK, saveIt);

function saveIt(e:MouseEvent):void{

  f = File.applicationStorageDirectory.resolvePath("a.jpg");
  var fs:FileStream = new FileStream();, FileMode.WRITE)


function loadLocalImg(e:MouseEvent):void{

  var finalBA:ByteArray = new ByteArray();
  var fs:FileStream = new FileStream();, FileMode.READ);
  fs.readBytes(finalBA, 0, bytes);


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.

mPresenter, flash platform presentation tool

mPresenter is a new tool that my company develop in last few months, finally is available to download.
Going in deep about this new solution, what is it mPresenter?

mPresenter is a cross-platform software composed by 2 different tools: a mobile manager and a desktop viewer.
It helps you during own presentation to your boss or clients, during a public talk or only when you want to show your holidays photos to your friends.
With mPresenter you can manage your presentation directly from your mobile device, you can draw or highlight on a slide, photo or flash file, change with next or previous content, receive comments that you add in content and so on.

You can download AIR version on mPresenter official website and Android controller directly on Android Marketplace.In next few days (I hope) you can find mPresenter mobile on Apple store too, so stay tuned for news about it!

Do you want watch mPresenter in action? Take a look at youtube video.

Do you want to have a free copy?! It’s easy, go to official website, add mPresenter banner to your blog or website and the first 10 people that add a comments to this post with a link at own website with mPresenter banner automatically win a free mPresenter copy!
Remember to leave in the comment your name, email and link to the site where I can find mPresenter banner.

Finally, if you are going to MAX in L.A. and you want to know more about mPresenter, you can find me there, so feel free to drop me a line to meet there.

I’m waiting for feedbacks and have fun guys with mPresenter!

Android development with Flash Platform

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.

You can download my presentation slides with some samples directly here, for now slides are in Italian but if someone is interesting in an English translation feel free to add a comment here.

Here you can watch the seminar: