Category: Android

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.

rwdTools

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 Photoshop.com 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.

Conclusions

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.

Adobe AIR 3.8 introduces Socket Server on Android and iOS

Hi All,

after long time I’m back for all the developers are working with the Flash Platform right now!
Sorry for that but it was a really intensive period for me with the organization of “Having fun with Adobe AIR” so I haven’t a lot of time to share with you my new experiments.
Yesterday Adobe MAX is finished with a lots of design news, great and inspire case histories for designers and a lot of amusement during the Sneak Peek where they have shown the real power of Adobe labs with tons of really cool features that we could see in next releases of Adobe’s softwares.
For a developer perspective there weren’t big announces so, as usual, we can do it by ourselves…. and here we are!

During last few days Adobe release the Adobe AIR 3.8 and Flash Player 11.8, both in BETA but you can download and start to play with them.
When Adobe releases a new AIR SDK I always take a look to the release notes to see the new features of my favorite platform, this time I’m glad to announce that they add the opportunity to create TCP/IP and UDP socket server directly on iOS and Android.
This is a very cool feature because you can really create amazing things in particular for applications and games, for example local multiplayer, chat and so on.
I worked a lots with sockets during last years in several projects and my big concern was that I can’t create a socket server on smartphone and tablet with AIR, I could do that only with native code but I was pretty sure to see this feature will be implemented in next releases of AIR!

Today I had few time to spend experimenting new stuff so I decided to try AIR 3.8 BETA on mobile and create something cool to share with you.
As you can see in this short video I create a socket server on my iPhone 4 that interact with a client made on my iPad mini (I tried also with my Android smartphone and it works as well):


To create this sample you needn’t to learn something new, you can use the same APIs you will use on a desktop application, so to create a socket server you write those few lines of code:

//creation of a TCP/IP Socket server
private function createServer():void{
server = new ServerSocket();
server.addEventListener(Event.CONNECT, onConnect);
server.bind(7934); // this is the number of the port where your socket communicate
server.listen();
}

Then, when a client socket will join in the same network and it listens the same port of the server, the magic happens and you can start to comunicate:

//on the server socket application
protected function onConnect(event:ServerSocketConnectEvent):void {
incomingSocket = event.socket;
incomingSocket.addEventListener(ProgressEvent.SOCKET_DATA, onData);}

protected function onData(event:ProgressEvent):void {
if (incomingSocket.bytesAvailable > 0){
//here you can pass data to the client using writeBytes, writeUTFBytes and many other methods
/*an example could be:
incomingSocket.writeUTFBytes(String("HELLO!");
incomingSocket.flush();*/
}
}

// on the client socket application you have to create the connection and then manage (send and receive) data from the server
private function createSocketConnection():void{
socket = new Socket()
socket.addEventListener(Event.CONNECT, connectedToServer);
socket.addEventListener(ProgressEvent.SOCKET_DATA, receiveData);
socket.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
socket.addEventListener(Event.CLOSE, closeSocket});
//pass to connect method the server IP and the port to comunicate
socket.connect("127.0.0.1", 7934); 
}
protected function receiveData(event:ProgressEvent):void {
// here you can read all the packets sent from the server
}
protected function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}
private function connectedToServer(e:Event):void{
//yes! you are connected to the socket server
}
private function closeSocket(e:Event):void{
//your socket connection is closed
}

After that you can start to experiments with this new feature as I’ve just done.
Last but not least, as you can see on the release notes, Adobe adds another great feature, that is the capability to stop all movieclips are running on the stage calling a new method “stopAllChildren()” directly from the stage instance.
Simple, easy and useful!

Dynamic embedding fonts without using Flash or Embed Metadata

I’m working in a new project where we have to automate the integration of fonts loaded on a server by users and integrate them in a Flash / AIR project.
In the most cases, if you search online, you can find 2 main solutions:
1. first one is embedding fonts in a class with [Embed] metadata
2. second one is create a swf file and instantiate the class of Font embedded inside (this method require Flash Pro)

Searching well you can also find a solution with swfmill but there are some problems to integrate with AS3 projects.
Like you know, in my spare time, I’m playing with Haxe and Corona SDK and in this case Haxe help me to accomplish my task.
I found a great library called hxswfl made with Haxe that allow me to create a swf or swc file directly from an XML, there are many other usage of this library that are described on online repository of this project, but what I need this time is use it to create a library with embedded fonts inside with a class name assigned to each font.

So first of all, following the library XML schema, I create a lib with a list of fonts in this way:

<lib>
 <font file="Palatino-Bold.ttf" class="com.insideabit.PalatinoBold"/>
 <font file="Palatino-BoldItalic.ttf" class="com.insideabit.PalatinoBoldItalic"/>
 <font file="Palatino-Italic.ttf" class="com.insideabit.PalatinoItalic"/>
 <font file="Palatino-Roman.ttf" class="com.insideabit.PalatinoRoman"/>
 <font file="Verdana-Bold.ttf" class="com.insideabit.VerdanaBold"/>
 <font file="verdana.ttf" class="com.insideabit.Verdana"/>
</lib>

Any node has 2 attribute, file attribute where I set the path to find my font on filesystem and the class where I set the class name of my font that I’ll use in my actionscript class later.
After download source of hxswfml library (and obviously before anything I’ve installed Haxe in my computer), I go with Terminal in bin/neko folder and I launched neko file (hxswfml.n) with those parameters:

neko hxswfml.n xml2lib librarySWF.xml lib.swf

I’m telling to my neko program that it has to convert my xml to a swf library, embedding inside all fonts described in the XML file with that class name.

Now we have our SWF file with fonts, we can create our Actionscript project and load with a loader object our swf file.
Then, when SWF file is loaded, we have to register our fonts inside the SWF library, you can accomplish this task like this:

 for(var i:int = 0; i < _fontsArr.length; i++){
 var FontLib:Class = _loader.contentLoaderInfo.applicationDomain.getDefinition(FONT_NAME) as Class;
Font.registerFont(FontLib);
}

Ok, now you can use any fonts that you have in your SWF without install them in your laptop and without create any AS3 class, this is a really easy way to work with external fonts in a dynamic way.


Obviously I prepare a sample to download if you have any questions feel free to leave me a message to this post.

It’s not finished yet, because I’ve a question for you: what happens if I use the same technique for different devices?
On web and desktop (AIR application) there are any problem because I can load any external SWF file, the same on Android and Playbook but on iOS?
With iOS you can a SWC file instead a SWF file so your SWC library will be embedded at compile time in your application for iOS and you can access to fonts more easily instantiate directly your class name.


For more information about this technique I suggest to read this article on Adobe DevNet.

Flash Platform Galaxy: why choose Flash Platform

In those days I’m reading a lots of mailing lists, forums, blogs and so on where Flash Platform supporters are so disappointed about the latest marketing movement of Adobe.

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 😉

Playing with Google+ API and Actionscript 3

Yesterday I saw that Google has released Google+ API, so I started to played with in my favorite part of the day: the night!

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.

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.

Presentation Model design pattern: multiple screen solution – part 1

Today I’d like to talk about Presentation Model design pattern because it’ll be so useful for anyone that is working on multiple screen project with Flash or Flex.
In latest months we lived in phrenetic mobile world where we have tons of new and powerful devices on the market with different screen sizes, different hardware and so on, on the other hand we have clients that are looking for new business opportunities and they are seeking a way to spend less but earn more.
So, one way to solve those problems could be find a way to deploy with the same technology in different devices (tablets, smartphones, computers…) saving time with great results!
That’s not a dream, it could be made with knowledge, architecture and a good developer or a team!

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.

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.

Adobe CookBooks Reader for Android

Hi everyone,

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! 😛

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.

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.

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