SlideShare a Scribd company logo
1 of 38
����������������
��������������������������������������������������
������������������������������������
����������������������������������������������������������������������������������
��� ���� ����������� ����� ������� ������� �������� ���� ������� ����������� ����
����� ������������� �������� ������������ ���� �������� �������������� ��������������
���������������������������������������������
����������������������������������������������������������������������������
����������������������������������������������������������������������������������
������������������������������������������������������������������������������
����������������������������������������������������������������������
��������������
�����������������������
�����������������������������������������������������������������������������
����������������������������������������������������������������������������������
������������������������������������������������������������������������������
��������������������������������������������������������������������������������
�������������������������������������������������������������������������������
��������������������������������������������������������
��������������������
���������������������������������������������������������������������������
����������������������������������������������������������������������������
���������������������������������������������������������������������������������
���������������������������������������������������������������������
�����������������
�������������������������������������������������������������������������
�������������������������������������������������������������������������������
�������� ����������� ������������ ������� ����������� ������������ ��������� ��� ����
����������������������������������������������������������������������������
���������������������������������������������������������������������������������
������������������
����� ������������������������������������
���������������������������������������������
4
05/2012 (35)
Dear Readers,
This month we want to share an issue devoted to Flex 4. There is a big portion of fresh articles waiting for you!
As you will see there is a lot of helpful information. You can read for example about Flash Professional CS6,
Flex & FXG, Flex & PHP and many more. After reading this issue you will be richer in knowledge and new
skills.
I’m sure that everyone will find something for himself/herself!
Let’s start from the article about ‘Generating Sprite Sheets’ by Christopher Caleb.
As he wrote, Flash Professional CS6 makes it incredibly easy to create sprite sheets while using the
design and animation workflow that you’re already familiar with. With very little effort you’re able to create a
compact sprite sheet that can be used in ActionScript projects or even other languages such as Java Script
and Objective-C.
Ralph Hauwert in his article describes Flash Premium Features and Unity Content.
Adobe has recently announced “Premium Features for Gaming” for the Flash Platform which initially
includes only Fast Memory Opcodes and Stage3D when used simultaneously. They have also announced a
required 9% revenue share on Premium Features Licensed content that exceeds $50k in revenue.
The next articles written by Harit Kothari is mainly about FXG (SVG implementation). It is not really a
replacement for all scenarios. It isn’t really replacement to bitmapdata. Likewise skinned UIComponent, you
really do not need bitmapdata for its weight and scalability issues. SVG manipulation is much easier and clean
in terms of rendering, and that’s why Flex component, with its FXG skin looks beautiful in any size!
From the article written by Sandeep Sharma you can learn that HTML5 fight with Flex is on: Flex
SDK and Compiler open sourced MPL license, HTML 5 open standard WHATWG license, new 3d –
graphics,(transformation scene, camera, lighting, change pixel data, effects) Real-time connection(HTML5
has websocket vs Flex has flash.net.socket), Drag and Drop (drag and drop across application, cross
document, clipboard) with API’s flash. desktop.clipboard, Events.NativeDragevents, Flash.desktop.Transferabl
eData Vs HTML5 DataTransfer and DragEvent.
However, the article about Flash & PHP by Jigar Oza talks that as per the speed of the response is
concerned, Remoting is the fastest method followed by HTTP service and Web Service. So we can say that
Web Service is the slowest method for Flex and PHP connectivity.
In the last but not least article, Daniel Abu wrote that he is still going to use Flex in the next couple of years
as it allows him to create enterprise level desktop and mobile applications in a shorter time than any existing
technology.
Nevertheless, he is going to continue expanding his knowledge with new HTML5 frameworks as they
come out.
Find out something for yourself and enjoy reading!
Paulina Śliwka & FFD Team
Managing: Paulina Śliwka
paulina.sliwka@software.com.pl
Proofreaders: Patrick French
Betatesters: r0mk1n.work@gmail.com
Marketing Director: Paulina Śliwka
paulina.sliwka@software.com.pl
Editor in Chief: Ewa Dudzic
DTP Team: Ireneusz Pogroszewski
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 D’Agostino
Games Section Editor: Chris Hughes
Contributing Editors: Pedro de La Rocque, Ali Raza, Csomák Gábor
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 Smith-
Kielland, Justus, Csomák Gábor, 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 program by
company.
Mathematical formulas created by Design Science MathType™
ATTENTION!
Distributing current or past issues of this magazine – without permission of the
publisher – is harmful activity and will result in judicial liability.
DISCLAIMER!
The techniques described in our articles may only be used in private, local networks. The edi-
tors hold no responsibility for misuse of the presented techniques or consequent data loss.
Editor’s Note
5
05/2011 (35)
CONTENTS
Creating Animations
06 Generating Sprite Sheets in Flash Professional
CS6
BY CHRISTOPHER CALEB
The domination of mobile devices and tablets has
brought about new challenges for developers and
designers. For animation, bitmaps are now preferred
above vector graphics, which typically require more
CPU resources. To improve the development workflow
and to maximize performance, bitmap sequences are
often packed into what is called a Sprite Sheet before
being used.
Unity Development Platform
14 Unity: Making (Flash) 3D Game Development
Easy and Fun
BY RALPH HAUWERT
As was revealed last year, and has been confirmed
again by Adobe in March, the list will be extended with
Flash, which carries an incredibly high global install
count. This is important to Unity Technologies as a
company that can offer its development community
another amazing option to be successful with the Flash
Platform.
Flex 4 and FXG
22 Flex 4 and FXG
BY HARIT KOTHARI
Flex application without real UI asset is like an amazing
structure of building, without walls and furnished box!
The core challenge is balancing UI and functionality. If
you provide rich UI, but weak functionality, it doesn’t
sustain long. In reverse, if you provide expected
functionality, but dull or default UI, it may give kind of
non touching feeling to user. Now the problem starts,
you provide good functionality, and equally good UI,
the application gives wow effect in demo, but in reality,
it slows down and consumes too much memory,
rendering being one of costly process!
Flex 4
28 Future of Flex & Flash : Gamification of ERP
enterprise software, Augmented Reality on
mobile apps, ipTV
BY SANDEEP SHARMA
Adobe outdoing competition for many years now has
system in place for bringing future like IPTV (http://
blogs.adobe.com/flashplatform/tag/iptv), mobile/tablet
OS interfaces,photo editorslike photoshop, Word
editors like Acrobat reader with compressed storage.
Adobe has company which have been working ahead
of time many years in many technology are like Acrobat
reader, Photoshop with image processing algorithm
implementations for naive users, for online picture
editor for image enhancements using image processing
algorithms (http://pixlr.com/editor/), Flex for AJAX/RIA.
Flex and PHP
32 Different ways of connecting Flex to PHP
BY JIGAR OZA
Flex as its name suggests is very flexible technology
framework. It can connect to almost all server side and
scripting languages to connect to database and do other
server stuffs. As it can connect to almost all languages,
it can be hosted on all kinds of server platforms.
The Future of Flex
34 What’s next for Flex? Will open sourcing it
breathe new life into it or has it been “left out to
die”?
BY DANIEL ABU
November 2011 will be a month long remembered
by Flash developers, Apart from announcing the
discontinuation of the Flash Player browser
plugin development for mobile devices, Adobe
announced its intention to donate the Flex
SDK to the Apache Software Foundation.
While the former, although perceived
by the tech community as the
demise of Flash, was seen by
many Flash developers as
a better use of Adobe
resources.
05/2012 (35)6
CREATING ANIMATIONS
T
he domination of mobile devices and tablets has
brought about new challenges for developers
and designers. For animation, bitmaps are now
preferred above vector graphics, which typically require
more CPU resources. To improve the development
workflow and to maximize performance, bitmap
sequences are often packed into what is called a Sprite
Sheet before being used.
One of the great new features of Flash Professional
CS6 is the ability to export your timeline animations
to a sprite sheet. Not only can sprite sheets be used
in Flash-based projects, they can also be applied to
a multitude of other technologies and frameworks.
Essentially, you can continue to use Flash Professional
as your animation tool, regardless of the development
language your project is targeting.
This tutorial will show you how Flash Professional
CS6 can be used to generate a sprite sheet from
several movie clip animations.
Getting Started
You’ll need Flash Professional CS6, a trial version
of which can be downloaded from www.adobe.com/
downloads.
For this tutorial, a FLA containing some animation has
already been prepared for you to work with. Download
it from www.yeahbutisitflash.com/downloads/sprite-
sheets-cs6-tut/monkey.fla and open it within Flash
Professional CS6.
Launching the Sprite Sheet Generator
Take a look at the FLA’s Library panel (Figure 1). There
you will see three movie clips named Dazed, Jump, and
Panic respectively. Collectively they represent a monkey
in various animation states for a fictional game.
Double-click the Jump movie clip to move into its
timeline. You’ll see that this particular clip is animated
Generating Sprite
Sheets
in Flash Professional CS6
Learn how to create and export a sprite sheet using Flash
Professional CS6.
What you will learn…
• How to place timeline animations within a sprite sheet
• How to manage the animations that appear within your sprite
sheet
• How to optimize the layout of a sprite sheet
What you should know…
• You should be comfortable working with Flash Professional
Figure 1. Movie clips within the library
Generating Sprite Sheets in Flash Professional CS6
05/2012 (35) 7
across three frames (Figure 2) and that the monkey is
built entirely from vector shapes. The other two movie
clips are constructed in a similar manner. Although
we’ll be exporting all the animation frames as bitmaps,
you’re still free to create your artwork using Flash
Professional’s familiar vector drawing tools.
When you’re generating a sprite sheet you need to
select a collection of clips whose frames you’d like
added to the sheet. Let’s add all three of our movie
clips to a sprite sheet. To do this, first click on the Dazed
movie clip within the library. Now hold the shift key
and click on the Panic movie clip. With all three clips
selected, right-click any of the clips from the library
and select Generate Sprite Sheet (Figure 3) from the
context menu.
Your sprite sheet will be generated and the Generate
Sprite Sheet panel will appear.
Viewing your Sprite Sheet
Within the panel you’ll be able to see the sprite sheet
that has been generated. It will contain a bitmap
representation of each frame of animation from
your three movie clips (Figure 4). Directly above the
sprite sheet are two tabs named Sprite Sheet and
Preview. For the time being, leave the Sprite Sheet
tab selected.
Given the sprite sheet’s fairly large dimensions you’ll
also likely see scroll bars allowing you to pan around
the sheet. At the bottom-left of the sprite sheet you’ll
find a zoom field. Try setting the magnification to 50%
for more comfortable viewing.
Previewing Animation Sequences
Before you export your sprite sheet, it’s possible to
preview the bitmap representation of each of your
animation sequences. Take a look at the Symbol
Figure 2. The Jump movie-clip’s three frames of animation
Figure 3. Generating a sprite sheet for the selected library clips Figure 4. The Generate Sprite Sheet panel
05/2012 (35)8
CREATING ANIMATIONS
information section on the left of the panel. It lists
the names of the movie clips that were used when
generating the sprite sheet.
At present, the Dazed symbol will be highlighted.
To preview its animation simply click the Preview tab
directly above the image of your sprite sheet. You’ll
see both frames from the Dazed animation being
played quickly one after the other. At the bottom of the
preview pane is a set of controls (Figure 5) allowing
you to pause the animation and step through it frame-
by-frame. Give it a go, and again, if you’re finding the
preview area uncomfortably small then you can adjust
its magnification to suit.
It’s important to note that what you’re looking at here
is a bitmap representation of your vector animations,
and not the vectors themselves. You are seeing your
animations as they will look when taken from the
generated sprite sheet.
Now preview the Jump and the Panic animations
also. Simply click on each from the Symbol information
section and step through their animation frames.
Before moving on, it’s worth noting that you can
exclude any of the symbols from your sprite sheet by
simply unselecting them in the Symbol information
section. To see the impact of this, first click on the Sprite
Sheet tab to see your whole sprite sheet again then
uncheck the Dazed symbol’s checkbox (Figure 6) in the
list. You’re sprite sheet will be immediately regenerated
with the animation frames from the Dazed movie clip
removed. Add the Dazed symbol back into your sprite
sheet by checking its checkbox again.
Image Dimensions and Format
When a sprite sheet is generated, Flash Professional
CS6 automatically selects a suitable size based on
the animation frames being added to it. It also selects
the image format that the sprite sheet is to be saved
as.
For this tutorial’s sprite sheet, its dimensions were
set at 1024 x 2048 pixels and a 32-bit PNG format
was selected to allow transparency on each frame
of animation. Both the sprite sheet’s dimensions and
its image format can be changed from the panel’s
Sprite Sheet output section (Figure 7). Let’s see
how our sprite sheet is affected when we change its
dimensions.
Although you can change the width and height to
any arbitrary value, the Generate Sprite Sheet panel
provides a drop-down list of common sizes. Select
1024x1024 from the Image dimensions field’s drop-
down list (Figure 8). You’ll see an exclamation mark
appear next to the field indicating that there is now a
problem. If you look at the bottom of your sprite sheet
Figure 6. Omitting a library symbol’s frames from the sprite sheet
Figure 5. The animation preview pane and playback controls
Figure 7. The panel’s Sprite Sheet output section
Figure 8. Manually selecting the sprite sheet’s dimensions
�������������������
���������������
���������
�����
���� ���������������
��������������������
������������
�������������
�����������
���������������
05/2012 (35)10
CREATING ANIMATIONS
you’ll see that part of the final bitmap has been cropped
due to the sheet’s reduced height. Correct this by either
manually setting a larger size or by setting the Image
dimensions field to Auto size.
You may have noticed that the size automatically
chosen by Flash Professional has a significant
amount of unoccupied space near the bottom of the
sprite sheet. Why doesn’t it simply crop the sheet’s
dimensions to create a tighter fit? Well when it comes
to graphics performance, a sprite sheet’s size can be
vitally important. In order to maximize performance,
applications often store their sprite sheets on the
Graphics Processing Unit (GPU). GPUs however work
best with dimensions that are of a power of two (1, 2, 4,
8, 16, 32, 64, 128, 256, 512, 1024, 2048).
Layout Optimizations
It’s important to know the maximum width and height
supported by any hardware your application is
targeting. For example, many GPUs have a size limit of
1024x1024 pixels. If you can’t squeeze everything onto
a single sheet then you’ll need to export several sprite
sheets to hold all your graphics.
Fortunately Flash Professional provides some options
that can be used to optimize the packing of your sprite
sheet’s contents. Let’s see if we can reduce our sprite
sheet’s height from 2048 pixels to 1024 pixels without
compromising our artwork.
Within the Sprite Sheet output section you should
see a Trim checkbox. Trimming removes any
transparent pixels from the border of your sprite
sheet’s frames. Check the Trim checkbox and you
should see the sprite sheet’s layout alter slightly. If you
examine the sprite sheet’s height you’ll see that it has
been reduced to 1024 pixels. The small savings that
have been made by trimming each bitmap has allowed
Flash Professional to organize your graphics within a
1024x1024 sprite sheet instead of a 1024x2048 sheet.
This is quite a saving!
It’s also possible to remove duplicate frames from
your sprite sheet. If you look closely at your sprite
sheet you’ll notice that frames 2 and 5 are identical, as
are frames 3 and 6 (Figure 9 illustrates this by clearly
marking the duplicate frames). Essentially there’s no
need to store duplicates as you can simply use the first
copy of each frame in your animations. To remove the
duplicates, check the Stack frames checkbox directly
Figure 9. Duplicate frames within the sprite sheet
Figure 10. Removing duplicates with the Stack frames option Figure 11. Markers clearly indicating stacked frames
Generating Sprite Sheets in Flash Professional CS6
05/2012 (35) 11
underneath the Trim checkbox (Figure 10). You’ll now
be left with free space within your sprite sheet, which
can be put to good use if you have other graphics
you’d like to pack onto the sheet.
Additionally, markers will appear over the frames
within your sprite sheet that are to be shared across
multiple animations (Figure 11). Each marker will
contain a number indicating just how many animations
the frame will be re-used in. If it helps, think of the
duplicate frames as having been stacked on top of one
another.
So far we’ve been using Flash Professional’s default
packing algorithm. However a more sophisticated one
is available that provides a higher packing ratio than
the basic algorithm. To see how it might benefit us, first
uncheck the Trim and Stack frames checkboxes. With
these options removed your sprite sheet should once
again be 1024x2048 pixels in size. Now, staying within
the Sprite Sheet output section,
find the Algorithm drop-down
box and select MaxRects.
Notice that the MaxRects
algorithm is able to pack your
graphics into a 1024x1024
sprite sheet (Figure 12) without
help from the Trim and Stack
frames options. It’s always
worthwhile experimenting with
the available algorithms to see
which one will work best with
your content.
Exporting the Sprite
Sheet
Okay, using the current
settings, let’s export our sprite
sheet. Two files will be created
– a bitmap image containing
the sprite sheet’s graphics,
and an XML file that defines
the position of the animation
frames within the sprite sheet.
First we’ll need to specify
which data format the XML
file is to be output as. Flash
Professional supports various
frameworks that can utilize
Figure 12. LHS: 1024x2048 sheet using Basic algorithm. RHS: 1024x1024 sheet using MaxRects
Listing 1. The sprite sheet's XML �le
<?xml version="1.0" encoding="UTF-16"?>
<TextureAtlas imagePath="monkey.png">
<!-- Created with Adobe Flash CS6 version 12.0.0.481 -->
<!-- http://www.adobe.com/products/flash.html -->
<SubTexture name="Dazed0000" x="0" y="0" width="293" height="418"/>
<SubTexture name="Dazed0001" x="0" y="418" width="293" height="418"/>
<SubTexture name="Jump0000" x="293" y="0" width="282" height="367"/>
<SubTexture name="Jump0001" x="293" y="367" width="282" height="367"/>
<SubTexture name="Jump0002" x="575" y="0" width="282" height="367"/>
<SubTexture name="Panic0000" x="575" y="367" width="314" height="277"/>
<SubTexture name="Panic0001" x="575" y="644" width="314" height="277"/>
</TextureAtlas>
05/2012 (35)12
CREATING ANIMATIONS
sprite sheets. However each framework requires the
sprite sheet’s XML in a different format. Let’s target the
popular ActionScript-based Starling framework. Simply
select Starling from the Data format drop-down box.
You can find it within the panel’s Sprite Sheet output
section.
Now all that’s left to do is specify a filename for the
sprite sheet. At the bottom of the Generate Sprite Sheet
panel is a Browse field. Enter monkey.png into the field
and click the Export button to its right. A PNG file named
monkey.png will be written to your FLA’s root folder along
with an XML file named monkey.xml.
Understanding the sprite sheet’s XML
Although the sprite sheet’s XML file is mostly taken care
of by your framework of choice, if you’re also taking
care of coding duties then you do need to know the
unique name that has been assigned to each of the
sheet’s animation frames. It’s these names that you
use when writing code to create animations or to simply
display a single frame from the sprite sheet. Let’s find
each frame’s name.
Open the newly created monkey.xml file into a text editor
and take a look at it.
Listing 1 shows the file’s XML. As you can see, the
XML is fairly straightforward and easy to understand.
There’s a top-level <TextureAtlas> tag, which defines the
name of the sprite sheet’s image file via the imagePath
attribute. This successfully ties the XML file to the
correct image.
The remainder of the XML file contains a collection
of <subTexture> tags, which are used to define the
rectangular region of each of the sprite sheet’s frames.
Notice that each <subTexture> tag contains a name attribute,
which is used to declare a unique name for each frame.
The names are constructed from the name of the
movie clip that the frame originally belonged to, and an
index position indicating its order within the animation
sequence. This is illustrated in Figure 13 where each
name is superimposed over its corresponding frame on
the sprite sheet.
Congratulations! You now know how to export a
sprite sheet using Flash Professional CS6 and also
understand the format of the XML file that represents
it.
Final Statement
Flash Professional CS6 makes it incredibly easy
to create sprite sheets while using the design and
animation workflow that you’re already familiar with.
With very little effort you’re able to create a compact
sprite sheet that can be used in ActionScript projects
or even other languages such as JavaScript and
Objective-C.
If you’d like to know more about sprite sheets or how
to use them within your Starling projects then take a
look at my Working with Sprite Sheets in Starling article
from the April issue of Flash and Flex Seveloper’s
Magazine. Alternatively pay a visit to the official Starling
Framework website at http://gamua.com/starling.
Figure 13. Your sprite sheet with frame names superimposed
CHRISTOPHER CALEB
Christopher Caleb is a professional
Flash developer and author of Flash
iOS Apps Cookbook. He is currently
lead Flash developer at WeeWorld – an
avatar-based social network and virtual
world for teens. Christopher blogs at
www.yeahbutisit�ash.com and tweets as @chriscaleb. If you
�nd anything he says vaguely interesting then feel free to
send him an email at info@christophercaleb.com.
05/2012 (35)14
UNITY DEVELOPMENT PLATFORM
A
s was revealed last year, and has been
confirmed again by Adobe in March, the list
will be extended with Flash, which carries an
incredibly high global install count. This is important
to Unity Technologies as a company that can offer its
development community another amazing option to
be successful with the Flash Platform. In short, it’s
another way to help level the playing field for Unity
developers.
Unity Technologies at a Glance
Unity Technologies was officially founded by David
Helgason, Nicholas Francis, and Joachim Ante in
Copenhagen, Denmark in 2004 but the Unity engine
unofficially began treading its path in 2001 with the
development of a game called GooBall. When it
became clear that the tools developed to make the
game were more successful creations than the game
itself, focus shifted to creating a complete 3D engine
and development toolset that anyone, anywhere could
use to create high-quality games.
The first version of Unity was launched at Apple’s
Worldwide Developer Conference in 2005. Since that
point, the popularity of Unity has risen steadily. In 2009,
the $200 indie pricing was cut in favor of making the
base product free for PC, Mac, and Web development
while the $1500 Unity Pro provided extra features that
“professional” developers desire. Support for mobile
platforms (iOS and Android) and all major consoles (Wii,
Xbox 360, PlayStation 3) has also helped position Unity
as one of the most widely adopted game development
tools in the world.
The Unity community, one of the most positive,
diverse, and helpful development communities on
the Internet, has grown to over 1,000,000 registered
developers with 300,000 of that number using the tools
on a regular monthly basis. The 250,000 new registers
in the last three months are also a pretty good indication
of the exponential surge in popularity of the platform.
Consequently the Unity Technologies employee count
has continued to rise to support growth and is now
around 175 employees spread across nine countries.
Unity is constantly in a state of development and the
latest update, Unity 3.5, brought some a great amount
of additions and changes such as the new Shuriken
particle system, massive improvements to lighting
options, improved occlusion culling, and pathfinding
systems at no additional upgrade cost.
The Unity 3.5 beta also brought with it the Flash
Developer Preview, giving all those who download the
beta the chance to check out the Flash deployment tool
and enter a creation contest to see who could build
the best game over the holiday break between 2011
and 2012. The contest saw around 500 submissions,
proving the Flash deployment add-on to be a great
success.
The Flash add-on preview is still available for anyone
that downloads Unity 3.5 (Free or Pro) so everyone who
Unity:
Making (Flash) 3D Game Development Easy and Fun
“Build Once, Deploy Anywhere”is a mantra that has helped propel
the Unity development platform to the healthy global status it
enjoys today. Up until now this idea of quick publishing to different
platforms has included PC, Mac,Web (through UnityWeb Player
and Native Client), iOS, Android, Xbox 360, PS3, andWii.
What you will learn…
• what is the Unity Technology
• how to creating your own content using Unity Flash
• what is the unity Flash-in-a-Flash Competition
What you should know…
• basics Adobe Flash understanding
Unity: Making (Flash) 3D Game Development Easy and Fun
05/2012 (35) 15
loves making games for Flash can try it out! You can
find out more about this later in the article.
Unity and the Democratization of Game
Development
The core concept of “democratizing game development”
has been, and is still, the foundation for every change
and addition that is made to Unity. This means a
particular focus on creating a full-featured engine with
user-friendly tools for a price that anyone (especially
indie studios) can afford.
One of the biggest draws for Unity as a toolset
has clearly been its quick learning-curve. Later on in
this article, you will find a jumping-off point for Flash
developers. Hopefully you’ll see the UI’s accessibility
and efficiency as a testament to the amount of effort
put into its development given the breadth and depth
of Unity’s features. The interface manages incredible
transparency for important features while hiding the
less important guts so that only the few that really need
access to them will have to look.
The UI is presented visually to be familiar to those that
use 3D Studio Max or Maya but is easily understood
by all. Assets can be dragged and dropped into a
scene with ease. At the same time, properties can be
adjusted for objects individually or for “prefabs” that
carry information about everything from visual style to
control scripting with them across all instances of an
object in project.
The goal is to take the pain out of development and
nowhere is this clearer than in the platform deployment
tools where a click of a button is all it takes to convert
a project from one platform to the next. Unity does the
heavy lifting and developers are left with the clean-up
tasks of optimization and bug hunting. That means if
you’re developing a game for iOS or Android and you
want to move it to Flash (or vice versa), you’ll barely
have to lift a finger to make it happen.
Unity also provides the best prototyping and
gameplay testing environment in the industry. Games
can be played in the editor while adjustments can be
made on the fly. Values are adjusted without making
any permanent changes to any underlying scripts.
Instantaneous results make iteration efficient and fun.
Making Teams Smaller and More Efficient
While the tools and pricing are almost always the start
of any conversation regarding Unity’s strengths and
usefulness, two other democratization initiatives were
introduced at the end of 2010 to provide new potential
advantages to smaller developers: The Asset Store and
Union Business Division.
The Asset Store is an exchange for assets of all
types (art, scripts, sound, editor extensions) that can be
accessed directly from the Unity application. Creators
can upload assets to the store where developers looking
for an out-of-the-box solutions can purchase them. This
simple concept allows for coders to find art, artists to find
code, and everyone to add more functionality to Unity.
Once an asset has been purchased (or downloaded
for free) it can be immediately installed into the active
project. The assets are all royalty free and can be used
in any number of projects. The Store has seen great
success in its first year growing from 64 asset packages
to over 2,800 currently with some asset creators making
a good chunk of money monthly.
Union provides a distribution network to Unity
developers that falls outside the realm of normal
publishing. The service is free to all to join and has
the potential to hook developers up to new avenues of
distribution to emerging platforms such as smartphones
that aren’t iOS or Android, set top boxes like Roku, and
Smart TVs. Union will take care of porting the games
to each platform, freeing up development resources to
work on follow-up titles. Costs of porting the game will
be taken from profits after which Union takes a minor
20% revenue share.
Flash as a Unity Build Target
When Adobe announced Stage3D (then still known as
Molehill) to the world back in 2010, Flash became a
viable target for Unity export. Stage3D is a lower-level
hardware accelerated graphics API; which is needed for
the complex 3D graphics the Unity Engine can produce
in real time.
As mentioned earlier, one of the most attractive things
about the Flash Platform is its incredible reach. With
more than 1.3 billion PC installs of the Flash Player, the
potential target audience is huge. Unsurprisingly, Unity’s
userbase indicated they wanted access to this audience
so once Stage3D was announced, work commenced on
the Flash deployment add-on.
Porting the engine to work with Flash has been a
massive undertaking. On the already existing targets,
the engine runs as compiled native code directly
targeting the device. Compare this to the Flash Player,
where we cross-compile our engine, the Scripting
API code, and finally the project code to ActionScript.
Additionally, it cross-compiles shaders to Adobe’s AGAL
Shader language and rewrite all project assets to Flash
Player compatible formats.
The most important thing to take away from this is
that you, as a content creator, don’t have to worry about
what platform you are targeting with Unity. Unity does
that work so you can focus on creating your content
using all of the same advanced runtime features such
as physics, occlusion culling, particle systems and
navigation meshes, when targeting to Flash.
While the deployment tool is currently still in preview,
there are already many users creating beautiful content
05/2012 (35)16
UNITY DEVELOPMENT PLATFORM
for Flash. The power of authoring for Flash using the
Unity Editor will mean an acceleration in growth of great
content for it.
Unity’s Flash-in-a-Flash Competition
The “Flash in a Flash” competition was great validation of
how Unity helps developers are creating quality content
faster. The contest, which started in December 2011,
was in celebration of the release of the first version of
the tool. It challenged developers to create new games
or port their old ones over to Flash and judged both on
creativity and technical merit. Many people did just that
in a very short amount of time.
After the two week deadline; the amount of entries
into the competition alone shocked the Unity staff. With
close to 500 entries, there was a ton of content to play
and review! It turned out to be very tough to select the
winner and the ten runners up.
Considering the Flash exporter was in first beta at that
point in time, entrants did an incredible job of utilizing
it to create incredible games. Let’s have a look at the
winner and some of the runners up.
Winner: Tail Drift
By Cameron Owen
Tail Drift is a simple arcade racer in which you
maneuver a red plane along a 3D candy-striped tubular
track. The track runs below, above, and around floating
islands and hot-air balloons that you have to avoid
smacking into. It’s a bit like Retro Revolution meets
Mario Kart.
Ski Safari
By Brendan Watts
In Ski Safari, a charming casual game by Brendan
Watts, you are a resilient little skier outrunning a
deadly avalanche. Survive and gain points by making
impressive jumps, collecting coins, and riding on the
back of various animals that happen to be also zipping
down the mountain! Use penguins to glide further, Yetis
for increased toughness, and Eagles to soar to great
heights!
Aaaaa!!! for the Awesome
By Owlchemy Labs and Dejobaan Games
Landing yourself in traction was never so much fun.
In this game you free fall through a floating cityscape
high above the Earth’s stratosphere. Gather points by
skimming alongside buildings, but, use your parachute
to avoid crashing into them.
Unity: Making (Flash) 3D Game Development Easy and Fun
05/2012 (35) 17
Flatboyz
By Bento-Studio
You are a cardboard hero dangling from a rope
and gliding above the countryside. Below you are
surly looking mortals clad in red bikini bottoms. You
must pick them up to make them happy again – and
give them new clothes! But watch out for the trees,
rooftops, and other obstacles that can knock you off
your rope.
Start creating your own content using Unity
Flash!
The current release version of Unity 3.5 includes a
public preview of the Unity Flash deployment add-on.
It’s by no means final at this point but we wanted to
get this in the hands of as many as people possible,
as quickly as possible, to let everyone try it out and
give us feedback. On final release this will become
paid add-on to Unity but, right now, you can download
a free copy of Unity and start deploying your Unity
games to Flash.
Longtime Unity users will find it easy to simply deploy
their games to Flash as they would with any other new
platform. Flash developers new to Unity will also find
it exciting to build games for their favorite platform
but also have the option to then release the game to
multiple other potentially profitable targets. We will be
focusing this next section of the article for people with a
Flash / Flex background that are new to Unity. To follow
along, you can get the free version of Unity 3.5 with
our Flash Exporter preview at: http://unity3d.com/unity/
download/.
An Introduction to Unity for Flash Developers
Unity is a cross-platform development tool known for its
simple learning curve and rapid development, but how
does one get started using Unity? As a Flash user, it is
important to remember that your first glance at Unity
may seem alien, but our interface and workflow actually
carries with it many parallels with Flash.
Make a Scene! How Unity Content is Organized
To create Unity games, much like Flash – games are
arranged inside Scenes. These could be considered as
Flash scene equivalents, while the overall Project, an
equivalent to your .FLA files are folders containing the
entire Unity project.
The Scene you are currently working on is shown
in the Scene view in Unity. This view is effectively a
3D equivalent to the main Stage in Flash. The key
difference to note here is the infinite nature of 3D space
– for this reason Unity provides simple navigation
tools, akin to 3D modelling applications such as 3DS
Max, Maya, or Modo for example. Don’t fear if you are
unfamiliar with 3D navigation as the simple use of the
Hand tool in Unity, along with modifier keys Alt / Ctrl
allow you to pan, orbit, and zoom with ease.
This infinite three-dimensional space also means that
you should forget about the nature of dimensions as
defined in Flash for the stage. What is shown onscreen in a
3D engine such as Unity is defined by the use of Cameras
so try and think more in physical movie production terms
– anything the audience sees is simply what the camera
picks up. Naturally you can define the exported pixel
dimensions for your exported Flash swf, but it’s important
to ensure that you think three dimensionally. It may be
daunting at first, but it soon becomes exciting as you
begin to realise the possibilities and ease of realisation for
dramatic and fun effects for your games.
Scenes, along with other assets used to make your
game, are shown inside Unity in the Project panel. This
panel, accompanied by a Create button that allows you
to generate various Unity specific assets, is your main
focus for managing assets and handling import settings.
It is the equivalent of the Library window in Flash.
Hey! Nice Assets
Unity handles any assets you can throw at it – everything
from Photoshop files and 3D objects to video and audio.
The great thing about keeping these assets arranged in
Unity is that you’ll never need to reimport them. Import
any asset into Unity’s Project panel (or simply save
to the Assets folder, a subfolder of your main project
folder) and your asset is registered by Unity.
Need to update a file in an external package? This
is as simple as saving in the external package you
are working in (Photoshop for example) and switching
back to Unity. Unity detects the change in the file and
automatically re-imports and updates any part of the
scene that uses your file.
This straightforward pipeline ensures that your in
game content is always up to date, and the Project panel
itself gives you the opportunity to share assets and
their settings with others in a team by exporting Unity
packages. These are bundled files that incorporates
all of its current settings for Import and any files that it
05/2012 (35)18
UNITY DEVELOPMENT PLATFORM
depends upon. For example, a 3D model may require a
texture to accompany it.
MovieClips, Instances, Prefabs, and Game Objects
In Flash, we’re all familiar with the concept of creating a
MovieClip – a self contained data template stored in the
Library, and instanced via code or the editor – and it’s
especially important in game development. In Unity, this
concept is mirrored by what we call Prefabs. However,
there are some subtle differences to be aware of.
In Unity, any items in your scene are known as Game
Objects, these can be saved into the Project (Library)
as something called a Prefab (MovieClip). Once this
is done, each game object that belong to this prefab
is considered an Instance of it, but this is not just for
storage purposes. Unity takes the template system
one step further by allowing you to edit the Prefab by
selecting it within the Project panel and edit in within
the Inspector (akin to Flash’s Properties panel). This
then updates the properties of any instances of it in
your game’s Scenes, giving you flexibility to update
infinite objects in your game at any time. Keep in mind
that instances of a stored prefab can still be edited
as individuals without affecting the group. If you then
choose, edits made to this individual can be echoed
back to the prefab, which will in turn update all of the
fellow instances as a result.
Hierarchy vs. Timeline : Frames vs. Realtime
Another key difference to note when considering game
development in Unity, is that your game runs as a realtime
render. In Flash, we’re used to seeing objects we have
placed onto the Stage in the Timeline, with a range of
frames for duration of that item’s existence. Unity is a
realtime engine and therefore keeps objects in the scene
until a script tells the engine to remove the object.
As such, the equivalent to the Timeline in Flash is
the Hierarchy panel, but given its lack of need to show
duration, the Hierarchy is simply a Hierarchical list of
game objects in your current scene. Selecting any
object in this list and double-clicking its name will focus
the Scene view on it, and likewise, clicking on an item
visually in the Scene view will select it in the Hierarchy.
Oh Behave!
Putting Game Objects to work in Unity
While every object in your scene is a game object, the
behaviour and properties of these objects are controlled
by another core concept: Components. In Unity, you’ll
see a Component top menu item that allows you to add
various properties and potential behaviour to your game
objects such as the Rigidbody component which adds
Physics properties to an object. Once added, these
components are listed in the Inspector (Properties)
panel and can be adjusted visually or via scripting.
Any game development task will inevitably come with
a certain amount of scripting in order to achieve the
behaviour you desire for your gameplay. In Unity, scripts
are written in an individual basis, and applied to objects as
behaviour components. Scripts are attached to objects and
control them by addressing properties of the Components
attached to the object they are on – or by addressing
properties of another object in the active scene.
Scripts can be written in UnityScript (Unity’s own
API that uses JavaScript syntax), C#, or Boo. These
languages will look familiar and will be easy to pick up
for anyone with ActionScript 2 or 3 experience. Scripts
are not simply restricted to controlling gameplay either.
They can also be used to communicate with servers,
save states and load in new game content, much in the
same way that ActionScript does in Flash, and even to
create new functionality for the Unity editor itself!
Bouncing Ball: A Flash Classic Revisited
For every Flash vet, there is a fond memory of their first
Flash animation experience – the bouncing ball is very
much the “Hello World” of the Flash scene. So let’s take
that familiar concept and revisit it in Unity, as your first
attempt at working with the package. Don’t worry, you
won’t even need a classic motion-tween!
With Unity open, make a new empty scene by
choosing File > New Scene (Ctrl / Command – N) from
the top menu.
Now let’s make a ground plane for our action to take
place upon, go to Game Object > Create Other > Cube,
from the top menu. You will now see a new Cube in
your Scene view, and an accompanying new item in the
Hierarchy, named ‘Cube’. Now look at the properties of
this new object by looking at the Inspector panel. It is
a new cube object that in 3D terms we call a ‘primitive’
– these are simple shape objects such as a Cube,
Sphere, Capsule or Cylinder (Figure 1).
The Cube has 4 components attached to it, and these
are shown in the Inspector panel under the headings
Transform, Mesh Filter, Mesh Renderer, and Box
Collider (Figure 2).
Figure 1. Cube-will
Unity: Making (Flash) 3D Game Development Easy and Fun
05/2012 (35) 19
These components do the following jobs:
• Transform – defines the Position, Rotation and
Scale of the object
• Mesh Filter – holds the shape of the object
• Mesh Renderer – controls the appearance of an
object and can redefine appearance by having
materials assigned to it
• Box Collider – gives the object a physical presence
in the game, it can now collide with other objects as
a result
Now let’s make this cube into a floor – set the Position
values in the Transform component all to 0, and then
set the X and Z values of Scale to 100.
Now it’s a little dark in here right? Let’s add a light
to brighten things up. In Unity you are working with a
rendering engine, so lighting is controlled not simply
by light and dark areas in your graphics, but by lights
added to the scene.
Go to GameObject > Create other > Point Light, then
set the Position values for the new Point Light to X: 0,
Y: 5 and Z: 0.
You’ll now have a patch of light on the floor, a perfect
place to make our ball bounce! But first, we need a ball.
Go to GameObject > Create Other > Sphere.
As you’re such an ace at positioning by now, place
this sphere at X: 0, Y: 4, Z: 1.
Now it’s time for some Physics! You’ll be pleased to
know that Unity includes the Nvidia Physx engine, so
all the work is done behind the scenes for you to create
realistic simulations. Wiith the Sphere still selected in the
Hierarchy, choose Component > Physics > Rigidbody.
You will now see this component listed in the Inspector
panel on the right, and you should note that the Gravity
property is enabled by default, perfect!
Testing your Scene at any time in Unity is easy. Simply
Click the Play button at the top of the interface to see
what our bouncing ball looks like so far.
At this stage you will note that we have very little
bounce to our ball. Your Sphere falls to the ground
and stops in a wholly underwhelming manner. This is
because in Unity, the response of differing surfaces
colliding is handled by Physic Materials. In order to make
the ball’s collider (its physical presence) ‘bouncy’ we
must create a Physic material, with bouncy properties
and apply it to the Sphere Collider component of the
Sphere.
Click the Play button again to stop testing your game
– do NOT click Pause, as this will keep Unity in testing
mode, meaning that changes made during this mode
will not be saved. A great way to explore different
settings for parameters without committing to them.
On the Project Panel, click the Create button, and
from the Drop down menu, choose Physic Material.
Your new asset is created, and its name is highlighted
immediately for you to name. Call this Bounce and
press Return or Enter to confirm. Now, with this asset
selected in the Project panel, you will see its properties
in the Inspector panel.
To make a bouncy material, leave the Friction settings
on 0.4, but set Bounciness to 1 and Bounce Combine
to Maximum. Now, apply this asset to our Sphere by
dragging it from the Project panel, and dropping it onto
the name of the Sphere object in the Hierarchy panel.
This automagically applies this asset to the right
component – the Sphere Collider, and if you select the
Sphere now and look at this component you will see
the Bounce asset you just created listed as the Physic
Material this component is using. This means that
whenever you adjust the asset in the Project panel, the
behaviour of this ball will change (Figure 3).
Figure 2. Components-will
Figure 3. ballBounce-will
05/2012 (35)20
UNITY DEVELOPMENT PLATFORM
Congratulations, you just made a bouncing ball! Press
Play again to see it!
Now, to export this to Flash, we’ll select the File
dropdown menu and click on Build Settings. Switch the
target to Flash Player (preview) and click on “Switch
Platform”. After this is done go ahead and build your
project, selecting a name and location for it to save too.
After the build process is done, a new Finder or Explorer
window will open with a ready to go swf file, alongside a
template HTML file for you to run. Done!
Take Full Advantage of Your Target Platforms
For Unity 3, we supplied an example project called
Angry Bots; a great looking futuristic top-down shooter
in which you fight some very angry robots while
following the winding red lines to the exit of the facility
you are trapped in.
While Angry Bots is primarily a demo project to show
off some of the features of Unity 3, it’s also a fun game
to play.
Currently it’s available as a playable game on the iOS
and Mac AppStore, the Android MarketPlace, Google
Webstore (Native Client), and the Unity website (Unity
Web Player and Standalone). Now, with the addition of
the Flash exporter the exact same game is available
on game portals such Shockwave, MiniClip, and
Kongregate as a Flash game.
As a Flash developer using Unity, this is one of the
primary advantages of using Unity. You have the ability
to deploy content for all platforms we support now and
those we will support in the future. This enables you to
target platforms without having to learn platform specific
development kits or rewrite your entire project to fit the
target.
Angry Bots does a great job at showing how to
export the same project to different platforms, while
still adjusting the content to take full advantage of the
features of the specific platform. For example, while on
a normal PC the inputs are mouse and keyboard, on
a iOS device the only input is the screen. Adjustments
can easily be achieved using Unity’s platform specific
feature support.
It also provides a beautiful demonstration of switching
graphical quality based on the capabilities of the
target platform. While the game looks great on even a
modest smartphone or tablet, platforms with more gpu
power such as desktop machine are able to do more.
If you want that beautiful Depth-Of-Field effect on the
highest quality level on those more technically capable
platforms, it’s easily possible to do quality management
for the specific platforms through scripting, user defined
shader settings, and the Unity QualitySetting API.
Other platform specific things like asset conversion
to platform specific formats are automatically done by
the editor. For example, in the case of Flash it converts
all Audio to MP3 and all textures to compressed ATF
textures; the settings for these assets and how they are
imported are user definable per platform. For Flash both
of these formats are configurable compressed formats,
important for compact distribution over the web.
Take Full Advantage of Flash
Unity enables you to deploy to any Unity target with
the least possible effort, but also empowers getting the
best out of any of the target platforms. Some platform
specific implementations are fairly unique to the
platform itself and it can be advantageous to use these.
In the case of the Flash Platform, a good example is
the ability of peer-to-peer networking that is available
through its Cirrus service.
Since this is a quite large and Flash specific API,
encapsulating it in a Unity API isn’t possible.
Thus, when targeting Flash, it is possible to directly
write and include ActionScript in your project and
access it through an API called UnityEngine.Flash.Act
ionScript.
With this you are able to tap directly into Flash’s
availableAPI’s such as the Realtime Media Flow Protocol.
To start using ActionScript, in your project folder, create
an ActionScript folder and directly drop your ActionScript
.as files in there. It’s also possible to drop SWC libraries
in your project and use those instead.
To now communicate between your Unity C# scripts
and ActionScript, use the UnityEngine.Flash.ActionScript
API, which enables writing inline ActionScript in your C#
file; here’s one example of such inline ActionScript in C#.
ActionScript.Statement(„MyCustomActionScriptClass.Static
Function(v)”, v);
This way, you get the best of both worlds. While you
get the ease of use, portabilty, and strength of Unity’s
scripting, you can still directly access ActionScript and
Flash API’s.
While this allows you to use ActionScript inside your
Unity project, it’s also possible to use your Unity project
from a Flash / ActionScript project. This is important to
be able to use and communicate with Unity content in
your existing Flash project.
With every Unity to Flash compiled project a
UnityShared.swc file is written in the target build folder.
Embedding this SWC in your existing project, there
is an API available that allows you to load, size and
communicate with your Unity project. From within Unity,
you can now call Application.ExternalCall and this will be
sent to the Flash host, while from the Flash host, you can
use sendMessage to call functions on objects in Unity.
In the current Flash preview, we are still changing
these APIs based on user feedback and we invite you
to try them out and give us your feedback.
Unity: Making (Flash) 3D Game Development Easy and Fun
both are needed to target Flash. This means that Unity
authored Flash content will fall in the category of content
that will need a premium features license. While currently
only the combined usage of Stage3D and Fast memory
opcodes fall under the premium features licensing, Adobe
has announced that while the Flash platform is evolving
they will add features to the Flash Runtime that fall under
the premium features license. One example of this given
by Adobe is “instant play”, which enables client side asset
caching, using a local storage API; this feature will greatly
reduce download times for recurring play on large games,
further making the end user experience smoother and
stimulating returning players.
A Note on Flash Premium Features and Unity
Content
Adobe has recently announced “Premium Features for
Gaming” for the Flash Platform which initially includes
only Fast Memory Opcodes and Stage3D when used
simultaneously. They have also announced a required
9% revenue share on Premium Features Licensed
content that exceed $50k in revenue. To be able to
get the great performance and port the huge amount of
functionality and features currently in the Unity engine,
RALPH HAUWERT
Adobe® Flash® 3D veteran,Senior Developer at Unity
Technologies’ Copenhagen office
As a technical expert with more than a decade of experience in
online creative development and a strong background in Flash,
Hauwert has been involved in several high pro�le and critically
awarded projects, including the Anne Frank Annex Online 3D,
KPN’s House of Tomorrow, Earthmine and Papervision3D. As
an industry recognized leader and pioneer within the Flash
community, he has set milestones in the �eld of Flash 3D
and the open source Flash movement. Hauwert was one of
the speakers at Unity Technologies’ Flash Day designed to
introduce Flash users to the Unity development platform.
About UnityTechnologies
Unity Technologies is revolutionizing the game industry
with Unity, its award-winning breakthrough development
platform. Unity Technologies has more than 500,000
registered users worldwide – including Bigpoint, Cartoon
Network, Coca-Cola, Disney, Electronic Arts, LEGO,
Microsoft, NASA, Nickelodeon, Ubisoft, Warner Bros., large
and small studios, indies, students and hobbyists – all using
Unity to create games and interactive 3D, like training
simulations and medical and architectural visualizations, on
the web, mobile, consoles and beyond. Unity Technologies
is aggressively innovating to expand usability, power and
platform reach along with its Asset Store digital content
marketplace and Union game distribution service so that
it can deliver on its vision of democratizing interactive 3D
technology. Unity Technologies is headquartered in San
Francisco and has development offices worldwide. For more
information, visit: http://unity3d.com.
a d v e r t i s e m e n t
05/2012 (35)22
FLEX 4 AND FXG
N
ow the problem starts, you provide good
functionality, and equally good UI, the application
gives wow effect in demo, but in reality, it slows
down and consumes too much memory, rendering
being one of costly process!
Here comes FXG (SVG implementation) into picture.
Scaled Vector Graphics is XML representation –
definition of image or line art.
As per O’reilly Flex 4 cookbook, “A FXG fragment is
a grouping of graphical elements, such as shapes, text,
and raster images, along with optional masking and
filters that can be contained inline in MXML or within
a FXG document with the .fxg file extension. FXG is
a subset of MXML and does not include the ability to
reference external classes or respond to runtime events,
such as data binding and state changes. However, FXG
fragments can be declared inline in MXML to take
advantage of such features, which most skin classes in
the Spark architecture employ.”
SVG has been supported since Flex 3 with degrafa
library, but not with that much flexibility or customization.
Flex 3 was limited to: Listing 1.
Flex 4 is the way to deal with different approaches,
known as FXG component.
Just like any other Halo or Spark component, FXG
holds image definition (not extending UIComponent
Class, albeit).
With Flex 4 and mobile application development,
FXG is very much required feature. Mobile application
Flex 4 and FXG
Flex application without real UI asset is like an amazing structure
of building, without walls and furnished box!The core challenge
is balancing UI and functionality. If you provide rich UI, but weak
functionality, it doesn’t sustain long. In reverse, if you provide
expected functionality, but dull or default UI, it may give kind of
non touching feeling to user.
What you will learn…
• Reason for using FXG, and possible scope
• Basics on FXG, easy migration from SVG
• Basic capabilities achieved in FXG
• Path for intermediate to advanced learning
What you should know…
• Familiar with ActionScript 3.0 language, basic Flex 4
understanding, comfortable with Flash Builder or similar IDE
• At least rough idea about Vector Graphics or SVG
Listing 1. Using SVG with Flex 3
<mx:Application xmlns:mx="http://www.adobe.com/
2006/mxml" xmlns:Degrafa="http://www.degrafa.com/
2007" layout="horizontal">
<mx:Script>
<![CDATA[
[Embed(source="assets/flex3.svg")]
[Bindable]
public var flex_svg:Class;
]]>
</mx:Script>
<mx:Image source="{flex_svg}"/>
<Degrafa:GeometryComposition graphicsTarget="{[cnv]}">
<Degrafa:Path data="M 0,0 L 100,0 L 100,100 L 0,100 z">
<Degrafa:fill>
<Degrafa:SolidFill color="#EECCEE" />
</Degrafa:fill>
<Degrafa:stroke>
<Degrafa:SolidStroke color="#FF00FF" weight="3" />
</Degrafa:stroke>
</Degrafa:Path>
</Degrafa:GeometryComposition>
</mx:Application>
Flex 4 and FXG
05/2012 (35) 23
has to be lightweight. It is well known fact that mobile
devices are limited in hardware resources and memory
availability. Components are best at its performance
when skinned with FXG, instead of pure bitmapdata
images. Another considerable approach to use FXG
is for certain repetitive symbols like bullets or icons.
Basically, FXG rendering and runtime manipulation
is cheaper and easier than bitmapdata image like
JPEG or PNG. The more effectively we use, better the
performance is, be it mobile or desktop – AIR.
FXG sources
Many Adobe products such as Adobe Illustrator,
Fireworks, Photoshop can export design to FXG file.
Adobe Creative Suite tools can be used to convert SVG
to FXG. Flex 4 supports version 1.0 and 2.0 of FXG. Of
course, need some change if it is version 1.
Dig into definition
As stated above, FXG is a component declaration in a
separate file, which holds image definition in XML like
Listing 2. Declaration block
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
…..
…..
…..
</Graphic>
Listing 3. Tag Declaration
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:
fxgComponent="*">
<fxgComponent:flexLogo height="100" width="300" x="0" y="10"/>
</s:Application>
Listing 4. Script Declaration
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:
fxgComponent="*" creationComplete="drawLogo()">
<fx:Script>
<![CDATA[
import spark.core.SpriteVisualElement;
private function drawLogo():void
{
flexLogoInstance = new flexLogo();
flexLogoInstance.x = 0;
flexLogoInstance.y = 10;
flexLogoInstance.height = 100;
flexLogoInstance.width = 300;
addElement(flexLogoInstance);
}
]]>
</fx:Script>
</s:Application>
05/2012 (35)24
FLEX 4 AND FXG
format; it cannot hold reference to other FXG component.
FXG tags have an implicit depth order. The order in which
elements are defined defines their depth. Each tag is
effectively drawn above its previous sibling. Children are
drawn on top of their parents. FXG document has to use
following namespace: http://ns.adobe.com/fxg/2008.
Likewise in HTML, <html> is wrapper tag, FXG wraps
content with <Graphic> tag, and has to explicitelly define
version 2.
FXG document/component supports its own set of
datatypes such as angle, color, integer, length, number,
identifier, percentage etc. It does not support any
declarative syntax such of Flex such as <fx:Declaration>,
<fx:Metadata>, <fx:Binding>, <fx:Script>, <fx:Style> or
ActionScript 3 datatype such as <fx:Boolean>, <fx:Date>,
<fx:Function>, <fx:int>, <fx:XML>.
Deal with declaration
The FXG has to be available as separate compliable
component in form of .fxg file. Just like any other
component, FXG can be declared either as tag or inside
script block.
Listing 5. Sample FXG Component
<?xml version='1.0' encoding='UTF-8'?>
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">
<fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231
41.132 L
.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
<fxg:fill>
<fxg:SolidColor color="#FFFFFF"/>
</fxg:fill>
<fxg:stroke>
<fxg:SolidColorStroke caps="none" color="#FF00FF" joints="miter" miterLimit="4" weight="20"/>
</fxg:stroke>
</fxg:Path>
</fxg:Graphic>
Listing 6. Sample FXG Library
<?xml version="1.0" encoding="utf-8"?>
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<Library>
<Definition name="YellowRect">
<Group>
<Rect height="5" width="5">
<stroke>
<SolidColorStroke color="#00FF00" weight=".75"/>
</stroke>
<fill>
<SolidColor color="#00FF00"/>
</fill>
</Rect>
</Group>
</Definition>
</Library>
<YellowRect x="0" y="0"/>
<YellowRect x="0" y="50"/>
<YellowRect x="50" y="0"/>
<YellowRect x="50" y="50"/>
</Graphic>
Flex 4 and FXG
05/2012 (35) 25
Listing 7. Sample FXG component with richtext capabilities
<?xml version="1.0" encoding="utf-8"?>
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
<RichText>
<content>This text is <span fontWeight="bold"> BOLD </span>,<br/>this text is <span textDecoration= "underline">
UNDERLINED </span>,<br/> and this text is <span fontStyle="italic"> ITALIC </span>.<p>This
is a new paragraph.</p></content>
</RichText>
</Graphic>
Listing 8. A sample application from O’reilly Cookbook – demonstrating bitmap mask applied to graphics
<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"
creationComplete="handleCreationComple
te();">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.core.MaskType;
[Bindable] public var masks:
ArrayCollection;
private function handleCreationComplete():
void
{
masks = new ArrayCollection( [
MaskType.CLIP,
MaskType.ALPHA,
MaskType.LUMINOSITY ] );
maskList.selectedIndex = 0;
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:DropDownList id="maskList"
dataProvider="{masks}" />
<s:Graphic id="group" maskType="{maskList.selecte
dItem}">
<s:Rect width="320" height="320">
<s:fill>
<s:LinearGradient>
<s:entries>
<s:GradientEntry color="#000000" />
<s:GradientEntry
color="#DDDDDD" />
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:mask>
<s:Group>
<s:BitmapImage source="@Embed('/
alphaBitmap.png')" />
</s:Group>
</s:mask>
</s:Graphic>
<s:Group enabled="{maskList.selectedItem==MaskType
.LUMINOSITY}">
<s:layout>
<s:HorizontalLayout />
</s:layout>
<s:CheckBox selected="@{group.luminosityInvert}"
label="invert" />
<s:CheckBox selected="@{group.luminosityClip}"
label="clip" />
</s:Group>
</s:Application>
[source : http://www.oreillynet.com/pub/a/flex/
excerpts/flex-4-cookbook/graphics.html]
05/2012 (35)26
FLEX 4 AND FXG
• Tag declaration (Listing 3)
• Script declaration (Listing 4)
This is about how to use; below is sample of an FXG
component: Listing 5.
Of course, when we export FXG from other applications
like Photoshop, we should ignore and remove some non
MXML graphic tags like <Library>, <Private>. Also such
exported FXG, after removing such metadata tags, the
tag has to declare with spark namespace, s:. This makes
it usable MXML component. <Library>, <Private> such
tags are supported in FXG, not in MXML. Similarly, FXG
library can be defined as under: Listing 6.
And with <fxgComponent:BlueShape/> declaration, it
makes instance.
width and height are two properties that identify
FXG’s original dimension, which can be altered with
viewWidth and viewHeight.
With this we are limiting discussion on declaration
and conversion. FXG can also include bitmapdata from
source image like PNG, JPG, GIF. This should be used
only if required. This is supported with <BitmapImage>
in FXG or <s:BitmapImage> in MXML. For our primary
purpose of making application lightweight, if we again
wrap bitmap to FXG, it doesn’t really serve purpose!
This decision should be wise.
In nutshell, if FXG is declared as part of application
i.e. <s:Application /> or so, it has to have prefix
namespace.
Text in FXG
Text is also supported in FXG; with <RichText> if its
version 2.0, <TextGraphic> if 1.0 .
FXG <RichText> tag supports the child elements like
<content>, <transform>.
A good example of FXG component, self explanatory:
Listing 7.
<content> child tag supports elements like <p>, <span>,
<br>, <tcy>, <a>, <img>, <tab>, <linkNormalFormat>,
<linkHoverFormat>, <linkActiveFormat>
Mask
What explained so far is pretty short and primary, FXG
is much more. Mask and Effects are interesting parts
in this.
There are two types of mask – clip & alpha. In clip
masking, only the actual path, shapes, and fills defined
by the mask are used to determine the effect on the
source content. In alpha masking, the opacity of each
pixel in the source content is multiplied by the opacity of
the corresponding region of the mask.
Let’s see a nice example straight from kitchen
of O’reilly! (Listing 8). And when it runs, looks like:
Figure 1.
Wrapping Up
FXG is not really a replacement for all scenarios. It isn’t
really replacement to bitmapdata. Likewise skinned
UIComponent, you really do not need bitmapdata for
its weight and scalability issues. SVG manipulation is
much easier and clean in terms of rendering, and that’s
why Flex component, with its FXG skin looks beautiful
in any size!
Figure 1. Output
References
• SVG Primer for Flex – http://saturnboy.com/2009/06/svg-
primer-for-�ex/
• FXG and MXML graphics – http://help.adobe.com/en_US/
flex/using/WS145DAB0B-A958-423f-8A01-12B679
BA0CC7.html
HARIT KOTHARI
Harit is a Flex and RIA developer by profession, based in India.
He started career with Java development and quickly learned
and moved towards Flex. He has also consulted small projects
while working for short term in Dubai, UAE. Application
and functional level challenges are his primary interests.
Traveling and reading are his interests. He blogs at http://
harit.kotharee.com/ and whispers on twitter @harit.
05/2012 (35)28
FLEX 4
A
dobe has company which have been working
ahead of time many years in many technology
are like Acrobat reader, Photoshop with image
processing algorithm implementations for naive users,
for online picture editor for image enhancements using
image processing algorithms (http://pixlr.com/editor), Flex
for AJAX/RIA. Flash presented good threat to Microsoft
as instead of writing to OS people can write to Flash same
reason why Steve Jobs took stand against Flash. Adobe
hence started to silent revolution of RIA.
Photoshop, Illustrator, and the other design products
in its Creative Suite make up more than 50% of
Adobe’s revenue and have created a lot of loyalists.
Adobe presence in unified communication with its
connect platform for online meetings which competes
with Microsoft live meeting and communication server
(renamed Lync). People most often create documents
using Word processing software but once those
documents need to be stored in a fixed format for printing
and official forms, they’re almost always converted
to Adobe’s PDF format. Micorsoft XPS never stood
competition against PDF format.
Adobe Flex is a popular framework for building Rich
Internet Applications (RIAs). The Flex framework is
used to create SWF files that run inside the Adobe
Flash Player.
Today when we will see higher adoption of IP TV in
future Adobe is well positioned to take on. Earlier Adobe
flex write once and run on any browser (need not worry
browser dependency) to today write once run on any
device (Android, IPhone, or any tablet OS).
Technology Landscape
Technology is continuously evolving. Never people
thought before AJAX came in that all system will web
based. As in earlier system Client server system web
Future of Flex & Flash:
Gamification of ERP enterprise software, Augmented
Reality on mobile apps, ipTV
Adobe outdoing competition for many years now has system
in place for bringing future technologies like IPTV (http://
blogs.adobe.com/flashplatform/tag/iptv), mobile/tablet OS
interfaces, photo editors like Photoshop,Word editors like Acrobat
reader with compressed storage.
What you will learn…
• Comparison of Flex competitors like HTML5 vs �ex
• Augmented reality using Abode products
• Gami�cation of Enterprise apps using �ex
• Future trends, future usage evolution of Flex
What you should know…
• Basic knowledge of computer technology with suffice
• Basic knowledge of AJAX
• Basic Adobe Flex, AJAX, Flash,HTML5
Figure 1. The evolution
Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV
05/2012 (35) 29
client wait for completion for each request till then
browser hangs. With coming of AJAX Asynchronous
request does not need to wait for reply from Server
for completion of request. Today what we See from
Website to ERP like SAP PeopleSoft, oracle apps,
to Business intelligence systems virtually every UI is
Web Based. AJAX increased adoption of Web across
different platform devices and interfaces. Across all this
technologies the best choice of UI ends at flex.
Demand and salary to AJAX programmer crossed
Java programmers. Main component of AJAX was java
script. But problem came later no support for JavaScript.
In meanwhile Adobe was company very much into
multimedia software like Flash, Photoshop. Needed to
adopt to new Web paradigm. So necessity is mother
of invention. Abode had flash player which was heavy
when used with websites. So it came with AJAX product
first time Flex which is blend of Flash’s graphics + AJAX
(Evolution 1997 Flash player-->2000 Action Script 1.0-
-> see Figure 1). Issues with JavaScript like not clean
coding, no support form vendor, intuitive controls for
new fast AJAX web systems were solved. Rich Internet
Application evolved RIA evolved with Adobe Flex.
Flex came with editor where user can code using
Actionscript created with mix of JavaScript concept
into Flash scripts. Action scripts we can code complex
AJAX interface to be played on Flash player get support
from Adobe while for javascript no support available.
ActionScript program that has been optimized to
death by an AOT compiler can, almost trivially, beat a
JavaScript program that is optimized on the fly by the
JIT compiler. The only way out would be to let the JIT
compiler work till death, but that is not an option.
JavaScript programs are untyped, (relatively) small
programs that are shipped/loaded as source code, and
then compiled and run on the fly. In contrast,ActionScript
programs are typed, (relatively) large programs that are
compiled to byte code, shipped/loaded as byte code,
and then run on the fly.
Flex came with more intuitive UI which never existed
before like slider control, control for embedding video
tag which later on HTML 5 could bring in 5 yrs later. So
adobe was working 5 yrs ahead of time.
Still today concepts like onscroll pagination and
caching did not exit. some 5 yrs back for every website
server side code .NET or Java or PHP or SAP or
PeopleSoft but web client code was on Flex. Beautiful
intuitive UI controls from sliders, Maps, dynamic grids,
for OLAP olap grids, dynamic grouping and sorting it
could handle huge data seamlessly the JavaScript
latency issues also minimized. These features are now
stand replicated with Microsoft sliverlight, ExtJs and
other Java script libraries.
Competition to Flex
Technology wise competition to Flex include Curl,
OpenLaszlo, Ajax, Mozilla way back in 2002 introduced
XUL, from Sun Microsystem JavaFX, Microsoft
Windows Presentation Foundation, Silverlight and
HTML5. Examine the trend graph over period of time.
HTML5 popularity has dwarfed competition as it is open
source and work across platform (Figure 2).
• Flex had moved to new battled field Devices. Is new
java of devices write once and run on any device
android, iPhone blackberry or any tablet OS.
• Enterprise class programming Model: Use of
constructs like strong typing, inheritance, and
interfaces to program more efficiently. Extensive
mobile and traditional components help speed
Figure 2. source: trends.google.com showing search trends Flex competitors or related technology
05/2012 (35)30
FLEX 4
development. Flex applications can access device
capabilities such as GPS, accelerometer, camera,
and local database.
• End to End tooling for development: Build Flex
applications more easily using Adobe® Flash®
Builder® software, an enterprise-class Eclipse™
based IDE. Productivity features include on-device
debugging and mobile simulators for testing across
screen sizes and resolutions.
• Server Integration: Integrate with all major back
ends including Java™, Spring, Hibernate, PHP,
Ruby, .NET, Adobe ColdFusion®, and SAP using
industry standards such as REST, SOAP, JSON,
JMS, and AMF, PeopleSoft.
• AJAX design patterns: On Object oriented
programming on Action scripts design pattern are
readily available.
Even software claims today integration with flex for
choice of UI whether its ERP like PeopleSoft or SAP,
Oracle Apps, or Business intelligence system like
SAP Business objects Excelsious, IBM Cognos flex
interfaces. Each day new Members join group each
day product realize it needs to provide interface to
flex joins flex group. I remember on Cognos 8.0 did
not had features like geographic reporting interfaces,
intuitive grids with dynamic sorting and grouping,
maps etc which only after integration with flex were
possible for BI. Had no choice but to integrate Flex. I
recommend everyone at least one download tour de
flex and see the dynamic UI. I am sure you will start
loving it. From YouTube to Google finance or yahoo
finance everywhere you can see innovation of Flex
controls (Figure 3).
On contrary HTML5 is not threat but opportunity
for Adobe Flex
But Adobe has the most to gain if they become the major
player in the HTML5 field by providing tools, framework
and making the web standards evolve. And they are in a
good position to get there. Adobe has already two great
tools for HTML5, Muse and Edge.
HTML5 fight with Flex is on: Adobe online games are
beating HTML5 with over 1000 games written compared
with few hundred on HTML5. HTML5 is already almost
universally supported in mobile browsers and Adobe
realized that Flash would never get that ubiquity across
browsers. HTML is supported by 40% of web Browsers
while Flash 99%. Feature supported are browser
dependent with no 3D support while flash has plugin.
Security: Flash is miles ahead: In order to hack HTML5
Right click view source while in flash you need to get
swf file which is loaded through wrapper parent then
hacker needs to go through 2 layers of encryption and
obfuscation. Majority flash book games are flash. With
Flex 4.5 SDK build and deploy applications for Google
Android, Apple iOS and BlackBerry Tablet OS platforms
leverage one tool, one framework and one codebase
to deliver apps across leading mobile platforms, not to
mention web and desktop as well.
But then reality is still HTML5 has more issues with
Andriod and iOS while Flex has few.
Figure 3. source Finance.google.com (showing comparison of Adobe,Microsoft and Dow Jones index
Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV
05/2012 (35) 31
SANDEEP SHARMA
Solution Architect/Product Manager, 10 + yrs experience
SAP/Oracle Peoplesoft, Flex, AJAX, Business Intelligence,
Datawarehousing, Enterprise Application Integration,
Security. Worked with companies like SAP, Oracle Peoplesoft,
Ness Technologies, Cognizant technologies. Loves Marathon
running, Soccer, and adventure sports like Mountaineering.
Flex is HTML 5 + more
Flex is no.1 choice for enterprise complex, high-fidelity
enterprise applications such as business dashboards,
line of business tools, real-time trading applications
and desktop replacement applications, and see
leading companies in healthcare, financial services,
communications and other industries standardizing
on it. HTML5 has not matured yet. Flex is a choice for
following reason:
• SDK and Compiler open sourced MPL license,
HTML 5 open standard WHATWG license, Adobe +
on Flex new 3d – graphics, (transformation scene,
camera, lighting, change pixel data, effects)
• Real-time connection (HTML5 has websocket vs
Flex has flash.net.socket), Drag and Drop (drag
and drop across application, cross document,
clipboard) with API’s flash.desktop.clipboard,
Events.NativeDragevents, Flash.desktop.Transferab
leData Vs HTML5 DataTransfer and DragEvent.
• Adobe provide better file system (in HTML5 input
type upload storage api vs Flex has File, FileStream,
Filemode) (read/write capabilities), Offline Access
Adobe air provides Resource(Windows application
Vs Application cache) State (air.Event.NETWORK _
CHANGE _ URLMonitor vs navigator online)
Data (flash.data.SQLConnection vs HTML5 has
Database, SQL Transaction, SQLResultSet, Local
Storage. New HTML 5 products which also use Action
scripts as base new HTML5 products, Adobe Muse(TM)
and Adobe Edge preview.
Cloud: Adobe’s creative tablet applications+, such
as Photoshop Touch, into everyday work – seamlessly
synchronizing and storing files in the cloud for sharing
and access on any device.
Adobe Typekit launched in Oct 2011, the Web-
based font library that pioneered the use of real fonts
on websites, delivering more than 700 typefaces from
leading foundries.
Adobe Edge, a ground-breaking HTML5 development
tool; and Digital Publishing Suite Single Edition, the
technology behind the delivery of digital magazines on
iPad.
Adobe new Open source strategy: As Flex moves
into a community-driven open source project, Adobe
will make initial technical contributions and will also
continue to provide a team of full-time Flex SDK
engineers to contribute to the Apache project.
Adobe is currently in the process of contributing the
core Flex SDK (including advanced data visualization
components), automation libraries, AIR SDK binaries,
documentation, and specifications to the Apache
Flex Project. Also contribute yet-to-be-released
Spark components including ViewStack, Accordion,
DateField, DataChooser, and an enhanced DataGrid.
Other future contribution to project include Falcon JS
new compiler for action script, Mustella a functional
testing framework, BlazeDS code is already available at
adobe.com/go/blazeds_source under the GNU Lesser
General Public License, Version 3.
BlazeDS provides Java based server-side remoting
and web messaging technology allowing Flex clients
to exchange typed binary data with the server and
receive notification from other clients and servers. The
messaging service also allows Flex applications to
exchange messages with other non Flex, JMS-enabled
applications.
Flex Sparks components and the recent addition of
the new mobile components provide a great and mature
framework basis for a real open source effort
Next generation Experiments on Flex.
Gami�cation of Enterprise Software like ERP, BI,
BPM etc
Enterprise gamification to date has really been about
marketing and customer engagement. By gamification
it introduces unrealized concepts of social collaboration
and create the ad hoc collaboration, engagement
metaphor help companies realize these lofty social/
collaborative goals. people are more engaged, more
able to understand and support the outcomes that
matter to the enterprise, and they are being recognized
and rewarded for these actions. Adobe with Flash based
online games and enterprise grade Flex development
platform is greatly positioned for that.
Augumented Reality
Augmented reality (AR) is a field of computer
science that involves combining the physical world
and an interactive, three-dimensional virtual world.
For a complete project with Flash on AR visit http://
www.adobe.com/devnet/flash/articles/augmented_
reality.html.
Video game industry is major employer of AR. Its not
the end of game we have business intelligence system
employing Augmented Reality (http://youtu.be/mTflf_
PqUYs).
AR for ipad, android, ERP like SAP, Business Process
management is getting lot of traction for all this Flex
and Flash is greatly positioned. On SAP TV watch
augmented reality (http://youtu.be/C4b2Npnbhz0).
05/2012 (35)32
FLEX AND PHP
F
lex as its name suggests is very flexible
technology framework. It can connect to almost
all server side and scripting languages to
connect to database and do other server stuffs. As it
can connect to almost all languages, it can be hosted
on all kinds of server platforms.
Now let’s focus on our title of the article. Flex can be
connected to PHP to connect to database and do other
database activities. There are 3 ways of connecting
Flex to any server side language: 1) Remoting, 2) Web
Services 3) HTTP service. PHP can be used in all 3
ways.
Flex with PHP by Remoting
AMFPHP is one of the remoting ways to do it. AMFPHP
is another open source framework provided by open
source community. You just need to download the
AMFPHP folder from its website and put that folder into
your root folder of web server. Then from the following
steps you can connect the PHP code through AMFPHP:
Using mxml
-----------------
<mx:RemoteObject id=”myRemote” destination=”phpclassname”
source=”folder.phpclassname”
endpoint=”{http://localhost/amfphp/
gateway.php}” showBusyCursor=”true”>
<mx:method name=”Select_Gender” result=
”onGetGender(event)” fault=”onFault(event)”/>
In the above code,
• Select _ Gender is the php function in which some
code is written to connect to database and get the
required infromation for a particular gender.
• destination is the php file name where the function
is written.
• and source is the folder where php file is located.
And result and fault event will have result handler and
fault handler functions to handle success and failure of
the php function call.
Another option for Remoting is WebORB which can
also be used by Remoting to connect Flex with PHP.
Flex with PHP by HTTP Service
HTTP service is another way of connecting Flex with
PHP. In this method you need to create PHP files on
some remote server or on same server as php file. You
need to call that php file by some Flex classes or tags
with the help of HTTP protocal just like you are opening
a url in a browser, and handle result and fault event of
it.
Following is the sample code for that:
<fx:Declarations>
<s:HTTPService id=”sampleTest”
url=”{„+phpurl+”}abc.php”
result=”sampleTest_resultHandler(event)”
Different Ways of
Connecting Flex to PHP
Flex is a client side technology originally developed by Adobe and
now Flex SDK transferred to open source Apache community and
Flash builder, the editor for Flex, is still there with Adobe which will
be supporting Flex SDK now.
What you will learn…
• Basic idea about web server folder structure.
• Basic idea about web services.
• Basic idea about http services.
• You can do some php coding for select query also.
What you should know…
• You should have basic knowledge of Flex SDK and Flash
builder.
• You should have Object Oriented concepts clear of how to
create functions etc.
• You should have basic knowledge of Action script.
Different ways of connecting Flex to PHP
fault=”sampleTest_faultHandler(event)”
/>
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function initialize():void
{
sampleTest.send();
}
]]>
</fx:Script>
In the above code we have added an HTTP Service
tag and added an actionscirpt function to call that http
request by send method of the HTTP service. And
we need to handle result and fault of that call in result
handler and fault handler functions we have declared
in the HTTP service tag.
Flex with PHP by Web Service
Web Service is the most common way to interact a
service side technology to any client side technology.
Because Web Service follows a common standard to
sending and receiving data. There is the sample of code
for connecting Flex with PHP by web service:
<mx:WebService
id=”sampleTest”
wsdl=”http://localhost/flexapp/myfile.php?wsdl”>
<mx:operation name=”SelectGender”
resultFormat=”object”
fault=”mx.controls.Alert.show(event.fault.faultStr
JIGAR OZA
Currently Working at Rightway Solutions as Flex
Developer I have experience of 4+ years in Flex
with .Net, PHP. I have worked on web applications,
Desktop Applications and Mobile Applications in
Flex. I have worked with almost all databases like
MySQL, SQLServer, MS Access.
ing)”
result=”sampleTest_resultHandler(event)”/>
</mx:WebService>
In the code above we have declared a Web Service
which is accessing a PHP web service defiled in
WSDL property of Web Service tag. And we have
called the php method by operation tag under Web
Service tag. We have handled result and fault of
the web service by result handler and fault handler
functions.
After presenting all 3 methods, I would like to focus on
some more aspect of Flex and PHP connectivity.
Security
Remoting and Web Service are more secure ways than
HTTP Service because HTTP service allows browser
add ons such as FireBug to see what request was
sent to server and what response came back. While
remoting and web service doesn’t allow that.
Speed
As per the speed of the response is concerned, Remoting
is the fastest method followed by HTTP service and
Web Service. So we can say that Web Service is the
slowest method for Flex and PHP connectivity.
a d v e r t i s e m e n t
www.flexer.info
05/2012 (35)34
THE FUTURE OF FLEX
N
ovember 2011 will be a month long remembered
by Flash developers, Apart from announcing
the discontinuation of the Flash Player
browser plugin development for mobile devices, Adobe
announced its intention to donate the Flex SDK to the
Apache Software Foundation.
While the former, although perceived by the tech
community as the demise of Flash, was seen by many
Flash developers as a better use of Adobe resources.
Flash platform developers rarely targeted the mobile
browser plugin and it made no sense to continue
investing in it, given that there were hundreds of devices
it needed to support and several mobile browsers while
almost each one required special attention (by Adobe
as the plugin developer and by the Flash developers
themselves for the content), this sort of fragmentation
did not bode well for the mobile browser plugin along
the years.
The latter caught Flex developers truly by surprise.
Some were thrilled to hear that now Flex truly goes
open-source, allowing the community to contribute and
to extend the platform as it sees fit.
But some, mainly from the enterprise market, saw it
as if Adobe was trying to “get rid” of Flex.
The fear of the enterprise market was understandable,
how can there really be a future to the Flex framework when
Adobe controls AS3 and the Flash and AIR runtimes?
If at any point, Adobe decided to stop development on
either, what will become of Flex?
Sure, Flex is open-source but without the runtimes, it’s
pointless. In the FAQ published on the Adobe website a
few days after the announcement, one of the questions
was: “Does Adobe recommend we use Flex or HTML5
for our enterprise application development?”
And the first paragraph said it all “In the long-term, we
believe HTML5 will be the best technology for enterprise
application development. We also know that, currently,
Flex has clear benefits for large-scale client projects
typically associated with desktop application profiles”.
Although the rest of the FAQ focused on how committed
Adobe was to Flex, how it’s still a viable technology and
the fact that they are committed to their runtimes for what
seems like a minimum of 3-5 years, the general feeling
was as if Adobe has abandoned Flex and its developers.
Did this move kill off Flex completely? Absolutely not!
Will it make developers think twice before using Flex
in a project? Perhaps.
HTML5
Let’s say that you were given a certain project and you
had to complete it in Flex and in HTML5, there’s a high
chance that the HTML5 project would take longer to
complete thus making it more expensive.
Moreover, bringing the HTML5 project to its Flex
counterpart’s robustness and quality may be deemed
impossible in the state of HTML5 today.
Flex developers, understandably, feel that HTML5
has nothing better to offer than Flex has in its current
The Future of Flex
What’s next for Flex?Will open sourcing it breathe new life into it or
has it been“left out to die”?
What you will learn…
• Recent developments since Adobe decided to contribute Flex
to the Apache Foundation
• Is Flex still the right choice for large scale desktop
applications?
What you should know…
• no prior knowledge is required
Ffd 05 2012
Ffd 05 2012
Ffd 05 2012
Ffd 05 2012

More Related Content

What's hot

Windows store app development V1
Windows store app development V1Windows store app development V1
Windows store app development V1
Foyzul Karim
 
Windows Store Apps using HTML and JavaScript: Become a Windows App Store deve...
Windows Store Apps using HTML and JavaScript: Become a Windows App Store deve...Windows Store Apps using HTML and JavaScript: Become a Windows App Store deve...
Windows Store Apps using HTML and JavaScript: Become a Windows App Store deve...
Sacha Bruttin
 
Prepare for "Microsoft Word Skills" Job Interview Questions
Prepare for "Microsoft Word Skills" Job Interview QuestionsPrepare for "Microsoft Word Skills" Job Interview Questions
Prepare for "Microsoft Word Skills" Job Interview Questions
Dan Armishaw
 

What's hot (9)

Windows store app development V1
Windows store app development V1Windows store app development V1
Windows store app development V1
 
Practical Microsoft Bot Framework for Office 365 developers
Practical Microsoft Bot Framework for Office 365 developersPractical Microsoft Bot Framework for Office 365 developers
Practical Microsoft Bot Framework for Office 365 developers
 
14th Salesforce Developer Group meeting in Bilbao
14th Salesforce Developer Group meeting in Bilbao14th Salesforce Developer Group meeting in Bilbao
14th Salesforce Developer Group meeting in Bilbao
 
Windows Store Apps using HTML and JavaScript: Become a Windows App Store deve...
Windows Store Apps using HTML and JavaScript: Become a Windows App Store deve...Windows Store Apps using HTML and JavaScript: Become a Windows App Store deve...
Windows Store Apps using HTML and JavaScript: Become a Windows App Store deve...
 
HTML5 Up and Running
HTML5 Up and RunningHTML5 Up and Running
HTML5 Up and Running
 
13th Salesforce Developer Group meeting in Bilbao
13th Salesforce Developer Group meeting in Bilbao13th Salesforce Developer Group meeting in Bilbao
13th Salesforce Developer Group meeting in Bilbao
 
Open source business models
Open source business modelsOpen source business models
Open source business models
 
Developing Enterprise-Grade Mobile Applications
Developing Enterprise-Grade Mobile ApplicationsDeveloping Enterprise-Grade Mobile Applications
Developing Enterprise-Grade Mobile Applications
 
Prepare for "Microsoft Word Skills" Job Interview Questions
Prepare for "Microsoft Word Skills" Job Interview QuestionsPrepare for "Microsoft Word Skills" Job Interview Questions
Prepare for "Microsoft Word Skills" Job Interview Questions
 

Similar to Ffd 05 2012

Buzz & fuss about html5
Buzz & fuss about html5Buzz & fuss about html5
Buzz & fuss about html5
PixelCrayons
 
Eclipsist2009 Rich Client Roundup
Eclipsist2009 Rich Client RoundupEclipsist2009 Rich Client Roundup
Eclipsist2009 Rich Client Roundup
Murat Yener
 
flutter-general-report.docx
flutter-general-report.docxflutter-general-report.docx
flutter-general-report.docx
KuntalSasmal1
 

Similar to Ffd 05 2012 (20)

The Future of Flash
The Future of FlashThe Future of Flash
The Future of Flash
 
PHOTOSHOP AND VFX
PHOTOSHOP AND VFX PHOTOSHOP AND VFX
PHOTOSHOP AND VFX
 
Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009Osvrt Na Adobe Max 2009
Osvrt Na Adobe Max 2009
 
What is microsoft silverlight?
What is microsoft silverlight?What is microsoft silverlight?
What is microsoft silverlight?
 
Flash-based audio and video communication
Flash-based audio and video communicationFlash-based audio and video communication
Flash-based audio and video communication
 
Buzz & fuss about html5
Buzz & fuss about html5Buzz & fuss about html5
Buzz & fuss about html5
 
Eclipsist2009 Rich Client Roundup
Eclipsist2009 Rich Client RoundupEclipsist2009 Rich Client Roundup
Eclipsist2009 Rich Client Roundup
 
Practical Design and Development with Flash on Mobile and Devices
Practical Design and Development with Flash on Mobile and DevicesPractical Design and Development with Flash on Mobile and Devices
Practical Design and Development with Flash on Mobile and Devices
 
Html5 workshop part 1
Html5 workshop part 1Html5 workshop part 1
Html5 workshop part 1
 
flutter-general-report.docx
flutter-general-report.docxflutter-general-report.docx
flutter-general-report.docx
 
Adobe Max 2009 - Learnings
Adobe Max 2009 -  LearningsAdobe Max 2009 -  Learnings
Adobe Max 2009 - Learnings
 
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
 
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
Multi-platform Compatibility of HTML5 by developing simple HTML5 based game(M...
 
Flutter App Development- Why Should You Choose It .
Flutter App Development- Why Should You Choose It .Flutter App Development- Why Should You Choose It .
Flutter App Development- Why Should You Choose It .
 
Top 10 web development tools in 2022
Top 10 web development tools in 2022Top 10 web development tools in 2022
Top 10 web development tools in 2022
 
Software Developer's Journal - 02/2012
Software Developer's Journal - 02/2012Software Developer's Journal - 02/2012
Software Developer's Journal - 02/2012
 
Silverlight
SilverlightSilverlight
Silverlight
 
User Group Meeting PaperVision3D
User Group Meeting PaperVision3DUser Group Meeting PaperVision3D
User Group Meeting PaperVision3D
 
Flex vs. HTML5 for RIAS
Flex vs. HTML5 for RIASFlex vs. HTML5 for RIAS
Flex vs. HTML5 for RIAS
 
flex and flash platform
flex and flash platformflex and flash platform
flex and flash platform
 

More from Sandeep Sharma IIMK Smart City,IoT,Bigdata,Cloud,BI,DW

More from Sandeep Sharma IIMK Smart City,IoT,Bigdata,Cloud,BI,DW (20)

Management Consultancy Saudi Telecom Digital Transformation Design Thinking
Management Consultancy Saudi Telecom Digital Transformation Design ThinkingManagement Consultancy Saudi Telecom Digital Transformation Design Thinking
Management Consultancy Saudi Telecom Digital Transformation Design Thinking
 
Major new initiatives
Major new initiativesMajor new initiatives
Major new initiatives
 
Digital transformation journey Consulting
Digital transformation journey ConsultingDigital transformation journey Consulting
Digital transformation journey Consulting
 
Agile Jira Reporting
Agile Jira Reporting Agile Jira Reporting
Agile Jira Reporting
 
Lnt and bbby Retail Houseare industry Case assignment sandeep sharma
Lnt and bbby Retail Houseare industry Case assignment  sandeep sharmaLnt and bbby Retail Houseare industry Case assignment  sandeep sharma
Lnt and bbby Retail Houseare industry Case assignment sandeep sharma
 
Risk management Consulting For Municipality
Risk management Consulting For MunicipalityRisk management Consulting For Municipality
Risk management Consulting For Municipality
 
GDPR And Privacy By design Consultancy
GDPR And Privacy By design ConsultancyGDPR And Privacy By design Consultancy
GDPR And Privacy By design Consultancy
 
Real implementation Blockchain Best Use Cases Examples
Real implementation Blockchain Best Use Cases ExamplesReal implementation Blockchain Best Use Cases Examples
Real implementation Blockchain Best Use Cases Examples
 
Biztalk architecture for Configured SMS service
Biztalk architecture for Configured SMS serviceBiztalk architecture for Configured SMS service
Biztalk architecture for Configured SMS service
 
Data modelling interview question
Data modelling interview questionData modelling interview question
Data modelling interview question
 
Pmo best practices
Pmo best practicesPmo best practices
Pmo best practices
 
Agile project management
Agile project managementAgile project management
Agile project management
 
Enroll hostel Business Model
Enroll hostel Business ModelEnroll hostel Business Model
Enroll hostel Business Model
 
Cloud manager client provisioning guideline draft 1.0
Cloud manager client provisioning guideline draft 1.0Cloud manager client provisioning guideline draft 1.0
Cloud manager client provisioning guideline draft 1.0
 
Bpm digital transformation
Bpm digital transformationBpm digital transformation
Bpm digital transformation
 
Digital transformation explained
Digital transformation explainedDigital transformation explained
Digital transformation explained
 
Government Digital transformation trend draft 1.0
Government Digital transformation trend draft 1.0Government Digital transformation trend draft 1.0
Government Digital transformation trend draft 1.0
 
Enterprise architecture maturity rating draft 1.0
Enterprise architecture maturity rating draft 1.0Enterprise architecture maturity rating draft 1.0
Enterprise architecture maturity rating draft 1.0
 
Organisation Structure For digital Transformation Team
Organisation Structure For digital Transformation TeamOrganisation Structure For digital Transformation Team
Organisation Structure For digital Transformation Team
 
Case study haad operating model improvement model
Case study  haad operating model improvement modelCase study  haad operating model improvement model
Case study haad operating model improvement model
 

Recently uploaded

Recently uploaded (20)

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 

Ffd 05 2012

  • 1.
  • 2. ���������������� �������������������������������������������������� ������������������������������������ ���������������������������������������������������������������������������������� ��� ���� ����������� ����� ������� ������� �������� ���� ������� ����������� ���� ����� ������������� �������� ������������ ���� �������� �������������� �������������� ��������������������������������������������� ���������������������������������������������������������������������������� ���������������������������������������������������������������������������������� ������������������������������������������������������������������������������ ����������������������������������������������������������������������
  • 3. �������������� ����������������������� ����������������������������������������������������������������������������� ���������������������������������������������������������������������������������� ������������������������������������������������������������������������������ �������������������������������������������������������������������������������� ������������������������������������������������������������������������������� �������������������������������������������������������� �������������������� ��������������������������������������������������������������������������� ���������������������������������������������������������������������������� ��������������������������������������������������������������������������������� ��������������������������������������������������������������������� ����������������� ������������������������������������������������������������������������� ������������������������������������������������������������������������������� �������� ����������� ������������ ������� ����������� ������������ ��������� ��� ���� ���������������������������������������������������������������������������� ��������������������������������������������������������������������������������� ������������������ ����� ������������������������������������ ���������������������������������������������
  • 4. 4 05/2012 (35) Dear Readers, This month we want to share an issue devoted to Flex 4. There is a big portion of fresh articles waiting for you! As you will see there is a lot of helpful information. You can read for example about Flash Professional CS6, Flex & FXG, Flex & PHP and many more. After reading this issue you will be richer in knowledge and new skills. I’m sure that everyone will find something for himself/herself! Let’s start from the article about ‘Generating Sprite Sheets’ by Christopher Caleb. As he wrote, Flash Professional CS6 makes it incredibly easy to create sprite sheets while using the design and animation workflow that you’re already familiar with. With very little effort you’re able to create a compact sprite sheet that can be used in ActionScript projects or even other languages such as Java Script and Objective-C. Ralph Hauwert in his article describes Flash Premium Features and Unity Content. Adobe has recently announced “Premium Features for Gaming” for the Flash Platform which initially includes only Fast Memory Opcodes and Stage3D when used simultaneously. They have also announced a required 9% revenue share on Premium Features Licensed content that exceeds $50k in revenue. The next articles written by Harit Kothari is mainly about FXG (SVG implementation). It is not really a replacement for all scenarios. It isn’t really replacement to bitmapdata. Likewise skinned UIComponent, you really do not need bitmapdata for its weight and scalability issues. SVG manipulation is much easier and clean in terms of rendering, and that’s why Flex component, with its FXG skin looks beautiful in any size! From the article written by Sandeep Sharma you can learn that HTML5 fight with Flex is on: Flex SDK and Compiler open sourced MPL license, HTML 5 open standard WHATWG license, new 3d – graphics,(transformation scene, camera, lighting, change pixel data, effects) Real-time connection(HTML5 has websocket vs Flex has flash.net.socket), Drag and Drop (drag and drop across application, cross document, clipboard) with API’s flash. desktop.clipboard, Events.NativeDragevents, Flash.desktop.Transferabl eData Vs HTML5 DataTransfer and DragEvent. However, the article about Flash & PHP by Jigar Oza talks that as per the speed of the response is concerned, Remoting is the fastest method followed by HTTP service and Web Service. So we can say that Web Service is the slowest method for Flex and PHP connectivity. In the last but not least article, Daniel Abu wrote that he is still going to use Flex in the next couple of years as it allows him to create enterprise level desktop and mobile applications in a shorter time than any existing technology. Nevertheless, he is going to continue expanding his knowledge with new HTML5 frameworks as they come out. Find out something for yourself and enjoy reading! Paulina Śliwka & FFD Team Managing: Paulina Śliwka paulina.sliwka@software.com.pl Proofreaders: Patrick French Betatesters: r0mk1n.work@gmail.com Marketing Director: Paulina Śliwka paulina.sliwka@software.com.pl Editor in Chief: Ewa Dudzic DTP Team: Ireneusz Pogroszewski 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 D’Agostino Games Section Editor: Chris Hughes Contributing Editors: Pedro de La Rocque, Ali Raza, Csomák Gábor 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 Smith- Kielland, Justus, Csomák Gábor, 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 program by company. Mathematical formulas created by Design Science MathType™ ATTENTION! Distributing current or past issues of this magazine – without permission of the publisher – is harmful activity and will result in judicial liability. DISCLAIMER! The techniques described in our articles may only be used in private, local networks. The edi- tors hold no responsibility for misuse of the presented techniques or consequent data loss. Editor’s Note
  • 5. 5 05/2011 (35) CONTENTS Creating Animations 06 Generating Sprite Sheets in Flash Professional CS6 BY CHRISTOPHER CALEB The domination of mobile devices and tablets has brought about new challenges for developers and designers. For animation, bitmaps are now preferred above vector graphics, which typically require more CPU resources. To improve the development workflow and to maximize performance, bitmap sequences are often packed into what is called a Sprite Sheet before being used. Unity Development Platform 14 Unity: Making (Flash) 3D Game Development Easy and Fun BY RALPH HAUWERT As was revealed last year, and has been confirmed again by Adobe in March, the list will be extended with Flash, which carries an incredibly high global install count. This is important to Unity Technologies as a company that can offer its development community another amazing option to be successful with the Flash Platform. Flex 4 and FXG 22 Flex 4 and FXG BY HARIT KOTHARI Flex application without real UI asset is like an amazing structure of building, without walls and furnished box! The core challenge is balancing UI and functionality. If you provide rich UI, but weak functionality, it doesn’t sustain long. In reverse, if you provide expected functionality, but dull or default UI, it may give kind of non touching feeling to user. Now the problem starts, you provide good functionality, and equally good UI, the application gives wow effect in demo, but in reality, it slows down and consumes too much memory, rendering being one of costly process! Flex 4 28 Future of Flex & Flash : Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV BY SANDEEP SHARMA Adobe outdoing competition for many years now has system in place for bringing future like IPTV (http:// blogs.adobe.com/flashplatform/tag/iptv), mobile/tablet OS interfaces,photo editorslike photoshop, Word editors like Acrobat reader with compressed storage. Adobe has company which have been working ahead of time many years in many technology are like Acrobat reader, Photoshop with image processing algorithm implementations for naive users, for online picture editor for image enhancements using image processing algorithms (http://pixlr.com/editor/), Flex for AJAX/RIA. Flex and PHP 32 Different ways of connecting Flex to PHP BY JIGAR OZA Flex as its name suggests is very flexible technology framework. It can connect to almost all server side and scripting languages to connect to database and do other server stuffs. As it can connect to almost all languages, it can be hosted on all kinds of server platforms. The Future of Flex 34 What’s next for Flex? Will open sourcing it breathe new life into it or has it been “left out to die”? BY DANIEL ABU November 2011 will be a month long remembered by Flash developers, Apart from announcing the discontinuation of the Flash Player browser plugin development for mobile devices, Adobe announced its intention to donate the Flex SDK to the Apache Software Foundation. While the former, although perceived by the tech community as the demise of Flash, was seen by many Flash developers as a better use of Adobe resources.
  • 6. 05/2012 (35)6 CREATING ANIMATIONS T he domination of mobile devices and tablets has brought about new challenges for developers and designers. For animation, bitmaps are now preferred above vector graphics, which typically require more CPU resources. To improve the development workflow and to maximize performance, bitmap sequences are often packed into what is called a Sprite Sheet before being used. One of the great new features of Flash Professional CS6 is the ability to export your timeline animations to a sprite sheet. Not only can sprite sheets be used in Flash-based projects, they can also be applied to a multitude of other technologies and frameworks. Essentially, you can continue to use Flash Professional as your animation tool, regardless of the development language your project is targeting. This tutorial will show you how Flash Professional CS6 can be used to generate a sprite sheet from several movie clip animations. Getting Started You’ll need Flash Professional CS6, a trial version of which can be downloaded from www.adobe.com/ downloads. For this tutorial, a FLA containing some animation has already been prepared for you to work with. Download it from www.yeahbutisitflash.com/downloads/sprite- sheets-cs6-tut/monkey.fla and open it within Flash Professional CS6. Launching the Sprite Sheet Generator Take a look at the FLA’s Library panel (Figure 1). There you will see three movie clips named Dazed, Jump, and Panic respectively. Collectively they represent a monkey in various animation states for a fictional game. Double-click the Jump movie clip to move into its timeline. You’ll see that this particular clip is animated Generating Sprite Sheets in Flash Professional CS6 Learn how to create and export a sprite sheet using Flash Professional CS6. What you will learn… • How to place timeline animations within a sprite sheet • How to manage the animations that appear within your sprite sheet • How to optimize the layout of a sprite sheet What you should know… • You should be comfortable working with Flash Professional Figure 1. Movie clips within the library
  • 7. Generating Sprite Sheets in Flash Professional CS6 05/2012 (35) 7 across three frames (Figure 2) and that the monkey is built entirely from vector shapes. The other two movie clips are constructed in a similar manner. Although we’ll be exporting all the animation frames as bitmaps, you’re still free to create your artwork using Flash Professional’s familiar vector drawing tools. When you’re generating a sprite sheet you need to select a collection of clips whose frames you’d like added to the sheet. Let’s add all three of our movie clips to a sprite sheet. To do this, first click on the Dazed movie clip within the library. Now hold the shift key and click on the Panic movie clip. With all three clips selected, right-click any of the clips from the library and select Generate Sprite Sheet (Figure 3) from the context menu. Your sprite sheet will be generated and the Generate Sprite Sheet panel will appear. Viewing your Sprite Sheet Within the panel you’ll be able to see the sprite sheet that has been generated. It will contain a bitmap representation of each frame of animation from your three movie clips (Figure 4). Directly above the sprite sheet are two tabs named Sprite Sheet and Preview. For the time being, leave the Sprite Sheet tab selected. Given the sprite sheet’s fairly large dimensions you’ll also likely see scroll bars allowing you to pan around the sheet. At the bottom-left of the sprite sheet you’ll find a zoom field. Try setting the magnification to 50% for more comfortable viewing. Previewing Animation Sequences Before you export your sprite sheet, it’s possible to preview the bitmap representation of each of your animation sequences. Take a look at the Symbol Figure 2. The Jump movie-clip’s three frames of animation Figure 3. Generating a sprite sheet for the selected library clips Figure 4. The Generate Sprite Sheet panel
  • 8. 05/2012 (35)8 CREATING ANIMATIONS information section on the left of the panel. It lists the names of the movie clips that were used when generating the sprite sheet. At present, the Dazed symbol will be highlighted. To preview its animation simply click the Preview tab directly above the image of your sprite sheet. You’ll see both frames from the Dazed animation being played quickly one after the other. At the bottom of the preview pane is a set of controls (Figure 5) allowing you to pause the animation and step through it frame- by-frame. Give it a go, and again, if you’re finding the preview area uncomfortably small then you can adjust its magnification to suit. It’s important to note that what you’re looking at here is a bitmap representation of your vector animations, and not the vectors themselves. You are seeing your animations as they will look when taken from the generated sprite sheet. Now preview the Jump and the Panic animations also. Simply click on each from the Symbol information section and step through their animation frames. Before moving on, it’s worth noting that you can exclude any of the symbols from your sprite sheet by simply unselecting them in the Symbol information section. To see the impact of this, first click on the Sprite Sheet tab to see your whole sprite sheet again then uncheck the Dazed symbol’s checkbox (Figure 6) in the list. You’re sprite sheet will be immediately regenerated with the animation frames from the Dazed movie clip removed. Add the Dazed symbol back into your sprite sheet by checking its checkbox again. Image Dimensions and Format When a sprite sheet is generated, Flash Professional CS6 automatically selects a suitable size based on the animation frames being added to it. It also selects the image format that the sprite sheet is to be saved as. For this tutorial’s sprite sheet, its dimensions were set at 1024 x 2048 pixels and a 32-bit PNG format was selected to allow transparency on each frame of animation. Both the sprite sheet’s dimensions and its image format can be changed from the panel’s Sprite Sheet output section (Figure 7). Let’s see how our sprite sheet is affected when we change its dimensions. Although you can change the width and height to any arbitrary value, the Generate Sprite Sheet panel provides a drop-down list of common sizes. Select 1024x1024 from the Image dimensions field’s drop- down list (Figure 8). You’ll see an exclamation mark appear next to the field indicating that there is now a problem. If you look at the bottom of your sprite sheet Figure 6. Omitting a library symbol’s frames from the sprite sheet Figure 5. The animation preview pane and playback controls Figure 7. The panel’s Sprite Sheet output section Figure 8. Manually selecting the sprite sheet’s dimensions
  • 10. 05/2012 (35)10 CREATING ANIMATIONS you’ll see that part of the final bitmap has been cropped due to the sheet’s reduced height. Correct this by either manually setting a larger size or by setting the Image dimensions field to Auto size. You may have noticed that the size automatically chosen by Flash Professional has a significant amount of unoccupied space near the bottom of the sprite sheet. Why doesn’t it simply crop the sheet’s dimensions to create a tighter fit? Well when it comes to graphics performance, a sprite sheet’s size can be vitally important. In order to maximize performance, applications often store their sprite sheets on the Graphics Processing Unit (GPU). GPUs however work best with dimensions that are of a power of two (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048). Layout Optimizations It’s important to know the maximum width and height supported by any hardware your application is targeting. For example, many GPUs have a size limit of 1024x1024 pixels. If you can’t squeeze everything onto a single sheet then you’ll need to export several sprite sheets to hold all your graphics. Fortunately Flash Professional provides some options that can be used to optimize the packing of your sprite sheet’s contents. Let’s see if we can reduce our sprite sheet’s height from 2048 pixels to 1024 pixels without compromising our artwork. Within the Sprite Sheet output section you should see a Trim checkbox. Trimming removes any transparent pixels from the border of your sprite sheet’s frames. Check the Trim checkbox and you should see the sprite sheet’s layout alter slightly. If you examine the sprite sheet’s height you’ll see that it has been reduced to 1024 pixels. The small savings that have been made by trimming each bitmap has allowed Flash Professional to organize your graphics within a 1024x1024 sprite sheet instead of a 1024x2048 sheet. This is quite a saving! It’s also possible to remove duplicate frames from your sprite sheet. If you look closely at your sprite sheet you’ll notice that frames 2 and 5 are identical, as are frames 3 and 6 (Figure 9 illustrates this by clearly marking the duplicate frames). Essentially there’s no need to store duplicates as you can simply use the first copy of each frame in your animations. To remove the duplicates, check the Stack frames checkbox directly Figure 9. Duplicate frames within the sprite sheet Figure 10. Removing duplicates with the Stack frames option Figure 11. Markers clearly indicating stacked frames
  • 11. Generating Sprite Sheets in Flash Professional CS6 05/2012 (35) 11 underneath the Trim checkbox (Figure 10). You’ll now be left with free space within your sprite sheet, which can be put to good use if you have other graphics you’d like to pack onto the sheet. Additionally, markers will appear over the frames within your sprite sheet that are to be shared across multiple animations (Figure 11). Each marker will contain a number indicating just how many animations the frame will be re-used in. If it helps, think of the duplicate frames as having been stacked on top of one another. So far we’ve been using Flash Professional’s default packing algorithm. However a more sophisticated one is available that provides a higher packing ratio than the basic algorithm. To see how it might benefit us, first uncheck the Trim and Stack frames checkboxes. With these options removed your sprite sheet should once again be 1024x2048 pixels in size. Now, staying within the Sprite Sheet output section, find the Algorithm drop-down box and select MaxRects. Notice that the MaxRects algorithm is able to pack your graphics into a 1024x1024 sprite sheet (Figure 12) without help from the Trim and Stack frames options. It’s always worthwhile experimenting with the available algorithms to see which one will work best with your content. Exporting the Sprite Sheet Okay, using the current settings, let’s export our sprite sheet. Two files will be created – a bitmap image containing the sprite sheet’s graphics, and an XML file that defines the position of the animation frames within the sprite sheet. First we’ll need to specify which data format the XML file is to be output as. Flash Professional supports various frameworks that can utilize Figure 12. LHS: 1024x2048 sheet using Basic algorithm. RHS: 1024x1024 sheet using MaxRects Listing 1. The sprite sheet's XML �le <?xml version="1.0" encoding="UTF-16"?> <TextureAtlas imagePath="monkey.png"> <!-- Created with Adobe Flash CS6 version 12.0.0.481 --> <!-- http://www.adobe.com/products/flash.html --> <SubTexture name="Dazed0000" x="0" y="0" width="293" height="418"/> <SubTexture name="Dazed0001" x="0" y="418" width="293" height="418"/> <SubTexture name="Jump0000" x="293" y="0" width="282" height="367"/> <SubTexture name="Jump0001" x="293" y="367" width="282" height="367"/> <SubTexture name="Jump0002" x="575" y="0" width="282" height="367"/> <SubTexture name="Panic0000" x="575" y="367" width="314" height="277"/> <SubTexture name="Panic0001" x="575" y="644" width="314" height="277"/> </TextureAtlas>
  • 12. 05/2012 (35)12 CREATING ANIMATIONS sprite sheets. However each framework requires the sprite sheet’s XML in a different format. Let’s target the popular ActionScript-based Starling framework. Simply select Starling from the Data format drop-down box. You can find it within the panel’s Sprite Sheet output section. Now all that’s left to do is specify a filename for the sprite sheet. At the bottom of the Generate Sprite Sheet panel is a Browse field. Enter monkey.png into the field and click the Export button to its right. A PNG file named monkey.png will be written to your FLA’s root folder along with an XML file named monkey.xml. Understanding the sprite sheet’s XML Although the sprite sheet’s XML file is mostly taken care of by your framework of choice, if you’re also taking care of coding duties then you do need to know the unique name that has been assigned to each of the sheet’s animation frames. It’s these names that you use when writing code to create animations or to simply display a single frame from the sprite sheet. Let’s find each frame’s name. Open the newly created monkey.xml file into a text editor and take a look at it. Listing 1 shows the file’s XML. As you can see, the XML is fairly straightforward and easy to understand. There’s a top-level <TextureAtlas> tag, which defines the name of the sprite sheet’s image file via the imagePath attribute. This successfully ties the XML file to the correct image. The remainder of the XML file contains a collection of <subTexture> tags, which are used to define the rectangular region of each of the sprite sheet’s frames. Notice that each <subTexture> tag contains a name attribute, which is used to declare a unique name for each frame. The names are constructed from the name of the movie clip that the frame originally belonged to, and an index position indicating its order within the animation sequence. This is illustrated in Figure 13 where each name is superimposed over its corresponding frame on the sprite sheet. Congratulations! You now know how to export a sprite sheet using Flash Professional CS6 and also understand the format of the XML file that represents it. Final Statement Flash Professional CS6 makes it incredibly easy to create sprite sheets while using the design and animation workflow that you’re already familiar with. With very little effort you’re able to create a compact sprite sheet that can be used in ActionScript projects or even other languages such as JavaScript and Objective-C. If you’d like to know more about sprite sheets or how to use them within your Starling projects then take a look at my Working with Sprite Sheets in Starling article from the April issue of Flash and Flex Seveloper’s Magazine. Alternatively pay a visit to the official Starling Framework website at http://gamua.com/starling. Figure 13. Your sprite sheet with frame names superimposed CHRISTOPHER CALEB Christopher Caleb is a professional Flash developer and author of Flash iOS Apps Cookbook. He is currently lead Flash developer at WeeWorld – an avatar-based social network and virtual world for teens. Christopher blogs at www.yeahbutisit�ash.com and tweets as @chriscaleb. If you �nd anything he says vaguely interesting then feel free to send him an email at info@christophercaleb.com.
  • 13.
  • 14. 05/2012 (35)14 UNITY DEVELOPMENT PLATFORM A s was revealed last year, and has been confirmed again by Adobe in March, the list will be extended with Flash, which carries an incredibly high global install count. This is important to Unity Technologies as a company that can offer its development community another amazing option to be successful with the Flash Platform. In short, it’s another way to help level the playing field for Unity developers. Unity Technologies at a Glance Unity Technologies was officially founded by David Helgason, Nicholas Francis, and Joachim Ante in Copenhagen, Denmark in 2004 but the Unity engine unofficially began treading its path in 2001 with the development of a game called GooBall. When it became clear that the tools developed to make the game were more successful creations than the game itself, focus shifted to creating a complete 3D engine and development toolset that anyone, anywhere could use to create high-quality games. The first version of Unity was launched at Apple’s Worldwide Developer Conference in 2005. Since that point, the popularity of Unity has risen steadily. In 2009, the $200 indie pricing was cut in favor of making the base product free for PC, Mac, and Web development while the $1500 Unity Pro provided extra features that “professional” developers desire. Support for mobile platforms (iOS and Android) and all major consoles (Wii, Xbox 360, PlayStation 3) has also helped position Unity as one of the most widely adopted game development tools in the world. The Unity community, one of the most positive, diverse, and helpful development communities on the Internet, has grown to over 1,000,000 registered developers with 300,000 of that number using the tools on a regular monthly basis. The 250,000 new registers in the last three months are also a pretty good indication of the exponential surge in popularity of the platform. Consequently the Unity Technologies employee count has continued to rise to support growth and is now around 175 employees spread across nine countries. Unity is constantly in a state of development and the latest update, Unity 3.5, brought some a great amount of additions and changes such as the new Shuriken particle system, massive improvements to lighting options, improved occlusion culling, and pathfinding systems at no additional upgrade cost. The Unity 3.5 beta also brought with it the Flash Developer Preview, giving all those who download the beta the chance to check out the Flash deployment tool and enter a creation contest to see who could build the best game over the holiday break between 2011 and 2012. The contest saw around 500 submissions, proving the Flash deployment add-on to be a great success. The Flash add-on preview is still available for anyone that downloads Unity 3.5 (Free or Pro) so everyone who Unity: Making (Flash) 3D Game Development Easy and Fun “Build Once, Deploy Anywhere”is a mantra that has helped propel the Unity development platform to the healthy global status it enjoys today. Up until now this idea of quick publishing to different platforms has included PC, Mac,Web (through UnityWeb Player and Native Client), iOS, Android, Xbox 360, PS3, andWii. What you will learn… • what is the Unity Technology • how to creating your own content using Unity Flash • what is the unity Flash-in-a-Flash Competition What you should know… • basics Adobe Flash understanding
  • 15. Unity: Making (Flash) 3D Game Development Easy and Fun 05/2012 (35) 15 loves making games for Flash can try it out! You can find out more about this later in the article. Unity and the Democratization of Game Development The core concept of “democratizing game development” has been, and is still, the foundation for every change and addition that is made to Unity. This means a particular focus on creating a full-featured engine with user-friendly tools for a price that anyone (especially indie studios) can afford. One of the biggest draws for Unity as a toolset has clearly been its quick learning-curve. Later on in this article, you will find a jumping-off point for Flash developers. Hopefully you’ll see the UI’s accessibility and efficiency as a testament to the amount of effort put into its development given the breadth and depth of Unity’s features. The interface manages incredible transparency for important features while hiding the less important guts so that only the few that really need access to them will have to look. The UI is presented visually to be familiar to those that use 3D Studio Max or Maya but is easily understood by all. Assets can be dragged and dropped into a scene with ease. At the same time, properties can be adjusted for objects individually or for “prefabs” that carry information about everything from visual style to control scripting with them across all instances of an object in project. The goal is to take the pain out of development and nowhere is this clearer than in the platform deployment tools where a click of a button is all it takes to convert a project from one platform to the next. Unity does the heavy lifting and developers are left with the clean-up tasks of optimization and bug hunting. That means if you’re developing a game for iOS or Android and you want to move it to Flash (or vice versa), you’ll barely have to lift a finger to make it happen. Unity also provides the best prototyping and gameplay testing environment in the industry. Games can be played in the editor while adjustments can be made on the fly. Values are adjusted without making any permanent changes to any underlying scripts. Instantaneous results make iteration efficient and fun. Making Teams Smaller and More Efficient While the tools and pricing are almost always the start of any conversation regarding Unity’s strengths and usefulness, two other democratization initiatives were introduced at the end of 2010 to provide new potential advantages to smaller developers: The Asset Store and Union Business Division. The Asset Store is an exchange for assets of all types (art, scripts, sound, editor extensions) that can be accessed directly from the Unity application. Creators can upload assets to the store where developers looking for an out-of-the-box solutions can purchase them. This simple concept allows for coders to find art, artists to find code, and everyone to add more functionality to Unity. Once an asset has been purchased (or downloaded for free) it can be immediately installed into the active project. The assets are all royalty free and can be used in any number of projects. The Store has seen great success in its first year growing from 64 asset packages to over 2,800 currently with some asset creators making a good chunk of money monthly. Union provides a distribution network to Unity developers that falls outside the realm of normal publishing. The service is free to all to join and has the potential to hook developers up to new avenues of distribution to emerging platforms such as smartphones that aren’t iOS or Android, set top boxes like Roku, and Smart TVs. Union will take care of porting the games to each platform, freeing up development resources to work on follow-up titles. Costs of porting the game will be taken from profits after which Union takes a minor 20% revenue share. Flash as a Unity Build Target When Adobe announced Stage3D (then still known as Molehill) to the world back in 2010, Flash became a viable target for Unity export. Stage3D is a lower-level hardware accelerated graphics API; which is needed for the complex 3D graphics the Unity Engine can produce in real time. As mentioned earlier, one of the most attractive things about the Flash Platform is its incredible reach. With more than 1.3 billion PC installs of the Flash Player, the potential target audience is huge. Unsurprisingly, Unity’s userbase indicated they wanted access to this audience so once Stage3D was announced, work commenced on the Flash deployment add-on. Porting the engine to work with Flash has been a massive undertaking. On the already existing targets, the engine runs as compiled native code directly targeting the device. Compare this to the Flash Player, where we cross-compile our engine, the Scripting API code, and finally the project code to ActionScript. Additionally, it cross-compiles shaders to Adobe’s AGAL Shader language and rewrite all project assets to Flash Player compatible formats. The most important thing to take away from this is that you, as a content creator, don’t have to worry about what platform you are targeting with Unity. Unity does that work so you can focus on creating your content using all of the same advanced runtime features such as physics, occlusion culling, particle systems and navigation meshes, when targeting to Flash. While the deployment tool is currently still in preview, there are already many users creating beautiful content
  • 16. 05/2012 (35)16 UNITY DEVELOPMENT PLATFORM for Flash. The power of authoring for Flash using the Unity Editor will mean an acceleration in growth of great content for it. Unity’s Flash-in-a-Flash Competition The “Flash in a Flash” competition was great validation of how Unity helps developers are creating quality content faster. The contest, which started in December 2011, was in celebration of the release of the first version of the tool. It challenged developers to create new games or port their old ones over to Flash and judged both on creativity and technical merit. Many people did just that in a very short amount of time. After the two week deadline; the amount of entries into the competition alone shocked the Unity staff. With close to 500 entries, there was a ton of content to play and review! It turned out to be very tough to select the winner and the ten runners up. Considering the Flash exporter was in first beta at that point in time, entrants did an incredible job of utilizing it to create incredible games. Let’s have a look at the winner and some of the runners up. Winner: Tail Drift By Cameron Owen Tail Drift is a simple arcade racer in which you maneuver a red plane along a 3D candy-striped tubular track. The track runs below, above, and around floating islands and hot-air balloons that you have to avoid smacking into. It’s a bit like Retro Revolution meets Mario Kart. Ski Safari By Brendan Watts In Ski Safari, a charming casual game by Brendan Watts, you are a resilient little skier outrunning a deadly avalanche. Survive and gain points by making impressive jumps, collecting coins, and riding on the back of various animals that happen to be also zipping down the mountain! Use penguins to glide further, Yetis for increased toughness, and Eagles to soar to great heights! Aaaaa!!! for the Awesome By Owlchemy Labs and Dejobaan Games Landing yourself in traction was never so much fun. In this game you free fall through a floating cityscape high above the Earth’s stratosphere. Gather points by skimming alongside buildings, but, use your parachute to avoid crashing into them.
  • 17. Unity: Making (Flash) 3D Game Development Easy and Fun 05/2012 (35) 17 Flatboyz By Bento-Studio You are a cardboard hero dangling from a rope and gliding above the countryside. Below you are surly looking mortals clad in red bikini bottoms. You must pick them up to make them happy again – and give them new clothes! But watch out for the trees, rooftops, and other obstacles that can knock you off your rope. Start creating your own content using Unity Flash! The current release version of Unity 3.5 includes a public preview of the Unity Flash deployment add-on. It’s by no means final at this point but we wanted to get this in the hands of as many as people possible, as quickly as possible, to let everyone try it out and give us feedback. On final release this will become paid add-on to Unity but, right now, you can download a free copy of Unity and start deploying your Unity games to Flash. Longtime Unity users will find it easy to simply deploy their games to Flash as they would with any other new platform. Flash developers new to Unity will also find it exciting to build games for their favorite platform but also have the option to then release the game to multiple other potentially profitable targets. We will be focusing this next section of the article for people with a Flash / Flex background that are new to Unity. To follow along, you can get the free version of Unity 3.5 with our Flash Exporter preview at: http://unity3d.com/unity/ download/. An Introduction to Unity for Flash Developers Unity is a cross-platform development tool known for its simple learning curve and rapid development, but how does one get started using Unity? As a Flash user, it is important to remember that your first glance at Unity may seem alien, but our interface and workflow actually carries with it many parallels with Flash. Make a Scene! How Unity Content is Organized To create Unity games, much like Flash – games are arranged inside Scenes. These could be considered as Flash scene equivalents, while the overall Project, an equivalent to your .FLA files are folders containing the entire Unity project. The Scene you are currently working on is shown in the Scene view in Unity. This view is effectively a 3D equivalent to the main Stage in Flash. The key difference to note here is the infinite nature of 3D space – for this reason Unity provides simple navigation tools, akin to 3D modelling applications such as 3DS Max, Maya, or Modo for example. Don’t fear if you are unfamiliar with 3D navigation as the simple use of the Hand tool in Unity, along with modifier keys Alt / Ctrl allow you to pan, orbit, and zoom with ease. This infinite three-dimensional space also means that you should forget about the nature of dimensions as defined in Flash for the stage. What is shown onscreen in a 3D engine such as Unity is defined by the use of Cameras so try and think more in physical movie production terms – anything the audience sees is simply what the camera picks up. Naturally you can define the exported pixel dimensions for your exported Flash swf, but it’s important to ensure that you think three dimensionally. It may be daunting at first, but it soon becomes exciting as you begin to realise the possibilities and ease of realisation for dramatic and fun effects for your games. Scenes, along with other assets used to make your game, are shown inside Unity in the Project panel. This panel, accompanied by a Create button that allows you to generate various Unity specific assets, is your main focus for managing assets and handling import settings. It is the equivalent of the Library window in Flash. Hey! Nice Assets Unity handles any assets you can throw at it – everything from Photoshop files and 3D objects to video and audio. The great thing about keeping these assets arranged in Unity is that you’ll never need to reimport them. Import any asset into Unity’s Project panel (or simply save to the Assets folder, a subfolder of your main project folder) and your asset is registered by Unity. Need to update a file in an external package? This is as simple as saving in the external package you are working in (Photoshop for example) and switching back to Unity. Unity detects the change in the file and automatically re-imports and updates any part of the scene that uses your file. This straightforward pipeline ensures that your in game content is always up to date, and the Project panel itself gives you the opportunity to share assets and their settings with others in a team by exporting Unity packages. These are bundled files that incorporates all of its current settings for Import and any files that it
  • 18. 05/2012 (35)18 UNITY DEVELOPMENT PLATFORM depends upon. For example, a 3D model may require a texture to accompany it. MovieClips, Instances, Prefabs, and Game Objects In Flash, we’re all familiar with the concept of creating a MovieClip – a self contained data template stored in the Library, and instanced via code or the editor – and it’s especially important in game development. In Unity, this concept is mirrored by what we call Prefabs. However, there are some subtle differences to be aware of. In Unity, any items in your scene are known as Game Objects, these can be saved into the Project (Library) as something called a Prefab (MovieClip). Once this is done, each game object that belong to this prefab is considered an Instance of it, but this is not just for storage purposes. Unity takes the template system one step further by allowing you to edit the Prefab by selecting it within the Project panel and edit in within the Inspector (akin to Flash’s Properties panel). This then updates the properties of any instances of it in your game’s Scenes, giving you flexibility to update infinite objects in your game at any time. Keep in mind that instances of a stored prefab can still be edited as individuals without affecting the group. If you then choose, edits made to this individual can be echoed back to the prefab, which will in turn update all of the fellow instances as a result. Hierarchy vs. Timeline : Frames vs. Realtime Another key difference to note when considering game development in Unity, is that your game runs as a realtime render. In Flash, we’re used to seeing objects we have placed onto the Stage in the Timeline, with a range of frames for duration of that item’s existence. Unity is a realtime engine and therefore keeps objects in the scene until a script tells the engine to remove the object. As such, the equivalent to the Timeline in Flash is the Hierarchy panel, but given its lack of need to show duration, the Hierarchy is simply a Hierarchical list of game objects in your current scene. Selecting any object in this list and double-clicking its name will focus the Scene view on it, and likewise, clicking on an item visually in the Scene view will select it in the Hierarchy. Oh Behave! Putting Game Objects to work in Unity While every object in your scene is a game object, the behaviour and properties of these objects are controlled by another core concept: Components. In Unity, you’ll see a Component top menu item that allows you to add various properties and potential behaviour to your game objects such as the Rigidbody component which adds Physics properties to an object. Once added, these components are listed in the Inspector (Properties) panel and can be adjusted visually or via scripting. Any game development task will inevitably come with a certain amount of scripting in order to achieve the behaviour you desire for your gameplay. In Unity, scripts are written in an individual basis, and applied to objects as behaviour components. Scripts are attached to objects and control them by addressing properties of the Components attached to the object they are on – or by addressing properties of another object in the active scene. Scripts can be written in UnityScript (Unity’s own API that uses JavaScript syntax), C#, or Boo. These languages will look familiar and will be easy to pick up for anyone with ActionScript 2 or 3 experience. Scripts are not simply restricted to controlling gameplay either. They can also be used to communicate with servers, save states and load in new game content, much in the same way that ActionScript does in Flash, and even to create new functionality for the Unity editor itself! Bouncing Ball: A Flash Classic Revisited For every Flash vet, there is a fond memory of their first Flash animation experience – the bouncing ball is very much the “Hello World” of the Flash scene. So let’s take that familiar concept and revisit it in Unity, as your first attempt at working with the package. Don’t worry, you won’t even need a classic motion-tween! With Unity open, make a new empty scene by choosing File > New Scene (Ctrl / Command – N) from the top menu. Now let’s make a ground plane for our action to take place upon, go to Game Object > Create Other > Cube, from the top menu. You will now see a new Cube in your Scene view, and an accompanying new item in the Hierarchy, named ‘Cube’. Now look at the properties of this new object by looking at the Inspector panel. It is a new cube object that in 3D terms we call a ‘primitive’ – these are simple shape objects such as a Cube, Sphere, Capsule or Cylinder (Figure 1). The Cube has 4 components attached to it, and these are shown in the Inspector panel under the headings Transform, Mesh Filter, Mesh Renderer, and Box Collider (Figure 2). Figure 1. Cube-will
  • 19. Unity: Making (Flash) 3D Game Development Easy and Fun 05/2012 (35) 19 These components do the following jobs: • Transform – defines the Position, Rotation and Scale of the object • Mesh Filter – holds the shape of the object • Mesh Renderer – controls the appearance of an object and can redefine appearance by having materials assigned to it • Box Collider – gives the object a physical presence in the game, it can now collide with other objects as a result Now let’s make this cube into a floor – set the Position values in the Transform component all to 0, and then set the X and Z values of Scale to 100. Now it’s a little dark in here right? Let’s add a light to brighten things up. In Unity you are working with a rendering engine, so lighting is controlled not simply by light and dark areas in your graphics, but by lights added to the scene. Go to GameObject > Create other > Point Light, then set the Position values for the new Point Light to X: 0, Y: 5 and Z: 0. You’ll now have a patch of light on the floor, a perfect place to make our ball bounce! But first, we need a ball. Go to GameObject > Create Other > Sphere. As you’re such an ace at positioning by now, place this sphere at X: 0, Y: 4, Z: 1. Now it’s time for some Physics! You’ll be pleased to know that Unity includes the Nvidia Physx engine, so all the work is done behind the scenes for you to create realistic simulations. Wiith the Sphere still selected in the Hierarchy, choose Component > Physics > Rigidbody. You will now see this component listed in the Inspector panel on the right, and you should note that the Gravity property is enabled by default, perfect! Testing your Scene at any time in Unity is easy. Simply Click the Play button at the top of the interface to see what our bouncing ball looks like so far. At this stage you will note that we have very little bounce to our ball. Your Sphere falls to the ground and stops in a wholly underwhelming manner. This is because in Unity, the response of differing surfaces colliding is handled by Physic Materials. In order to make the ball’s collider (its physical presence) ‘bouncy’ we must create a Physic material, with bouncy properties and apply it to the Sphere Collider component of the Sphere. Click the Play button again to stop testing your game – do NOT click Pause, as this will keep Unity in testing mode, meaning that changes made during this mode will not be saved. A great way to explore different settings for parameters without committing to them. On the Project Panel, click the Create button, and from the Drop down menu, choose Physic Material. Your new asset is created, and its name is highlighted immediately for you to name. Call this Bounce and press Return or Enter to confirm. Now, with this asset selected in the Project panel, you will see its properties in the Inspector panel. To make a bouncy material, leave the Friction settings on 0.4, but set Bounciness to 1 and Bounce Combine to Maximum. Now, apply this asset to our Sphere by dragging it from the Project panel, and dropping it onto the name of the Sphere object in the Hierarchy panel. This automagically applies this asset to the right component – the Sphere Collider, and if you select the Sphere now and look at this component you will see the Bounce asset you just created listed as the Physic Material this component is using. This means that whenever you adjust the asset in the Project panel, the behaviour of this ball will change (Figure 3). Figure 2. Components-will Figure 3. ballBounce-will
  • 20. 05/2012 (35)20 UNITY DEVELOPMENT PLATFORM Congratulations, you just made a bouncing ball! Press Play again to see it! Now, to export this to Flash, we’ll select the File dropdown menu and click on Build Settings. Switch the target to Flash Player (preview) and click on “Switch Platform”. After this is done go ahead and build your project, selecting a name and location for it to save too. After the build process is done, a new Finder or Explorer window will open with a ready to go swf file, alongside a template HTML file for you to run. Done! Take Full Advantage of Your Target Platforms For Unity 3, we supplied an example project called Angry Bots; a great looking futuristic top-down shooter in which you fight some very angry robots while following the winding red lines to the exit of the facility you are trapped in. While Angry Bots is primarily a demo project to show off some of the features of Unity 3, it’s also a fun game to play. Currently it’s available as a playable game on the iOS and Mac AppStore, the Android MarketPlace, Google Webstore (Native Client), and the Unity website (Unity Web Player and Standalone). Now, with the addition of the Flash exporter the exact same game is available on game portals such Shockwave, MiniClip, and Kongregate as a Flash game. As a Flash developer using Unity, this is one of the primary advantages of using Unity. You have the ability to deploy content for all platforms we support now and those we will support in the future. This enables you to target platforms without having to learn platform specific development kits or rewrite your entire project to fit the target. Angry Bots does a great job at showing how to export the same project to different platforms, while still adjusting the content to take full advantage of the features of the specific platform. For example, while on a normal PC the inputs are mouse and keyboard, on a iOS device the only input is the screen. Adjustments can easily be achieved using Unity’s platform specific feature support. It also provides a beautiful demonstration of switching graphical quality based on the capabilities of the target platform. While the game looks great on even a modest smartphone or tablet, platforms with more gpu power such as desktop machine are able to do more. If you want that beautiful Depth-Of-Field effect on the highest quality level on those more technically capable platforms, it’s easily possible to do quality management for the specific platforms through scripting, user defined shader settings, and the Unity QualitySetting API. Other platform specific things like asset conversion to platform specific formats are automatically done by the editor. For example, in the case of Flash it converts all Audio to MP3 and all textures to compressed ATF textures; the settings for these assets and how they are imported are user definable per platform. For Flash both of these formats are configurable compressed formats, important for compact distribution over the web. Take Full Advantage of Flash Unity enables you to deploy to any Unity target with the least possible effort, but also empowers getting the best out of any of the target platforms. Some platform specific implementations are fairly unique to the platform itself and it can be advantageous to use these. In the case of the Flash Platform, a good example is the ability of peer-to-peer networking that is available through its Cirrus service. Since this is a quite large and Flash specific API, encapsulating it in a Unity API isn’t possible. Thus, when targeting Flash, it is possible to directly write and include ActionScript in your project and access it through an API called UnityEngine.Flash.Act ionScript. With this you are able to tap directly into Flash’s availableAPI’s such as the Realtime Media Flow Protocol. To start using ActionScript, in your project folder, create an ActionScript folder and directly drop your ActionScript .as files in there. It’s also possible to drop SWC libraries in your project and use those instead. To now communicate between your Unity C# scripts and ActionScript, use the UnityEngine.Flash.ActionScript API, which enables writing inline ActionScript in your C# file; here’s one example of such inline ActionScript in C#. ActionScript.Statement(„MyCustomActionScriptClass.Static Function(v)”, v); This way, you get the best of both worlds. While you get the ease of use, portabilty, and strength of Unity’s scripting, you can still directly access ActionScript and Flash API’s. While this allows you to use ActionScript inside your Unity project, it’s also possible to use your Unity project from a Flash / ActionScript project. This is important to be able to use and communicate with Unity content in your existing Flash project. With every Unity to Flash compiled project a UnityShared.swc file is written in the target build folder. Embedding this SWC in your existing project, there is an API available that allows you to load, size and communicate with your Unity project. From within Unity, you can now call Application.ExternalCall and this will be sent to the Flash host, while from the Flash host, you can use sendMessage to call functions on objects in Unity. In the current Flash preview, we are still changing these APIs based on user feedback and we invite you to try them out and give us your feedback.
  • 21. Unity: Making (Flash) 3D Game Development Easy and Fun both are needed to target Flash. This means that Unity authored Flash content will fall in the category of content that will need a premium features license. While currently only the combined usage of Stage3D and Fast memory opcodes fall under the premium features licensing, Adobe has announced that while the Flash platform is evolving they will add features to the Flash Runtime that fall under the premium features license. One example of this given by Adobe is “instant play”, which enables client side asset caching, using a local storage API; this feature will greatly reduce download times for recurring play on large games, further making the end user experience smoother and stimulating returning players. A Note on Flash Premium Features and Unity Content Adobe has recently announced “Premium Features for Gaming” for the Flash Platform which initially includes only Fast Memory Opcodes and Stage3D when used simultaneously. They have also announced a required 9% revenue share on Premium Features Licensed content that exceed $50k in revenue. To be able to get the great performance and port the huge amount of functionality and features currently in the Unity engine, RALPH HAUWERT Adobe® Flash® 3D veteran,Senior Developer at Unity Technologies’ Copenhagen office As a technical expert with more than a decade of experience in online creative development and a strong background in Flash, Hauwert has been involved in several high pro�le and critically awarded projects, including the Anne Frank Annex Online 3D, KPN’s House of Tomorrow, Earthmine and Papervision3D. As an industry recognized leader and pioneer within the Flash community, he has set milestones in the �eld of Flash 3D and the open source Flash movement. Hauwert was one of the speakers at Unity Technologies’ Flash Day designed to introduce Flash users to the Unity development platform. About UnityTechnologies Unity Technologies is revolutionizing the game industry with Unity, its award-winning breakthrough development platform. Unity Technologies has more than 500,000 registered users worldwide – including Bigpoint, Cartoon Network, Coca-Cola, Disney, Electronic Arts, LEGO, Microsoft, NASA, Nickelodeon, Ubisoft, Warner Bros., large and small studios, indies, students and hobbyists – all using Unity to create games and interactive 3D, like training simulations and medical and architectural visualizations, on the web, mobile, consoles and beyond. Unity Technologies is aggressively innovating to expand usability, power and platform reach along with its Asset Store digital content marketplace and Union game distribution service so that it can deliver on its vision of democratizing interactive 3D technology. Unity Technologies is headquartered in San Francisco and has development offices worldwide. For more information, visit: http://unity3d.com. a d v e r t i s e m e n t
  • 22. 05/2012 (35)22 FLEX 4 AND FXG N ow the problem starts, you provide good functionality, and equally good UI, the application gives wow effect in demo, but in reality, it slows down and consumes too much memory, rendering being one of costly process! Here comes FXG (SVG implementation) into picture. Scaled Vector Graphics is XML representation – definition of image or line art. As per O’reilly Flex 4 cookbook, “A FXG fragment is a grouping of graphical elements, such as shapes, text, and raster images, along with optional masking and filters that can be contained inline in MXML or within a FXG document with the .fxg file extension. FXG is a subset of MXML and does not include the ability to reference external classes or respond to runtime events, such as data binding and state changes. However, FXG fragments can be declared inline in MXML to take advantage of such features, which most skin classes in the Spark architecture employ.” SVG has been supported since Flex 3 with degrafa library, but not with that much flexibility or customization. Flex 3 was limited to: Listing 1. Flex 4 is the way to deal with different approaches, known as FXG component. Just like any other Halo or Spark component, FXG holds image definition (not extending UIComponent Class, albeit). With Flex 4 and mobile application development, FXG is very much required feature. Mobile application Flex 4 and FXG Flex application without real UI asset is like an amazing structure of building, without walls and furnished box!The core challenge is balancing UI and functionality. If you provide rich UI, but weak functionality, it doesn’t sustain long. In reverse, if you provide expected functionality, but dull or default UI, it may give kind of non touching feeling to user. What you will learn… • Reason for using FXG, and possible scope • Basics on FXG, easy migration from SVG • Basic capabilities achieved in FXG • Path for intermediate to advanced learning What you should know… • Familiar with ActionScript 3.0 language, basic Flex 4 understanding, comfortable with Flash Builder or similar IDE • At least rough idea about Vector Graphics or SVG Listing 1. Using SVG with Flex 3 <mx:Application xmlns:mx="http://www.adobe.com/ 2006/mxml" xmlns:Degrafa="http://www.degrafa.com/ 2007" layout="horizontal"> <mx:Script> <![CDATA[ [Embed(source="assets/flex3.svg")] [Bindable] public var flex_svg:Class; ]]> </mx:Script> <mx:Image source="{flex_svg}"/> <Degrafa:GeometryComposition graphicsTarget="{[cnv]}"> <Degrafa:Path data="M 0,0 L 100,0 L 100,100 L 0,100 z"> <Degrafa:fill> <Degrafa:SolidFill color="#EECCEE" /> </Degrafa:fill> <Degrafa:stroke> <Degrafa:SolidStroke color="#FF00FF" weight="3" /> </Degrafa:stroke> </Degrafa:Path> </Degrafa:GeometryComposition> </mx:Application>
  • 23. Flex 4 and FXG 05/2012 (35) 23 has to be lightweight. It is well known fact that mobile devices are limited in hardware resources and memory availability. Components are best at its performance when skinned with FXG, instead of pure bitmapdata images. Another considerable approach to use FXG is for certain repetitive symbols like bullets or icons. Basically, FXG rendering and runtime manipulation is cheaper and easier than bitmapdata image like JPEG or PNG. The more effectively we use, better the performance is, be it mobile or desktop – AIR. FXG sources Many Adobe products such as Adobe Illustrator, Fireworks, Photoshop can export design to FXG file. Adobe Creative Suite tools can be used to convert SVG to FXG. Flex 4 supports version 1.0 and 2.0 of FXG. Of course, need some change if it is version 1. Dig into definition As stated above, FXG is a component declaration in a separate file, which holds image definition in XML like Listing 2. Declaration block <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> ….. ….. ….. </Graphic> Listing 3. Tag Declaration <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns: fxgComponent="*"> <fxgComponent:flexLogo height="100" width="300" x="0" y="10"/> </s:Application> Listing 4. Script Declaration <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns: fxgComponent="*" creationComplete="drawLogo()"> <fx:Script> <![CDATA[ import spark.core.SpriteVisualElement; private function drawLogo():void { flexLogoInstance = new flexLogo(); flexLogoInstance.x = 0; flexLogoInstance.y = 10; flexLogoInstance.height = 100; flexLogoInstance.width = 300; addElement(flexLogoInstance); } ]]> </fx:Script> </s:Application>
  • 24. 05/2012 (35)24 FLEX 4 AND FXG format; it cannot hold reference to other FXG component. FXG tags have an implicit depth order. The order in which elements are defined defines their depth. Each tag is effectively drawn above its previous sibling. Children are drawn on top of their parents. FXG document has to use following namespace: http://ns.adobe.com/fxg/2008. Likewise in HTML, <html> is wrapper tag, FXG wraps content with <Graphic> tag, and has to explicitelly define version 2. FXG document/component supports its own set of datatypes such as angle, color, integer, length, number, identifier, percentage etc. It does not support any declarative syntax such of Flex such as <fx:Declaration>, <fx:Metadata>, <fx:Binding>, <fx:Script>, <fx:Style> or ActionScript 3 datatype such as <fx:Boolean>, <fx:Date>, <fx:Function>, <fx:int>, <fx:XML>. Deal with declaration The FXG has to be available as separate compliable component in form of .fxg file. Just like any other component, FXG can be declared either as tag or inside script block. Listing 5. Sample FXG Component <?xml version='1.0' encoding='UTF-8'?> <fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2"> <fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L .749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z"> <fxg:fill> <fxg:SolidColor color="#FFFFFF"/> </fxg:fill> <fxg:stroke> <fxg:SolidColorStroke caps="none" color="#FF00FF" joints="miter" miterLimit="4" weight="20"/> </fxg:stroke> </fxg:Path> </fxg:Graphic> Listing 6. Sample FXG Library <?xml version="1.0" encoding="utf-8"?> <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> <Library> <Definition name="YellowRect"> <Group> <Rect height="5" width="5"> <stroke> <SolidColorStroke color="#00FF00" weight=".75"/> </stroke> <fill> <SolidColor color="#00FF00"/> </fill> </Rect> </Group> </Definition> </Library> <YellowRect x="0" y="0"/> <YellowRect x="0" y="50"/> <YellowRect x="50" y="0"/> <YellowRect x="50" y="50"/> </Graphic>
  • 25. Flex 4 and FXG 05/2012 (35) 25 Listing 7. Sample FXG component with richtext capabilities <?xml version="1.0" encoding="utf-8"?> <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> <RichText> <content>This text is <span fontWeight="bold"> BOLD </span>,<br/>this text is <span textDecoration= "underline"> UNDERLINED </span>,<br/> and this text is <span fontStyle="italic"> ITALIC </span>.<p>This is a new paragraph.</p></content> </RichText> </Graphic> Listing 8. A sample application from O’reilly Cookbook – demonstrating bitmap mask applied to graphics <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" creationComplete="handleCreationComple te();"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import spark.core.MaskType; [Bindable] public var masks: ArrayCollection; private function handleCreationComplete(): void { masks = new ArrayCollection( [ MaskType.CLIP, MaskType.ALPHA, MaskType.LUMINOSITY ] ); maskList.selectedIndex = 0; } ]]> </fx:Script> <s:layout> <s:VerticalLayout /> </s:layout> <s:DropDownList id="maskList" dataProvider="{masks}" /> <s:Graphic id="group" maskType="{maskList.selecte dItem}"> <s:Rect width="320" height="320"> <s:fill> <s:LinearGradient> <s:entries> <s:GradientEntry color="#000000" /> <s:GradientEntry color="#DDDDDD" /> </s:entries> </s:LinearGradient> </s:fill> </s:Rect> <s:mask> <s:Group> <s:BitmapImage source="@Embed('/ alphaBitmap.png')" /> </s:Group> </s:mask> </s:Graphic> <s:Group enabled="{maskList.selectedItem==MaskType .LUMINOSITY}"> <s:layout> <s:HorizontalLayout /> </s:layout> <s:CheckBox selected="@{group.luminosityInvert}" label="invert" /> <s:CheckBox selected="@{group.luminosityClip}" label="clip" /> </s:Group> </s:Application> [source : http://www.oreillynet.com/pub/a/flex/ excerpts/flex-4-cookbook/graphics.html]
  • 26. 05/2012 (35)26 FLEX 4 AND FXG • Tag declaration (Listing 3) • Script declaration (Listing 4) This is about how to use; below is sample of an FXG component: Listing 5. Of course, when we export FXG from other applications like Photoshop, we should ignore and remove some non MXML graphic tags like <Library>, <Private>. Also such exported FXG, after removing such metadata tags, the tag has to declare with spark namespace, s:. This makes it usable MXML component. <Library>, <Private> such tags are supported in FXG, not in MXML. Similarly, FXG library can be defined as under: Listing 6. And with <fxgComponent:BlueShape/> declaration, it makes instance. width and height are two properties that identify FXG’s original dimension, which can be altered with viewWidth and viewHeight. With this we are limiting discussion on declaration and conversion. FXG can also include bitmapdata from source image like PNG, JPG, GIF. This should be used only if required. This is supported with <BitmapImage> in FXG or <s:BitmapImage> in MXML. For our primary purpose of making application lightweight, if we again wrap bitmap to FXG, it doesn’t really serve purpose! This decision should be wise. In nutshell, if FXG is declared as part of application i.e. <s:Application /> or so, it has to have prefix namespace. Text in FXG Text is also supported in FXG; with <RichText> if its version 2.0, <TextGraphic> if 1.0 . FXG <RichText> tag supports the child elements like <content>, <transform>. A good example of FXG component, self explanatory: Listing 7. <content> child tag supports elements like <p>, <span>, <br>, <tcy>, <a>, <img>, <tab>, <linkNormalFormat>, <linkHoverFormat>, <linkActiveFormat> Mask What explained so far is pretty short and primary, FXG is much more. Mask and Effects are interesting parts in this. There are two types of mask – clip & alpha. In clip masking, only the actual path, shapes, and fills defined by the mask are used to determine the effect on the source content. In alpha masking, the opacity of each pixel in the source content is multiplied by the opacity of the corresponding region of the mask. Let’s see a nice example straight from kitchen of O’reilly! (Listing 8). And when it runs, looks like: Figure 1. Wrapping Up FXG is not really a replacement for all scenarios. It isn’t really replacement to bitmapdata. Likewise skinned UIComponent, you really do not need bitmapdata for its weight and scalability issues. SVG manipulation is much easier and clean in terms of rendering, and that’s why Flex component, with its FXG skin looks beautiful in any size! Figure 1. Output References • SVG Primer for Flex – http://saturnboy.com/2009/06/svg- primer-for-�ex/ • FXG and MXML graphics – http://help.adobe.com/en_US/ flex/using/WS145DAB0B-A958-423f-8A01-12B679 BA0CC7.html HARIT KOTHARI Harit is a Flex and RIA developer by profession, based in India. He started career with Java development and quickly learned and moved towards Flex. He has also consulted small projects while working for short term in Dubai, UAE. Application and functional level challenges are his primary interests. Traveling and reading are his interests. He blogs at http:// harit.kotharee.com/ and whispers on twitter @harit.
  • 27.
  • 28. 05/2012 (35)28 FLEX 4 A dobe has company which have been working ahead of time many years in many technology are like Acrobat reader, Photoshop with image processing algorithm implementations for naive users, for online picture editor for image enhancements using image processing algorithms (http://pixlr.com/editor), Flex for AJAX/RIA. Flash presented good threat to Microsoft as instead of writing to OS people can write to Flash same reason why Steve Jobs took stand against Flash. Adobe hence started to silent revolution of RIA. Photoshop, Illustrator, and the other design products in its Creative Suite make up more than 50% of Adobe’s revenue and have created a lot of loyalists. Adobe presence in unified communication with its connect platform for online meetings which competes with Microsoft live meeting and communication server (renamed Lync). People most often create documents using Word processing software but once those documents need to be stored in a fixed format for printing and official forms, they’re almost always converted to Adobe’s PDF format. Micorsoft XPS never stood competition against PDF format. Adobe Flex is a popular framework for building Rich Internet Applications (RIAs). The Flex framework is used to create SWF files that run inside the Adobe Flash Player. Today when we will see higher adoption of IP TV in future Adobe is well positioned to take on. Earlier Adobe flex write once and run on any browser (need not worry browser dependency) to today write once run on any device (Android, IPhone, or any tablet OS). Technology Landscape Technology is continuously evolving. Never people thought before AJAX came in that all system will web based. As in earlier system Client server system web Future of Flex & Flash: Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV Adobe outdoing competition for many years now has system in place for bringing future technologies like IPTV (http:// blogs.adobe.com/flashplatform/tag/iptv), mobile/tablet OS interfaces, photo editors like Photoshop,Word editors like Acrobat reader with compressed storage. What you will learn… • Comparison of Flex competitors like HTML5 vs �ex • Augmented reality using Abode products • Gami�cation of Enterprise apps using �ex • Future trends, future usage evolution of Flex What you should know… • Basic knowledge of computer technology with suffice • Basic knowledge of AJAX • Basic Adobe Flex, AJAX, Flash,HTML5 Figure 1. The evolution
  • 29. Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV 05/2012 (35) 29 client wait for completion for each request till then browser hangs. With coming of AJAX Asynchronous request does not need to wait for reply from Server for completion of request. Today what we See from Website to ERP like SAP PeopleSoft, oracle apps, to Business intelligence systems virtually every UI is Web Based. AJAX increased adoption of Web across different platform devices and interfaces. Across all this technologies the best choice of UI ends at flex. Demand and salary to AJAX programmer crossed Java programmers. Main component of AJAX was java script. But problem came later no support for JavaScript. In meanwhile Adobe was company very much into multimedia software like Flash, Photoshop. Needed to adopt to new Web paradigm. So necessity is mother of invention. Abode had flash player which was heavy when used with websites. So it came with AJAX product first time Flex which is blend of Flash’s graphics + AJAX (Evolution 1997 Flash player-->2000 Action Script 1.0- -> see Figure 1). Issues with JavaScript like not clean coding, no support form vendor, intuitive controls for new fast AJAX web systems were solved. Rich Internet Application evolved RIA evolved with Adobe Flex. Flex came with editor where user can code using Actionscript created with mix of JavaScript concept into Flash scripts. Action scripts we can code complex AJAX interface to be played on Flash player get support from Adobe while for javascript no support available. ActionScript program that has been optimized to death by an AOT compiler can, almost trivially, beat a JavaScript program that is optimized on the fly by the JIT compiler. The only way out would be to let the JIT compiler work till death, but that is not an option. JavaScript programs are untyped, (relatively) small programs that are shipped/loaded as source code, and then compiled and run on the fly. In contrast,ActionScript programs are typed, (relatively) large programs that are compiled to byte code, shipped/loaded as byte code, and then run on the fly. Flex came with more intuitive UI which never existed before like slider control, control for embedding video tag which later on HTML 5 could bring in 5 yrs later. So adobe was working 5 yrs ahead of time. Still today concepts like onscroll pagination and caching did not exit. some 5 yrs back for every website server side code .NET or Java or PHP or SAP or PeopleSoft but web client code was on Flex. Beautiful intuitive UI controls from sliders, Maps, dynamic grids, for OLAP olap grids, dynamic grouping and sorting it could handle huge data seamlessly the JavaScript latency issues also minimized. These features are now stand replicated with Microsoft sliverlight, ExtJs and other Java script libraries. Competition to Flex Technology wise competition to Flex include Curl, OpenLaszlo, Ajax, Mozilla way back in 2002 introduced XUL, from Sun Microsystem JavaFX, Microsoft Windows Presentation Foundation, Silverlight and HTML5. Examine the trend graph over period of time. HTML5 popularity has dwarfed competition as it is open source and work across platform (Figure 2). • Flex had moved to new battled field Devices. Is new java of devices write once and run on any device android, iPhone blackberry or any tablet OS. • Enterprise class programming Model: Use of constructs like strong typing, inheritance, and interfaces to program more efficiently. Extensive mobile and traditional components help speed Figure 2. source: trends.google.com showing search trends Flex competitors or related technology
  • 30. 05/2012 (35)30 FLEX 4 development. Flex applications can access device capabilities such as GPS, accelerometer, camera, and local database. • End to End tooling for development: Build Flex applications more easily using Adobe® Flash® Builder® software, an enterprise-class Eclipse™ based IDE. Productivity features include on-device debugging and mobile simulators for testing across screen sizes and resolutions. • Server Integration: Integrate with all major back ends including Java™, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion®, and SAP using industry standards such as REST, SOAP, JSON, JMS, and AMF, PeopleSoft. • AJAX design patterns: On Object oriented programming on Action scripts design pattern are readily available. Even software claims today integration with flex for choice of UI whether its ERP like PeopleSoft or SAP, Oracle Apps, or Business intelligence system like SAP Business objects Excelsious, IBM Cognos flex interfaces. Each day new Members join group each day product realize it needs to provide interface to flex joins flex group. I remember on Cognos 8.0 did not had features like geographic reporting interfaces, intuitive grids with dynamic sorting and grouping, maps etc which only after integration with flex were possible for BI. Had no choice but to integrate Flex. I recommend everyone at least one download tour de flex and see the dynamic UI. I am sure you will start loving it. From YouTube to Google finance or yahoo finance everywhere you can see innovation of Flex controls (Figure 3). On contrary HTML5 is not threat but opportunity for Adobe Flex But Adobe has the most to gain if they become the major player in the HTML5 field by providing tools, framework and making the web standards evolve. And they are in a good position to get there. Adobe has already two great tools for HTML5, Muse and Edge. HTML5 fight with Flex is on: Adobe online games are beating HTML5 with over 1000 games written compared with few hundred on HTML5. HTML5 is already almost universally supported in mobile browsers and Adobe realized that Flash would never get that ubiquity across browsers. HTML is supported by 40% of web Browsers while Flash 99%. Feature supported are browser dependent with no 3D support while flash has plugin. Security: Flash is miles ahead: In order to hack HTML5 Right click view source while in flash you need to get swf file which is loaded through wrapper parent then hacker needs to go through 2 layers of encryption and obfuscation. Majority flash book games are flash. With Flex 4.5 SDK build and deploy applications for Google Android, Apple iOS and BlackBerry Tablet OS platforms leverage one tool, one framework and one codebase to deliver apps across leading mobile platforms, not to mention web and desktop as well. But then reality is still HTML5 has more issues with Andriod and iOS while Flex has few. Figure 3. source Finance.google.com (showing comparison of Adobe,Microsoft and Dow Jones index
  • 31. Gamification of ERP enterprise software, Augmented Reality on mobile apps, ipTV 05/2012 (35) 31 SANDEEP SHARMA Solution Architect/Product Manager, 10 + yrs experience SAP/Oracle Peoplesoft, Flex, AJAX, Business Intelligence, Datawarehousing, Enterprise Application Integration, Security. Worked with companies like SAP, Oracle Peoplesoft, Ness Technologies, Cognizant technologies. Loves Marathon running, Soccer, and adventure sports like Mountaineering. Flex is HTML 5 + more Flex is no.1 choice for enterprise complex, high-fidelity enterprise applications such as business dashboards, line of business tools, real-time trading applications and desktop replacement applications, and see leading companies in healthcare, financial services, communications and other industries standardizing on it. HTML5 has not matured yet. Flex is a choice for following reason: • SDK and Compiler open sourced MPL license, HTML 5 open standard WHATWG license, Adobe + on Flex new 3d – graphics, (transformation scene, camera, lighting, change pixel data, effects) • Real-time connection (HTML5 has websocket vs Flex has flash.net.socket), Drag and Drop (drag and drop across application, cross document, clipboard) with API’s flash.desktop.clipboard, Events.NativeDragevents, Flash.desktop.Transferab leData Vs HTML5 DataTransfer and DragEvent. • Adobe provide better file system (in HTML5 input type upload storage api vs Flex has File, FileStream, Filemode) (read/write capabilities), Offline Access Adobe air provides Resource(Windows application Vs Application cache) State (air.Event.NETWORK _ CHANGE _ URLMonitor vs navigator online) Data (flash.data.SQLConnection vs HTML5 has Database, SQL Transaction, SQLResultSet, Local Storage. New HTML 5 products which also use Action scripts as base new HTML5 products, Adobe Muse(TM) and Adobe Edge preview. Cloud: Adobe’s creative tablet applications+, such as Photoshop Touch, into everyday work – seamlessly synchronizing and storing files in the cloud for sharing and access on any device. Adobe Typekit launched in Oct 2011, the Web- based font library that pioneered the use of real fonts on websites, delivering more than 700 typefaces from leading foundries. Adobe Edge, a ground-breaking HTML5 development tool; and Digital Publishing Suite Single Edition, the technology behind the delivery of digital magazines on iPad. Adobe new Open source strategy: As Flex moves into a community-driven open source project, Adobe will make initial technical contributions and will also continue to provide a team of full-time Flex SDK engineers to contribute to the Apache project. Adobe is currently in the process of contributing the core Flex SDK (including advanced data visualization components), automation libraries, AIR SDK binaries, documentation, and specifications to the Apache Flex Project. Also contribute yet-to-be-released Spark components including ViewStack, Accordion, DateField, DataChooser, and an enhanced DataGrid. Other future contribution to project include Falcon JS new compiler for action script, Mustella a functional testing framework, BlazeDS code is already available at adobe.com/go/blazeds_source under the GNU Lesser General Public License, Version 3. BlazeDS provides Java based server-side remoting and web messaging technology allowing Flex clients to exchange typed binary data with the server and receive notification from other clients and servers. The messaging service also allows Flex applications to exchange messages with other non Flex, JMS-enabled applications. Flex Sparks components and the recent addition of the new mobile components provide a great and mature framework basis for a real open source effort Next generation Experiments on Flex. Gami�cation of Enterprise Software like ERP, BI, BPM etc Enterprise gamification to date has really been about marketing and customer engagement. By gamification it introduces unrealized concepts of social collaboration and create the ad hoc collaboration, engagement metaphor help companies realize these lofty social/ collaborative goals. people are more engaged, more able to understand and support the outcomes that matter to the enterprise, and they are being recognized and rewarded for these actions. Adobe with Flash based online games and enterprise grade Flex development platform is greatly positioned for that. Augumented Reality Augmented reality (AR) is a field of computer science that involves combining the physical world and an interactive, three-dimensional virtual world. For a complete project with Flash on AR visit http:// www.adobe.com/devnet/flash/articles/augmented_ reality.html. Video game industry is major employer of AR. Its not the end of game we have business intelligence system employing Augmented Reality (http://youtu.be/mTflf_ PqUYs). AR for ipad, android, ERP like SAP, Business Process management is getting lot of traction for all this Flex and Flash is greatly positioned. On SAP TV watch augmented reality (http://youtu.be/C4b2Npnbhz0).
  • 32. 05/2012 (35)32 FLEX AND PHP F lex as its name suggests is very flexible technology framework. It can connect to almost all server side and scripting languages to connect to database and do other server stuffs. As it can connect to almost all languages, it can be hosted on all kinds of server platforms. Now let’s focus on our title of the article. Flex can be connected to PHP to connect to database and do other database activities. There are 3 ways of connecting Flex to any server side language: 1) Remoting, 2) Web Services 3) HTTP service. PHP can be used in all 3 ways. Flex with PHP by Remoting AMFPHP is one of the remoting ways to do it. AMFPHP is another open source framework provided by open source community. You just need to download the AMFPHP folder from its website and put that folder into your root folder of web server. Then from the following steps you can connect the PHP code through AMFPHP: Using mxml ----------------- <mx:RemoteObject id=”myRemote” destination=”phpclassname” source=”folder.phpclassname” endpoint=”{http://localhost/amfphp/ gateway.php}” showBusyCursor=”true”> <mx:method name=”Select_Gender” result= ”onGetGender(event)” fault=”onFault(event)”/> In the above code, • Select _ Gender is the php function in which some code is written to connect to database and get the required infromation for a particular gender. • destination is the php file name where the function is written. • and source is the folder where php file is located. And result and fault event will have result handler and fault handler functions to handle success and failure of the php function call. Another option for Remoting is WebORB which can also be used by Remoting to connect Flex with PHP. Flex with PHP by HTTP Service HTTP service is another way of connecting Flex with PHP. In this method you need to create PHP files on some remote server or on same server as php file. You need to call that php file by some Flex classes or tags with the help of HTTP protocal just like you are opening a url in a browser, and handle result and fault event of it. Following is the sample code for that: <fx:Declarations> <s:HTTPService id=”sampleTest” url=”{„+phpurl+”}abc.php” result=”sampleTest_resultHandler(event)” Different Ways of Connecting Flex to PHP Flex is a client side technology originally developed by Adobe and now Flex SDK transferred to open source Apache community and Flash builder, the editor for Flex, is still there with Adobe which will be supporting Flex SDK now. What you will learn… • Basic idea about web server folder structure. • Basic idea about web services. • Basic idea about http services. • You can do some php coding for select query also. What you should know… • You should have basic knowledge of Flex SDK and Flash builder. • You should have Object Oriented concepts clear of how to create functions etc. • You should have basic knowledge of Action script.
  • 33. Different ways of connecting Flex to PHP fault=”sampleTest_faultHandler(event)” /> </fx:Declarations> <fx:Script> <![CDATA[ protected function initialize():void { sampleTest.send(); } ]]> </fx:Script> In the above code we have added an HTTP Service tag and added an actionscirpt function to call that http request by send method of the HTTP service. And we need to handle result and fault of that call in result handler and fault handler functions we have declared in the HTTP service tag. Flex with PHP by Web Service Web Service is the most common way to interact a service side technology to any client side technology. Because Web Service follows a common standard to sending and receiving data. There is the sample of code for connecting Flex with PHP by web service: <mx:WebService id=”sampleTest” wsdl=”http://localhost/flexapp/myfile.php?wsdl”> <mx:operation name=”SelectGender” resultFormat=”object” fault=”mx.controls.Alert.show(event.fault.faultStr JIGAR OZA Currently Working at Rightway Solutions as Flex Developer I have experience of 4+ years in Flex with .Net, PHP. I have worked on web applications, Desktop Applications and Mobile Applications in Flex. I have worked with almost all databases like MySQL, SQLServer, MS Access. ing)” result=”sampleTest_resultHandler(event)”/> </mx:WebService> In the code above we have declared a Web Service which is accessing a PHP web service defiled in WSDL property of Web Service tag. And we have called the php method by operation tag under Web Service tag. We have handled result and fault of the web service by result handler and fault handler functions. After presenting all 3 methods, I would like to focus on some more aspect of Flex and PHP connectivity. Security Remoting and Web Service are more secure ways than HTTP Service because HTTP service allows browser add ons such as FireBug to see what request was sent to server and what response came back. While remoting and web service doesn’t allow that. Speed As per the speed of the response is concerned, Remoting is the fastest method followed by HTTP service and Web Service. So we can say that Web Service is the slowest method for Flex and PHP connectivity. a d v e r t i s e m e n t www.flexer.info
  • 34. 05/2012 (35)34 THE FUTURE OF FLEX N ovember 2011 will be a month long remembered by Flash developers, Apart from announcing the discontinuation of the Flash Player browser plugin development for mobile devices, Adobe announced its intention to donate the Flex SDK to the Apache Software Foundation. While the former, although perceived by the tech community as the demise of Flash, was seen by many Flash developers as a better use of Adobe resources. Flash platform developers rarely targeted the mobile browser plugin and it made no sense to continue investing in it, given that there were hundreds of devices it needed to support and several mobile browsers while almost each one required special attention (by Adobe as the plugin developer and by the Flash developers themselves for the content), this sort of fragmentation did not bode well for the mobile browser plugin along the years. The latter caught Flex developers truly by surprise. Some were thrilled to hear that now Flex truly goes open-source, allowing the community to contribute and to extend the platform as it sees fit. But some, mainly from the enterprise market, saw it as if Adobe was trying to “get rid” of Flex. The fear of the enterprise market was understandable, how can there really be a future to the Flex framework when Adobe controls AS3 and the Flash and AIR runtimes? If at any point, Adobe decided to stop development on either, what will become of Flex? Sure, Flex is open-source but without the runtimes, it’s pointless. In the FAQ published on the Adobe website a few days after the announcement, one of the questions was: “Does Adobe recommend we use Flex or HTML5 for our enterprise application development?” And the first paragraph said it all “In the long-term, we believe HTML5 will be the best technology for enterprise application development. We also know that, currently, Flex has clear benefits for large-scale client projects typically associated with desktop application profiles”. Although the rest of the FAQ focused on how committed Adobe was to Flex, how it’s still a viable technology and the fact that they are committed to their runtimes for what seems like a minimum of 3-5 years, the general feeling was as if Adobe has abandoned Flex and its developers. Did this move kill off Flex completely? Absolutely not! Will it make developers think twice before using Flex in a project? Perhaps. HTML5 Let’s say that you were given a certain project and you had to complete it in Flex and in HTML5, there’s a high chance that the HTML5 project would take longer to complete thus making it more expensive. Moreover, bringing the HTML5 project to its Flex counterpart’s robustness and quality may be deemed impossible in the state of HTML5 today. Flex developers, understandably, feel that HTML5 has nothing better to offer than Flex has in its current The Future of Flex What’s next for Flex?Will open sourcing it breathe new life into it or has it been“left out to die”? What you will learn… • Recent developments since Adobe decided to contribute Flex to the Apache Foundation • Is Flex still the right choice for large scale desktop applications? What you should know… • no prior knowledge is required