Git Flow vs Github Flow

Recently I’ve spent time to study a good way to manage a software projects with GIT.
I really read a lots of blog post to check different points of view and to find out which is the best technique to use in different situations.

The principals ways to manage a software in GIT are: the Git Flow and the Github Flow.
These 2 methods can really help you to manage your project and optimise your workflow in the team.
Let’s see the differences between them.

Git Flow

git flow

Git flow works with different branches to manage easily each phase of the software development, it’s suggested to be used when your software has the concept of “release” because, as you can see in the scheme above, it’s not the best decision when you work in Continuous Delivery or Continuos Deployment environment where this concept is missing.
Another good point of this flow is that fits perfectly when you work in team and one or more developers have to collaborate to the same feature.
But let’s take a look closer to this model.

The main branches in this flow are:

  • master
  • develop
  • features
  • hotfix
  • release

When you clone a GIT repository in your local folder you have immediately to create a branch from the master called develop, this branch will be the main branch for the development and where all the developers in a team will work to implement new features or bug fixing before the release.
Every time a developer needs to add a new feature he will create a new branch from develop that allow him to work properly in that feature without compromise the code for the other people in the team in the develop branch.
When the feature will be ready and tested it could be rebased inside the develop branch, our goal is to have always a stable version of develop branch because we merge the code only when the new feature is completed and it’s working.
When all the features related to a new release are implemented in the develop branch it’s time to branch the code to the release branch where there you’ll start to test properly before the final deployment.
When you branch your code from develop to release you should avoid to add new features but you should only fix bugs inside the release branch code until to you create a stable release branch.
At the end, when you are ready to push live deploy live your project, you will tag the version inside the master branch so there you can have all the different versions that you release week by week.
Apparently it could seem to much steps but it’s for sure quite safe and helps you to avoid mistakes or problem when you release, obviously to accomplish all this tasks you can find online a lots of scripts that could help you to work with Git flow in the command line or if you prefer you can use visual tools like SourceTree by Atlassian that make the dirty work for you, so you have to follow only the instructions inside the software to manage all the branches, for this reason I’ve also prepared a short video to see how use this flow with SourceTree

You can go more in deep about this flow reading these 2 interesting articles: nvie blog or datasift documentation.

Github Flow

Screen Shot 2014-03-08 at 23.07.36

So now, do you think that Github is working with Git Flow? Of course no! (Honestly I was really surprised when I read that!)
In fact they are working with a continuos deployment environment where there isn’t the concept of “release” because every time they finish to prepare a new feature they push live immediately (after the whole automation chain created in the environment).
The main concepts behind the Github flow are:

  • Anything in the master branch is deployable
  • To work on something new, create a descriptively named branch off of master (ie:new-oauth2-scopes)
  • Commit to that branch locally and regularly push your work to the same named branch on the server
  • When you need feedback or help, or you think the branch is ready for merging, open a pull request
  • After someone else has reviewed and signed off on the feature, you can merge it into master
  • Once it is merged and pushed to ‘master’, you can and should deploy immediately

I found an amazing interactive page where you can deepen the knowledge of this method, but I see it’s very common when you work in QA teams, small teams or you are working as freelance because it’s true that is a lightweight flow to manage a project but it’s also quite clear and secure when you want to merge your code in the master branch.
Another good resource about Github Flow is the blog post made by the Github evangelist Scott Chacon.
I recorded also a video on how to use Github flow with SourceTree:

If you have any other method to manage your project in GIT feel free to share because I’m quite interesting to see how you usually work with GIT and if there are better ways to work with and if you have any other feedback or question I’m here for you!

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!

Dart: elements iteration and CSS manipulation

In my exploration of Dart I’m trying to work in some easy examples that could help me to understand how to accomplish some tasks with this technology.
In this example I tried to understand better how iteration of elements works in Dart, how to create a layout with custom elements (more or less the same topic of a custom item renderer in Flex for example) and finally how to create some animations with CSS3 at runtime.

To accomplish those topics I decided to create a responsive image gallery that works on smartphone, tablet and web too.

image gallery with dart

Responsive image gallery

Iteration

Dart gives few opportunities to iterate trough elements:

  • with Dart language (a classic for cycle)
  • with an HTML template
  • with elements composed by an HTML template and some dart code to cover the business logic of the final element

I jump directly to the second and third method, the first one is quite easy for any developer ;-)
In my sample I decide to use a simple HTML template, so basically you can define inside your html a tag <template/> that will allow you to repeat the HTML inside this tag associating it to a list for example, I give you a quick sample:

 <div id="imageCont" class="wrap">
      <template iterate="data in results">
        <div class="image">
          <img id="img_{{data[0]}}" class="faded" src={{data[1]}} width="320" height="240" on-click="onClick($event)" on-mouse-out="onOut($event)" on-mouse-over="onOver($event)" on-load="fadeIn($event)"/>
          <img id="zoom_{{data[0]}}" src="images/zoom.png" class="zoom"/>
          <h2><span>{{data[2]}}</span></h2>
         </div>
      </template>
    </div>

First of all take a look on how I can iterate this part of code; I add a simple iterate attribute associated to a list object (called results in my example) added in my dart file as a public variable.
The list could be a plain list or a list of objects, in this last case you can create multiple iteration item inside the template cycling trough your objects in the same way you have just seen.
I can substitute my data variable with any other name and I don’t need to define in my dart file, as you can see I can also define some variables inside the template getting values from my list object with this syntax: {{data[0]}} (or {{data["value"]}} it’s the same, depends how you have create the list object).
If you need, you can also made your source variables bindable and any time you’ll change the values of your list, also the view will change the number of elements or the values showed in the HTML page.

Finally when you need to create an iterable object with a complex business logic and you want to separate from the original HTML file you can do that creating a Web Components, but in this case I suggest you to take a look to the Dart language guide that explain very well how to achieve this topic.

Modifying CSS with Dart

Another interesting topic is how to change, add or remove css styles to my DOM objects.
In Dart is so easy like any other javascript library, so basically any DOM element in Dart has a property called “classes” with its associated method add and remove, so when you want to change your CSS class with another one, you have, if you have any classes already associated to the element, remove the old class and then add the new one:

var myDomObj = query("#idObject");
myDomObj.classes.remove("class-to-remove");
myDomObj.classes.add("class-to-add");

You can also style any single property directly with “style” property and set them directly in this easy way:

var myDomObj = query("#idObject");
myDomObj.style
             ..color = "0xFFF"
             ..fontSize = "15px";

As you can see working with CSS in Dart is relative simple, if you want to take a look to the whole project feel free to download it.

Another cool thing that is so useful when you work with mobile apps or websites is to test quickly and frequently your content on the devices, so with DartIDE (you can find it downloading Dart SDK) you can easily test your content trough a web server that starts any time you are testing your app into the browser.
It’s so interesting because you save a lot of time in this way!

I’m trying to figure out right now an hypothetical workflow to create web app, web sites or any other thing with Dart and HTML5.
I believe that use Dart in combination with Edge Reflow could be the best way to create responsive application for any kind of devices, but we have to wait until the release of Edge Reflow (17th June) to know if my supposition is true or not.
When it’ll be released and I’ve few time to invest, I’ll prepare another tutorial around this workflow.
In the meanwhile I hope you are enjoying those experiments with Dart and if you are interesting in any kind of topics on Dart feel free to suggest trough a comment in this post or sending an email

Tips & tricks to become a good developer

In my spare time I’m reading “Think like a Programmer. An introduction to creative problem solving” and I’d like to share with my followers some things that I learnt in first chapters of this book.

 

I’ve learnt 10 good rules to approach any problem/algorithm that you can meet during your daily job as developer:

  1. study the constrains of the project, so important to define the area of your project and how to approach it
  2. find analogies of problems that you solved in the past, it could help to resolve the new one
  3. divide the whole project in small tasks it helps to focalize and to define better the effort of each task
  4. starting with the known tasks and then go ahead with others (in that case I usually start with what I don’t know, because after that, I can go ahead quickly with the rest of the project, it works with me :P )
  5. divide any problem in different parts, it’s more easy solve small issues than 1 big
  6. you ALWAYS need a plan to solve a problem (using collateral thought, I suggest to start with Google, in most cases someone else has approached the same problem and probably solved it)
  7. try to watch the problem in different way, it’s essential to find the right solution to implement the algorithm in your project
  8. make own the solutions of issues, it’s so important because next time you’ll find a problem you’ll know how to approach it (point 2 of this list)
  9. create samples highly focused on a particular functionality to accomplish your tasks, sometimes make a simple example helps your to find the solution of a big problem.
  10. don’t get disheartened on a problem, it’s normal to find them, it’s your job!!!

I hope could help many developers that start to approach this job and, to the others, I hope you use many of those tricks in your projects and if you have another feel free to share them with a comment to this post.

If I’ll found more tricks to share reading this cool book I’ll post them again.
Finally If you are interested to read it, I’ll share the link here.

How to install Apache Flex 4.8.0 SDK in Flash Builder

In this post I’ll explain in an easy step by step tutorial how to install Apache Flex 4.8.0 in Flash Builder, I know that it’s not rocket science but maybe newbie developers could need more information to start play with new SDK.

The new SDK is more or less the same of 4.6 but under Apache flag, like you can read at Spoon website, but we hope people behind the project could give us new opportunities for our RIAs and Mobile projects.

So let’s start!

First of all download Apache Flex 4.8.0 binaries for your operating system (in my case OS X), keep attention, you need the binaries release not the source one.
After unzip the downloaded file create a folder called 4.8.0 in /Applications/Flash Builder 4.5/sdks

Then download playerglobal.swc for Flash Player 11 on Adobe website.

Save it in /Applications/Adobe Flash Builder 4.5/sdks/4.8.0/frameworks/libs (it could be better create a folder called “player” or as you want, in my case I use “11.1″ and save the swc inside).

Finally, open Terminal navigate trough your folders and position it to this location /Applications/Adobe Flash Builder 4.5/sdks/4.8.0/frameworks then launch this ANT command:

ant thirdparty-downloads

After 10 minutes you will download everything:
. OMSF dependencies
. TLF framework
. Flex 4.6 SDK and so on

Last but not least, in Flex 4.8 SDK folder you will find a env-template.properties, you have to duplicate the file, call env.properties and set the right path for each folder:

env.AIR_HOME= path to AIR SDK on your filesystem

env.FLASHPLAYER_DEBUGGER = path to Flash Player Debugger, if you have Flash Pro installed you can find a version in Players/Debug/Flash Player Debugger

env.PLAYERGLOBAL_HOME= path to playerglobal.swc (it’s not an absolute path, it’s relative and starts from frameworks folder in Flex SDK!!!)

env.PIXELBENDER_HOME= path to Pixel Bender Toolkit 2 (it’s not important to set if you don’t use it)

env.ADOBE_EXTENSION_MANAGER= path to Adobe Extension Manager

Remember that in template file you can read an accurate explanation on how to set those environment variables

Then you can start to enjoy the new Flex SDK.

The team behind Flex in Apache is working on a new AIR application that will help you to install in Flash Builder the SDK but it’s not released yet… we hope to have it soon, in the meanwhile I hope this tutorial could help you to set your IDE.
There is another way to install the SDK trough an AIR app that you can download from here: http://people.apache.org/~bigosmallm/installapacheflex/
If I forgot some steps in my description please comment to this post to help everybody to enjoy Apache Flex, thank you in advance.

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.

Speaking at WHYMCA about Haxe for Flash Platform developers

Hi Guys!
I’ve a good announce to share with my followers, next 24-25 May in Bologna will take place WHYMCA a great mobile conference where I’ll be speaker with Piergiorgio Niero and we’ll talk about Haxe for Flash Platform developers.
We’ll discuss on why we choose Haxe instead JS or other languages, we evaluate differences between Haxe and AS3, we’ll show pros and cons to use Haxe, we’ll show you how create content with Haxe for JS, Flash, Android, iOS and so on.
Finally we give you some tips to getting started with Haxe :D

So we are waiting for you at WHYMCA! see you there guys!

UPDATE:

This is our session about Haxe during Whymca in Bologna:

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.

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.