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.

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!

First approach to Dart

Dart Logo

After saw what’s happend during the Google I/O, I decide to make some experiments with Dart.
If you don’t know what is Dart I explain in a while: Dart is a new language that allow to structure  your code in OOP manner with strong typing but with a lot of flexibility.
It’s so similar to Javascript but give you the opportunities to create classes, libraries, isolates (a good implementation to use shared-memory threads) and so on.
For an Actionscript developer, Dart seems to be the natural evolution to Javascript, during last week, also, Adobe announced an extension for Flash that allow to export Flash animations directly to Dart, so another good point on why choice this great new language.
Starting to work with Dart is very very simple, you have only to download Dart from the website and you will find inside the zip the DartEditor, an editor based on Eclipse that will become your new IDE to write Dart application.
When you are working with Dart to create the UI of your project, you can use HTML and CSS and if you have some Javascript library to integrate with Dart, you can do that!!!
With Dart you can decide to create a client or server side project, you can also export your client project for chromium or Javascript, so it’s very flexible and powerful as you can see.
I will not explain how to install Dart and getting started with it because in the official website the “get started” section is well documented, so I prefer to start with an example of a video player, if it’s your first approach to Dart I suggest to take a look, before go ahead with this post, to that section on the official website.

For the UI part of my example I’ve used Topcoat and Dart for the business logic of my video player.
Topcoat is a new Adobe UI library dedicated to style in a good and fast way the main components in a web or mobile application, if you have worked with Flex is more or less the same concept of a theme, so when you don’t want to waste your time creating a custom UI you can easily use Topcoat for your prototypes or example.

Beginning from the UI side, after created a new Dart project, I create an HTML file where I add a title, an instance of video component, and a div with some buttons and a slider to manage the volume:

<div class="centerClass">
      <h1>VideoPlayer made with DartJS</h1>
      <video id="video" width="640" height="420"/> 
    </div>
    
    <div class="centerClass">
      <a id="playBtn" class="light-button">Play</a>
      <a id="resumeBtn" class="light-button">Restart</a>
      <span id="currTime">00:00/00:00</span>
      <span><input id="volume" type="range" class="dark-slider" value="100"/></span>
    </div>

After that I created my class in the DartEditor, all Dart classes have the extension .dart.
At the beginning of this class I’ve retrieve the id of my components inside the HTML file with query method, as you can see below, it allows me to work with them directly from my Dart class:

volumeSlider = query("#volume");
  currTimeDisplay = query("#currTime");
  player = query("#video");
  playBtn = query("#playBtn");
  restartBtn = query("#resumeBtn");

Then I loaded my mp4 file inside the video component and I’ve added all listeners that I need to intercept events from user or from the video instance:

player.src = "video/test.mp4";

//player listeners
  player.onLoadStart.listen(checkLoading);
  player.onEnded.listen(restartVideo);
  player.onTimeUpdate.listen(refreshData);
  
  // buttons listeners
  volumeSlider.onChange.listen(setVolume);
  restartBtn.onClick.listen(restartVideo);
  playBtn.onClick.listen(playVideo);

After that I’ve only to add the business logic for any interaction and everything will be done:

void refreshData(event){
  currTimeDisplay.text = returnDisplayTime(player.currentTime) + "/" + returnDisplayTime(player.duration);
}
 
void checkLoading(event){
  //after video si loaded I play it
  player.play();
  isWorking = true;
  playBtn.text = "Pause";
}
 
void playVideo(MouseEvent event){
  //managing if I've to play or pause the video
  if(isWorking){
    isWorking = false;
    player.pause();
    playBtn.text = "Play";    
  } else {    
    isWorking = true;
    player.play();
    playBtn.text = "Pause";
  }
}
 
void setVolume(event){
  //setting volume video value (from 0 to 1)
  player.volume = int.parse(volumeSlider.value)/100;
}
 
void restartVideo(event){
  player.load();
  player.play(); 
}

When you have finished you can easily export your project to Javascript from the DartEditor menu (Tools > Generate Javascript) and publish on your website.
Finally this is the link to download the entire project.

As you can see Dart is not a complex language in particular if you have a solid understanding of OOP language, I personally think that many Actionscript developers will be find in Dart a good approach to Javascript and probably new stimulus on create new engaging experiences.

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.

mPresenter 2: become a baker!

Hi All,

Today I’d like to share with you my IndieGoGo campaign to raise $35.000 for mPresenter 2.
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.
It’s totally free (7.000 downloads from the stores) and it’s available on Android and iOS marketplace; the desktop app is downloadable directly from the mPresenter website.

With the new release I thought to deliver 2 new main features: mPresenter client to deliver slides trough P2P connection (goal to 15.000 bucks) and the other one is port mPresenter (client and editor) to tablet with a new stunning GUI !

I’d like to take your attention to the $3.000 donation where we customize a special version of mPresenter for your company with a skin dedicated to you, I think a good idea to have a different tool for work force to show products or service, for example, with a cheap investment
if you have any question, suggestion or anything to say me, feel free to contact me directly via email or leaving a comment to this post.

Thank you for your time and thank you in advance if you’ll become my baker!
Thank you also to anyone that decide to spread the word on social networks 😛

HaXe, my new toy!

After Adobe MAX 2011 everything should not be the same for me and maybe for a lot of flash platform developers around the world, Adobe brings some “directions”  that didn’t find my consent mainly for the way that communicate these news and the impact that had in the market, but we know that Flash Platform is not dead and it will go ahead for many years.
Obviously nothing was the same after that, in fact many developers started to look around for new technologies and frameworks like Backbone.js, Sencha Touch, Ext JS and so on.
Personally I started to checked in last few months many Javascript frameworks because my aim was find something that could replace Flash Platform in the future and I have to spend time in next years to consolidate it and go ahead with Flash Platform too.
Last week a big friend of mine gave me this link: http://www.haxenme.org/ and when I started to read what you can do and how you can do it, I immediately started to go in deep with HaXe in my spare time and trust me that I had a lot of fun!

First of all what is HaXe?
HaXe is an open source multiplatform programming language, it allows to write once and deploy everywhere (in the right meaning of therm “everywhere”).
In fact with HaXe we can write in a programming language similar to Actionscript 3 (strictly typed, OOP, …) but more powerful (it has enum, generics, dynamic type, …), with HaXe we can target our projects for Flash, C++, Neko, HTML5, Node.JS, PHP, iOS, Android… if we work with multiplatform APIs we can write once and deploy our project for multiple targets.
So for many developers that come from Javascript, Actionscript, Java and so on, will be so easy to start deal with HaXe.
Another interesting thing of HaXe is that we can work with the library present in the SWF files and integrate movieclip in our project, we can create also SWF file without Flash Professional with SWFMill that is used for the generation of asset libraries containing images (PNG and JPEG), fonts (TTF) or other SWF movies.
That’s so interesting because it means that designers that usually prepare assets for developers don’t need to change own daily workflow!
If you need to extend your target platform we can add new features with external libraries, it’s so important because we can really cover everything with this feature; we can find a lot of ready to use libraries directly on the lib HaXe website.
With HaXe you can communicate between different languages like JS and Flash in both direction, you can easily find many frameworks and library porting in HaXe, for example javascript like JQuery, Sencha Touch, Node.JS and so on.

What about the IDE to work with HaXe (so important for a developer!)!?
On Mac you can use TextMate or FDT on Win FDT or FlashDevelop this one seems the best one but I didn’t try it. For more specs I suggest to take a look at HaXe site section, maybe you can find your favorite IDE in the list.

Finally I made an easy sample to understand better the powerful of HaXe NME, this sample loads an external XML file and an external SWF library with a movieclip inside exported for Actionscript, so I added a drag&drop feature to the list. Then I tried to compile it for iOS, Mac OS X Lion, C++ and SWF with the same basecode and everything work so well and smooth!


You can download source files here, to compile it take a look at HaXeNME section and you can find everything you need to try this sample and start to play with HaXeNME!

If you want to deal with HaXe, I suggest two books, the first one is really a good start to work with this fantastic language:
HaXe 2 beginner’s guide
Professional HaXe and Neko

Last but not least, next April in Paris there will be World Wide HaXe conference, I’ll be there to learn more about the future of this amazing platform if you are planning to be there it will be a pleasure for me catch up for a beer!

I hope soon to publish more experiments and informations about HaXe because it is a thrilling programming language!!!
So stay tuned!

InDesign and Flash: PageFlip controller

One of our last project was to create an easy but integrated workflow from InDesign to web.
In particular they request us to create a PageFlip that will be published automatically online every change they made in the offline version without spending a lot of time on this activity.
Like you can see for a Flash Platform developer nothing more obvious that a project like this, so you can take a PageFlip online, you export all pages in swf or jpg files and you popolate the XML behind the PageFlip… yes but we don’t bring this direction.
First of all we suggest to our client to add interaction elements directly in InDesign because from CS5 version (if I remember well) it adds the animator engine of Flash, so it is quite easy make animations directly in InDesign for a graphic designer that is more comfortable with this software instead of Flash Professional.
After that we study the InDesign exporting settings and we find that you can have your PageFlip exporting InDesign document directly in unique SWF file; the only problem is that you haven’t any control panel to add interaction in your PageFlip, for example if my catalogue is composed by 300 pages and I have to see the 250, from the beginning I have to click 249 times on the right page to see my page.
Another interesting thing that we see during this development is that there are many PageFlip on the web but it’s not easy for a graphic designer, more focused on the paper, to customize them because you have to know how Flash works and in detail how the PageFlip, that you chosen, works too.
Also the PageFlip made by InDesign has great performance instead of any other PageFlip tested with many pages in particular if pages are vector based.
Finally we decide to decompile the InDesign PageFlip to analyze if we will able to create a control panel for this SWF file and… WOW… we really bring an interesting direction!


In fact, in the document class of the SWF file called IDSWFFile, you can find many methods that could help you to create, for example, a navigation panel to jump from a page to another one or to create an index to navigate trough chapters.
The main thing that you have to remember is that InDesign PageFlip works putting each page in a frame so if you have 20 pages you’ll have 20 frames inside the SWF file generated.

Below you can find some useful methods that could help you to develop your personal control panel:

  • getFrameCount() return the number of frames (so the number of pages inside the SWF file)
  • getCurrentFrame() return the actual frame (so the page that user is reading)
  • getThumbnailForFrame(frame:int, width=32, height=32) return a bitmapdata of a frame in the size that you prefer, the default values are 32×32 px
  • goToFirstFrame() goes to the first page of the PageFlip
  • goToLastFrame() goes to the last page of the PageFlip
  • goToPreviousFrame() goes to the previous page of the PageFlip
  • goToNextFrame() goes to the next page of the PageFlip
  • goToFrame(frame:int) goes to a particular page
  • stopAllAnimations()
  • stopAllSounds()
  • stopAllVideos() 

There are also other public methods but for me those are the most interesting to create a PageFlip controller.
To work with those methods you have to cast the content of Loader like a generic Object and then you can call all those methods like you can see here:

// here we create the generic object to call PageFlip methods
private var _pf:Object; 
// we load our file generated by InDesign
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, setPosition);
_loader.load(new URLRequest("pageflip.swf"));
//when PageFlip is loaded I add on the DisplayList
private function setPosition(e:Event):void{
_contPF = new Sprite();
_contPF.addChild(_loader.content);
addChild(_contPF);
_pf = _loader.content; 
}

// below I make functions to navigate the PageFlip when user click a button
private function prevPage(e:MouseEvent):void{
 _pf.goToPreviousFrame();
 }
 private function nextPage(e:MouseEvent):void{
 _pf.goToNextFrame();
}
 private function lastPage(e:MouseEvent):void{
_pf.goToLastFrame();
}
private function firstPage(e:MouseEvent):void{
_pf.goToFirstFrame();
}

If you’d like to create a more automatic workflow that allow your user to focus only on the content of PageFlip without waste his time with exporting issues.
In our case we use InDesign Server to solve this problem and create some scripts that allow user to create thumbnails and zoom pages without spend a minute on Photoshop or InDesign but easily upload own InDesign file on a server and via scripts we make everything user needs.
But I know that not everybody could have InDesign server in house, so another solution that I’d like to suggest could be create an InDesign panel with Flex that make the dirty job for the user, preparing all images for thumbs and exporting the PageFlip with right settings.

I know very well that it’s not rocket science for a Flash developer but I think that the workflow behind could be interesting and could be helpful in many situations and also I guess that InDesign users could find good stuff in this post.
Finally we have to remember that technology has to help people in their daily work accelerating process and maybe substitute the human interaction with a computer interaction giving more time to what people should be better like think to new stuff.