Category: AIR

Open letter to @Adobe and @Adobe Air: the hidden part…

I don’t know if you had already read the open letter that Gary wrote recently discussing about the arguable marketing choice made by Adobe on Adobe AIR but also previously about the Flash Platform in general, but I suggest you to start from there before read this post.

If you know me personally or you are following me in the social networks or reading this blog you should know that I’m a big fan of Flash Platform, in particular of Adobe AIR.
I’m very committed to deliver amazing and cutting edge projects made with this fantastic technology and I’m involved in the community to spread the word about AIR.
From a developer perspective I’m 110% with Gary and the community; an amazing technology like Adobe AIR with really a lots of success behind in terms of developers and companies that adopted this technology and in terms of numbers of apps in released during the past few years in different platform.
AIR, in my opinion, should have a better commitment from the company that create it (partially).
Obviously I agree also that there isn’t any competition between Actionscript 3 and HTML5 (read Javascript), what you can really do with HTML5 is what a flash developer could do 5 years ago more or less.
But you can’t approach a discussion like this talking only from a developer perspective, you and we should see it from different angles also.
What I’m asking you is to follow me until to the end of this post then you can send me an email and ask me if I became totally crazy or insult me with a comment, no worries 😀

I usually goes to Adobe Max since 2006, first MAX organised by Adobe, and I remember quite clearly that few MAX ago during both keynotes nobody said anything related to new Flash Platform improvements or plan for the future of the platform.
At the beginning I was so hungry and I spent literally hours on the phone to talk with Adobe people because the 100% of my business was based on this technology and they can’t really think that HTML5 could be better that Flash Platform, in particular in 2011/2012 where the most coolest websites, RIAs and desktop applications were realised with Flash.
But have you ever tried to think from a different point of view this situation? Let’s assume for few minutes that we are inside the meeting room of the Adobe.
You have an amazing technology that millions of people is using to innovate and create the best software in the world but you are not earning what you expect from it, don’t you believe me? Take a look at this chart (ADBE):

ADBE stock 2011/2012

 

This is the graph of Adobe stock (ADBE) from January 2011 to December 2012, the value of the stock was for few months (close to October when usually Adobe Max takes place) lower than $28 and never greater of $35.
Great, obviously our white collars friends, aren’t so interested about which is the best technology in the market or how many people is using it; they care about numbers, how to increase the profit of the company and make happy the analyst to have a better position in the stocks market and with the shareholders.
These results weren’t so good for Adobe in fact, if you remember well, a lots of people started to leave the company, a lots of team was closed in USA or Europe to move the development side in India or in places where the developers are cheaper and Adobe started his commitment on the big new trend of new web technologies products like the Edge family for instance.
Everybody now knows very well the following story about the new products and how they are trying to improve the way to create websites and apps, and I guess the majority of us it’s not so happy about that.
But let’s take a look again to some numbers, the next graph will show you the Adobe stock value from 2012 to March 2014 basically in the period where Adobe left to push the Flash Platform and started to increase the investment on designers products:

ADBE stock 2012/2014

I think is quite explicit that the politic to start selling their products on Cloud (first big mover in the IT panorama), the decision to try to improve a new technology like HTML5 with new tools and so on, create around the Adobe what the management was looking for!
I agree with you that there are many ways to make money but from the metrics perspective they are going in the right direction and they did the right choices for now.
I’m not an economist and I can’t say if this strategy will pay in the long term but for sure in the short term they arrived where they wanted to be.

With this post I’m not trying to defend Adobe, but after many years where the Flash Platform is in this status I started to leave my angry mood and to interrogate myself on why they took this decision, honestly I can’t say if that it’s the only reason that drives Adobe in these big changes but excluding the technical side that’s the only way I can see this thing and now most part of their decision make finally sense.
All the comments I’ve read in the past and also in these days after the Gary’s letter to Adobe is completely true but often, as developers, we forget that it’s not just a design pattern or a performance optimisation that could save the world, the marketing and the market are the real drivers, in front of them also a big corporation like Adobe could defeated.

ADBE stock 2009/2014

 

UPDATE FROM ADOBE

Chris, the new product manager of Adobe AIR, replied to Gary’s open letter, you can read the answer in the official blog

Advertisement

Comparison of colours in Actionscript 3

In this post I’d like to highlight a topic that is not the classic tip to use everyday but when it needs probably this “recipe” could help.

In last few weeks I had the opportunity to study how to compare 2 or more images and find similar colors between them.
Sincerely when I started I really don’t know how to do that, so I tried to read on the web the best way to accomplish this task.
There are many different way to compare colours, the easiest way that I found it’s working with RGB color space but a lots of experts  advice against this technique and they suggest to run away from RGB color space and work with different color spaces, in particular with which one work in 3D space.
The most complete is for sure the CIELAB so if you need to create an algorithm that compare in the best way colours I really suggest to work with this color space and read this post on this topic, in my case I need something in the middle so a colour space that could guarantee the perfect trade off between complexity and accuracy.
In fact I worked in this example with a 3D space like HSV (Hue, Saturation, Value), before go ahead with the post I warmly suggest to read more about HSV directly on wikipedia.

Hue, Saturation, Value

And now let’s go ahead!!!

I prepare a class that you don’t need to change if the idea behind it fit your needs, so this is the code to compare 2 images with my ColorComparision object:

var util:ColorComparision = new ColorComparision();
var finalDiffArr:Array = util.getSimilars(bmp1.bitmapData, bmp2.bitmapData);

As you can see, in the second line you will receive an Array of colors in RGB that you can use if you want in the UI or only as data if you want to add more complexity to this algorithm.

This comparison is made in this way:

1. I retrieve 64 average colors inside each image (inside the class ColorComparision I set a constant if you need to change this value)
2. I convert each colour from RGB to HSV
3. I calculate the distance between each colour of the first image compared with each colour of the second image

To be more complete as possible I expose also the capability to set the tolerance of the comparison in this way:

util.tollerance = Math.round(slider.value);

Finally I made a quick example where you can play with your images and see what happens, basically in this basic sample when you’ll click “compare” button you will find the color similar between 2 images you will compare.

As3 Color Comparison

Last but not least I leave you also this quick method to translate RGB color to HEX  and use them in your Flash application:

function createRect(_obj:Object):Sprite{
 // the obj has 3 properties: r -> red, g -> green, b -> blue
 var intVal:int = _obj.r << 16 | _obj.g << 8 | _obj.b;
 var hex:String = "0x" + intVal.toString(16);

 var s:Sprite = new Sprite();
 s.graphics.beginFill(uint(hex));
 s.graphics.drawRect(0,0, 20, 20);
 s.graphics.endFill();

 return s;

}

On my github space you can find the source to use this algorithm, enjoy!

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!

Having fun with Adobe AIR

Hi All,
this post will be in Italian, in particular is dedicated to the whole community of Italian mobile developers.
Having fun with Adobe AIR is a free event in 6 different Italian cities where people will learn how to create or improve own cross platform applications made with Adobe AIR for mobile devices.
For any question feel free to leave a comment to this post or drop me an email.

logoOfficial

Ciao a tutti,
mi chiamo Luca Mezzalira e sono l’organizzatore di “Having fun with Adobe AIR” un evento dedicato a tutti gli sviluppatori mobile che vogliono avvicinarsi ad una tecnologia cross-platform, come Adobe AIR, per la realizzazione delle proprie app o game su smartphone o tablet.
In collaborazione con alcuni importanti sponsor, come Adobe e BlackBerry per esempio, che ringrazio innanzitutto, sono riuscito ad organizzare 6 tappe in giro per l’Italia dove in una giornata andremo a scoprire le potenzialità di Adobe AIR, andremo a sviluppare degli esempi pratici che possano far vedere il workflow per la realizzazione di un’applicativo mobile.
Infatti l’evento è basato sulla formula BYOL (Bring Your Own Laptop) dove ogni participante dovrà portare il proprio computer con installato Flash Builder dove potrà creare i proprio applicativi e installarli poi nel proprio tablet o smartphone.

Se ti stai chiedendo se è una perdita di tempo perchè Flash è “morto”, beh credimi, non è così.

Infatti Adobe sta continuando a sviluppare questa tecnologia dando nuove potenzialità per la creazione di applicativi mobile e desktop, dall’accelerazione in GPU all’integrazione con Native Extension e molto altro ancora!

Durante l’evento avremo la fortuna di avere con noi degli speaker Adobe, in alcune tappe, che ci daranno la possibilità di scoprire su cosa si sta concentrando Adobe e quale sarà il futuro della piattaforma.
Un evento totalmente gratuito che credo possa far piacere in Italia a molti sviluppatori che vogliono iniziare a muovere i primi passi nel mondo mobile oppure quelli che già ci lavorano ma vogliono alternative valide con cui sviluppare.
L’evento avrà un massimo di 20 partecipanti circa per tappa e sarà di una giornata, le città in cui si svolgerà saranno Milano, Torino, Bolzano, Padova, Firenze e Bari.
La registrazione è obbligatoria e dev’essere fatta tramite il sito dell’evento: http://www.havingfunwithadobeair.com/
Se invece preferisci seguirci direttamente sulla nostra pagina facebook ecco l’indirizzo: https://www.facebook.com/pages/Having-fun-with-Adobe-AIR/430003473713246

Per qualsiasi dubbio o domanda non esitare a contattarmi via email o lasciando un messaggio su questo post.
Spero di vederti ad una delle tappe del tour!
A presto

Luca

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.

Introducing Starling: book review

Hi All,

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.

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 😉

It’s time for a new web design era… probably without Flash

I’m here in L.A. for Adobe MAX, before the beginning of the conference we were very excited about the 2 keynotes because we were waiting for amazing news about our favorite platform… but it didn’t happen, instead we find 2 days very focused to designers (and it’s normal I guess) and to HTML 5, JQuery and CSS 3.

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.

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.