Editors Note

Dear Readers,
Welcome! I hope that youve spend your Christmas and New Years Holiday well and you have a wound to read a brand new Flash and Flex Developers Magazine! This time I prepare for you a lot of interesting articles. At first I would like you to enjoy a book review Pro Android Flash. Though this book needs no introductions and recommendations but here it is anyways from Ali Raza. Next we have a Developing Flex 4 Components: Using ActionScript & MXML to Extend Flex and AIR Applications. It is also book review written by Armando Estanol, who thinks that this book is not for the beginners, but it is a very friendly reading to the advanced and expert programmer. There are some very useful tips and the author makes a great effort to make a clear explanation of every bit that is mentioned. Currently there are many choices when it comes to monetizing a web game. It can be daunting to decide which model is best for a developer. On top of this, there are conflicting reports as to which ones are truly lucrative. From the article Monetizing Your Web Game Part 5 from Chris Hughes you will learn which of choises are the best to monetizing a web game. In this magazine there is also another part of Starting Action Script Programing. In the fourth part of this series, Huw Collingbourne explain show your code can benefit by placing your classes into named packages. Of course Gabor Csomak has for you news about Flash Builder 4.6 & Flex SDK 4.6, Mouse lock, right and middle click events and Stage3D for iPad and iPhone. Enjoy your reading Adela Kuniarska and FFD Team

Editor: Adela Kuniarska adela.kuzniarska@software.com.pl Proofreaders: Garry Schafer, Michael Jovel,Alberto Jose Argon Alvarez, Nick Middleweek, Ranjan Rajendran, Ed Werzyn DTP Team: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Art Director: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Senior Consultant/Publisher: Pawe Marciniak Flex/ActionScript 101 Section Editor: Marc Pires marcpiresrj@gmail.com iPhone Development Section Editor: Ryan DAgostino ActionScript in Action Section Editor: Huw Collingbourne Games Section Editor: Chris Hughes Contributing Editors: Pedro de La Rocque, Ali Raza, Csomk Gbor Publisher: Software Press Sp. z o.o. SK ul. Bokserska 1 02-682 Warszawa Poland Worldwide Publishing If you are interested in cooperating with us, please contact us by e-mail: cooperation@software.com.pl Whilst every effort has been made to ensure the high quality of the magazine, the editors make no warranty, express or implied, concerning the results of content usage.

All trade marks presented in the magazine were used only for informative purposes. All rights to trade marks presented in the magazine are reserved by the companies which own them. Thanks to the most active and helping beta testers: Russell TangChoon, Lee Graham, Jassa Amir Lang, Ed Werzyn, Yann SmithKielland, Justus, Csomk Gbor, Kevin Martin, Charles Wong, Ali Raza, Almog Koren, Izcoatl Armando Estanol Fuentes, Lionel Low, Michael J. Iriarte, Paula R. Mould, Rosarin Adulseranee, Sidney de Koning To create graphs and diagrams we used company. program by

Mathematical formulas created by Design Science MathType

Distributing current or past issues of this magazine without permission of the publisher is harmful activity and will result in judicial liability.

ATTENTION!

The techniques described in our articles may only be used in private, local networks. The editors hold no responsibility for misuse of the presented techniques or consequent data loss.

DISCLAIMER!

01/2012 (31)

CONTENTS
InBrief
8 Flex and Apache
GABOR CSOMAK

BlackBerry Tablet OS and Apple iOs

30 Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5
NARCISO NJ JARAMILLO

In order to better facilitate discussion with our broad developer community, Adobe are organizing a multi-city international Flex User Group tour that we are looking to kick off in early 2012.

ActionScript in Action
10 Starting ActionScript Programming Part Four
HUW COLLINGBOURN

This article has been updated to include information about the BlackBerry Tablet OS and Apple iOS support added in the Flex 4.5.1 and Flash Builder 4.5.1 updates.

Book Review
38 Developing Flex 4 Components: Using ActionScript & MXML to Extend Flex and AIR Applications
ARMANDO ESTANOL

In the fourth part of this series, Huw Collingbourne explains how your code can benefit by placing your classes into named packages

Generate the Web Game

14 Monetizing Your Web Game Part 5
CHRIS HUGHES

Currently there are many choices when it comes to monetizing a web game. It can be daunting to decide which model is best for a developer. On top of this, there are conflicting reports as to which ones are truly lucrative. The hope of this series of articles is to shine a light on many of the monetization methods to choose from by presenting hard facts based on case studies from a number of developers as well as statistics we have been tracking at FlashGameLicense.com and GamerSafe.com.

Flex framework comprises a set of building blocks that allows us to create powerful and robust applications. These building blocks are the components developed mainly by the dedicated team of developers from Adobe that now are leading this effort on an open source environment since Adobes latest announcements

40 Pro Android Flash

ALI RAZA

First chapter is an introduction to Adobe Flash platform and its coverage and to some extent the vision behind it. It also outlines how to create, deploy and debug your first project using Flash Professional, Flash Builder and Commandline depending on your choice of tool.

Flex Dev
20 Differences Between Flex 3 and Flex 4
JOAN LAFFERTY

Review
42 FlashMoto Review Flash CMS
DZINERFUSION.COM

The Flex 4 release is a major change from Flex 3. Flex 4 introduces a new component and skinning architecture. As a Flex 3 developer, however, you will likely not encounter too many challenges when compiling Flex 3 applications with Flex 4 , since a goal of the new release is to maintain backwards compatibility with Flex 3.

If you have ever used WordPress as a CMS, then I am sure you are going to love this new flash CMS that is Flashmoto. Flashmoto is your ideal solution for building your own flash sites without having much knowledge of coding, or buying the expensive Adobe Flash application to build your site.

01/2011 (31)

Voices That Matter: Android Developers Conference

February 9-10, 2012 | San Francisco, Ca http://android2012.voicesthatmatter.com/
December 30, 2011 CONTACT: Lisa Comeau 941-224-1536 lisa@alphastarpartners.comt

Leading Authors Presenting at Android Developers Conference

SAN FRANCISCO, CA. Join Android authors and experts as they share their knowledge in how-to interactive sessions where attendees will be able to ask questions, while gaining invaluable knowledge, at the premiere Voices That Matter: Android Developers Conference. Taking place in San Francisco, February 9-10, 2012 at the Julia Morgan Ballroom, the conference is being presented by Pearson Education. Attendees will be able to confer with like-minded developers, discuss strategies and developments and build networks that will last long after the conference has ended. Taught by the industrys leaders, this two-day conference will discuss the latest in Android application development and will include speakers such as: Chris Haseman, author of Creating Android Applications David Wolber, co-author of App Inventor: Create your own Android apps Rick Rogers, author of Learning Android Game Programming Dan Galpin, author of Intro to Android Application Development and Developer Advocate for the Google Android team Shane Conder and Lauren Darcy, co-authors of Android Wireless Application Development Romain Guy and Chet Haase, co-authors of Filthy Rich Clients and Developer Advocates for the Google Android team Jacob West, co-author of Secure Programming with Static Analysis Brian Hardy and Bill Phillips, co-author Android Programming: The Big Nerd Ranch Guide Voices That Matters offers a pre-conference developer boot camp for the beginner to learn the basics from expert Android developers. To register, visit http://voicesthatmatter.com/android2012/register.aspx. Use Priority Code: ANDR923 to save $150 off the current conference price. The Pearson Education Voices That Matter Conference series are led by the top leaders in the industry and give attendees access to these experts. These intimate conferences are specifically designed to enable participants to share their experiences and leverage the accumulated wisdom of the entire conference community. For more information, please contact conference manager Barbara Gavin at Barbara.Gavin@Pearson.com or call (617) 848-7026.

01/2012 (31)

IN BRIEF

Flex and Apache

Adobe is busy preparing the proposals for incubation of Flex SDK and BlazeDS to the Apache Software Foundation, but its been clear, that Adobe will still be committed to Flex. Regarding the incubation proposals, Adobe have received all of the necessary Adobe legal clearance in order to contribute the full Flex SDK (including MXML compiler, automation libraries and data visualization components) to Apache. As such they have a draft incubation proposal for Flex SDK prepared and are aiming to post that to the Apache incubation mailing list within the next 1-2 weeks. Once the proposal has been posted, the normal process is that community members review the proposal for a period of time (normally 72 hours) after which the ASF votes. A positive vote means the project has been accepted as an incubation podling into Apache. As for BlazeDS, at they are still working on legal clearance but aim to have that before the end of the year such that we can post the BlazeDS incubation proposal to the Apache mailing list at the start of the new year. In order to better facilitate discussion with our broad developer community, Adobe are organizing a multi-city international Flex User Group tour that we are looking to kick off in early 2012.

Maybe Epic will use Flash, to develop multiplatform games in Unreal Engine? Source: Flash Magazine

Flash Builder 4.6 & Flex SDK 4.6

Flash Builder 4.6 and Flex SDK 4.6 are available now. The one thing you may have missed is that this is a free update for Flash Builder 4.5 owners! Important: The update is not delivered by the update manager so you must download the trial of Flash Builder 4.6 and then you can use your Flash Builder 4.5 serial number to activate. You also must uninstall your previous version of Flash Builder 4.5 or 4.5.1 before installing 4.6. The biggest new features in the SDK are the new mobile components. For Flash Builder Id say that the ability of adding native extensions to your AIR apps as well as the ability to compile your apps with captive runtime support are the biggest additions to Flash Builder 4.6. Source: Serge Jespers

The Game Of Flex

Call For Committers

One of the requirements for a proposal to incubate a new project in the Apache Software Foundation is to have an initial set of committers. A committer has to sign a license agreement with Apache in order to obtain write access to the source code repository. A committers responsibilities are listed at http://www.apache.org/dev/ committers.html#committer-responsibilities. Adobe is looking to identify the initial committers for the Flex SDK incubation proposal. If you want to be on this list of initial committers, but the deadline will be past, when you read this, but you can still become a committer after that by following the process outlined by Apache. And remember, if you dont want to be a committer, you can still contribute in many ways. Source: Flex Team Blog

Michal Chaize just released The Game Of Flex. The Game Of Flex is a quiz with 16 questions, and its a real game, which means that if you correctly answer all the questions you get a chance to win a copy of Flash Builder 4.6!!! Believe me, its pretty easy, even if you dont know Flex. Its also a great app to showcase Flex on mobile. Android tablets: https://market.android.com/details?id =air.com.riagora.flexgame. iPad:http://itunes.apple.com/us/app/game-of-flex/id4833 89384. BlackBerry Playbook: soon. Source: riagora

Mouse lock, right and middle click events

Stage3D for iPad and iPhone

At the recent FITC Tokyo 2011 conference, Adobes Lee Brimelow showed off some tech demos, based on Alternativa 3D, running on both the iPad and iPhone. While the videos are somewhat low quality, this really shows that Adobe is serious about gaming and not only on the desktop. Epics Unreal Engine running on the desktop, but in an iPad optimized version: http://www.youtube.com/ watch?v=_EBxd2tFEvU.

Adobe just released on Adobe Labs, Flash Player 11.2 and AIR 3.2 (beta 2) builds. Note that you guys now have access to standalone debugger builds. The cool news is that those builds introduce a few cool new features, like mouse lock, right and middle click events and the ability to disable the context menu entirely. If youre interested in how it works, and want to try it, head to http://www.bytearray.org/?p=3755 for some examples, and description. forrs: ByteArray.org

News by Gbor Csomk (@csomak)

01/2012 (31)

ACTIONSCRIPT IN ACTION

Starting ActionScript Programming

part four
In the fourth part of this series, Huw Collingbourne explains how your code can benefit by placing your classes into named packages.
What you will learn
What a package is and why its important How to create multi-level packages How packages avoid ambiguity

What you should know

How to write ActionScript classes Naming conventions for class les How to create objects from classes

ast month I explained the basics of creating class hierarchies in ActionScript. A class hierarchy is like a family tree that defines the relationships between classes. For example, you might have one class called Mammal which contains all the information that is, the data and behaviour (the variables and the functions) common to all mammals. Then you might define subclasses such as Cat and Dog. Both the Cat class and the Dog class would automatically inherit all the features of the Mammal class and they would then add on additional features. So, for example, the Cat class might have a miaow() method whereas the Dog class would have a woof() method, and so on. While classes help you to divide your code into logically related chunks, they dont solve the problem of how to store your code in logically related code files on disk. Its all very well having a hierarchy of 100 welldefined classes but it would be hard to keep track of the files containing those classes if they were all stored in a single folder or subdirectory on disk. This is where packages can help out.

All your ActionScript classes exist inside a package of some sort. Any files in your top-level directory are placed into a nameless package. As I mentioned last month, the top level directory of the class is indicated by the fact that the class definition is enclosed between the keyword package and a pair of curly braces:
package { }

When you create classes in a subdirectory, the subdirectory gives its name to the package. When you write classes in a subdirectory, you must add its name to the package definition in your source code. A class in the \myclasses subdirectory would need to be paced inside the myclasses package like this:
package myclasses { }

Packages and Folders

In ActionScript package is a container for a related set of classes. A package corresponds to a subdirectory. So if, for example, you create a subdirectory called \myclasses beneath the top-level folder of your application, the package name would be myclasses.

Lets now assume that you create some classes in files in a subdirectory of \myclasses such as \myclasses\ widgets now, when you write the code of each class you need to enter the two directory names separated by a dot like this:
package myclasses.widgets { }

10

01/2012 (31)

This is true for each further level of subdirectory. If you create the \myclasses\widgets\controls directory, the classes in that directory would need to define their package like this:
package myclasses.widgets.controls { }

Package Naming Conventions

It is normal to write package names in lowercase. Many people also adopt the convention of naming packages by reversing the web-site domain name. So for example, since my companys web site is www.sapphiresteel.com, I could follow this convention by creating the com package first, in a subdirectory named \com, then another package named sapphiresteel in the subdirectory \com\sapphiresteel and then add other subdirectories beneath this. The logic for this convention is that web domain names are unique and consistent so you might as well use them to standardise the naming of packages in your companys applications. Personally, I do not find this convention useful and, as a matter of fact, my company does not structure its ActionScript code in this way. We prefer to use entirely descriptive package and directory names such as \utils\stringutils and so on. However, the reversal of a domain name is a widely adopted convention and you may see it frequently.

Importing Classes

When you place a set of classes inside files in any given package, they automatically have access to any other files and classes in the same package. So if, for example, I create Class1 and Class2, both within package
Listing 1. Resolving Ambiguity
How to create objects from two classes with the same name in two packages
package xxx { import yyy.*;

public class Class1 { public function Class1( ) {

var x:xxx.Class2 = new xxx.Class2(); var y:yyy.Class2 = new yyy.Class2();

} } }

01/2012 (31)

ACTIONSCRIPT IN ACTION

xxx, Class1

can access Class2 automatically. For example, I could write this in the Class1 constructor:
public function Class1( ) { }

Packages Resolve Ambiguity

var x:Class1 = new Class2();

But Class1 cannot automatically use classes in a different package. If, for example, Class3 is in the package yyy, this will not work:
public function Class1( ) { }

var x:Class3 = new Class3();

In order to use Class3 I need import it. I can do so by adding this statement above the Class1 constructor:
import yyy.Class3;

That causes Class3 alone to be imported. Or, I could import all the classes from the yyy package like this:
import yyy.*;

Listing 2. Resolving Three types of Button

How to create a Flash, Flex 3 and Flex 4 Button object

package xxx { import mx.controls.Button; import fl.controls.Button; public class Class1 { public function Class1( ) { var flashButton:fl.controls.Button = new var flex3Button:mx.controls.Button = new var flex4Button:spark.components.Button = new spark.components.Button();

Apart from providing a way of organising your class files into logical disk directories, packages have another important function: they resolve ambiguity. Lets assume that I have a class called Class2 in the xxx package and a different class called Class2 in the yyy directory. How would Class1 make the distinction between the two classes? The answer is, it would make their packages explicit either xxx.Class2 or yyy.Class2 (see Listing 1 for an example). Resolving ambiguity in this way is, in fact, not at all an uncommon task. Consider the problem a Flex 4 programmer faces. Flex 4 can use no less than three different Button classes, a Flex 4 Button, a Flex 3 Button or a Flash Button. In order to clarify which of these buttons to create, the programmer needs to specify the package containing the Button class (Listing 2). Each package defines a path to the specific Button class. A Flash button is located at fl.controls.Button, a Flex 3 button is located at mx.controls.Button and a Flex 4 button is located at spark.components.Button. Bear in mind that, while my example code uses class constructors such as spark.components.Button(), any public method (one that begins with the keyword public) can be imported from a package in much the same way. In addition, a method marked with the keyword internal can also be accessed by other classes in the same package but it cannot be used by classes in other packages. I hope this helps clarify the way in which packages can be used to divide your code into logical groups for easy and unambiguous reuse.

import spark.components.Button;

fl.controls.Button();

mx.controls.Button();

} } }

HUW COLLINGBOURNE
Huw Collingbourne is Director of Technology at SapphireSteel Software makers of the Amethyst Flash Platform IDE for Microsoft Visual Studio: http://www.sapphiresteel.com.

12

01/2012 (31)

GENERATE THE WEB GAME

Monetizing Your Web Game

part five
Currently there are many choices when it comes to monetizing a web game. It can be daunting to decide which model is best for a developer. On top of this, there are conflicting reports as to which ones are truly lucrative.
What you will learn
How to combine monetization models to maximize the revenue your web game can generate

What you should know

It would be helpful if youve read the last 4 articles of the series (found in previous issues of FFDM)

he hope of this series of articles is to shine a light on many of the monetization methods to choose from by presenting hard facts based on case studies from a number of developers as well as statistics we have been tracking at FlashGameLicense.com and GamerSafe.com.

Part 5: The Hybrid Model

In the previous articles of this series we covered how to monetize your game using sponsorships, licenses, ads, and microtransactions. We also learned about game distribution. In this last article in the series we will take all of these models and see how they can be effectively merged into a hybrid model.

Taking Advantage of Multiple Revenue Streams

With so many options for monetizing your web game, there are obviously many permutations you could pursue for your game. For example, you could decide to release your game with ads and microtransactions. Or, you could get your game sponsored, and include ads in the sponsored version. Or well you get the idea. However, there are things to consider when choosing which models you mix. For instance, if your game isnt a good fit for microtransactions it could greatly affect the distribution of the game. This means if you are also using ads in the game, your ad revenue will be affected

as well. Not to mention your game probably wont convert players to paying users very well. Its also easy to overload your game so that gamers are turned off by the blatant and intrusive monetization tactics. This is why you should be extra thoughtful when implementing these monetization models. Its important when youre using just one, but the importance is compounded when you stack them. One of the most common ways to pull off the hybrid model is to plan and build your game with ads and microtransactions in mind, and then, when the game is near completion, to seek a sponsor for the game. Many sponsors are open to sponsoring games with these models, if they are implemented well, and some sponsors even try to negotiate to have these models in the game in hopes of getting a revenue share for themselves. As mentioned in our sponsorship article, a Primary sponsorship is desired since it will open yet another revenue stream: non-exclusive licenses. Once the game is finished, and the sponsorship secured, you can then start to sell non-exclusive licenses for your game, and currently this is a very hot market.

Moving to Other Platforms

If a web game is successful, I always suggest that the developer port the game to other platforms. A viral web game is an awesome proving ground for a game idea. One of the great things about the hybrid model

14

01/2012 (31)

Monetizing Your Web Game Part 5

is that if your game proves successful, then not only do you have an incentive to port your game to other platforms, but you also have a budget to do so. Ive heard of many cases where a developer will make a popular game, and use the profits from the game to build a mobile version of the game, and then the mobile version will go on to earn several times what the web game made. It is almost silly not to do this, when you think about it, because youve proven the game is fun, and found that the game monetizes well. Both of those things are extremely hard to come by or learn, and will translate on any platform. Not to mention youve probably built up a fan base to market the game to when you port it. And to look at it the other way, if your game does poorly on the web, then youve found that your idea probably wasnt the best, or the implementation was lacking, or, at the very least, that it isnt worth pursuing this version of the game any longer. In that case, youve already made money off of the game and can use what money you have to work on your next game, or the next iteration of your current game. So, in summary, it is usually a very smart move to go for a hybrid model, and seek multiple revenue streams. But it is extremely important to do so tactfully and with
a d v e r t i

the gamer in mind. Dont lose focus on making your game fun and fully enjoyable! And, if you manage to pull off the difficult task of creating a popular game that monetizes well, be sure to move it to other platforms in order to expand on your revenue streams. This article (as well as the series) is merely an introduction to the world of monetizing web games, and is not meant to be all encompassing or definitive. I invite all readers to visit our sites: FlashGameLicense.com and GamerSafe.com to find out more.

CHRIS HUGHES
Chris Hughes is Co-Founder of FlashGame License.com and GamerSafe.com, which have helped web game developers make millions annually. He has spoken at the GDC and Flash Gaming Summit on monetizing and distributing web games. He also has several published articles on the topics of monetizing and distributing web games. He has a BS and MS in Computer Science from Sacred Heart University. s e m e n t

Christmas Gifts from WinXDVD.com

Valid before Jan.5, 2012

This PDF sheet includes four parts: 1. Introduction on the giveaway items, including: i. ii. iii. WinX HD Video Converter Deluxe giveaway. DVD backup pack and Xmas Video Pack discounts. A game to win iPhone ripper/converter, HD video converter, even an iPad 2.

2. Related images. 3. More about the giveaway. 4. A ready-made press release. Please scroll down to select the materials you need.

WinX HD Video Converter Deluxe Giveaway

Totally 30K copies worth $1000K. First come, first served. It can convert videos among MKV, AVCHD, M2TS, AVI, MPEG, MOV, WMV, Google TV, WebM, Vpx8, etc, as well as, transfer videos to iPhone/4S, iPad, iPod, PSP, Androd, Mobile phones, etc. for playing. Plus, burn your holiday videos to DVD for collection, online download the hottest Xmas/New Year videos from YouTube. How to get the gift? 1. Visit http://www.winxdvd.com/giveaway/ 2. Click the "Get Register Code" button. 3. You will get the download link and code immediately. 4. The system will auto count down once someone hits the "Get Register Code" button until all codes run out. 5. Mac users can get HD video converter for Mac on Digiarty' Facebook Page.

Christmas surprise? Yes! In addition to the giveaway of WinX HD Video Converter Deluxe, you can also get a coupon code for DVD backup software. 40% off!

Buy WinX DVD Ripper Platinum + WinX DVD Copy Pro, Free Get a Blu-ray Backup Tool
Only $39.95, you'll get the best DVD backup software pack plus a Blu-ray backup tool. With them you can: Rip DVD/ISO image to iPhone, iPad, iPod, Android phone/Tab, etc. Rip DVD/ISO image to AVI, MP4, H.264, MOV, YouTube FLV, etc. Copy DVD main content to MPEG2 file within 5 minutes. Decrypt & backup DVD to DVD disc and copy DVD to ISO image file. Backup Blu-ray to hard drive as Blu-ray folder or HD M2TS video. Enjoy unmatchable video/audio quality.

After you place the order, you will get the full version download link and license code by email immediately.

Buy Xmas Video Pack, Free Get a Blu-ray Backup Tool

Only $49.95, you'll get 4 DVD/video programs plus a Blu-ray backup tool: WinX DVD Ripper Platinum Support ripping any DVDs to iPhone, iPad, Apple TV, Android, PSP, MP4, FLV, MPEG, MOV, AVI, etc. WinX HD Video Converter Deluxe Convert videos between SD and HD, and transfer videos to iPhone/4S, iPad, iPod, Android, PSP, Blackberry, etc. WinX DVD Copy Pro Able to clone DVD to DVD disc, copy DVD to ISO image, and copy DVD to MPEG2 video file with intact content. Air Playit Streamer Support streaming video/audio to iPhone iPad iTouch Android over Wi-Fi, 3G/4G. Available on both PC and Mac. WinX Blu-ray Decrypter Decrypt and backup Blu-ray (including AACS, BD+, BD-Live encrypted Blu-ray) to HD M2TS file or Blu-ray folder.

Join in Collect Xmas Gift Game, Win Free Gift

Move the mouse to catch the gifts fall from the sky within 60 seconds. 1. You may collect:

Xmas gift box: If you are lucky to catch one, you may have the chance to free get a license code of iPhone ripper,

iPhone converter or HD video converter, even iPad2. 2. Stocking and Xmas candies: The more you collect, the higher scores you can get. Weve prepared a mystery gifts

for Top 10 winners.

PS: Avoid bombs, or game will be over.

Related Images
WinX HD Video Converter Deluxe: http://www.digiarty.net/face_style/hvcd-=box-pic.png WinX DVD Backup Software Pack: http://www.winxdvd.com/box_style/backup-pack-mini02.png Xmas Video Pack: http://www.winxdvd.com/face_style/xmas-pack.png Game: http://www.winxdvd.com/image/collect-gifts.jpg

More about the Giveaway

Q. Are there any limitations in the giveaway version? A. There is no functional limitation at all. But it will not support upgrading to the future version. If you want to upgrade, you need to download the latest version available on our site. Q. May I introduce your freeware to our readers? A. The answer is yes. Please free feel to introduce the following freeware to your readers. 1. DAPlayer: A Powerful, Simple to use and All-in-one video/audio player software for windows that plays most audio video files easily and smoothly. It is designed to give users a complete free solution for playing High-definition videos including Blu-ray, AVCHD, TS, MKV, MPEG4, H264 video formats as well as DVD video and music CD.

2. WinX DVD Author: An easy and fast way to create home video DVD from video files, camcorder, webcam, Youtube and personalize it with DVD chapter menu & subtitle (*.srt). It can help you convert and burn MKV, M2TS, M4V, MP4, FLV, MPEG, MOV, RM, RMVB, H.264, AVI to DVD, etc.

Press Release
New Arrival of Digiarty's Xmas Giveaway, Free Get HD Video Converter/DVD Burner before Jan. 5 Today, Digiarty Software, Inc. infused new blood into its ongoing Xmas Giveaway to make originally $49.95 WinX HD Video Converter Deluxe free available to all comers. It is all-in-one software to convert videos, create DVDs and back up videos recorded by JVC/Sony/Canon HD camcorders or downloaded from YouTube and so on. The duration of this

video conversion software giveaway has been officially fixed to be 15 days from Dec.22, 2011 to Jan.5, 2012. Although there already have been over 20,000 Blu-ray decrypter free users and 1 iPad winner from the previous giveaway offer, many valuable gifts are still out there, including two more iPad 2. Get free HD video converter/YouTube online downloader/DVD burner and many other surprises right now: http://www.winxdvd.com/giveaway/ This is a new round of giveaway subsequent to that of Blu-ray backup software, aiming to meet the needs of different customers. 30,000 software copies totaled $1000,000 are planned to be given away through Digiarty's overall Xmas Giveaway. According to the official source coming from the developer, however, the set value is very likely to grow. So there are a plenty of chances to own free WinX HD Video Converter Deluxe without any condition. During the New Year holiday, many people will steer to self video making and online sharing. This giveaway provides a hassle-free way to facilitate better YouTube video enjoyment. Accordingly, the high-quality video converting software they are giving away can act as an online downloader to download YouTube video directly before it is converted to any favored HD or standard videos for playback or edition. Inversely, videos can also be transformed to YouTube video for uploading conveniently with this software. This can absolutely be good news for Christmas video DIY. Main functions provided by the 2nd round of WinXDVD Xmas Giveaway: Support standard and HD videos with Multiple Audio Tracks: HD videos: MKV, AVCHD (MTS, M2TS), MOD, TOD, JVC, Sony, Panasonic & Canon HD camcorder Videos, etc. Standard videos: AVI, MPEG, WMV, MP4, FLV, AVC, MOV, RM, RMVB, WebM, Google TV videos, etc. Enable video playback on iPhone 4S, iPad, iPod, PSP, PS3, Android, Blackberry, Windows media players. Download Youtube, Metacafe, Dailymotion and other website videos on line. Burn videos into DVDs, create home video DVD.

Besides, this grand Xmas Giveaway also consists of a 40% off DVD copy software discount, an interesting gift-winning game and a 70% Off Christmas Pack including DVD ripping copy, burning, video/audio streaming/conversion and Blu-ray backup software. It is a now-or-never chance to get the most all-around audio/video conversion and backup bundle at unprecedented price. Please go to the official giveaway webpage owned by Digiarty Software to join in the Christmas feast and get free HD video converter software before Jan. 5: http://www.winxdvd.com/giveaway/ About Digiarty Software, Inc. Digiarty Software, Inc. is specialized in multimedia software based on Windows, Mac OS and iOS5, which provides personal and home used video audio software across Apple iPhone, iPad, Sony PSP, PS3, Xbox, Droid platforms and devices, including DVD Ripper, Blu-ray Decrypter, HD Video Converter, DVD Author, and DVD Copy, etc.

FLEX DEV

Differences Between Flex 3 and Flex 4

The Flex 4 release is a major change from Flex 3. Flex 4 introduces a new component and skinning architecture. As a Flex 3 developer, however, you will likely not encounter too many challenges when compiling Flex 3 applications with Flex 4 , since a goal of the new release is to maintain backwards compatibility with Flex 3.
What you will learn
Differences between Flex3 and Flex4 More about main objectives in Flex4 How to compile Flex3 in Flex4

What you should know

Flex3 Flex4

n this article, I will provide a general overview of the main objectives in Flex 4, architecture differences, and an introduction to changes in components, layouts, use of states, and effects. Ill also answer some questions regarding what to expect when you compile your Flex 3 application in Flex 4. This article will not cover all of the new features and functionality in Flex 4. For that information, read the article Whats new in Flex 4. Throughout this document, the term MX components refers to components originally included in Flex 3. The term Spark components refers to the new set of components in Flex 4.

Button { }

cornerRadius: 10;

DateField { }

color: #780800;

As of the Flex 4 SDK, when an application uses type selectors, a namespace is required. If you are using only the MXML 2006 namespace in your Flex Application, add the following default namespace declaration to your CSS:
<mx:Style> @namespace http://www.adobe.com/2006/mxml; </mx:Style>

Migrating applications to Flex 4

When migrating Flex 3 applications to Flex 4, you should not expect to do very much work. Other than bug fixes and a change in the default theme, you can look forward to your application generally working the same (or better) than it did in Flex 3. However, there are a few things to watch out for.

Player dependency

Be sure that you compile against Flash Player 10. The Flex 4 SDK requires Flash Player 10 support.

Type selectors require a namespace

A CSS type selector names the Flex class to style. For example, the following are type selectors for Button and DateField:

If you are using multiple namespaces in your application, then you will need to provide each of the namespaces in your CSS. For an example, see Namespaces and packages in Flex 4 later in this article. Further, if an application used a method like StyleMan ager.getStyleDeclaration(Button), the type selector will need to include its package. For example, the call to getStyleDeclaration() would change to StyleManager.getSt yleDeclaration(mx.controls.Button).

20

01/2012 (31)

FLEX DEV

Theme change

The default theme for Flex 3 (MX) components is now the Spark theme. Therefore, your application may look and size itself differently when you compile it using the Flex 4 SDK. If, however, you want to use the Flex 3 look you still can because Flex 4 includes the Halo theme from Flex 3. To compile using the Halo theme, you can use the additional compiler argument -compatibilityversion=3.0. In Flash Builder 4, you can do this in the Properties Panel. In the Properties Panel, select, Flex Compiler and click the checkbox for Use Flex 3 compatibility mode (see Figure 1). Alternatively, the theme can be changed from the default Spark theme to Halo in the Properties -> Flex Theme panel. In the Flex Theme panel, click on the Halo theme (see Figure 2). If you do choose to use the new Spark theme, note that many of the styles that worked with the Halo theme do not work in the Spark theme. The Spark theme only supports a limited number of styles. To understand which styles are available for the Spark skin, you should reference the ASDoc. For each style listed per component, a Theme will be designated. If no theme is designated, then, the style is available for both the Halo and Spark theme. Flex 4 has also added a Wireframe skin that was designed to be used for quick mock-ups. The wireframe theme does not support style changes. In addition to the theme change, the default preloader has changed to the mx.preloaders.SparkDownloadProgressB

for Flex 4 applications. This lighter weight preloader should shorten start-up time a little. If you want to use the Flex 3 preloader, you only need to change one line of code. In yourApplication tag add the following: preload er=mx.preloaders.DownloadProgressBar. If you are migrating an application from Flex 3 to Flex 4, I do not recommend that you replace each of your Flex 3 MX components with their corresponding Flex 4 components. This is probably not a good investment of your time. Instead, move to the Flex 4 component architecture for new applications.
ar

Automation Library location change

In Flex 3, automation libraries were {sdk}/frameworks/libs and in the Flex 4 under {sdk}/frameworks/libs/automation. ensure that they dont have a copy libraries under the frameworks/libs.

present under , it is available Users should of automation

An overview of Flex 4 architecture changes

One of the major themes in the Flex 4 SDK is Design in Mind. This goal involves creating a smoother workflow between designers and developers. To help achieve this, the framework provides a clear separation of the visuals for a component and the rest of its behavior. In Flex 3, an individual components code included logic around its behavior, layout, and visual changes. In Flex 4, the components are factored out into different classes, each handling specific pieces of behavior.

As specied in the Gumbo Architecture Document

Figure 1. Using Flex 3 Compatibility Mode

Figure 2. Selecting the Halo Theme in the Properties Panel

The main component class, the one whose class name matches the components MXML tag name, encapsulates the core behavior of the component. This includes defining what events the component dispatches, the data that component represents, wiring up any sub-components that act as parts of the main component, and managing and tracking internal component state (we discuss states in more detail below). Coupled with that component class is a skin class which manages everything related to the visual appearance of the component, including graphics, layout, representing data, changing appearance in different states, and transitioning from state to state. In the Halo model, Flex component skins were assets responsible for only one part of the graphics of a component. Changing any other aspect of a components appearance, like layout or visualization of states, required sub-classing the component and editing the ActionScript code directly. In the Gumbo model, all of this is defined declaratively in the skin class, primarily through new graphics tags called FXG tags.

22

01/2012 (31)

Differences between Flex 3 and Flex 4

To learn more about the new graphics tags in Flex 4, you can read the FXG documentation. As an example of the architecture discussed above, you can look at the code for the spark.components.Button class. This class only contains logic around the components behavior. All of the visuals for this component are defined in the skin class spark.skins.sp
ark.ButtonSkin.

For performance reasons, the Flex 4 SDK has provided building blocks for developers to pick and choose the functionality that you need. Heavyweight functionality such as scrolling and virtualization that is not needed by all applications is not turned on by default.

Namespaces and packages in Flex 4

Listing 1. MX DateChooser and Spark Button

<s:Application

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">

<mx:DateChooser id="main_calendar" x="20" <s:Button label="submit" x="220" y="20"/> </s:Application> y="20"/>

While keeping Flex 3 classes intact in the same mx.* packages, the Flex 4 SDK introduces the spark.* packages for components, core classes, effects, filters, layouts, primitives, skins, and utils. The Flex 4 SDK provides a new set of components and effects that share many of the same class names as Flex 3 components. To avoid name collisions in MXML, the Flex 4 SDK comes with four distinct namespaces: MXML 2006, MXML 2009, Spark, and Mx. MXML 2006 The legacy MXML language namespace used in previous versions of Flex. Flex 3 applications compiled using Flex 4 can continue using this namespace. URI: http://www.adobe.com/2006/mxml Default Prefix: mx MXML 2009 The new MXML language namespace. This is purely a language namespace, and does not contain component tags. URI: http://ns.adobe.com/mxml/2009 Default Prefix: fx

Listing 2. Example of CSS

<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|Button { }

color: #FF0000;

Spark
color: #FF0000;

mx|DateChooser { }

</fx:Style>

This namespace includes all of the new Spark components. It should be used in conjunction with the MXML 2009 language namespace. URI: library://ns.adobe.com/flex/spark Default Prefix: s

Listing 3. Default Property and the Declarations tag

<s:Application xmlns:fx="http://ns.adobe.com/mxml/ xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Declarations> <s:Fade id="fadeEffect" 2009"

MX

This namespace includes all of the MX components. It should be used in conjunction with the MXML 2009 language namespace. URI: library://ns.adobe.com/flex/mx Default Prefix: mx Here is a small example that uses the MXML 2009, Spark, and Halo namespaces to create a simple Flex 4 application. This sample uses a MX DateChooser and a Spark Button (Listing 1). Flex 4 SDK has also added multiple namespace support in CSS. If you are using the MXML 2009, Spark, and MX namespaces along with Type selectors, you will need to define a set of namespaces in your CSS definitions to avoid name collisions.

target="{targetButton}"

</fx:Declarations>

alphaFrom="1" alphaTo="0" />

<s:Button id="targetButton" />

<s:Button label="play effect" click="fadeEffect. </s:Application> play()" x="80" />

01/2012 (31)

23

FLEX DEV

See Listing 2 for an example of CSS that uses type selectors or both MX and Spark components.

Default Property and the Declarations tag

Prior to the release of the Flex 4 SDK, the Flex language allowed the Application root tag to include visual children and non-visual children. The visual children were added to the Application with addChild() and non-visual children were treated as property declarations. Going forward, non-visual children that represent new property declarations are not allowed as immediate children of an Application. You can add these non-visual children
Table 1. Flex 3 MX components and their Flex 4 Spark counterparts

under a <fx:Declarations> tag. This includes non-visual children such as effects, validators, formatters, data declarations, and RPC classes. The short example is seen on Listing 3.

New components and containers

As I mentioned earlier, Flex 4 SDK introduces a number of new component classes that use the new architecture, which should make skinning and other customizations much more straightforward. Table 1 is showing Flex 3 MX components and their Flex 4 Spark counterparts. Adobe encourages you to use MX components and

Flex 3 MX Component
mx.controls.Button mx.controls.ButtonBar mx.controls.CheckBox mx.controls.ComboBox mx.controls.HorizontalList mx.controls.HRule mx.controls.HScrollBar mx.controls.HSlider mx.controls.Image mx.controls.LinkBar mx.controls.LinkButton mx.controls.List mx.controls.NumericStepper mx.controls.RadioButton mx.controls.RadioButtonGroup mx.controls.TextArea mx.controls.TabBar mx.controls.TextInput mx.controls.TileList mx.controls.ToggleButtonBar mx.controls.VideoDisplay mx.controls.VRule mx.controls.VScrollBar mx.controls.VSlider mx.core.Application mx.core.Window mx.core.WindowedApplication mx.containers.ApplicationControlBar mx.containers.Canvas mx.containers.ControlBar mx.containers.HBox mx.containers.Panel mx.containers.Tile mx.containers.VBox

Flex 4 Spark Component

spark.components.Button spark.components.ButtonBar spark.components.CheckBox spark.components.DropDownList (w/o editability) spark.components.List (with a HorizontalLayout) spark.primitives.Line spark.components.HScrollBar spark.components.HSlider spark.primitives.BitmapImage (w/o support for external images) spark.components.ButtonBar (with a custom skin) spark.components.Button (with a custom skin) spark.components.List spark.components.NumericStepper spark.components.RadioButton spark.components.RadioButtonGroup spark.components.TextArea spark.components.TabBar spark.components.TextInput spark.components.List (with a TileLayout) spark.components.ButtonBar spark.components.VideoPlayer spark.primitives.Line spark.components.VScrollBar spark.components.VSlider spark.components.Application spark.components.Window spark.components.WindowedApplication spark.components.Application (with the controlBarContent) spark.components.Group spark.components.Panel (with the controlBarContent property) spark.components.HGroup spark.components.Panel spark.components.Group (with a TileLayout) spark.components.VGroup

24

01/2012 (31)

Differences between Flex 3 and Flex 4

containers along with Spark components. Because Adobe continues to build components a top the same base class (UIComponent), there should be full interoperability between Spark and MX. Here is a table of the components and containers that do not currently have direct Spark equivalent classes. To use a MX Navigator (ViewStack, Accordion, TabNavigator) with Spark Components, the children of the navigator should be a NavigatorContent component. Otherwise, you will not be able to use Spark primitives in your MX navigator. See example on Listing 4.

states (Listing 5). The simpler Flex 4 code using includeIn and excludeFrom is shown on Listing 6.
SetProperty, SetStyle,

and SetEventHandler have been replaced by a new dot syntax, which allows you to qualify MXML attribute values with a specific state identifier.

In the Flex 3 example (Listing 7), the code defines a property, style, and event for a Button in submitState. In Flex 4, the code looks like is shown in Listing 8.
Listing 4. Spark primitives in your MX navigator
<mx:ViewStack id="vs" selectedIndex="{tb.selectedIn <s:NavigatorContent label="bar"> <s:layout> <s:VerticalLayout /> dex}">

Changes in states syntax

Flex 4 has promoted the states functionality to a full MXML language feature. As a result, you will likely find states to be much more flexible and direct. The new states syntax is more inline, allowing state-specific changes to be specified in context. Here are the key differences in the Flex 4 syntax: Only states are defined within the states array. In the new states syntax, you cannot use AddChild and RemoveChild. Instead, you define a components role in a particular state on the component itself using the includeIn and excludeFrom attributes.

</s:layout>

<s:Label text="bar" /> </s:NavigatorContent> <s:TextInput />

</mx:ViewStack>

Listing 5. Changes in states syntax

<mx:states>

In the following Flex 3 example, states are used to include a Button and remove a TextInput only when thecurrentState of the document is submitState. This approach can get very verbose with more complex
Table 2. Flex 3 classes with no direct Flex 4 counterpart

<mx:State name="submitState" basedOn="">

<mx:AddChild relativeTo="{loginForm}" > right="10"/>

<mx:Button label="submit" bottom="10"

Flex 3 classes with no direct Flex 4 counterpart

mx.controls.Alert mx.controls.ColorPicker mx.controls.DataGrid mx.controls.DateChooser mx.controls.DateField mx.controls.Menu mx.controls.MenuBar mx.controls.PopUpButton mx.controls.PopUpMenuButton mx.controls.ProgressBar mx.controls.RichTextEditor mx.controls.Tree mx.containers.Accordion mx.containers.DividedBox mx.containers.Form mx.containers.Grid mx.containers.TabNavigator mx.containers.TitleWindow mx.containers.ViewStack

</mx:AddChild> </mx:State>

<mx:RemoveChild target="{firstTextInput}"/>

</mx:states>

<mx:TextInput id="firstTextInput" /> <mx:Canvas id="loginForm" />

Listing 6. Flex 4 code using includeIn and excludeFrom

<s:states>

</s:states>

<s:State name="submitState" />

<s:TextInput id="firstTextInput" excludeFrom="submit <s:Group id="loginForm" > State" />

<s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>

</s:Group>

01/2012 (31)

25

FLEX DEV

Listing 7. Flex 3
<mx:states>

<mx:State name="submitState" basedOn="">

<mx:SetProperty target="{submitButton}"

"textDecoration" value="underline"/> "click" handler="trace('done');"/> </mx:State>

<mx:SetStyle target="{submitButton}" name=

name="label" value="submit" />

A component can no longer be in an undefined or null state. By default, the first declared state is the initial state of a component. The new syntax is available when a document uses the MXML 2009 language namespace. You cannot mix the legacy syntax and the new states syntax. The old syntax is available only in the MXML 2006 namespace.

<mx:SetEventHandler target="{submitButton}" name=

<mx:State name="clearState" basedOn="">

<mx:SetProperty target="{submitButton}"

name="click" handler="emptyDocument()" /> </mx:states> </mx:State>

<mx:SetEventHandler target="{submitButton}"

name="label" value="clear" />

Additionally, each component now supports a set of states defined in its skin class, which makes it simpler to apply visual changes depending on the state of a component. For example, if you look at the skin for the Spark Button, you will find the following states defined:
<s:states>

<s:State name=up />

<s:State name=over /> <s:State name=down /> </s:states> <s:State name=disabled />

<mx:Button id="submitButton" />

Listing 8. Flex 4
<s:states>

<s:State name="submitState" /> <s:State name="clearState" />

</s:states>

The ButtonSkin class defines what happens visually to a Spark Button in each one of these states. This is only a brief introduction to the new Flex 4 states syntax. Visit the Enhanced States documentation to find more details.

<s:Button label.submitState="submit" textDecoration. click.submitState="trace('done')" click.clearStat label.clearState="clear" textDecoration.clearStat e="none"/> e="emptyDocument()" submitState="underline"

Changes in effects

Listing 9. How to use virtualization and scroll on a Spark Panel

<s:Panel title="Horizontal Panel" width="300" <s:Scroller width="100%" height="100%"> <s:Group> <s:layout>

height="220" left="20" top="20">

Many improvements have been made in the Flex 4 effects infrastructure. While MX effects will only work on controls based off of UIComponent, the Spark effects can operate on any target including the new graphic primitives in the framework. All of these effect classes live in the spark.effects.* package. Because Spark effects work on MX components, Spark components, and graphic primitives, Adobe recommends that you use Spark effect classes for future applications. Ive kept this description brief because you can get much more information about the new functionality in the effects classes from Chet Haases Effects in Adobe Flex 4 article.

<s:HorizontalLayout

</s:layout>

useVirtualLayout="true" />

Changes in layout

<s:TextInput />

<s:Button label="clear" /> <mx:DateChooser /> </s:Group> <s:Button label="submit" />

</s:Panel>

</s:Scroller>

In previous versions of Flex, the layout of components and containers were defined inside individual controls. Therefore, you had components such as List, TileList, and HorizontalList, which all share the same functionality except their layout. Still, their layout logic was defined within these component classes. In the Flex 4, layout has been decoupled from components. Now, Spark components such as Application, List, ButtonBar, and Panel can define their layouts declaratively. In all of the components, containment is managed by the

26

01/2012 (31)

FLEX DEV

Group class and the layout of the Groups children is delegated to an associated layout object. The layouts support both Spark and MX components in addition to the FXG graphic primitives. Layouts can even be changed at runtime. As a developer, you can easily write custom layouts and swap them in and out of various individual components. Here is an example of defining a vertical List, horizontal List and a tiled List. Vertical List (the default layout of a Spark List is VerticalLayout):
<s:List />

Set useVirtualLayout to true on your layout object Add a Scroller component to your Group.

An example of using virtualization and scrolling on a Spark Panel is shown in Listing 9. For more information regarding all of the enhancements in the Flex 4 layouts including better support for transformations, check out the Spark layout documentation.

Working with text

Horizontal List:
<s:List>

<s:layout>

</s:List>

</s:layout>

<s:HorizontalLayout />

Tiled List:
<s:List>

<s:layout>

</s:List>

</s:layout>

<s:TileLayout />

As I noted earlier, the Flex 4 architecture is set up to provide developers with building blocks to pick and choose what functionality they need. By default, virtualization and scrolling is not turned on. To add the option for scrollbars on a Group and turn on virtualization, you will need to:

All of the Spark components use the new text engine in Flash Player 10. These new classes offer lowlevel support for controlling text metrics, vertical text, typographic elements such as ligatures, and bidirectional text. The Flex 4 SDK has leveraged this functionality in all of the Spark components that use text. For more information on the text primitives and text components provided in Flex 4, see the Text primitives section of the Spark Text Primitives spec. The Spark components also now use the DefineFont4 embedded font format in Flash Player 10 and AIR 1.5. By default, the MX components do not use DefineFont4. This causes some overhead when mixing Spark and MX components in an Application and embedding fonts. If you want to use the same embedded font for all of your components, you will need to add an additional theme compiler argument to your project. With this new theme, both the MX and Spark components will use the same DefineFont4 font engine. You can add this compiler argument by checking an option Use Flash Text Engine in MX components in the Properties
Table 3. Text components in Flex 4

Multi-line Truncation
mx.controls.Label mx.controls.Text spark.components.Label spark.primitives.RichEditableText spark.primitives.RichText no yes yes yes yes yes no yes yes no

Selectable
yes yes no no yes

Table 4. Text components in Flex 4

Editable HTML formatting

mx.controls.Label mx.controls.Text spark.components.Label spark.primitives.RichEditableText no no no no yes yes yes no yes yes

Scrolling
no no no no yes

Figure 3. Allow MX components to use DeneFont4 font engine

spark.primitives.RichText

28

01/2012 (31)

Differences between Flex 3 and Flex 4

-> Flex Compiler panel. (see Figure 3). When using text in a Flex 4 application, I recommend using one of Flex 4s three Spark text components. They all use the flash players new text engine and will provide higher quality text, kerning and rotation for device fonts and bidirectional text. The differences between the available text components in Flex 4 are presented in Table 3 and 4.

Where to go from here

Hopefully, the migration from Flex 3 to the Flex 4 is relatively painless. The framework is designed to be mostly backwards compatible. Plus, once you get acquainted with the new architecture, youll find that it is more flexible! For more info on Flex 4 features, visit the web Help. The Flex 4 Features and Migration Guide would also be a good reference.

Backwards compatibility with Flex 3

As in Flex 3, you can compile your application with an additional compiler argument:
-compatibility-version=3.0.0.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.

This compiler argument will allow your applications to use some of the Flex 3 behavior instead of the new Flex 4 behavior. To get a full list of backwards compatibility changes in Flex 4 that support the use of the -compatibility-version argument, see the backwards compatibility document.

JOAN LAFFERTY
Joan Lafferty is the Flex SDK Quality Lead. She has worked on the quality of the Flex framework for more than four years. Before Flex, Joan worked in Quality Engineering at Macromedia on the product Central. Joan has tested most of the Managers for the framework, itemRenderers, CSS capabilities, the Marshall Plan, and a number of the components and containers. i s e m e n t

Note

You cannot selectively keep a subset of the Flex 4 behavioral changes when invoking Flex 3 compatibility. If you compile with the argument -compatibilityversion=3.0.0, you will get all of the Flex 3 behavior described in the documentation.
a d v e r t

Design, Technology and Cool Shit @ FITC Amsterdam 2012

FITC Amsterdam 2012 is host to more, better and different topics in design, technology and cool shit than ever before! Covering HTML5, Kinect hacking, jQuery, Unity, plus over 50 other topics, FITC Amsterdam delivers. Featuring the best and brightest in the digital space including Hoogerbrugge, Lee Brimelow, Golan Levin, Grant Skinner, Andreas Mller and many more, FITC Amsterdam showcases work which is shaping the future of the digital interactive industry. The combination of unbelievable international presenters, incredible networking opportunities and the infamous FITC parties, all with the amazing backdrop of the city of Amsterdam, creates a stage for the unexpected. FITC Amsterdam has a history of selling out and 2012 is on track to as well, so register early to reserve your spot! For more information visit www.fitc.ca/amsterdam

01/2012 (31)

29

BLACKBERRY TABLET OS AND APPLE IOS

Mobile Development
using Adobe Flex 4.5 SDK and Flash Builder 4.5
This article has been updated to include information about the BlackBerry Tablet OS and Apple iOS support added in the Flex 4.5.1 and Flash Builder 4.5.1 updates.
What you will learn
which of the new features are down to the Flex 4.5 SDK and which ones are down to the Flash Builder 4.5 update

What you should know

The article mentions you should develop in 160DPI.

ver since we first introduced Flex and Flash Builder, our core goal has been to provide a highly productive way to create rich applications across multiple platforms. Starting with Flash Player in the browser, and then with Adobe AIR on the desktop, Flex and Flash Builder have enabled developers to build applications that run across Windows, Mac OS, and Linux. With the Adobe Flex 4.5 SDK and Flash Builder 4.5 releases, Adobe is bringing the Flex SDK and Flash Builder to touchscreen smartphones and tablets as well. Leveraging the Adobe AIR runtime, you can now develop mobile ActionScript and Flex applications for Google Android, Apple iOS, and BlackBerry Tablet OS with the same ease and quality as on desktop platforms.

Adobe AIR runtime for mobile devices. By focusing on AIR, Flex can take full advantage of the integration AIR provides with each mobile platform, such as the ability to handle hardware back and menu buttons and to access local storage. AIR for mobile devices allows developers to create applications that can be deployed (and, if desired, sold) the same way as native applications on each platform. This means that applications built with AIR can be posted to the Android Market, the iOS App Store, and BlackBerry App World. For more information on AIR for Mobile, see the Adobe AIR Developer Center.

The framework: Adobe Flex 4.5 SDK

Overview of mobile development with Flex

The initial release of mobile development with Flex involves three components: Runtime: Adobe AIR on mobile devices Framework: Adobe Flex 4.5 SDK Development environment: Adobe Flash Builder 4.5

The runtime: Adobe AIR on mobile devices

The initial versions of the mobile development features in the Flex SDK and Flash Builder are targeted at creating standalone installed applications using the

Building on top of the core runtime APIs provided by Flash Player and AIR, the Flex SDK provides a robust and productive framework for building application UI and connecting to server-side data. Flex includes a rich set of built-in UI components, data access components and data binding, declarative UI creation through MXML, dynamic layout, and an extensible component architecture. The mobile features in Adobe Flex 4.5 SDK build on these core Flex features in two ways. First, the existing components and their skins have been optimized and extended to be usable out-of-the-box on touchscreen devices. Second, new components have been added that encapsulate common application design patterns specific to smartphones. These additions to the

30

01/2012 (31)

BLACKBERRY TABLET OS AND APPLE IOS

framework are described in the section Developing mobile applications with Flex SDK 4.5 below.

Developing mobile applications with Flex 4.5 SDK

The development environment: Adobe Flash Builder 4.5

Finally, the 4.5 release of the Flash Builder IDE brings a productive design/build/debug workflow to mobile development. From project creation to visual layout to one-click debugging and deployment on devices, the aim of the mobile features in Flash Builder 4.5 is to make it just as easy to develop an ActionScript- or Flexbased mobile application as it is to develop a desktop or web application. For more detail, see Streamlining the mobile workflow with Flash Builder 4.5 below.

In order to address the design and development challenges listed above, the new mobile development features in Flex 4.5 augment the core features of the Flex SDK with skins and components that are optimized for mobile design and implementation patterns.

Mobile-ready core components

Considerations for mobile design and development

Applications for mobile touchscreen devices differ from desktop and web applications in several important ways: In order to be easily manipulated by touch input, components must generally have larger hit areas than in desktop-oriented applications. This is especially true because the pixel density of mobile device screens is much higher than that of desktop monitors. The interaction patterns for actions like scrolling are different on touchscreen devices. Because of the limited screen real estate, applications on smaller devices like smartphones need to be designed differently from desktop applications, with only a small amount of UI on the screen at a given time. Additionally, UI designs need to take into account differences in screen resolution and pixel density across devices. While mobile devices are becoming more and more capable, their CPU and GPU performance is still much more limited than their desktop counterparts. Different platforms have different hardware capabilities and UI conventions. For example, Android smartphones typically have a hardware Back button, whereas iOS devices do not. Due to the limited memory available on mobile devices, applications need to be careful to conserve memory, and need to be aware that they can be quit and restarted at any time by the operating system.

In Flex 4.5, weve taken a few steps to ensure that core Flex components work well on touchscreen devices. For simple components like Button, CheckBox, and TextInput, weve provided a mobile theme that contains skins that are appropriately sized for touch input. Because of the flexibility of the Spark component architecture introduced in Flex 4, we were able to do this without modifying the core component code. Additionally, as described in the performance section below, the mobile skins we provide are built in ActionScript for optimal performance. Figure 1 shows some of the mobile skins provided in Flex 4.5. Of course, you can leverage the same Spark architecture, styling and skinning the components in mobile applications in order to customize the look of the components to fit your branding and design. For more complex components, notably Scroller and List, weve added functionality to the core component to enable touch-and-throw scrolling, with bounce and

As a result, building an application for a mobile device is not simply a matter of taking a desktop application and scaling it down to a different screen size. Our goal is to make it so that developers can easily craft separate user interfaces appropriate for each form factor, while sharing underlying model and data access code between mobile- and desktop-oriented projects to minimize redundant development effort.

Figure 1. Some of the mobile component skins in Flex 4.5

32

01/2012 (31)

Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5

Table 1. Mobile-ready components in Flex 4.5

Controls

BusyIndicator (new component) Button ButtonBar CheckBox HSlider Image (BitmapImage is also supported) Label List (supports touch scrolling, includes scroll indicator) RadioButton / RadioButtonGroup TextArea TextInput DataGroup Group HGroup Scroller (supports touch scrolling, includes scroll indicator) Spacer TileGroup VGroup All

Layout

make it easy to build applications that follow standard design patterns for touchscreen smartphones. Because of the limited screen real estate, applications on these devices are typically structured as a series of views, each of which is focused on displaying a single list of data or details about a single data item. The user navigates between views by tapping on data items or other controls, and goes back by either using on-screen UI or a hardware Back button. Additional actions can be provided through on-screen UI or a menu overlay. Figure 2 illustrates this application design pattern. Weve added the following components to Flex in order to support this pattern.

View

Charts

pull effects at the ends of the scroll. Touch scrolling is enabled by setting the new interactionMode style on Scroller and List to touch. If youre using the mobile theme, this style is automatically set on all appropriate components for you, so you dont need to do anything to enable touch interaction. The initial version of the mobile theme will not have touch-enabled skins for all existing Spark components. Table 1 lists the set of components that are mobile-ready in Flex 4.5; well continue to make more components mobile-ready in subsequent releases.

Standard mobile application structure

In addition to skinning and extending the core components to work well on mobile devices, Flex 4.5 contains a set of new application components specifically designed to

The View component represents a single screen of UI. Typically, youll create custom MXML or ActionScript components based on View, and add whatever components you want to appear within the content. For example, a shopping cart application might have a home view that displays a list of featured items and categories. Tapping on a category navigates to a product list view displaying items in a given category, and tapping on a product navigates to a product detail view showing information about the product. Each View has a data property that specifies the data that should appear in that view. Views can pass data to each other as the user navigates around the application. Additionally, the data property enables the ViewNavigator and ViewNavigatorApplication components, described below, to provide features for persisting data both in memory and between runs of the application. When the user rotates the screen between portrait and landscape orientations, the View is automatically resized by default to the appropriate aspect ratio. As a result, if you use the standard Flex layout managers,

Figure 2. Standard application structure for touchscreen smartphones

01/2012 (31)

33

BLACKBERRY TABLET OS AND APPLE IOS

your application can handle orientation changes with little extra work on your part. For finer-grained control, you can use the Flex states mechanism to define portrait and landscape states that specify exactly how the View should look in each state.

ActionBar

ActionBar is a standard header component that appears above the Views in the application. It typically contains a title and one or more buttons that perform actions like refreshing the current view or creating a new item. You can fill the ActionBar with controls that are persistent across the entire application, or customize it for each individual view. For example, on the home screen of an application, you might put a search box in the ActionBar.

ViewMenu

ViewMenu provides a standard control that pops up from the bottom of the screen when the user presses the menu button on a device. In any view, you can add a viewMenuItems property containing a set of menu items, each of which specifies an icon, a label, and a click handler. ViewMenu takes care of showing and hiding itself and laying out the menu items appropriately.

ViewNavigator

lication. ViewNavigatorApplication also provides default behavior for the hardware back button, mapping it to ViewNavigators popView() method, and handles device orientation change events by passing them to the ViewNavigator and its current view. Additionally, ViewNavigatorApplication provides a way to persist your applications view state and data when the application quits, so that the next time it starts, it can restore itself with the same current view and view history. This makes interruptions in your applications lifecycle completely transparent to the user especially important on mobile devices, where the operating system can interrupt or kill an application at any time. Of course, youre free to create an application completely from scratch using the standard Spark Application class as well, and use the core mobile components and skins without using the View navigation pattern. For example, if youre writing a tablet application, you likely wont be structuring your entire application around small views; tablets have more screen real estate to take advantage of, and tablet applications are less navigation-heavy. In that case, youll want to start from standard Spark Application rather than ViewNavigatorApplication, but still use the mobile theme in order to get the benefit of the mobileoptimized components and skins.

ViewNavigator manages the ActionBar and the set of Views in your application using a stack-based history mechanism. When your application starts, the ViewNavigator shows the view specified by its firstView property. After that, you can call pushView() to navigate to a new view in response to user input, such as tapping on a list item, and call popView() to return to the previous view. Flex provides a set of optimized view transitions out of the box to help the user maintain context while navigating around the application. To conserve memory, ViewNavigator ensures that only one view is in memory at a given time by default. However, it maintains the data for previous views in the stack that have been disposed, so that when the user navigates back to a previous view, it can be reinstantiated with the appropriate data. In addition to the standard ViewNavigator, we also provide a TabbedViewNavigator that allows you to switch between different stacks of views by tapping on tabs at the bottom.

Performance optimizations

Because the Flex SDK supports both mobile and desktop use cases in the same framework, all the functionality of Flex is available to you when building mobile applications. However, due to performance constraints on mobile devices, there are certain features you will need to be careful of when building mobile Flex applications, and other features we recommend you avoid entirely. Here are a few best practices to keep in mind. Use ActionScript rather than MXML to build item renderers. Because list scrolling is highly performance-sensitive, its important to create item renderers that are as efficient as possible. To aid in creating item renderers for mobile projects, Flex provides the LabelItemRenderer and IconItemRenderer classes. These item renderers are built in ActionScript, and IconItemRenderer can be configured to show one or two text items, an optional icon or image on the left, and an optional decorator on the right. If this doesnt meet your needs, you can subclass one of these classes instead, adding controls and laying them out in ActionScript yourself. Where possible, use ActionScript and compiled FXG graphics or bitmaps for component skins rather than MXML and runtime MXML graphics.

ViewNavigatorApplication

ViewNavigatorApplication wraps all this functionality together into a convenient application class. By basing your application on ViewNavigatorApplication, you automatically get a ViewNavigator for managing your views. For tabbed applications, you can use the analogous application class, TabbedViewNavigatorApp

34

01/2012 (31)

Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5

Similar to item renderers, its best to ensure that your component skins are lightweight. The skins we provide in the mobile theme in Flex are all built directly in ActionScript, and you can subclass them in order to substitute your own FXG graphics or change the layout. That said, the performance issues with MXML skins are not as noticeable as with item renderers, so using a few MXML skins here and there throughout your application should not significantly impact performance. Charts are supported in mobile projects, but other MX components are not. We dont recommend using MX components in mobile projects; use the Spark components instead. The one exception is the charting components, which are usable in mobile projects if care is taken to avoid displaying or animating too much data at once. In general, use Spark Label, TextInput and TextArea for text rather than RichText and RichTextEditable. For most UI text, we recommend using TextFieldbased text for maximum performance, and the mobile skins and item renderers provided in the Flex SDK follow this guideline. Its possible to use the TLF-based RichText for cases where you need to display rich content, but we dont recommend using it for the bulk of your UI elements in mobile projects.

Adapting mobile applications to multiple pixel densities

Mobile devices come in a wide range of form factors, from phones with small screens to large-screen tablets. Simple variations in screen size and aspect ratio can be handled easily using the standard dynamic layout components, such as Group, VGroup, and HGroup, that are provided in Flex. However, devices also vary in pixel density that is, the number of pixels in a given inch of the screen. For example, most tablets and some phones have a pixel density of 160 dots per inch (DPI), while other phones have pixel densities of 240 or 320 DPI. Variations in pixel density affect the visual size of individual elements in your user interface: all other things being equal, controls with a given pixel size will appear physically smaller on devices with higher pixel density. This is especially problematic for touchscreen interfaces, where controls need to be physically large enough to be targeted with a finger. Flex 4.5 provides several new features to help developers make their applications work well across multiple densities.

Automatic scaling. Developers can choose to specify a target DPI for their application by setting the applicationDPI property on the application. When this is explicitly set, developers should set up their skins and layout as if they were running on a device of the given DPI. At runtime, if the device has a different DPI from the specified target DPI, Flex will automatically scale the entire application to preserve the approximate physical size of the application and its controls. For example, if an application is targeted at 160 DPI, it will automatically scale by 1.5x on a 240 DPI device. If you choose not to use this feature, youll need to make sure your custom skins and view layouts adapt properly to different pixel densities at runtime. Note that if you use automatic scaling, we recommend that you set applicationDPI to the lowest DPI you wish to support, and allow the application to scale up on devices with higher DPIs. This is because vector artwork tends to look better and be positioned more consistently when scaled upwards rather than downwards. For bitmaps, youll need to take advantage of the multi-DPI bitmap support described below. DPI-aware mobile skins. The built-in skins in the mobile theme that ships with Flex 4.5 automatically adapt to different DPIs. If youre using automatic scaling, the built-in skins will automatically configure themselves for your specified applicationDPI, and will then be scaled up by the automatic scaling feature. If youre not using automatic scaling, then the skins will adapt themselves to the actual runtime DPI of the device. By examining how the built-in skins work, you can follow the same pattern when you create your own custom skins. Multi-DPI bitmaps. If you have any bitmap artwork in your application, youll need to provide multiple resolutions of each bitmap for different DPIs in order to avoid scaling artifacts. To do so, you can take advantage of the MultiDPIBitmapSource class, which allows you to specify different bitmap files to be used at different DPIs for a given image. This class can be passed as the source property for components that display images, such as the BitmapImage or Image components, or as the icon property for Button. As with the mobile skins, these bitmaps are properly handled by the framework regardless of whether youre using automatic scaling, so that youre always seeing the appropriate-resolution bitmap for a given device DPI. Per-DPI CSS rules. Flex 4.5 adds support for the CSS @media syntax to allow you to specify CSS rules that

Figure 3. Design mode controls for mobile device congurations

01/2012 (31)

35

BLACKBERRY TABLET OS AND APPLE IOS

should only apply at a given DPI; the built-in skins take advantage of this to adapt font sizes and paddings for different DPIs. You can also specify per-platform CSS rules using this syntax.

Streamlining the mobile workflow with Flash Builder 4.5

Adapting mobile applications to different platforms

In addition to handling different form factors, your application needs to account for different platform UI conventions. In general, the mobile Flex component skins and behaviors are intended to work well across different platforms. However, there are a few key platform differences that you will likely want to take into account in your UI: Because iOS and BlackBerry Tablet OS devices do not have a hardware back button, you will need to provide an on-screen back button in your views on those platforms. The visual design of the action bar on iOS is noticeably different from other platforms; the title is centered, and the buttons have a beveled rather than flat look.

Building on the mobile development features in Adobe Flex SDK 4.5, Flash Builder 4.5, extends the existing ActionScript and Flex development workflows to mobile development, from project creation through packaging the final application.

Managing mobile projects

In order to handle these kinds of platform differences, you can leverage the Flex states feature. For example, you can create states in a view for iOS, Android, and BlackBerry Tablet OS, and specify that the Back button should be visible in the iOS and BlackBerry Tablet OS states. You can also extend this strategy to take into account other UI variations, such as adapting your layout between phone and tablet form factors. You can also take advantage of the CSS @media syntax, mentioned above, to provide per-platform CSS rules as well, in order to further customize the look and feel of your application on each platform.

Flash Builder 4.5 provides two new project types: ActionScript Mobile Project and Flex Mobile Project. Creating an ActionScript Mobile Project gives you a completely clean slate on which to write your application in pure ActionScript code. Conversely, creating a Flex Mobile Project gives you access to the Flex framework, including the mobile features described above, as well as the Flex-related features of Flash Builder, such as Design mode and the data connectivity features introduced in Flash Builder 4. When you create a project, you can specify which mobile platforms you want to target. By default, your project will target all supported platforms (currently Android, iOS, and BlackBerry Tablet OS). If youre creating applications for multiple screens, such as a desktop/web application and a mobile application, your typical project structure will consist of an ordinary Flex or ActionScript project containing your desktop/web UI, a mobile Flex or ActionScript project containing your mobile UI, and a library project containing model and data access code that is shared between the two applications.

Designing views

Running on AIR

Finally, its important to realize that in addition to all the mobile Flex components listed above, you can also directly take advantage of all the APIs that are available in AIR on mobile devicesgeolocation, accelerometer, camera integration, and so forth. While some of these features are not exposed as Flex components, they are easy to access directly using ActionScript. For more information on developing using the APIs provided by AIR on mobile devices, see the documentation for AIR on mobile devices.

Figure 4. Dropping a button into the ActionBar using Design mode

For mobile Flex projects, weve extended Design mode in two ways. First, weve added controls to the Design toolbar (see Figure 3) that allow you to preview how the content of a view will look at different device screen sizes and in different orientations. You can add more device configurations yourself in Preferences > Flash Builder > Device Configurations. Second, weve made it so that Design mode works well with the standard view navigation structure described above. When you edit a View in a project based on ViewNavigatorApplication, you see the Views content in the context of the overall application structure so, for example, you see the ActionBar above the View, and the ActionBar is filled with the content appropriate to that View. You can drag and drop controls into the ActionBar just like any other container in order to customize it for a particular View. Figure 4 shows dropping a button into the actionContent area on the right end of the ActionBar. Design mode also correctly previews the effects of pixel density on your application. For example, if your application has applicationDPI set to 160, and

36

01/2012 (31)

Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5

you choose a preview device configured for 240 DPI, Design mode will show the application scaled by 1.5x.

Running and debugging on the desktop and on device

When it comes time to test or debug your application, you have two options. For quick testing and debugging, you can launch and debug the application on the desktop using the AIR Debug Launcher (ADL). For greater fidelity, you can also launch and debug the application directly on a physical device. In either case, you can use the full array of Flash Builders debugging capabilities, including setting breakpoints and examining the applications state using the Variables and Expressions panels. When running or debugging on a device, there are a few key points you need to be aware of: If your application accesses data, you must deploy your data services to a server that can be accessed from the device via WiFi or the cell network; if youve been testing your application against localhost on the desktop, it wont work on the device, since localhost for the device is the device itself. In order to run, debug or deploy an ActionScript mobile project on a physical iOS device, you will need to obtain a provisioning profile and certificate from Apple. Also, youll need to manually deploy the application on your device using iTunes, and launch it on the device itself. For more information on packaging for iOS, see Packaging applications for deployment devices. Profiling is currently not supported on devices, only on the desktop. For more information on packaging for iOS, see Using Flash Builder 4.5 to package applications for Apple iOS devices.

application, or on BlackBerry Tablet OS, where the runtime is built into the operating system. Depending on which platform youre packaging for, you might need to follow specific procedures in order to package an application for final deployment. For more information on packaging for each platform, see: Using Flash Builder 4.5 to package applications for Google Android devices Using Flash Builder 4.5 to package applications for Apple iOS Using Flash Builder 4.5 to package applications for BlackBerry Tablet OS devices

Where to go from here

Were excited to be able to bring the Flex SDK and Flash Builder to mobile development. In the meantime, though, we hope youll jump into building great mobile applications with Flash Builder 4.5 and Flex 4.5 SDK. You can get started quickly by installing the Flash Builder 4.5 trial and trying out the following tutorials: Hello World: Build a mobile app in five minutes Twitter Trends: Build your first mobile app Flex Test Drive for Mobile

And, of course, wed love to hear your questions and feedback on what weve done so far: Flash Builder forum Flex forum

Packaging applications for deployment

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.

Finally, when your application is finished and ready to go out to the world, you can use the Export Release Build process just as you would to prepare desktop and web applications for deployment. The main difference is that when you export a release build of a mobile project, Flash Builder packages the build as a native installer, not as an .air file. For example, on Android, Flash Builder produces an .apk file that looks the same as a native Android application package. This enables AIR-based applications to be distributed and sold the same way as native applications on each platform, as mentioned above. On Android, users who do not already have the AIR runtime installed will be prompted to download and install it from the Android Market the first time they run any AIR application. This step is not necessary on iOS, where the runtime is bundled into the packaged

NARCISO NJ JARAMILLO
Narciso (nj) Jaramillo is a Principal Scientist working on design and development tools for the Flash Platform. At Adobe, hes worked in various capacities as a UI designer, developer, and virtual product manager for Flash Builder, Flash Catalyst, and mobile Flex. nj started at Macromedia in 1997, helping lead design and development for the rst few versions of Dreamweaver and Contribute, and contributing to the design of the cross-product Macromedia UI. In his spare time, nj enjoys playing jazz piano and video games (but not at the same time). You can read more at his tfully-updated blog, much ado about something, or follow him as @rictus on Twitter.

01/2012 (31)

37

BOOK REVIEW

Developing Flex 4 Components:

Using ActionScript & MXML to Extend Flex and AIR Applications
experience and best practices in each section that is covered, which makes this a very valuable material to have as part of our development library. Jones has 15 years of experience on the platform, and he shows it through the development of solutions and practical tips to those every days problems that we all share. The content is very well organized in 3 big parts: The first part is dedicated to the complete understanding of Flex and its installation, covering the component philosophy that goes behind the scenes. Jones covers the SDK, the differences between Flash Development versus Flash Authoring and the absence of the Symbol Library that graphic designers are used to in the Flash Professional environment. He also explains the components and how each family of components is layered out and how they are architected. The second part is dedicated to developing our own components, slowly walking us from the very basics to incorporating states, effects and transitions, including their orchestration, and the use of metadata. Later on, he guides us through

lex framework comprises a set of building blocks that allows us to create powerful and robust applications. These building blocks are the components developed mainly by the dedicated team of developers from Adobe that now are leading this effort on an open source environment since Adobes latest announcements. The power behind Flex is based mainly on a component approach to building easily and quickly rich internet applications which are immersive and standardized. Thanks to this approach, we are able to finish in short times the most demanding solutions. There are many professional components that are part of the Flex platform, but the real power comes out of developing our own pieces to extend the already rich framework and create our own in house platform. This is where this book comes handy. Mike Jones, the author, rides us through this vastly unexplored region of the Flex Framework, and helps demystify the work pipeline to create and render solidly constructed components. All this is done with Jones personal share of his own

Figure 1. Detailed diagrams helps us understand better the topics

38

01/2012 (31)

Book Review

the correct use of events and data manipulation, as well as styles and CSS, and ending with Flash Professional component creation. The third and last part is dedicated to distribution of our components. This is a very important part of the book. We already mentioned that Flex has gone open source completely and the creation of our Flex Library and its tools (like Flash Builder) will help us share and deliver our components. Some important elements that Jones teaches us about are ASDoc code documentation and useful resources, since this book is just the start of an interesting travel.

This book is focused on a dark area that is not covered by other authors, or articles found on the web. The development and complete lifecycle of components in Flex is something that is not mentioned most of the time. The section dedicated to explain components, their organization and internal structure and logic is a very large one. I like how the author gives enough explanation and makes things seem logical and simple. And this helps to build a very solid foundation before even starting with the lessons dedicated to teach how to create a component. The chapter dedicated to the metadata brought the light upon this topic for me. Jones helped me understand in a better manner the inner workings related to this language characteristic which always seemed alien to me. Now I have grabbed a better sense of the usefulness of them. These are very useful to communicate and expose more information from the components that we create. This way, our components are better integrated into the Flex environment and gain a more professional feeling when they are distributed to others.

The data manipulation section is not very large, but it explains the basic operations to be done by our components. But, anyway, data is not the central topic and it is covered in a more extended manner by many other books. Skinning and styling chapter covers the FXG and MXMLG approaches, and Jones makes sure that we get our quota of skin building in a programmatically way. Although the integration with other products from the Adobe family are also covered, they are covered but in a lighter way. Part III is the most interesting one and closes the lifecycle of the components with the distribution stage. By showing us how to pack and integrate our components to the Flash Builder IDE, we are provided with a very powerful knowledge that will set us aside in professional component creation. Many programmers will adore our components if we make them easy to configure and integrate into their projects. And finally, Jones shows us the importance of documenting our code, and gives us very insightful tips and lessons to create a much needed but many times forgotten comments. If you are to code and later maintain components, you should help yourself by having a very well commented code. But most of the time, this can take a lot of our time. So the author gives us a help, by showing us how to automate such a painful task.

My opinion

About the author and the collection

Mike Jones, the author of the book, is a Flash old timer. He has been with Flash since the Futurewave Splash era when he was still at university. That is a long way to go, especially for many of the new developers. Since then, he has walked a long road and is now a recognized Platform Evangelist at Adobe, where Flex, AIR and Flash are his dogma. He can be found at his blog, where he writes very interesting articles (http://blog.ashgen.com/). As passionate as he is, there was only one way to continue delivering his knowledge and passion, and this was a book. Addison-Wesley was an independent book publisher which is now part of Pearson Education. The Developers Library is a collection conformed of practical, high-quality programming references for experienced developers that provide references and tutorials on programming languages and technologies used on a daily basis. The authors are selected because of their exceptionally skills at organizing and presenting information in a useful way to programmers.

This book is not for the beginner programmer, and it is set clearly at the beginning by the author, but it is a very friendly reading to the advanced and expert programmer. There are some very useful tips and the author makes a great effort to make a clear explanation of every bit that is mentioned. The style is a light informal one which helps with the technical concepts and makes every topic seem as a simple one. This book will really help you learn new tricks and techniques and will add to your toolbox. The component architecture is a very important piece of knowledge that every Flex programmer should have to know to reach new projects and bring his Flex skills to the next level.

IZCATL ARMANDO ESTANOL FUENTES

Izcatl Armando Estanol Fuentes is labouring at Universidad La Salle, Mxico as the IT Service Delivery Chief. He is passionate about his family, 3D and Flash animation, lm making and technologies applied to education. You can nd him around having a good time with his family, researching or making VFX for BYP UK. Contact: iaef@ulsa.mx

01/2012 (31)

39

BOOK REVIEW

Pro Android Flash

Authors: Dean Iverson, Oswald Campesato, Paul Trani Publisher: Apress. ISBN: 978-1-4302-3231-5 Language: English Pages: 464 Pages Website: http://www.apress.com/9781430232315

1. Introducing Mobile Flash 2. Targeting Applications for the Mobile Prole 3. Building Flash and Flex Applications for Android 4. Graphics and Animation 5. Application Deployment and Publication 6. Adobe AIR and Native Android Apps 7. Taking Advantage of Hardware Inputs 8. Rich Media Integration 9. The Designer-Developer Workow 10. Performance Tuning 11. Beyond Mobile: Tablets and TV

m not sure about you but personally if I were to develop an application (not a game) using flash platform, Ill definitely opt for Flash Builder. I was literally infuriated studying all those fatuous flex mobile books composed within a day to cover development applications with flex 4.5 because no one will be able to develop and publish a hello world application with the help of such inane books. But the moment I started to read Pro Android Flash, I fell in love with this book because of its appealing contents. Though this book needs no introductions and recommendations but here is it anyways. First chapter is an introduction to Adobe Flash platform and its coverage and to some extent the vision behind it. It also outlines how to create, deploy and debug your first project using Flash Professional, Flash Builder and Commandline depending on your choice of tool. Going mobile for an experienced Flash/Flex developer is not just simple compile to [platform] but its a whole new world with some really annoying challenges but then challenges are something that makes our life

interesting?. So second chapters deals with these new challenges and exceptions such as screen resolutions, densities, orientation and multitouch gestures. Third chapters summarizes about almost all the flex mobile controls from most important ViewNavigator to as simple as busy indicator. These three chapters are all you need to create some amazing mobile apps. There are dozen books on Mobile development using Flex but none of them is as good and sufficient as these first three chapters alone. So now you might can understand what incredible knowledge awaits ahead to fulfill and quench your thirst. A visually appealing application is as important as the underlying functionality. Users take interest in those applications that look more attractive than its competitors. Fourth chapter is about all those options that helps us to design visually rich mobile applications from simple 2d shapes to using charting controls. There is also guidance and best practices available to develop high performance applications while utilizing all the visual features.

40

01/2012 (31)

Book Review

Fifth chapter takes us through all the hassle of testing, packaging, deploying and publishing to major android market places including Amazon App Store. Next two chapters focus on device specific topics such as SQLite, Camera, Accelerometer etc and more importantly how to use android native features which are not possible solely with Adobe AIR. Eighth chapter is what made flash the best choice to avail. Yeah you guessed it right; its audio/video. Flash is renowned for its rich media support and this chapter covers everything from recording to playing audio/video contents with the right tool. The Designer-Developer Workflow chapter interests both multiuser team and individual developer who design and develop application. This is exactly where you learn the best way to work effectively with your designers and developers and even helps sharpen your own skills if you are dealing with both design & develop aspects. Creating high performance mobile application is undeniably the most important challenge for flash developers and there is a whole chapter that discusses all those issues and problems that can occur along with their remedies.
a d v e r t

Last chapter highlights how to port your mobile application for other mobile platforms and tv screens and I believe that even if you are developing for some other platform like iOS for instance then this book is a must have for you because almost all rules are applicable over there too. Even though this book is for Professional Developers or Android platform; I highly; I repeat I highly; recommend it for everyone; whether you are a fresh or an experienced developer; who wants to develop and see his applications working successfully on the platform(s).

ALI RAZA
Senior Developer 5amily Ltd Microsoft Certied Trainer, Microsoft Certied Professional Developer Adobe Certied Instructor, Adobe Certied Master, Adobe Certied Specialist Sun Certied Java Programmer, Zend Certied Engineer www.manofspirit.com i s e m e n t

REVIEW

FlashMoto Review Flash CMS

If you have ever used WordPress as a CMS, then I am sure you are going to love this new flash CMS that is Flashmoto. Flashmoto is your ideal solution for building your own flash sites without having much knowledge of coding, or buying the expensive Adobe Flash application to build your site.

am extremely excited today as I was chosen to test drive Flashmoto. In this Flashmoto review, I will state my honest opinion on the program, and also give some positive and negative features of this CMS.

drag and drop features you want, which color you want for your texture, or what videos you want to appear on your homepage.

Introduction

Features

If you are unfamiliar with flash based websites, they are visually beautiful, and create a rich-filled experience for a visitor. Examples of companies using flash based websites include Sony, CarlsJr, Hbo, etc. After purchasing your Flashmoto license, or trying out the demo, you will be impressed by the simplicity of using Flashmoto. It is suited for beginners and experts alike to create your own flash-based websites, because of their extensive customization features. You do not need to worry about code, and instead

Some features I will briefly mention show how robust and simple Flashmoto is.

No installation required! (Update the files and your ready to go) Not even wordpress is that simple, although it is just a 5 minute install! WYSIWYG Editor (A convenient WYSIWYG Editor gives you an ability to visualize what you are producing) Video, MP3 players Component (You can easily embed videos on your site, and also play its own music) SEO optimized (Although flash sites are notoriously criticized in many blogs and forums or not ranking well in search engines, Flashmoto has a built in SEO feature that will help you rank in search engines better)

42

01/2012 (31)

FlashMoto Review | Flash CMS

Custom modules and widgets integration (Modules allow you to customize your website visually, adding content boxes and other elements anywhere on your site)

Flash Templates, where they have a variety of themes, from $100-250 range.

Conclusion

When first setting up and configuring your site, you will be greeted by a very friendly admin panel, and a help page that link to very comprehensive and useful tutorials on making your first website. To the left of your admin panel is the basic features you can attempt to add toy our site, and on the left is where your sites really begins to take form. You can customize your site in every way possible without coding, changing the font, and position on the page, to the effects of the element. You can double click an item to get more options on customizing. They also having a fabulous image and video manger, where you can easily upload new photos and videos toy our site. If you are having difficulty in creating your site, or do not have the time or motivation to create your own site, they have a variety of ready made Flash CMS templates that will allow you to create your site that faster. The templates are allow 100% customizable, and are each uniquely stunning. They have a section on their site ,

Flashmoto is a very comprehensive and feature filled flash CMS. Although I personally am not a fan of creating flash websites, this would be the program I would use to create my own, with their easy to use admin panel, and amazing amounts of customizable options. Flashmoto designed and created a user friendly website builder, that even a newbie can pick up this product and begin learning to create his own site. Some improvements for this flash cms could include offering more competitive prices, as it is $200 for one license for one domain. If you have a lot of projects that you want to create using a flash cms, this is going to put you in the whole for a lot of money. Overall, I was impressed by the demo I experienced and I am sure you will too when you try it out. I hope you enjoyed this flashmoto review.

DZINERFUSION.COM