flash and flex - issue #2 february 2010
TRANSCRIPT
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 1/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 2/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 3/1074
Editor’s Note
02/2010 (10)
Greetings readers! Thanks for staying faithful to the best Flash and Flex magazine on the web. As usual, we have a rich issue
full of specific programming features with real code examples as well as updates on the latest and greatestnews and trends in the FFD world. Things are heating up between Apple and Adobe as a result of the new
iPad not supporting Flash. Jesse Freeman shares his take on what the iPad will mean for us, and Adobe
Platform Evangelist Mark Doherty addresses the issue and many others in the brand new Readers Bug
section. This new regular feature will allow you, the reader, to submit questions to experts like Mark and get
thoughtful responses. We look into the Kentico CMS package in an in depth article as well as a thorough look
at the ins and outs of mobile Flash delivery by Edmond Au.
It wouldn’t be much of a Flash and Flex Developer’s magazine if there weren’t any Flex articles in it. The
Flex section is full of the greatest articles available; Louis Dicarro shows you the answer to your questions
on how to write a stand-alone program without learning Visual Basic or Cocoa, or how to make your existing project online working great
as an offline application – Adobe AIR is your answer. Giorgio Natili – in his article ‘Flex and Jabber’ – shows us how to create a real time
application using a protocol that relies on a restful architecture. Just to name a few of the magazine articles in store for you...
As usual, the writers provide an unusual blend of strategy, detail, and real code to allow you to put the knowledge into practice right away.
Thanks again for being dedicated to the growing community of readers who rely on FFD to help them stay abreast of changes in the
technology as well as push the envelope of what’s possible!
Enjoy.
Ewa Samulska [email protected]
Editor in Chief: Ewa Samulska [email protected]
Editor: Patrick French
DTP Team: Ireneusz Pogroszewski
Art Director: Ireneusz Pogroszewski
Senior Consultant/Publisher: Paweł Marciniak
Proofreaders: Patrick French, Lee Graham, Ed Werzyn, Russell
TangChoon
Publisher: Software Press Sp. z o.o. SK
ul. Bokserska 1 02-682 Warszawa Poland Worldwide Publishing
Software Press Sp. z o.o. SK is looking for partners from all over the World.
If you are interested in cooperating with us,
please contact us by e-mail : [email protected]
Whilst every effort has been made to ensure the high quality of the magazine, theeditors 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 companieswhich 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. Iriar te, Paula R. Mould, Rosarin Adulseranee, Sidney de Koning
To create graphs and diagrams we used program by
company.
The editors use automatic DTP system
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 net-
works. The editors hold no responsibility for misuse of the presented techniques
or consequent data loss.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 4/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 5/107602/2010 (10)
CONTENTS
24
60
70
76
08 Delivering Video For Flash Player 10.1On Mobile DevicesEDMOND AU
12 Why the iPad Will Redene Our View of RIAsJESSE FREEMAN
16 NewsGÁBOR CSOMÁK
20 Desuade’s Open Source Flash Motion and
Particle Eect EnginesANDREW FITZGERALD
22 Four Letter Words You Need to Use: Goal &PlanADAM MALAMIS
24 What Kind of Website Should I Make?ALEXANDER DAWSON
52 Project Organization Best PracticesLOUIS DICARRO
56 Dive into OSMF-Part OneCHAIM SAJNOVSKY
60 A Case for Streaming Media and the CloudCRAIG BURRISS
64 Flex and AirLOUIS DICARRO
70 Understanding Flex 4 componentsTARIQ AHMED, DAN ORLANDO, JOHN C. BLAND II, AND JOELHOOKS
76 Flex and JabberGIORGIO NATILI
86 Dynamic Views and Mediators with PureMVCTIM CONSOLAZIO
90 Deeplinking your Flash and Flex applicationswith SWFAddressBY DAN FLORIO
SPECIAL REPORT
InBrief
Tools
Beginners
Flash Media Servers
Workflows
OSMF
FLEX
PureMVC
ActionScript Development
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 6/1077
02/2009 (10)
92 Readers BUG – Readers Q&A sectionANSWERS PROVIDED BY MARK DOHERTY
94 Flashcreed – New Kid in Town
98 Talking Corona – An interview with the AnscaMobile Co-FoundersHETAL BHATT
100 A Day in the Life of Joe the CoderKATHLEEN ERICKSON
102 Alternativa3D Version 7 – A New Step intothe Internet 3D. Review of version 5.6.0GREG BOLOTOFF
104 Kentico CMSMILENA REICHEL
106 Professional Papervision3DLEE MCCOLL SYLVESTER
107 The Essential Guide to Open Source FlashDevelopmentALI RAZA
102
94
Influxis
www.influxis.com ..............................................................2-3
Mediaparts Interactive S.A
www.page-flip.com ................................................................5
Digicrafts
www.digicrafts.com.hk .......................................................17
Wowza Media Systems
www.wowzamedia.com ......................................................19
Kindisoft
www.kindisoft.com ..............................................................21
Kevin Ruse + Associatess Inc.
www.kevinruse.com ..............................................................23
CoffeeCup Software, Inc.
www.coffeecup.com..............................................................27
Gamersafewww.gamersafe.com .............................................................33
Flash and Math
www.flashandmath.com ......................................................39
Cartoon Smart
www.CartoonSmart.com ......................................................41
Electricrain
www.erain.com ........................................................................45
FITC
www.fitc.ca ................................................................................51
Midnightcoders
www.midnightcoders.com ...................................................53
Flashbelt
www.flashbelt.com .................................................................55
Gate2Shop
www.g2s.com ..........................................................................59
Infosoft Global (P) Ltd.
www.infosoftglobal.com .....................................................63
Creativeniche
www.creativeniche.com . ............................................ ....67
Exsys
www.exsys.com .......................................................................69
Flex{er}www.flexer.info ..............................................................91
ActionScriptJobs.com
http://actionscriptjobs.com/ .... ....................................103
Flexcommunity.net
www.flexcommunity.net ...........................................106
The issue 2/2010 sponsored by Advertisers:
Readers BUG
Profile
Interview
Story
Book Review
Smoothing bitmaps with jsflTom Rassweiler, Manager of Game Development, Arkadium
If you are creating code driven animations with bitmaps, e.g. rotating,
or scaling bitmaps in your code, it is important to make sure that
“allow smoothing” is checked o in the bitmap properties so that the
images do not appear jagged. This can be a time consuming process,
especially if you are using 3D animation rendered as many bitmaps.
JSFL can provide an easy solution.
Run this command:
.outputPanel.clear();
var item_array = .getDocumentDOM().library.items;
var i = item_array.length;
while(i--){
var item = item_array[i];
if(item.itemType == „bitmap”){
if(item.allowSmoothing ==
false){
item.allowSmoothing = true;
}
}
}
Tip of the issue
Reviews
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 7/10702/2010 (10)8
Special Report
From providing engaging experiences
through rich Internet applications
to deliveri ng video, Adobe Flash
has revolutionized the way we interact
with rich media content on the web. More
than 75% of all online video depends
on Flash technology. Now that Adobe is
bringing Adobe Flash Player 10.1 to mobile
devices, you can ensure that all this great
content can reach users across devices by
taking note of recommendations from this
article.When thinking about deploying mobile
video services leveraging the Adobe Flash
Platform, you should consider several factors
in providing a great user experience:
• Mobile video encoding guidelines (http:
// www.adobe.com/devnet/devices/articles/
delivering_video_fp10.1.html ): What is
the recommended encoding prole to target
Flash Player 10.1 on devices? This article
provides a table that summarizes key
encoding prole settings.
• Video content optimizations (http:// w w w . a d o b e . c o m / d e v n e t / d e v i c e s /
articles/delivering_video_fp10.1.html ):
What are best-practices to follow when
authoring video content to optimize
performance? This article offers tips
on the discipline necessary for optimal
performance within the constrained
environment.
• Video player optimizations (http://
w w w . a d o b e . c o m / d e v n e t / d e v i c e s /
articles/delivering_video_fp10.1.html ):
What are best-practices to follow when
developing your video player to optimize
performance? This article covers various
detection mechanisms to determine
the appropriate video stream, along
with video player design tips for optimal
performance.
Mobile videoencoding guidelinesBased on available hardware capabilities
in the market and internal profiling on
reference devices, Adobe recommends the
encoding parameters in Table 1.
If you are currently serving video based
on the encoding profiles included in Table
1, you may not need to re-encode. However,
if you are planning to re-encode, Adobe
recommends hardware-accelerated codecs,
such as H.264, given significant advancesaround compression effectiveness that
translate into improved frame rates and
reduced battery drain.
In general, we recommend maintaining the
true source frame rate (at time of capture) to
preserve quality.
For video with true source frame rates
greater than 24 fps, however, you may
consider downsampling the frame rate by an
even factor, such as 2 – for example, from 30
to 15 fps.
Despite the above recommendation of 24
fps, we have seen videos with a true sourceframe rate of 30 fps performing well, as
long as more conservative encoding settings
(such as the WiFi – On2/Sorenson bit rate and
resolution per Table 1) and the video player
optimization guidelines are followed.
Re-encode in multiple streams to provide
an optimal user experience across various
network conditions. At minimum, Adobe
recommends that three streams be made
available (again, per Table 1):
• High-quality, over-WiFi, such as the
WiFi – H.264 conguration at 500 kbps
• Medium-quality, over-3G, such as the
3G – All conguration at 350 kbps• Low-quality, over-2.5G, such as the 2.5G
– All conguration at 100 kbps
Video content optimizationsTo improve performance, Adobe recom-
mends avoiding or minimizing use of videos
that:
• Are rotated, skewed and transformed
through a perspective projection
• Are bitmap-cached
• Have lters, such as blur or glow effects,
applied• Are accessed through BitmapData
• Have alpha ( _ alpha) or color
transforms
Delivering Video For
Flash Player 10.1 OnMobile Devicesby Edmond Au
Table 1. Adobe-recommended encoding parameters for video targeting mobile devices
Preferred format Video: H.264, Costrained Baseline prole at 24 fps *
Audio: AAC-LC, 44.1 kHZ, stereo
Alternate format Video: On2 VP6, Simple prole or Sorenson Spark at 24 fps *
Audio: MP3, 44.1 kHz, stereo
WiFi – H.264 WiFi – On2/
Sorenson
3G – All 2,5G – All
Bit rate(combined) 500 kbps 350 kbps 350 kbps 100 kbps
Resolution HVGA (480x320) HVGA (480x320) HVGA (480x320) HVGA (320x240)
Audio bit rate Up to 160 kbps Up to 128 kbps Up to 128 kbps Up to 32 kbps
* For true source frame rates greater than 24, downsample by an even factor, such as 2 (e.g.
30to 15), to maintain optimal performance.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 8/107
Delivering video for Flash Player 10.1 on mobile devices
02/2010 (10) 9
• Are transformed through Pixel Bender
• Are blended with vector graphics,
including other video, above (overlay) or
behind (underlay)
• Are placed on half-pixel boundaries
• Are placed within a windowless-mode
(where HTML embed parameter wmode is not set to window) SWF le
• Use Scale-9 grid
Video player optimizationsThe following sections offer best practices
when authoring video content to optimize
performance.
Detection routines
Given the increasingly diverse device
landscape, it is critical to adopt more
sophisticated methods to determine thespecific capabilities of a given device and
subsequently deliver the appropriate user
interface and video stream. This information
is important because the user's device may
have varying CPU capability, memory, and
input techniques, factors which are critical
in ensuring your visitor has the best possible
experience. Based on joint research with
gskinner.com, a Flash development firm, Adobe
recommends that developers use varying levels
of detection and assigning appropriate weights:
Flash Player detection, device detection, and
input and screen-orientation detection.
Detecting Flash Player
and version information
The industry-standard best-practice for
determining the presence and version of
Flash Player on the device is by leveraging
a third-party, open-source, MIT-licensed
JavaScript library called SWFObject.
SWFObject is a small JavaScript file and
can be implemented at minimum of one
line of JavaScript code. You can learn more
about implementation or download the
library from the SWFObject documentation(http://code.google.com/p/swfobject/wiki/
documentation) hosted by Google Code.
Detecting bandwidth
Unfortunately, there is currently no native
mechanism in Flash Player for determining
network conditions, a key data point to
determine which content is appropriate
for your target device. You can make
a best-effort approximation of network
bandwidth by measuring the time it takes to
download required resources, such as XML
configuration files or external SWF files, at
least 50 KB in size: see (Listing 1).
Keep in mind this is an approximation
that varies based on network load, device
background processes, and current signal
strength.
If you're employing Adobe Flash Media
Server (FMS) to deliver video streams,
there are built-in Quality of Service APIs
that return the user's current bandwidth.
For more information, read Script-based
bandwidth detection (http://www.adobe.com/
livedocs/flashmediaserver/3.0/hpdocs/help.html ?content=00000074.html ) in the Adobe Flash
Media Server Developer Guide.
Detecting CPU architecture
In the mobile space, the majority of devices
rely on slower, more energy-efficient
processors, such as those that are ARM-based.
While not the most robust mechanism,
a strong indicator of whether the device is
a non-desktop device is to perform a check
for the processor type: see (Listing 2).
Detecting operating system (OS)
Another rule of thumb to consider that
aids in determining whether the device
is a mobile device is the OS, particularly
detecting for an OS that is not applicable to
desktop computers: see (Listing 3).
Detecting device-specic information
You can also discover more granular device
information from the UserAgent (UA)
string, which can be retrieved through
JavaScript via ExternalInterface. While
this may reveal various device-specificinformation – including OS version, device
name, and browser – this approach is not
recommended, as it targets a specific device
and fails to give your site the broadest
possible reach. Furthermore, the UA string
itself is not guaranteed to be consistent or
well formed across platforms and carriers.
Detecting screen resolution,dots per inch (dpi), and diagonal
A pragmatic approach in distinguishing
between a mobile and non-mobile device is
to refer to the device's Capabilities.scre
enResolutionX, Capabilities.screenRes
olutionY, and Capabilities.screenDPI to
determine the device's physical screen size.
Also note that mobile devices typically have
higher DPI than a typical desktop computer:
see (Listing 4).
Detecting screen orientationFlash Player will dispatch resize events from
the Stage when the device is rotated; this
may impact how your UI is displayed: see
(Listing 5).
Detecting input capabilities
Various devices will have different input
capabilities, which has direct implications
for the user experience. For instance, a UI
that supports rollover interactions would not
be appropriate for a multi-touch device or
one without cursor support. Understanding
these capabilities enables you to tailor theUI to support input mechanisms for optimal
user interaction: see (Listing 6).
Listing 1.
//Obtain the total number of bytes in a particular
//loaded asset, and convert the bytes to kbps.
//Obtain the bandwidth by dividing
//the amount loaded by the amount of time it took to load.
var kbps:Number = ((loaderInfo.bytesTotal*8)/1024)
/ (totalTimeInMilliseconds/1000);
Listing 2.
if (Capabilities.cpuArchitecture == 'ARM') {
//Directional!
User is most likely using a mobile or a netbook device.
}
Listing 3.
if (Capabilities.os.indexOf('WEB') != -1) {
//Palm OS
} else if (Capabilities.os.indexOf('WINCE') != -1)
{
//Windows Mobile
} else if (Capabilities.version.indexOf('AND') != -1) {
//**Android returns Linux as the os, so we need to use version.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 9/10702/2010 (10)10
Special Report
Video stream selectionBased on the findings from previous
detection routines, the appropriate video
streams can then be provided to the user
based on device type, input capabilities and
network bandwidth.
Generally speaking, if the above detectionroutines provide a high level of confidence
that the requesting device is a mobile device,
defaulting to a lower-quality video stream – for
example, the3G – All configuration as described
previously in the Mobile video encoding
guidelines (http://www.adobe.com/devnet/devices/
articles/delivering_video_fp10.1.html ) section
– further ensures that playback occurs with an
acceptable load time and frame rate. You may
consider providing users the option to explicitly
select a higher-quality video through your video
player controls.
Performance optimizations
Inefficient video players are typically
plagued by both excessive script execution
and excessive extra-video rendering. The
following describe a number of video player
optimizations that may help to significantly
improve performance on the mobile device.
Simplify rendering complexity
As much as possible, reduce the number
of objects on the stage. Simplify the shape
of essential buttons by using, for instance,
non-complex fill styles like simple
rectangular solid color shapes rather than
gradients or multiple small lines. If shapes
such as the playhead are changing shape
or position, they should be updated as
infrequently as possible – no more than
once per second.
Limit use of timer functions
and check for duplicates
The goal here is to minimize ActionScript
processing – intervals, enterFrame handlers,
callback functions registered with NetStream,
mouse event handlers, and other such
functionality. When registering a timer
function, it will be called as often as possible up
to the rate requested; potentially, Flash Player
may end up spending all of its time executing
script as opposed to drawing video frames.Consequently, video frames are dropped to
keep up with the audio and only a small fraction
of the frames in the video are rendered. This is
especially true for timer functions that update
UI components and hence trigger redraws,
which are expensive operations.
Do not render items
that are not currently visible
Flash Player will render objects that are
hidden behind other objects. Objects such
as the swirling hourglass should be destroyed
when they are no longer needed. For objects
that you intend to reuse, stop the Timeline
and set the visible property to false, or move
the object off-stage. For objects that you do
not intend to reuse, call removeChild() and
set object to null.
Minimize bitmap caching forfrequently changing objects
Avoid bitmap caching (via thecacheAsBitmap
property) frequently updated objects. When
bitmap caching is enabled, the bitmap needs
to be re-cached, an expensive operation, each
time the object is updated. For example,
frequently updated text fields should not
be bitmap smoothed, as this impacts video
playback time.
Avoid transparency
Where possible, avoid transparency or limit transparent objects to smaller areas. For
instance, it may be preferable to convert
transparent overlay ads to pre- or post-roll ads.
Avoiding drawing APIs
Drawing API calls are particularly expensive
because they usually create objects, such
as the scroll bar, dynamically on the Stage
before rendering them via the rasterizer.
Furthermore, these objects are destroyed
and recreated every time ActionScript is
executed. If possible, create these objects
statically in authoring time on the Stage; these reside in memory through different
timelines.
Improve ActionScript eciency
Computer science coding optimizations
apply to ActionScript; common techniques,
such as avoiding large loops, reducing the
depth of function calls, and simplifying
the design of object-oriented classes, apply.
Adobe makes available best-practices to
improve ActionScript performance:
• ActionScript 2 Best Practices (http:// www.adobe.com/devnet/ash/articles/as_
bestpractices.html )
• Tips for tuning ActionScript 3
performance (http://www.adobe.com/
devnet/ex/articles/as3_tuning.html )
Please also refer to Optimizing mobile
content for the Adobe Flash Platform (http:
//help.adobe.com/en_US/as3/mobile/ ) for
additional ActionScript 3 performance
optimization tips.
Where to go from hereFlash Player 10.1 brings Flash Player to
mobile, which now empowers you to
deliver the video experience that your users
have come to love on yet another screen.
While you will be able to leverage many of
Listing 4.
//Using a combination of all these properties you can get an
accurate measurement of the device's physical screen size (or diagonal).
var dpi:Number = Capabilities.screenDPI;
var screenX:Number = Capabilities.screenResolutionX;
var screenY:Number = Capabilities.screenResolutionY;
var screenDiagonal:Number = Math.sqrt(((screenX*screenX)+(screenY*screenY))) /
dpi;
//Then using this result you can assume a screen diagonal of less than 6 is
a mobile device.
if (screenDiagonal < 6) {
trace("Device is mobile.");
}
Listing 5.
stage.addEventListener(Event.RESIZE, handleStageResize, false, 0,true);
In this handler you can determine if the device is horizontal or vertical:
protected function handleStageResize(event:Event) {
var currentOrientation:Number = stage.stageWidth /
stage.stageHeight;
if ( currentOrientation <= 1 ) {
trace("portrait");
} else {
trace("landscape");
}
}
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 10/107
Delivering video for Flash Player 10.1 on mobile devices
02/2010 (10) 11
your assets from existing projects targeting
Flash Player, I hope that this article has
left you with a better appreciation for the
constrained environment that is mobileand the optimizations necessary to facilitate
a compelling user experience.
Although much of this article has revolved
around performance optimizations, I strongly
encourage you to keep an eye on another
equally important aspect: experience design.
Mobile is a compelling platform from which
to engage your users, and developing a tailored
user experience that leverages the mobile
context in a meaningful way is paramount.
Please consult the following resources for
more information:
• Learn more about Flash Player 10.1(http: / / labs.adobe.com/technologies/
ashplayer10/ ) and try out the desktop
beta
• See Flash Player 10.1 demos (http://
www.adobe.com/devnet/flashplayer/
articles/mobile_demos_fp10.1.html ) and
watch Flash Player engineers discuss
some of the key new features and
challenges in bringing the full Flash
Player to mobile devices
• Consult the ActionScript 3 Developers
Guide (http://help.adobe.com/en_US/
as3/dev/ ) and ActionScript 3 Reference
for the Adobe Flash Platform (http://
help.adobe.com/en_US/FlashPlatform/
beta/reference/actionscript/3/index.html )
for information on the syntax and usageof the new APIs in Flash Player 10.1
Learn how to tailor your content to deliver
the best possible user experience on mobile
devices. Check out the following new draft
documents:
• Optimizing mobile content for the Flash
Platform (http://help.adobe.com/en_US/
as3/mobile/ )
• Design tips for creating mobile RIAs
(http:// www.adobe.com/d evnet/devices/ articles/design_tips_mobile_ria.html )
• Authoring mobile Flash content
for multiple screen sizes (http://
www.adobe.com/devnet/flash/articles/
a u t h o r i n g _ f o r _ m u l t i p l e _ s c r e e n _
sizes.html )
Listing 6.
//**Detecting cursor support
if (Mouse.supportsCursor == true) {
//User has a cursor
}
//**Detecting multi-touch support
//We can see if the user has a Touch Screen:
if (Capabilities.touchscreenType == TouchscreenType.FINGER){
//Device is touch screen
} else if (Capabilities.touchscreenType == TouchscreenType.STYLUS) {
//Screen uses a stylus
} else if(Capabilities.touchscreenType == TouchscreenType.NONE)
{
//No touch screen
}
// Now we can see if we have Gesture support, and what type of gestures you can
expect.if (Multitouch.supportsGestureEvents){
trace(Multitouch.supportedGestures.join(', '));
trace(Multitouch.inputMode); // Will be one of:MultitouchInputMode.GESTURE,
MultitouchInputMode.NONE, MultitouchInputMode.TOUCH_POINT
// Since we have gestures we can listen for GestureEvents (for those supported)
stage.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP, handleTwoFingerTap,
false, 0, true);
} EDMOND AUEdmond Au is a product manager for Flash
Player at Adobe Systems, where he is focused on
development of the platform to enable rich video
experiences on mobile devices. Prior to joining
Adobe, he developed web applications as an ITconsultant at IBM Global Services. Edmond holds
a BS in Computer Science from the University of
Southern California, and an MBA from the Haas
School of Business at UC Berkeley. When he's not
at work and keeping up with mobile happenings,
Edmond enjoys exploring and shooting photos
of new areas and eateries in San Francisco,
along with occasional mountain bike rides and
international treks.
A D V E R T I S E M E N T
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 11/10702/2010 (10)12
Special Report
A t first I couldn't believe what I saw,
it was a giant F*ing iPod Touch!
Really, was that the best they could
come up with? What, it doesn't have Flash?
The eBooks are on a wooden shelf? It double
scales iPhone apps? It's not wide screen?
What is going on here?
It wasn't until the dust settled that I started
to see exactly what Apple had done. There is
no need to revolutionize the tablet computer
when they have already changed the way we
think about mobile devices. As the saying
goes, If it isn't broken, don't fix it , and that ishow we wound up with the extra-large iPod
Touch. Before we really can get started on
how the iPad will redefine our view of RIAs,
we have to look back on why Tablet PCs have
failed so far.
The slate computer is not a new idea.
Apple invented the category back in the day
with the Newton. In fact, the Newton is as
close to the iPhone as any other device to this
day. Tablet PCs, on the other hand, have had
a horrible time getting off the ground. They
were very expensive, had a low battery life,
were slow, lacked easy input, and had anoutdated version of Windows crammed into
them. The last part is the most important. It's
hard to imagine an operating system, dating
back to the dawn of Windows, literally,
working perfectly in a brand new and
untested environment.
What apple has done is revolutionized
the operating system, not the hardware.
Now you may be thinking, no they didn't,
it looks just like my iPhone, but that is
the key. The iPhone OS was designed for
small devices. It loads up instantly, has
sexy transitions, is clean, minimalistic, and
works great with a finger as the only input
device. To understand truly what apple has
achieved we now have to take a quick look
at their flagship software, iWorks, on the
iPad.
Up until this point, the iPhone was just
a micro version of your computer. You
had a very focused, single-task-at-a-time
experience. The iPad, on the other hand,
is going to take full use of its screen real
estate. Showcasing iWorks on the iPad lets
everyone know that this device may not
be a fully fledged computer but it can be
a productivity power house. Being able
to complete word processing tasks, create
spreadsheets, put together presentations,
games, surf the web, use email, and output
video to an external monitor sure soundslike a fully-fledged computer to me. Add
a Bluetooth keyboard and you have a thin,
light, and portable computer. When you
don't have access to a keyboard you can peck
away on the virtual keyboard, but when
you are stationary you are getting a full
computer experience. The only difference
is that the entire app is now wrapped in the
iPhone's GUI, the same GUI that is easy to
use with fingers, that is familiar to any of
the millions of people with an iPhone or
iPod Touch. Remember all of this is really
running on OS X but with a completely
custom touch friendly UI.
Now that we have all of that out of the
way let's talk about the 800 pound Gorilla
in the room: the lack of Flash. Adobe and their team of Flash evangelists are trying to
get as much attention as possible to convince
you that Flash has to be on the iPad. You will
read many stats on how X% of the web is
Why the iPad Will
Redefine Our View of RIAs
Apple has finally released the magical and mythical Mac Tablet,affectionately named the iPad.
by Jesse Freeman
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 12/107
Why the iPad Will Redefine Our View of RIAs
02/2010 (10) 13
Flash and you will be missing out on Y% of
the experience. As a Flash developer myself,
I am not happy that Flash is missing from
Apple's web experience. It is ironic that
Flash helped give birth to the concept of the
RIA and that Apple will modernize it. Here
is how...
There is an App for thatRight now, you think of an RIA as a web-based
application. Air has helped break us free of
the browser by allowing us to run our RIAs
in a web-like sandbox that is seamless and
that blends into the desktop OS. The main
feature of an RIA is the connection to the
internet. Rich Internet Application doesn't
mean confined to a web browser, and as Air
has shown us, these Internet Applications can
live anywhere. The same can be said of Apple'sApps. They offer a rich user experience
and many of them have passive or active
connections to the Internet. Now, without
Flash on the device, there is a gaping hole in
Apple's version of the web. You can't go to
any of the amazing sites on the FWA. You will
be missing all the free TV that Hulu has. You
will not be able to watch video from YouTube.
Wait a second; you can watch YouTube on
the iPhone. How, you ask? Well, it’s simple:
YouTube has a native app.
So let's analyze YouTube on the iPhone/iPad
as an example of what RIAs will become onApple's new device. YouTube made watching
video on the web famous. Not only did it
change the way we watch video on the web,
but it also showed us how a community could
be formed around that content. It broke all the
conventions of what we thought video was and
it kick-started the Flash video monopoly on the
web. Although it may not be the best example
of a RIA, it does share many of the requirements
of the classification and it is something that
lived on the web and is now a native app. Since
Apple doesn't allow Flash on its device, the onlyway you would be able to watch YouTube is to
use a native Objective C app.
Seeing how YouTube works on the iPad,
it is clear that anything built on the Web
– especially in Flash – can be ported over
to the device and created with Objective C.
The largest hurdle is getting through Apple's
Spanish Inquisition style approval process.
Theoretically, Hulu could just make its own
iPad app and stream video to anyone with an
internet connection. Unfortunately, Apple
may see this as direct competition with theiriTunes store and not allow the app to be
approved. This is a much larger debate and
one that can't be covered in the scope of this
article. The take away is that the same fancy
Flash website you are making for Adidas,
Nike, or the RIA you are making for a Bank,
Hedge fund, or Enterprise Level Intranet can
just as easily be created on Apple's iPad as
a native app. Not only that, but with a built
in distribution system and a way to make
passive income off your product, things are
looking more appealing now.
I Like MoneyAlthough Flash has enabled us to create far-
reaching, cross-platform, applications it has
also had the negative impact of helping to
kill the ability to monetize our online work.
Companies struggle to make money from
the web. Sure, we all are paid to build Flash
Apps but very few companies actually see
that return directly from their application.
If you don't believe me, look at the Flash
gaming community. They are probably the
ones who suffer the most from the everythingon the internet should be free syndrome. It's
incredibly hard to find a user base on the
internet who will pay for a web-based game.
There are subscription Flash game sites, but
as an independent game developer you have
very little exposure or way of charging to play
your game.
Why would I pay to play Tetris when
there are literally hundreds upon hundreds
of clones all free? One of your only hopes as
an independent Flash game developer is to
wrap your game in advertising and pray itgets enough impressions make some money.
If you made that same game for the iPad and
sold it for 99 cents, you have the potential
to make a killing. Granted having a runaway
success on the iPad/iPhone isn't guaranteed,
but the option is there.
Apple has helped create an entirely new
market for small apps and micro-transactions.
This is something that never materialized on
the web because it was completely open and
unrestricted. Now independent developers
have the option to create rich applications
they want to build with the possibilityof seeing a return on their invested time.
Not only can they build the same type of
applications they did in Flash on the iPad,
but they can take advantage of the full
system's power.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 13/10702/2010 (10)14
Special Report
PerformanceWhen it comes to performance, we are
limited to a plug-in, in a browser, with
a small portion of the computer's resources.
Although one of the biggest complaints
about the iPad and iPhone OS is that you
cannot multitask (Apple's own apps do run
in the background) the trade-off is that you
do get 100% of the system's free resources
dedicated to your application. With that
power, the iPad makes use of true 3-D, GPU
acceleration, and a stable consistent platform
that works the same on every iPad.
Flash revolutionized the way motionworked on the web. Flash gave birth to
tweens, easing, and complex animation. The
only limitation now in Flash is the platform
itself. The complexity of creating a cross-
platform, fully backwards compatible plug-
in is starting to take its toll on the Flash
Platform. Apple doesn't have the same
bottlenecks Flash does. Apple has created
a powerful and visually stunning platform
from the ground up. I spent a lot of time
fighting for GPU support and true 3-D in
Flash and, if you want to know why, check
out the video on Apple's site highlighting the
iPad. Watch the transitions from app to app.
Pay attention to how you see the bookshelf in
iBook rotate around and the selected books
fly open. Page turning looks like you are
flipping a real page. And yes, this trick has
been done before countless times in Flash;
the iPad opens up the ability to take it to the
next level.
When it comes to gaming, there is nothing
mobile coming close to the iPad. The iPhone
3Gs is already starting to catch up with the
PSP and there isn't a sub $500 netbook that can play a real 3-D game. Flash on the
desktop still can't deliver the same immersive
experience that Unity can, but the iPad has
this power built in. RIAs are in no way related
to games but all of this extra power allows us
to make RIAs all the more immersive.
How does all of this performance benefit
RIAs? More power equals a more rich and
immersive user experience. Largely, RIAs
designed in Flex are stale, form-based
emulations of their HTML counterpoints.
The only immersive experience happenswhen transiting from screen to screen. Flash's
advantage has always been in animation,
design, and its penetration numbers.
Unfortunately, with limited power to push
more cutting-edge UI's and effects, most
companies don't spend the time to polish
their product the way I have seen in iPhone
apps. Flipping card effects in Flash come off
cheesy but on the iPhone they make sense.
The iPad/iPhones' border isn't a browser
window wrapped in OS chrome and scroll
bars; it's the edge of the screen and metal.
Apps on the iPad are fully immersive andalways run in full screen mode, letting
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 14/107
Why the iPad Will Redefine Our View of RIAs
02/2010 (10) 15
the user focus on just that app. That's
enough about performance, how do we stay
connected?
Always On Internet connectionThe last piece of the puzzle is an always-
on connection to the internet. The iPad is
being hailed as a web-ready device, and it
is. No matter how much we want to think
Flash is the web, simply because it has
an amazingly large penetration rate, the
Internet is now the cloud. The Internet is
where we store and retrieve data from not the necessarily the vehicle we do it with.
For all intensive purposes, the iPad is a
large web browser. The only difference is
that you run individual applications but
JESSE FREEMANWith over 7 years of Flash development experience, Jesse
Freeman has worked for VW, Tommy Hilger, Heavy.com,
MLB, the New York Jets, HBO and many more. Jesse was a
traditional artist for most of his life until making the transition
into interactive art and hasn’t looked back since.
Jesse runs a Flash blog called the Flash Art of War ( http://
ashartofwar.com) and is an active lea der in New York’s Flash
community. He runs a monthly meetup called Developer
Happy Hour ( http://developerhappyhour.com) where people interested in Flash/Flex/AIR/Web 2.0 are
invited to kick back, have a few drinks, and make new friends. He is also active in the online community
as a writer for several Flash sites including insideRIA.com and can be found on twitter @theashbum.
all of them have full access to the internet
for data; whether or not they use it is a
different story.
Since Wi-Fi is built in to the lowest end
models and the higher-level ones have 3G
access for a monthly fee, this gives the iPad
the potential to always be connected to
the internet wherever you go. RIAs need
internet access to work. Sometimes they
are able to store data locally for offline
use but by the nature of their design they
are tethered to an internet connection. Is
every app on the iPad that uses the internetconnection now an RIA? I wouldn't go that
far, but the line does get a little blurry. This
always-on connection does allow us to take
full advantage of the cloud, removing our
dependence on local file system storage,
another thing RIAs do very well.
ConclusionThe iPad is not ever going to replace Flash;
even HTML 5 is far away from kicking
distance yet. It is also still up in the air howmany of these Apple will be able to sell
and if it will be a success. Regardless, the
experience we are going to see from native
apps will not only reflect the last several
years of Flash UI design and animation, but
I wouldn't be surprised if more and more
companies pay to directly port over their
full Flash based RIA's to the iPad. Given
the screen real estate, power, and internet
connection it is plausible. An even better
scenario is that Adobe takes what Apple
is doing and reinvents Flash as a morepowerful, seamless experience, one that it
has had trouble doing while stuck inside
a browser. With several Flash ready tablets
being announced, one can only hope that
Flash has it's time to shine in the tablet form
factor. I could spend several more pages
covering how RIAs will evolve on the iPad.
At the end of the day, it is important to be
aware of emerging technologies and learn
how to take your skills in one language and
apply them to another. I don't know about,
you but I am finally really excited about
learning Objective C. The iPad is going to beamazing to use, and I am not just saying it
because I am an Apple fan. Even if it is a large
iPod touch, it's still years ahead of any of its
Tablet PC competitors. I am really looking
forward to seeing what kinds of innovative
and unique applications are created for it.
I am especially interested in seeing how
this new breed of apps will take advantage
of the internet. One thing is for sure, that
web-powered application are a huge part of
our daily life and I can only hope what gets
built for the iPod will spur Adobe to further
innovate the Flash Platform. They have nochoice; Apple is now a competitor with
Adobe in the RIA space.
If you would like to comment on this article,
visit http://flashartofwar.com/2010/02/15/why-
the-ipad-will-redefine-our-view-of-rias/
This article was edited by Ronda Lee Levine
http://writingresearchediting.com.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 15/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 16/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 17/107
In brief
02/2010 (10)18
News selected by Gábor Csomák
The witnesses of this conversation said
that Jobs was brash and rejected Flash. He
described ash as a processor eater lled
with security holes and dead techniques.
Afterward, Jobs put a list of oppy disks,
old data transfer standards, and CCF LCD’s
on the table, and said that Apple took a big
part in changing these standards.
Jobs also said that the iPad’s batterieswould last 1.5 hours with Flash, instead of
10 hours.
from beszeljukmac.com
The Flash Player team has a new blog The team wanted to start this blog (http://
blogs.adobe.com/ashplayer/ ) to share with
you information about how things work
in Flash Player, why they work the way
they do, tips, tricks, and other interesting
behind-the-scenes details.
The AIR team blog has been pretty good
at showcasing customers and providingupdates to the product. Now the Flash
Player team has a blog as well, to provide
good stu.
digitalbackcountry.com
Flash 10 was adopted fastBy extending a hand to HTML5 Microsoft
will move ahead adoption of the standard
in a large way. The better HTML5 does, the
worse Flash does, given their tendency to
step on each other’s toes at every turn.
HTML5 probably has never been
better. Wider browser support, a lot ofmomentum. But the same can be said for
Flash. Flash Player 10 was the most quickly
adopted Flash Player version yet. (as seen
on the diagram)
Maybe HTML5 and Flash aren’t stepping
on each other’s toes as much as pushing
everyone forward.
digitalbackcountry.com
Flash Player 10.1 (also on devices)
A t the Mobile World Congress,
Adobe showed a beta version
of Flash Player running on the
Motorola Droid, Palm Pre and the Google
Nexus One. The applications were running
incredibly well and attendees were very
impressed with the performance and fluidity
of the experience, Flash was built for the web
and on devices it just makes sense. The mostimportant addition to the mobile experience
was the ability to playback Flash content in
full screen mode, enabled by these powerful
webkit browsers.
With Flash Player 10.1 Adobe have worked
to enable the same web content to run using
less memory, yet with higher performance.
The results are really incredible and should
see a significant improvement, not only
for the mobile devices but also for desktop
computers and application running on
Adobe AIR 2.0. Remember, we can only do
so much and as a Flash Developer you havea role to play in ensuring that your content
works well on these new devices.
from flashMobileBlog.com
Adobe AIR 2.0 Beta 2 Released
2nd of February 2010 Adobe did
launch Adobe AIR 2.0 beta 2. The
first beta release of AIR 2 was in
November 2009 and after 3 months AdobeAIR 2.0 is almost ready for release.
Some features and enhancement:
• Print Job Enhancements – better
control of the way content is printed
from an AIR application
• TLS/SSL sockets – TLSv1, SSLv3
• Flash Access support
• IME API/IME Text Input
Enhancements
• AIR Core framework – service
monitoring and URL le promise classes
Go to ofcial AIR 2.0 page and read the
release notes, the FAQ and download the
AIR 2 beta 2 runtime and SDK. Along with
all these read the announcement on theAdobe AIR Team Blog and test the samples.
Applications built against Adobe AIR
2 beta 1 will not run using the AIR 2 beta
2 runtime. In order for an AIR 2 beta 1
application to run on the AIR 2 beta 2
runtime, the namespace of the beta 1
application descriptor file must first be
updated to 2.0beta2 and compiled against the
AIR 2 beta 2 SDK.
from flexer.info
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 18/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 19/10702/2010 (10)20
Tools
Desuade Motion Package – http://desuade.com/dmpStop – and begin to imagine being able to take
hours of custom timeline-based animation,
and being able to easily achieve the same thing
with a few lines of ActionScript 3. Think
about feeling at ease while creating realisticmotion in your games with physics that
doesn’t require you to be a rocket scientist.
Realistic motion isn’t just for hardcore frame-
by-frame animators anymore.
With the introduction of Flash CS4, IDE
designers and animators were granted an
extremely powerful way to create tweens
with the new Motion Editor. Allowing you
to fully control the properties of a MovieClip
with keyframes, it was a breath of fresh air for
animators and everyone else who heavily uses
the timeline.
But what about those who rely on AS3 tweening engines to create motion? Most of
us are comfortable with a tweening engine
of choice, but what happens when you
need more control than going from point
A to B? What happens when you need to
create advanced and organic looking motion?
Regular tweening engines just fall short, and
physics engines are too complex for basic use.
Enter the Desuade Motion Package. Using
a concept very similar to the Motion Editor,
the DMP allows you to create complex motion
easily through code with MotionControllers.
These are pragmatic Motion Editors for any
property that use virtual keyframes to control
it’s value over time – the same concepts you
already know. Not only that, each allow their
own ease and spread (random value ranges)
allowing for realistic and varied effects.
It doesn’t stop there. Desuade is also the
first to introduce easy physics-based motion in
a similar syntax as tweens you’re accustomed
to. Along with tweening, physics motion can
also be controlled by MotionControllers –
providing even more intimate control. To top
it all off, everything from tweens to physicscan all be serialized in and out through
XML. Imagine the possibilities; being able to
control motion from XML, saving it, sharing
it, giving the control to clients without being
asked to tweak each tiny thing.
Despite the name, the power of the
Desuade Motion Package isn’t limited to
motion. Just like any other tweening engine,
you can control any value on any object – not
just x and y. For example, you can manage
the alpha with velocity and acceleration,
or use the Sequence class to run delayable
functions. As you dive deeper and explore all the classes the package offers, you’ll find even
more helpful classes that you can use.
Desuade Partigen 2 – http://desuade.com/partigenBased upon the Desuade Motion Package,
Partigen 2 is a unique and groundbreaking
Flash particle effects engine. The newest
version of the Partigen engine powers the
full-featured Adobe Flash extension that
comes with over 120 preset effects in a point-
and-click interface allowing you to create
realistic particle effects in just one click.
While the commercial Flash component is
worth it’s premium price, those of us willing
(and wanting) to use some free open source
code can hardness the same power with the
newly open source libraries. Best of all, since
it’s built upon the Desuade Motion Package,
you can use the same ActionScript syntax and
power it provides with little learning curve.
Unlike the few other particle systems
available for AS3, Partigen 2 is commercially
supported and tested so you know you’re
using quality, production-ready code that’sfully documented. Also separating it from
the crowd is the ParticleControllers that work
just like the DMP’s MotionController. Every
particle can be controlled just how you want
it, from a very specific sequence of tweens, to
an organic flow using the basic physics.
What this means is that you can use save
time and money helping your clients using
Partigen – instead of having to spend days
(or even weeks) creating your own particle
engine. Since it’s open source, you can use
whatever you need, and change all the things
you want to make it work for you. Imaginebeing able to create anything from falling
snow effects in your banner, to realistic
smoke in your movie, and even to allow users
to interact with realtime flames in your next
award-winning game.
The Desuade Motion Package and Partigen
2 libraries aren’t for everyone, but those
looking for the cutting edge in motion, and
some of the most innovative Flash effects
should look no further. Even with other
options like Flint and Tweenlite, Desuade
offers a premium choice for professional AS3
libraries.
Desuade’s Open SourceFlash Motion and Particle Effect Engines
by Andrew Fitzgerald
ANDREW FITZGERALDDesuade ( http://desuade.com/)
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 20/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 21/10702/2010 (10)22
Tools
Whether you are revitalizing an
existing website, or starting one
from scratch, the process itself can
be daunting. Many small business owners tend
to omit the goal setting and planning phases all
together, or try to quickly (read: ineffectively)
scramble something together while the project
is underway. These phases are integral to having
a successful launch, and also to getting the most
out of your designer and your dollar.
Here are some quick and useful items to
consider when putting together your actionplan – yes, you should absolutely write this
down!
Know your goalIs your site strictly informational or do you
have another specific goal in mind? This
includes getting a potential client’s email,
selling product, or having them contact you
or request a quote. Are you trying to cater
to existing clientele or penetrate into a new
demographic?
Know your marketDoes your business appeal to a wide variety
of people, or a niche? What kind of imagerywill generate the best response? What is
their impetus to purchase your product or
service?
The more you define
your target audience, the
easier it will be to design
and write for them. Also,
you’ll understand what
items to include on your
site and what not to; for
example, do you really
need that 20 second
Flash introduction?
Know yourproduct/serviceThis seems like a no-
brainer, but there is a lot
more thought involved
than you would think.
Sure, your widget
2.0 is oh-so-cool and
innovative in your mind, but what’s the
benefit to the customer? How is your site
going to convey it in a compelling and concise
manner? Most people already have what they
need and much of what they want – so how
are you going to convince them otherwise.
Slick graphics are nice, mainly when content
and the customer are king.
Know your budget and time lineChances are you will be talking to at least
a few design houses or freelancers. Havinga definitive idea of what you want to
spend and when you would like the project
accomplished will help both you and your
designer be realistic when it comes to setting
milestones and items to include on the site. If
you can’t afford it now, be it money or time,
there is always Phase II .
Lastly, the more you plan ahead, the
easier it will be to measure the success of
your site, or at least know which metrics to
use in general. There are quite a few other
items for consideration when planning your
business’ site. A good agency or designerwill work through your draft and often
brainstorm additional ideas with you. After
all, a successful site is one that is constantly
a work in progress.
Four Letter Words You
Need to Use: Goal & Planby Adam Malamis
About Simalam Media
We specialize in helping small to medium sized businesses createcustomer perception, or a “brand” through denitive marketing plans,
logos, print material and web solutions. Our solutions are geared
towards helping your organization achieve its goals, whether they be
increasing sales/membership, communicating efectively with current
or potential clients, or simply maintaining mindshare.
www.simalam.com – 1-888-520-3553
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 22/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 23/10702/2010 (10)24
Beginners
Many different types of sites exist
out there, and each has its own
reason for being. Some sites are
personal and have the sole aim of providing
solutions to common problems or sharing
experiences with the world. Other sites
are business oriented, with an emphasis
on making money by providing goods and
services. Before learning the code that will
physically bring your design together, you
need to flex your creative muscles and come
up with the ideas, layout, and functionality that you want to include in the final product.
Even if you are not the most creative person,
you can define your project’s aims and
goals quite easily with the aid of various
development models and inspirational
resources (don’t worry, it’s not as complicated
as it sounds).
In this chapter, you will learn about the
following topics:
• How to mold your initial idea into
something potentially useful
• Where to find and draw inspiration foryour design and site features
• The basics of information architecture
and producing a design
Who Are You?The first step in understanding what kind
of site you want to produce is to gain an
insight into the reasoning and motivation
behind your choices. When you undertake
any project that involves creativity, each
decision you make will impact a series of
factors that you need to consider. This
section of the book is not philosophy 101,
and it certainly does not deal with the big
questions of the universe, but it does focus
on the way you see yourself and others
to help you determine why you should
choose a particular method over another.
Understanding this can help you create
something that appeals to the needs and
views of other people around you.
Your Inner ProcessesWhile you might come into the creative
process believing you have an open mind,
there are already a series of variables at work
in your brain that will affect your ability to
make decisions. Sometimes, these variables
are as simple as having preconceived ideas
about your users. For example, many peoplehave make incorrect assumptions about the
needs of disabled users; in other cases, people
might believe that integrating a particular
service will benefit the end user, when in fact
it will have the opposite effect and drive them
away. It can help you to keep an open mind
if you remember that everyone sees things
differently.
Who Are You?Self-analysis is something that many people
creating a site overlook. By questioning your
motives, you can integrate yourself more tightly into the decision-making process.
Sometimes you make choices based on
nothing more than personal preferences.
While this might work if the site is for
your viewing alone, you should put that
reasoning to the test, as other people will
judge for themselves if they like what you
have created. The purpose of this task is
to allow you to decide if the idea you have
for a site is worth pursuing. Building a site
is a great opportunity to be creative, make
something you can show off, and potentially
have something you can enjoy for years to
come; however, a poorly conceived idea
could hurt you in the long run, especially if
your site is hard to navigate or if you include
a lot of time-sensitive information but
then never update your site. You certainly
should not be defeatist about this prospect,
but understanding what is unique about
your idea will help you conceptualize your
ideas better. It will also give you something
specific to write about when you begin
writing content. Doing this will enable you
to engage all of the people who will visit
your site better!
Try It Yourself: Self AnalysisIf you already have a few ideas you want to
put to the test, ask yourself the followingquestions. Even though it might start getting
tiring the more often you do it, critiquing
yourself can help you avoid wasting time
on something that ultimately will be of
no benefit, counterproductive, or just
downright silly! So stop what you are doing,
take out a pen and a piece of paper, focus
on your site idea, and think deeply over the
questions that follow:
• Why do I think this site is a good idea?
• What reason do I have to support this?
• Do other people agree with me?
You want to end this activ ity by
considering the justification for your idea
and whether it is likely to be successful.
When you encounter activities like this
one in this book, you should pause your
reading and try out the exercise whenever
possible. The knowledge that you gain
from undertaking activities will assist
you in your website building process. So
let’s take a quick look at the preceding
questions and see how you might answer
them. The examples that follow relate to
your site, so keep this in mind because this
is not a philosophy lesson, and you don’t
want to overthink the questions. I hope
the following examples wil l show you
the kinds of answers you could give and
What Kind of Website
Should I Make?
Before you can sit down and start publishing your website, you need tohave an idea in your mind of what you want to achieve.
by Alexander Dawson
Excerpted from the book Getting StartED Building Websites by Alexander Dawson (FriendsofED/Apress, 2009).
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 24/107
What Kind of Website Should I Make?
02/2010 (10) 25
will help you decide for yourself where
to take your idea next (see Figure 1–1).
We’ll now use the example of a site for
stamp collectors, so you can see what kind
of things might be important. Note that
we’ll build on this example throughout
the c hapter, so you c an see how every thingcomes together.
ExplainED
Remember to think about all the pros and
cons of making a site for your idea; you want
to go into this book knowing that your site
will be able to offer everything you want and
to become a great success (with lots of people
visiting)!
Q: Why do I think this is a good idea?
• A: Using this site, I could potentially
expand my own collection of stamps!
• A: My stamp collection might interest
people whom I have never even met
before.
• A: I have always wanted to build a site
but never got the chance before.
Q: What reason do I have to support this?
• A: There are lots of stamp collectors out
there, so public interest should be high.
• A: There have been requests for theservice I am going to offer on this site.
• A: Another site that buys and sells rare
stamps made a fortune!
Q: Do other people agree with me?
• A: Well other people interested in
stamps have given their support for the
site.
• A: Having a dedicated site could get
more people involved in this hobby.
• A: My friend has a blog on this subject
and gets plenty of visitors every month.
If my answers or any of the answers you
came up with yourself make you think “this
site has real potential to be something great,”
then you’re ready to carry on. If not, you
might want to reconsider the idea. If you
just want to make a personal site for yourself
and your family, which is a perfectly valid
reason to create a site and doesn’t require
a large number of visitors, then you can
continue, regardless. Next, you’ll learn
about this subject in-depth, using what you
have written down to good effect. So pay
attention and keep these notes handy!
ExplainED
Interestingly, we often ignore positive
analysis when we critique our own work,
yet show tremendous enthusiasm when it
comes to piling on criticisms of our efforts
and skills!
How Do You Think?Every decision you make in the process of
creating your site will derive from variousquestions you have asked yourself. You can
break these down into short summaries,
and these simple questions-and-answers
can help you make decisions when you find
yourself unable to choose whether one of
your ideas is a good one.
By taking into account the following and
weighing the pros and cons for each, you
can follow through each thing you set out
to do, without having to fear that a choice
or decision you have made was unjustified
or unexplainable in the future. So put aside the book again for a short period of time and
answer the following, more in-depth set of
questions.
Be sure to write down your answers on
your ideas pad, which I assume you’ve been
updating as you read this book and walk
through the exercises laid out.
After you answer these questions,
you should have decided what you want
to do with your site, which is useful as
you start cultivating ideas for your site’s
functionality.
Try It Yourself: Thinking Theory
You should ask yourself several questions
when considering potential ideas for your
site:
• Who? Ask yourself who will benefit
(other than you) from your idea.• What? Consider what made you decide
that this would be a good idea.
• Where? Determine whether—and
where — your idea has been successfully
implemented.
• When? Determine how long you think
it will take the implementation of your
idea to show results.
• Why? Ask yourself why you should use
this method over any other in existence.
• How? Contemplate how you should
implement your idea.• Huh? Try to determine whether your
idea makes sense; if not, you should
reconsider its implementation.
This exercise will not only help you make
decisions about which ideas you should
implement on your site from the outset,
but it will also aid you in making design
decisions and coming up with ideas on how
you can improve the site when you make
updates. It’s also important that you base
each decision you make on your visitors’
Figure 1-1. You should ask yourself these three questions when deciding on a site idea
�
�
�
�
Figure 1-2. Answering some basic questions can help you nalize your plans
�
�
�
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 25/10702/2010 (10)26
Beginners
needs as opposed to your own needs
(especially if the site you want to create a
business-oriented site). Even if your sole
goal is to create a family site, you still need
to consider the other people who will visit
the site. The Inter net is a public place; once
you put your site out there, it’ll be availablefor anybody to see, so you want to make
the best impression possible. Let’s put this
into practice by taking into account the
first bit you looked at under self analysis.
I hope you kept those written notes handy
because now you need to decide what to
do with your idea and finalize your plans
for creating your exciting new site! Grab
your piece of paper or document, and
let’s continue the same idea of showcasing
someone’s stamp collection (see Figure 1–
2).
What Type of Site? You know what subject matter you want to
cover on your site; now you need to decide
what type of site you want to create. For
example, do you want to create a commercial
site for selling products, a blog for discussing
your point of view with the world, or maybe a
gallery site that shows off your photographs?
You have a lot of different options; I’ll walk
you through these options to help you
decide. While this is a big decision to make,
remembering what you have learned in the
previous section of this chapter should help
you come to the best conclusion. You want to
choose a type of site that will best meet theneeds of your visitors based on your idea. For
instance, if you want to have a place where
you can sell scarves you have knitted; you
might go for a commercial site. I’ll cover 15
examples of site types that showcase different
areas of the Web you might wish to target. If
all you have at this stage is the idea “I just
want to make a website,” then now would be
a perfect time to decide on a direction. You’ll
have the chance to revisit the choice you make
later on in the book when it’s time to add the
functionality that people expect to find. Notonly that, but you will learn about some of
the most popular packages out there you can
use for things like blogging and adding other
unique features to your site without having
to become an expert in scripting. Remember
that this book is intended to help get you
started, rather than force you to lumber
through a complex bunch of reference
manuals (although some technical detail is
given for your benefit! I hope the transition
between stages will prove useful to you.
LinkED
For more details about the kinds of people
who create sites as part of their profession,
the A List Apart survey 2008 results are bothin-depth and interesting from a statistical
point of view. You can see them at http://
aneventapart.com/alasurvey2008/ .
BlogA blog is a website that has the sole aim of
allowing an individual or group to express
particular points of view or opinions. These
kinds of sites often include articles or features
tailored to a user’s interest in a particular
subject. These articles or opinions might
tackle real-world questions or try and bringup new fresh perspectives on a given subject
(see Figure 1–3). While personal blogs that
are based around an individual’s life usually
don’t gain much widespread attention, blogs
that are based around professional skills such
as tips or sharing specialized information
will often gain a large user base, sometimes
matching the number of readers that might
subscribe to a real-world magazine (imagine
having millions of people reading your
opinion on a subject!).
CommercialSites that have the sole intention of selling
goods or services are described as commercial
sites. These sites are usually aimed around a
core selection of services and contain features
such as technical support information,
product descriptions and screenshots, and
the ability to purchase the goods online.
While some commercial sites focus their
offerings on products they have made
themselves, some large chains offer a wide
variety of goods and services from various
manufacturers or providers (see Figure 1–
4). Most commercial sites simulate the feelof being in a real store by having a shopping
basket that allows you to store goods you
either intend to purchase or want to come
back and look at later. These sites usually
let you add items to your basket to see how
much everything will cost and calculate any
taxes you would have to pay—all before you
click the Buy button!
CommunitySites that are primarily focused around a
group of active users who are interested in
contributing to the overall success of a site are
known as a community-powered network.
These projects usually consist of interactive
functionality that lets people share or express
themselves and their knowledge over a wide
scale. Such sites include social-networking
Figure 1-3. Jonathan Snook’s blog focuses entirely upon web development and his own projects
Figure 1-4. Amazon sells a wide variety of goods, including books, entertainment, electronics and
computers
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 26/107
What Kind of Website Should I Make?
02/2010 (10) 27
G etting data from a viewer can be like pulling teeth. Web Form Builder from Coffeecup is
a tool for the job.
On the internet, there is a lot of pushing going on. But not a whole lot of pulling. And
there are reasons for that. But needless to say, getting information to a website is not
something one tends to do much of. We like to see what a website has to push at us.
Pulling information from a user into a website can be considered by some to be a luxury.
It’s not easy setting this up. However, more and more websites want to know more and
more about their viewers. This demands input from the viewer. This demands websites
contain forms for capturing information that the viewer has to provide.
As easy as this may sound, it’s not. There is much that needs configuring first and WebForm Builder will help do this. It is designed to fill this specific niche
of work by automating the processes and keeping the developer
working on the form design. Forms are a websites means of acquiring
data and this tool provides the means to create the forms.
My Trial ExperienceI surfed the Coffeecup website a bit then downloaded the Web Form
Builder 8.0 trial version. All went well. The installation automatically
started the app and I was immediately presented with a Theme dialog
for choosing a base Form to start with. Only ten of these templates are
provided and you can easily add your own. I choose the Sherbert theme
from the Contacts Form dropdown list and clicked Open.
A Quick Tips dialog popped up with some handy advice, I clickedClose and am now looking at the application.
Small yet tailored to its needs, it is quick to interpret. I wasn’t that
impressed at first but quickly realized that until you receive emails
with viewer data or create a file with viewer data or fill a database with
viewer data, this whole Web Form Builder thing isn’t worth a hill of beans.
I think Coffeecup thought so too. Provided by
the app is a Settings dialog that allows you to setup
the Email Response, Text File Saving and MySQL
Database Entry as easily as possible. There are
things one needs to know that a normal person
may not, but help from their internet provider can
solve any issues encountered. You can even allow
the viewer to upload a file of their choosing to be
sent to your website. Nice functionality.
The actual building of the form had a fewunpleasant moments and there are some shortfalls
with it but this is not its strong point nor should it be.
Remember, getting the data is the main intent here,
not a beautiful form. A nice looking and working
form yes, but it will not be some over-the-top eye-
popper. A word of advice: set the Subdivisions value
in the Grid dialog to 10. Things will line up better
with the ruler. Also, don’t use a background image
right off the bat. It will hide the grid which you will
want when placing controls into the form. For $39,
this is one tool I’ll be adding to my workbench.
www.coffeecup.com
Create Web Forms With Ease. No Scripts, No HTML, No Coding!
You can also use the coupon FLEX for 15% off any order
by John Shaffstall
D i s c o u n t
c o u p o n
Web Form Builder
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 27/10702/2010 (10)28
Beginners
sites or sites that provide powerful user-
generated services, such as wikis, forums, chat
rooms, and other interactive functionality,
which I’ll cover greater detail in Chapter 8
(see Figure 1–5).
ContentContent-driven sites focus purely on
providing articles or snippets of information
that answer a particular question or will
interest people who wish to learn about
a particular area of expertise (see Figure
1–6). These sites usually come in the form
of online magazines (known as e-zines) or
question-answering services. Note that these
services are more professionally organized
and orientated than blogs, which are usually
more focused on portraying pieces of news
or information than full-blown articles on aparticular subject.
CorporateCorporate sites have much in common with
commercial sites in that they are focused
around a particular project or service;
however, unlike commercial sites, they
tend to act more like an information booth
by providing useful information about a
business or individual, as opposed to trying
to sell you goods or services (see Figure
1–7). Dedicated sites usually offer such
functionality as contact information anddetails about the type of work undertaken
by the individual or group, and they are
focused on bringing developments about
that brand to public knowledge. These
types of sites sometimes contain services for
existing customers or those who are already
involved at some level with the individual or
business.
CorporateCorporate sites have much in common with
commercial sites in that they are focused
around a particular project or service;however, unlike commercial sites, they
tend to act more like an information booth
by providing useful information about a
business or individual, as opposed to trying
to sell you goods or services (see Figure
1–7). Dedicated sites usually offer such
functionality as contact information and
details about the type of work undertaken by
the individual or group, and they are focused
on bringing developments about that brand
to public knowledge. These types of sites
sometimes contain services for existing
customers or those who are already involved
at some level with the individual or business.
IntranetIntranets are a more unusual type of site
because they aren’t usually available to the
public through the Web. The purpose of
an intranet is to hold a special localized site
that is intended to serve only computers
that have access to that network, such as
those you would find in a library or school.
Many educational institutions, corporate
businesses, government offices, and largeconsumer networks have their own dedicated
intranets for the purpose of providing
information that is only relevant to (or for
the consumption of) the people who use
the computers or services provided by that
organization.
NotED
While intranets are generally aimed at employees
of a particular service, extranets exist in a similar
capacity for the use of those who aren’t localized to the machines that connect to the service.
Users of extranets might include customers,
suppliers, or important individuals who need
external access to the secure network.
Figure 1-5. Wikipedia is an encyclopedia project that allows anyone to contribute freely
Figure 1-6. A List Apart is a web-design magazine that publishes professional articles
Figure 1-7. Microsoft’s homepage provides detailed information about its goods and services
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 28/107
What Kind of Website Should I Make?
02/2010 (10) 29
MicrositesMicrosites might sound funny, but they
have a serious purpose: to provide a small
but relevant amount of information on
a dedicated topic. This kind of site (or
subsection of an existing site) could provide
information about a particular productor service (such as how the BBC offers
small sections of its main site to individual
television shows as if they were their own,
dedicated sites). Generally speaking, these
sites are less common than other types of
more fully fledged sites (as you often see
on the Web), although many providers of
services and products maintain individual
microsites to showcase individual services
or products.One popular function for microsites
is to display online business cards. For
example, these sites can give “brick-and-
mortar stores” that currently do not have a
method to sell their goods and services on
the Internet a way to provide basic location
and contact information. You can even find
domain extensions dedicated to creating
microsites of this type. The .tel extension lets
companies provide basic contact informationabout themselves without needing to have
a comprehensive site that offers more than
general information (see Figure 1–8). As
a result, microsites remain popular for
dedicating a segment of a site to a particular
subject.
MirrorThe point of a mirror site is to act like the
reflection of an existing site (see Figure 1–9).
These sites usually function as an alternative
site that can be accessed in the event that theoriginal source of information is unavailable;
however, sometimes these mirrors act
as digital archives for referencing and
maintaining old sites that might have some
use to someone on the Internet. Mirrors
are most commonly found in reference to
software, where they act as an alternative
location for downloading files. For example,
large-scale projects can have huge file sizes,
which can severely tax a site’s resources.
Also, search engines such as Google keep a
“cached” (alternative) copy of your site on
their servers, so that if your site is unavailablefor any reason, people can still check out the
results of a search (stripped of style and any
behavior or functionality the site originally
had). It’s important to be aware of these
mirrors if you’re worried about who keeps
tabs on each new version of the pages you
place online. If information appears on the
Internet; it will probably remain somewhere
forever!
NewsOne of the most common types of sites on
the Internet today is that of a news site. Since the creation of the Web, the public media has
flowed onto the Internet with ease, as people
from around the globe share what they have
heard or seen going on around them (see
Figure 1–10). In recent years, the number
of sites offering alternative perspectives
on current events has surged dramatically,
and many newspapers and other methods
of communicating local events (that
charge money to gain access to services) are
disappearing as a result. The Web offers the
ability to acquire live updates at no cost to the
consumer, and this is slowly killing the old
forms of print media that cannot compete
with free.
Sites like Twitter offer a method for
ordinary members of the public to talk
about news events live, and such sites are
Figure 1-8. The media and Internet giant AOL maintains a .tel domain to give its basic contact details
Figure 1-9. The Internet Archive project allows you to view stored archives of sites
Figure 1-10. With news, entertainment, television and radio listings, the BBC oers a wide range of
services
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 29/10702/2010 (10)30
Beginners
quickly growing as the most cutting-edge
way to receive news even before it reaches
more traditional news outlets, such as
television and radio stations. Many news
sites do more than post blogs; they also
provide everything from collaboration
between normal people who simply catcha video of something important on their
cell phone right and want to share it, to
consumer journalism where people can
submit their own stories to members of
the press or news-hosting sites such as the
Web aggregator, Digg. You can trace much
of the rise in news-based sites to the rise in
social-networking sites, which I’ll cover in
Chapter 10.
Niche
Sites that are described as “niche” have highlyfocused content for a particular audience (see
Figure 1–11). While many niche sites find
themselves struggling to gain widespread
appeal due to their highly specific natures,
they can be a valuable source of information
relating to a specific individual, subject, or
item. Examples of niche sites include fan
sites for celebrities or people in the media,
fans of a movie or recording artist, and even
sites targeting a particular religion, gender,
single individuals, or a political audience for
a certain party.
PersonalOne of the most common types of sites (apart
from a commercial site) is a personal site.
Generally, these places are focused towards
the individual who is creating them and
usually the people that they know (see Figure
1–12). Such sites often contain pictures and
details about a particular person, as well as
his interests. They can resemble a blog, but
on a much more personal level. Often these
kinds of sites are built so that friends and
family can keep up-to-date with the goings-on
of a particular person; however, these sorts ofsites have started to disappear in recent years
in favor of using existing social-networking
sites. Many well-known individuals,
including pop stars, have their own dedicated
“personal spaces” on the Web, but there is no
reason why you can’t have your own personal
site if you’re an interesting individual!
PortalMany sites link to other sites (see Figure 1–
13). Because there are no limits to how many
sites any individual or group can launch,
some people choose to create what is known
as a portal. The purpose of a portal is to offer
a single site that links to other places that
are owned or managed by an individual or
group. These sites offer a simple yet effective
method of keeping track of the different
properties or locations on the Web that are
associated or networked together by some
means. You often find portals on large sites
where individual products or services are
broken out discretely to reduce confusion
and increase the site’s ease-of-use.
PortfolioMany freelancers, businesses, and individuals
who want to show the array of skills they
have choose to produce an online portfolio
that serves as the online equivalent of a
resume or curriculum vitae (CV). These
sites usually consist of information about a
person, including any experience she has. For
example, such sites offer details about where
the person has worked previously, alongside
examples of her work. The site also includesmethods for contacting an individual if some
person or organization wishes to employ her
services. These sites typically function like
commercial sites, except they sell the skills
Figure 1-11. The hello world collection allows you to see the words “Hello World” in various
programming languages
Figure 1-12. Professor Stephen Hawking has his own personal site!
Figure 1-13. The homepage of the W3C brings all of the various working groups they run together
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 30/107
What Kind of Website Should I Make?
02/2010 (10) 31
of an individual or business, rather than
goods and services (see Figure 1–14). For
example, a student might want to put all of
his experience online for teachers and other
students to see, or a professional might want
to get people interested in working with her
by offering a snippet of the work she have
done in the past, so that organizations and
individuals can decide if she is the right kind
of person to work with.
ReviewThe review site is another common form
of site (see Figure 1–15). Often these sites
review a specific area of interest, such as
movies, goods or services, or even books
and music. While these sites tend to be
community driven and rely on people
who have used the said product or have
experienced the business being reviewed,
it should be noted that some review sitesfocus on in-house (self tested) reviews, as
opposed to relying on the viewpoints of
others. These sites enable people who want
to know whether they should purchase
or subscribe to something to get advice
from real-world consumers of the goods or
services.
TargetedFinally, targeted sites are aimed at a
particular type of audience user, such as
mobile-phone visitors (see Figure 1–16).Some targeted sites, such as the dot mobi
domain-name project (which allows you to
produce a special site for mobile devices),
have arguably little value attached to them
going forward because more powerful
mobile phones such as the iPhone are
increasing in popularity and give users the
ability to see a “normal” site rather than
one of reduced functionality. However, the
cost of browsing over newer phones mean
viewing normal sites exclusively isn’t the
ideal solution yet! Such devices no longer
need a dedicated site to deal with thepreviously poor support for the Web on cell
phones (which actually forced you to make
another version of the site), This is a good
thing because the visuals and functionality
of those old-style sites were less-than-
pleasing to the eye!
LinkED
You can find a more extensive list of the
various types of sites that can be produced
at http://en.wikipedia.org/wiki/Website#Types_
of_websites.
Try It Yourself: Website Type
Now that you know what kind of websites
exist, you need to take the idea you have
decided upon and choose what kind of site
you want to use for that idea. The following
bullet points (and the example that follows)
should help you decide which site type(s)
you should choose. Begin by determining
the people you want to target, whether you
want to earn income from the site, and what
will drive the content creation of your site.
Be sure to put the book to one side while
you make these decisions. After you do
this exercise, you will be ready to form an
identity for your site based on the answers
you gave.
First, you need to determine whom you
want to target with your site:
Figure 1-14. Headscape is a web-design business with an attractive portfolio that shows o the
various services oered
Figure 1-15. The Internet Movie Database oers detailed reviews about movies and television shows
Figure 1-16. Google’s dedicated site for mo bile browsers allows small handsets to gain access to the
powerful search engine
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 31/10702/2010 (10)32
Beginners
• Personal: Niche and Personal
• Business: Commercial, Corporate,
Intranet, and Portfolio
• Both: Blog, Community, Content,
Micro, Mirror, News, Portal, Review,
and Targeted
Second, you want to determine whether you
want to make income as a result of the site:
• Yes: Commercial and Portfolio
• No: Corporate, Intranet, Mirror, and
Personal
• Maybe: Blog, Community, Content,
Micro, News, Niche, Portal, Review, and
Targeted
Finally, you need to decide whether you
want the site to be content, user, or servicedriven:
• Content driven: Blog, Content, News,
Portal, and Review
• User driven: Community, Intranet,
Niche, Personal, and Targeted
• Service driven: Commercial, Corporate,
Micro, Mirror, and Portfolio
You don’t need to finalize your choices
right now because you can expand your
site’s scope as you develop your ideas,
but it’s worth noting that some sites fitmultiple categories. Looking at the various
types of sites, you probably want to know
how yours will fit in to the greater scheme
of things, so let’s take a look at an example
where you put the preceding questions to
use in the service of the stamp-collection
site we looked at during the questioning
process earlier (see Figure 1–17). The
following example is only one possible way
of looking at how your site will eventually
turn out, but you will want to consider
what is best for your needs as you review
this example; after all, the goal of this bookis to implement your own site. Using the
example given, ask yourself this: “Which
of the site types best describes what I am
after?” You will have plenty of time to
go over the details later; this is simply a
way of working out how best to describe
your site when it’s time to research other
sites that do similar things (so you can see
how different your idea is and who your
competitors will be).
This is your first site, so you probably
want to create something simple. While
each of these sites can be made as simple
or as complex as you like, it doesn’t matter
which one you choose, as long as it fits into
the general ethos of what you want to end
up with. For example, a stamp collection
site would be a niche site (it has a highly
specific target audience), even though it has
the potential to be both commercial and
personal (see Figure 1–18). These examples
aren’t the pinnacle of what you can achieve
because you can adapt most sites to perform
various functions. In any case, the focus of
this exercise is to refine your idea further.Once you have an idea of what best describes
your site, write it down so that you can use
the information later on, when you need to
make some more comprehensive choices for
your layout.
ExplainED
It should be noted that the categories
mentioned are a fair representation of the
types of sites that exist, but exceptions do
occur. You should not use this list of site
types as a replacement for common sense in the decision process, especially as sites can
contain multiple site types!
Form Your IdentityAt this stage, you should have a general idea
of the type of site you would like to produce.
You should also know what timeframe you
have available if you want to have your site
completed by a certain date. The next stage
is probably the most important step you
will take: forming an identity. While this
might sound simple, creating a brand name
or identity you wish to use on the Web will
dictate how you are referenced and known
in the years to come. Just think how the
world would be without having the brand
names Google or Microsoft! Your identity
is much like your real name; it is the label
that is applied to everything you do. If yoursite becomes popular, it will be referenced all
over the Web.
ExplainED
Remember that you as an individual will
become a brand, and your name will
represent what you achieve online. Therefore,
you should be careful if you choose to use
your own name for your identity because
any failings on your site’s part could directly
reflect on you as a person.
Avoid ConfusionWhen creating an identity for yourself, you
should be aware of a couple of things. First,
you want to avoid confusing the customer
with your chosen brand name, so make sure
that your name reflects what you aim to
provide. Second, avoiding confusion means
that you should make your name as unique
as possible. Remember that trying to fool
customers into thinking you are an existing
business could infringe on copyright and
trademark law (depending on the name), so
Figure 1-17. This example helps you decide logically which of the categories a stamp site falls under
�
�
�
�
Figure 1-18. This stamp collecting site falls into multiple categories, but that isn’t a problem!
�
�
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 32/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 33/10702/2010 (10)34
Beginners
the best thing you can do is avoid trying to
replicate another identity. Imitation might
be the sincerest form of flattery, but trying
to clone an existing service could get you in
a lot of trouble.
ExplainED You would not want to call a site that
has pictures of different types of flowers
“Chocolate central”—well not unless you have
come up with a formula to produce edible
flowers that taste like chocolate—in which
case, congratulations!
Brand NameThe first stage in producing an identity for
yourself and your site is to come up with
what is commonly known as a brand name
or online identity (now that you understandits importance). To create a brand name for
your site, you have three routes available:
you can use your own name (representing
yourself online), you can use a small phrase
(representing the content or the feeling you
would like to emote from the process), or you
can pick a name you would like to reference
a business, product, or service. You should
think about this carefully because this will
effectively dictate how people recognize your
online ventures in the future. Many people
with multiple sites choose to brand each
component uniquely, so that each ventureacts independently, without impeding or
relying on existing brand names; however,
it’s entirely up to you whether you choose
to do this.
Tips and Tricks:
Choosing a Brand Name
The following advice will help you choose
a brand name for your site. Using your own
name is perfectly acceptable, although your
identity should remain something short
and easy to pronounce and remember. Also,
you could find that someone else with thesame name as you (poor John Smith!) might
already be using that name for his own
specific brand, which could confuse your
visitors — you should avoid such confusion
at all costs.
• If you choose to use a phrase or word-
based name, keep it easy to remember.
• Some businesses choose their brand
name to be their entire web domain
name. This means people never need
to guess what the actual web address is,
because it’s the company name.
• Get ideas for your brand by looking for
available domain names (you will learn
more about this in Chapter 4).
• Be creative with words; look through the
dictionary or an encyclopedia for ideas.
• Some people like to prefix their brand
with characters such as e or i to make
them sound more technological.
• Names that relate meaningfully to your
content are preferable.
• Try to make your choice as unique as
possible to avoid infringing on existingnames.
• You can use multiple words together, as
long as they make sense in context.
• Fun names or words that have feeling or
power associated with them are useful.
• Never create a brand name that people
that find offensive or crude.
• It’s fine to use your own name, but
giving it context such as “Stan Software”
is better.
• You should not use hard-to-spell or
nonsense names because it makes thingsharder on your end users.
• Use only A-Z and 0-9 characters to
be consistent with domain-name
conventions.
LinkED
For additional tips and ideas on how to
produce a brand or business name, it is
worth checking out the fantastic article
available at http:// entrepreneurs.about.com/cs/
gettingstarted/ht/business_name.htm.
Try It Yourself: Finalizing Your ChoiceNow that you know exactly how brand
name selection works, let’s go about making
one for your site. Ideally, you want to have a
name that relates to what you plan to offer,
so in our example of a stamp collection site,
you could perhaps call the site eStamps. This
gives the impression of it being digital, with
the e prefix signifying the site has a digital
component. And of course, including the
word of the thing you want to showcase on
the site is always helpful, especially if you want
people to remember what your brand and site.
It’s important to make your brand as easy toremember as possible, which almost always
means making it short and easy to spell!
Brand Identity Your brand’s identity is the second aspect of
your brand. The identity of a brand is how
people refer to the name itself. While this is
based on reputation, the products, services
and content you offer will form the basis
of how people perceive your site on either
a personal or professional level. This means
that a brand identity is something you build
up over a period of time rather than acquiring
it; you’ll learn more about this later in the
book, when we cover the post production
aspects of your site, such as marketing and
providing real services to your visitors in
Chapter 10.
At this point, you should have a basic
idea of what kind of site you would like to
produce and perhaps some early ideas about
what you would like to do with your site
once it goes live. Next, you’ll learn about
where to find inspiration and how to start
gathering and structuring ideas for yoursite. From there, the creative process will
end, and the hard work of producing the site
itself will begin.
Inspiration for the MassesInspiration can come in many shapes
and sizes, whether you want your site to
achieve goals or provide solutions to your
potential visitors. What matters is that you
take a multidirectional approach when
you implement your site. By expanding
your offerings, you can attract a largeraudience to your site. After all, a site with
a single function can be perfectly fine, but
implementing your finished site in various
ways will likely make it appealing to a wider
audience. By doing so, you will have a much
better chance of competing with sites that
offer similar services. This section of the
chapter aims to help you achieve just that by
providing you with methods to choose what
your site will need before and during the
design stage.
Sources of InspirationDo you ever have days where you just cannot
get inspired? Do you ever feel that you have
hit a wall and cannot seem to come up with
any unique ideas of your own? Everyone
gets these mental blocks, and of course,
depending on whom you ask, you will be
given a different cure for the problem. Some
people like to sleep, take a walk, watch a
movie, meditate, listen to music, or talk to
someone else. All these techniques can be
helpful, but if you find yourself in a state of
frustration, and you don’t have the time to
get inspired, you might find the upcominginformation helpful because it provides
some general places where you can find quick
inspiration.
Natural InspirationWe live in a world filled with naturally
inspiring things that can help you come up
with design concepts such as architecture,
natural events, weather, and more through
color, shape, and visual representation.
Ask any budding photographer, and she
will tell you that if you want to be inspired,
there’s nowhere like the great outdoors.
Sometimes, people who want to be inspired
will go for a walk (or drive) and visit places
that might hold some meaning to them.
In this case, you might visit a place that
evokes emotions similar to what you want
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 34/107
What Kind of Website Should I Make?
02/2010 (10) 35
to convey on your site. You can use a place
you visit as a source for colors, layout, and
typography ideas.
For example, assume you want to
create a site for a restaurant. You might
choose to take photos of the inside of the
establishment for use on the site, you mightalso base your site’s color palette on those
used in the restaurant to carry that feeling
across onto the Web. Specifically, you might
choose to use wooden beam images (if it is
a rustic style restaurant) for the site header
to show off the history of the building. This
is only one example of how inspiration from
the natural world can be used with ease to
impact your design choices and help give
you some ideas for how to approach the
visual style of the design itself.
The MediaAnother medium where people can
experience a wide variety of inspiring visual
representations is known widely as the
media. Whether you watch something on
TV, view a movie, listen to the radio, read
a newspaper or magazine, or read blogs and
online forms of media, you can find a wealth
of inspiration to draw from the high-quality
content available (especially if those sites
have images and video footage). While this
kind of inspiration is more conceptual, it can
serve as a springboard to new design ideas ifyou look at the way things are portrayed or
how things are expressed, as long as you have
a good imagination.
Friends and FamilyWhen you have no ideas for your web design,
who you gonna call? Nope, not the infamous
Ghostbusters! When you find yourself
unable to come up with a design mock-up
that matches your ideas, why not show your
ideas to your friends and family, and ask
them for ideas? Different perspectives on an
idea can help bring across fresh inspiration.Because family and friends will usually offer
their advice for free, it’s always worthwhile
to ask them about potential design choices,
as long as you don’t keep bugging them until
they throw you out!
Software DesignAs with web design, a lot of time and
effort goes into the design and usability of
software products. While some products
can be downright ugly, many conventions
used in software design or on the Web
can also be downright beautiful and more
straightforward than traditional menus.
For example, consider the Microsoft Office
2007 Ribbon (see Figure 1–19). While the
color scheme and the typography at work
within it are fantastic, the notable use of tabs
for the workspace to organize and display
blocks of functionality is a great example of
user-interface design for software. It should
also be noted that, using the right code, the
ribbon effect can be implemented on the
Web, although using a ribbon-like interface
for navigation is something that only you candecide based upon the other elements of your
site’s structure (including whether you need
something that complicated).
StumbleUponWhile I don’t generally show a preference
or disposition towards a particular
social network, I think you might find
StumbleUpon’s service extremely useful
when performing research or trying to inspire
new ideas. StumbleUpon works much like
Google’s I Feel Lucky button, which directsyou to a site that has high relevance to a given
topic; however, in the case of StumbleUpon,
the resulting site is random, based on topics
or categories you choose to subscribe to (see
Figure 1–20).
You can use this social-networking tool to
find a wide variety of information, as well as
many sites worthy of mention. Because this
service filters out a lot of the junk on the
net, you can also be sure that the results of
searching for a particular type of site will only
return recommended, high-quality results.
This is in contrast to many social networks that show sites that are bookmarked to other
people. In StumbleUpon’s case, the results
you get can be inspiring, and due to the
random and quirky nature of how it works,
you never know what you will find next,
which gives it added value, especially when
you’re looking at the design and layout of
those sites.
LinkED
To start using StumbleUpon to see how sites
around the world choose to design their sites
(for your own inspirational adaptations),
please visit www.stumbleupon.com/ .
Design BlogsIf you want to think like a web or print
designer, it makes sense to check out some
of the useful blogs, sites, and resources that
are provided at no cost on the Web. Manyof these blogs showcase existing design
or provide insight into how design can be
achieved with ease with tutorials for working
with graphics and other related material.
However, it should be noted that, out of all
the inspirational regions of the media, those
exclusively aimed at people in the design
community should always be your first point
of reference for worthwhile examples (see
Figure 1–21).
ExplainED
There are many design and developmentblogs that are worthwhile to read on a regular
Figure 1-19. The ribbon in Microsoft Oce 2007 ribbon is simple, yet beautiful
Figure 1-20. The StumbleUpon toolbar sits in your browser, ready to rate sites you like and dislike
Figure 1-21. Smashing Magazine is one of the more popular design blogs and galleries on the Internet
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 35/10702/2010 (10)36
Beginners
basis; you can learn about many of these
(with some useful links attached) in the
appendix at the end of the book.
Web Design GalleriesSite galleries are my personal preference when
I’m looking explicitly for design ideas forhow to make a site more visually appealing.
These sites are basically showcases of design.
Sometimes they contain cutting edge use
of modern standards, lots of flourishes
and special effects, and even the occasional
minimalistic site; however, they all show that
beautiful design is possible and achievable
without making unreasonable sacrifices.
While these galleries do not offer tutorials or
details about how to recreate these kinds of
effects they employ, the ideas and thoughts
behind them should be enough to satisfy (orat least whet) your appetite when coming up
with your own design ideas.
Some of the many galleries and showcases
you might visit include the following:
• 9Rules Network: http://9rules.com/
• Best Web Gallery: http://bestweb
gallery.com/
• Creattica: creattica.com/
• CSS Beauty: www.cssbeauty.com/
• CSS Drive: www.cssbeauty.com/
• CSS Elite: www.csselite.com/
• CSS Heaven: www.cssheaven.com/ • CSS Mania: http://cssmania.com/
• CSS Remix: http://cssremix.com/
• CSS Zen Garden: http://www.csszen
garden.com/
• CSSline: http://cssline.com/
• Command +Shift + 3: http://command
shift3.com/ (see Figure 1–22)
• Design Shack: http://designshack.co.uk/
gallery/all/
• Pattern Tap: http://patterntap.com/
• SiteInspire: http://siteinspire.net/
• Smashing Magazine: www.smashing
magazine.com/category/showcase/ • The Best Designs: www.thebest
designs.com/
• The FWA: www.thefwa.com/
• Unmatched Style: www.unmatched
style.com/
• Web Creme: www.webcreme.com/
Idea Development TechniquesWhat you should do with any inspirationalbits and pieces you find, such as ideas,
screenshots of other sites, and any bits
and pieces you think will be useful in
the future (as mentioned previously), is
store them in a product such as Microsoft
OneNote, EverNote, or another note-taking
application (or even a word processor).
All of these “samples” you build up (such
as when choosing how to decorate your
house) will form your ideas pad, which will
serve as a reference for your project over
the entire building period. The purpose oflooking around and gathering ideas is to
see exactly what is possible. Keeping them
in a handy place will help you achieve that.
Perhaps you might also want to take some
photographs of places you visit or write
down conversations you have; later, you can
review all of this information, which can
help you out if you ever become stuck for
design ideas.
NotED
If you require software for note taking
or word processing (to store all of yourwonderful ideas and the creative activities
you are involved with), please check out
the back of the book in the second section
of the appendix, where I have made
recommendations for various products you
could try!
So far you have gathered together ideas
that might serve as inspiration when
developing ideas for your site; all these ideas
should be in one location, where you can
refer to them as needed. There are four types
of idea development techniques that I believe
are essential to maximizing your creativityand getting yourself organized along the way,
all of which I’ll cover in detail in the course
of this chapter, including instructions you
can follow to implement them successfully.
While these techniques will aid you in
expanding your project so it becomes
something more structured than a simple
idea, be careful not to overcompensate by
trying to achieve too much with the project—you don’t want something that is physically
impossible to produce!
Mission StatementA mission statement is a sort of proposal that
explains what your intentions and goals are
for a site. While you might only have a few
ideas floating about, it makes sense to put
down everything into a format that you can
refer to as you develop your site. This enables
you to track which goals you have managed
to succeed at following, as well as to measure to what extent the ideas you have developed
have been completed using progress reports.
Many people developing sites choose to
create a mission statement to help them stay
on track and reduce distractions.
While you might feel silly writing this
statement when you will probably be the
only person to see it, you can come back
to this document and remind yourself of
your aims and goals when you have coded
your site. The process of making a site can
be confusing, and it’s easy to get distracted
with all of the “what ifs” and end up with asite that doesn’t fit your needs (as mentioned
in previous sections). This memory tool can
help keep you on track.
See for Yourself:
Example Mission Statement
Name: Silly sausage site
Slogan / motto: Organic hotdogs at an event
near you!
Description: John Smith is a dedicated food
fan with four years experience farming pigs
and producing high-quality sausages for
several restaurants in his local area. Throughhis site, John provides free recipes and
includes a form where you can make requests
to take his food to other locations.
Mission Statement: My aim is to create the
largest database on sausage recipes on the
Internet to promote the use of them during
mealtimes. I shall allow people who share my
passion to contribute to the site and be able to
talk about sausages through a forum. I’ll also
provide a “chart” of the top sausages you can
buy around the world, based on user-generated
votes. This will enable more people to benefit
from the knowledge that I have acquired.
LinkED
For some good examples of existing mission
statements that have been produced, please
visit www.missionstatements.com/ .Figure 1-22. Command + Shift + 3 takes a unique approach to galleries by using a “hot or not” system
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 36/107
What Kind of Website Should I Make?
02/2010 (10) 37
Try It Yourself:
Create Your Own Mission Statement
Assuming you’ve already come up with a
brand name, open your chosen note-taking
application (or word processor, if you prefer)
and create a header with your brand name,
followed by an indication that this documentwill apply to your site. Next, follow this
information up with your slogan or motto
for your site (if you happen to have thought
of one). The earlier example used the name
eStamps, so a perfect motto for that site
might be, “The place to be for avid stamp
enthusiasts!” Because the example site we
looked at earlier was for stamp collecting,
both the name and the motto make sense (of
course, you want something that works for
you with your own site).
Next you want to provide a descriptionabout who you are, what kind of site you
want to produce (and why), and what kind
of information you would like to offer
on your site. Remember that all through
this chapter you have been learning about
what kinds of sites you can make and how
important it is to come up with ideas that
will make a high-quality site. Well now is
the time you can go wild and start talking
about them. Returning to the stamp
collector’s site example discussed from
the outset, a good description might look
something like this: Description: Jane Doe is a dedicated stamp
collector with a collection of more than 5,000
different postage stamps that have been
collected over a period of ten years. Through
her site, Jane provides scanned copies of her
stamps for people to see. Her site also includes
descriptions that accompany each stamp, which
users can select based upon a stamp’s year, color,
and country of origin to make browsing the site
more fun.
Finally, you want to produce a statement
that describes how you plan to turn your
ideas from something you have thoughtabout into a site (remember that at this
stage this statement should be simple,
straightforward, and to the point). This can
include such things as writing high-quality
articles and content, providing a blog to allow
other people to share in your experiences,
or even saying that you want to create a site
that sells wrist watches. While your example
(again) will be unique to you, let’s take
another look at the stamp example to round
things off:
Mission Statement: My aim is to create the
world’s largest online collection of postage
stamps. I would like to create a marketplace
where people can buy, sell, and trade stamps.
It would also be a future plan of the site to
support auctioning rare stamps. With this
catalog I hope to help people involved in
stamp collecting find the stamps they are
missing from their collections and complete
them.
Market ResearchAre you looking for ideas for stuff you can
include in your site? In that case, there is no
better place to look than your opposition.
Those of you who have problems trying
to come up with ideas of your own will
breathe a sigh of relief at this idea; in
fact, it might become your favorite choice
for deciding what should be included in
your site because it requires no original
Figure 1-23. This list includes possible words that describe the stamp-collection example
�
�
Figure 1-24. Here you see lots of results, all from searching for those related terms
Figure 1-25. Of all the sites looked at from the search results, these six appear to be the best
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 37/10702/2010 (10)38
Beginners
or creative thought. However, you want
to do more than work out what makes a
particular site more successful than others
when you research other sites; you also
want to look at ways to improve them. If
you choose only to copy a site, you will
be seen as a less popular clone; however,if you create something that is superior
and includes improved features, you can
become more popular than the service you
were inspired by.
Try It Yourself:
Performing Market Research
The first stage in performing market research
is to find sites that offer tools and services
you want to provide, so start by coming up
with some words that describe your idea.
Using the example of a stamp collecting site,I have produced four key terms to go along
with stamps, all of which describe the areas
that describe the content the site would end
up producing (see Figure 1–23). Now that
you have seen what constitutes popular
terms, you should put down the book and
go to your favorite search engine (Google,
anyone?) and enter each of the phrases you
want to try.
Now that you have done around five
searches each using the key phrases in the
diagram one at a time, you should find a
whole bunch of sites in the results (I knowI did, as you can see in Figure 1–24). Next
you want to go to each site in turn and see
whether it offers the same thing you are going
to offer, or at least something similar. If you
find the site is doing something identical or
similar to what you plan to do, save the site to
your browser favorites or bookmark list and
move along (you shall return to each site you
save to see what you can grab from it at a later
stage). The key to this exercise is to gather
information, not analyze it.
ExplainED You will probably find that there is already
a blog or site or service that covers what you
want to produce, but don’t let that put you
off! There is no shame in remaking existing
concepts into something better and more
usable. After all, where would Google be if
it had simply decided not to create a new
search engine that would improve on existing
technology?Once you have gathered a collection
of sites that fall into similar categories
and could be sources of inspiration or
competition, you should take a few minutes
to look at each of saved sites in your favorites
or bookmark list—at this point, you should
have a small collection of possible related
sites (see Figure 1–25). Your next step
is to decide if they are really related to
what you want to offer. If the sites you
have looked at include some fluff, or low-
quality sites that offer nothing to the enduser, you should throw them out because
you can classify them as junk. What you
are looking for are quality competition and
market leaders that might have the kinds
of visitors you want to attract. Remember
that any site you find that relates to what
you are offering could also be useful for
providing services that enhance your own
site’s experience. Potential visitors could
use offerings on both sites (such as a blog
about news stories), rather than having to
choose between the two.
ExplainED
If you don’t want to clutter up your
bookmarks or favorites folder with lots of
links (even though you can place them in
categorized services), just open each result
in a new tab in your browser, so you can hold
them open, enabling you to take another look
at later on.
At this point, you have completed your
job and found all the best-quality sites that
relate to what you want to do. You want to
continue performing this process until you
have enough competitors to make the searchworthwhile (or until you cannot find any
more quality results). The stamps example
produced only six results because there
wasn’t anything too similar to the gallery
of stamps idea. It’s possible to move to the
next stage, which is great because it means
that the stamps site would be original. Once
you have all of your high-quality sites, you
can try the “word association” techniquedescribed in the following example (see
Figure 1–26). Afterward, you should be
ready to move onto the next stage of the
process.
Try It Yourself: Word Association
This list should help you search for possible
leads on your competition:
• Take a piece of paper and think of at
least five words that describe your
site’s purpose (ten words would beeven better); these words should be
descriptive, not words like and or the.
• Once you have these words, try typing
them into a search engine, and then take
a look at the results by selecting sites
that look promising (first-page results
might be more accurate).
• If you run out of results, try putting the
words in a different order or remove
some and add others. Remember that
even if you have ten words, typing four
into a search engine will yield results.
• Briefly check the quality of the sitelinks to see how they relate to your own
ideas and whether they might be useful
or offer something you might like to
include when you start coding your
site.
• Remove all of the low-quality sites you
find that either don’t relate to your site
or have nothing to offer in terms of ideas
(such as a generic site with no unique
functionality).
This job is a lot like being a detective, as
you are on the hunt for information thatmight be useful for your site. You might
find ideas for additions to your site, or
you might simply find more reasons why
your site idea is unique and would benefit
people who visit other sites on the Internet.
Market research is not about trying to
steal the work or ideas of other people,
but to see what is already out there, so
you can determine what kind of standard
you should be working towards to help
ensure your site is a success. To get the best
results, you want to have as many high-
quality examples as possible (a minimum
of five sites) that relate to what you would
like to have upon completion; however, it
would be preferable to have 10 or 15 to
work with—the more choices you have, the
better. So give this technique a try withFigure 1-26. Here you can see a simplied version of the word-association process
�
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 38/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 39/10702/2010 (10)40
Beginners
your site ideas and see what you come up
with! Once you have a list of potentially
useful sites, you can take a quick breather
because we have finished the first part of
the research. Once you feel ready to move
on from doing your searches, you can
attempt to categorize the results you foundand determine what purpose they might
serve in your project.
Tips and Tricks—Websites to Research
You should consider researching three types
of sites (see Figure 1–27):
1. Rivals: These are sites involved in the
same (or a similar) area as your own
site that you can use for future service
ideas, ways to expand or improve your
site, and as a source of potential visitorsand customers when your design goes
live.
2. Relations: A site that has foundations
to improve upon that might be seen as
a service you could form a relationship
with (and possibly work together or
share your customer base with). Sites
that fit this description include social-
networking sites that hold your favorite
bookmarks or services that extend a
rudimentary service that exists on the
Web.
3. Sources: These sites contain usefulinformation, products, or services you
could use to enhance your site. These
sites can include news sources, article
providers, resellers of goods, or even
niche sites that aggregate information on
a particular subject to make things easier
to find.
Once you have performed the
required searches, you need to take the
information you have gathered and put
it under a microscope to determine what
can be learned from it (see Figure 1–28). You want to see how other people have
adopted using services similar to the
ones you want to provide. Even if you’re
making a personal site or a blog, this step
is essential if you want to gain users and
make sure your site will not fall short
of its goals when you eventually get it
listed on search engines. Even personal
sites compete for attention on the Web
because there is so much “noise” with
every individual trying to pull potential
visitors (whether a few or a lot) in her
direction.
Try It Yourself:
Analyzing Your Research
There are many different ways to go about
this, but I feel that the easiest way to make
sense of the information you collect is to
look at each site individually and ask a series
of questions that you can use to draw some
important conclusions from. I provide a
template that lists the kinds of things you
should be asking, but you should feel free to
add any additional questions you think mightbe useful. The purpose of this exercise is not
to detract from your mission statement, but
to expand your ideas of what is possible. It
will also help you determine what is common
to similar sites (that you should include), as
well as suggest a few ideas that you might
never have thought of otherwise!
You should ask yourself the following
questions when visiting these sites:
• What does this site offer? Look for
functionality, content and features.• What makes this site successful? Describe
the unique, fun, and quirky attractions
it offers.
• How easy is this site to use? Browse
around and rank it based on your other
browsing experiences.
• What do the site’s customers think? Read
forums, check feedback, and look for
reviews!
• Is the site a friend or foe? Your site might
share, give, or take visitors from the site
or the services it offers.
• Do I have any unique ideas left? Askyourself whether other sites already
employ your ideas.
• How is the site laid out? Take notice of any
interesting design choices you like.
• What is missing from the experience?
Both you and your customers might
have ideas that could improve the user
experience.
• How are the site’s services offered?
Determine whether the site’s pricing,
registration, and other details can help
you plan your site.• What does the site interact with its users?
Look for social networks, blogs, and
contact details.
Next, you want to take all of the preceding
questions and apply them to all the sites
Figure 1-27. These three components can help you decide whether a site you’ve found is useful
�
Figure 1-28. This site closely matches our stamp idea with a complete identication guide
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 40/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 41/10702/2010 (10)42
Beginners
you found that you thought were high
quality and related to your site. In the
stamp example, you will remember there
were six sites worthy of further analysis in
Figure 1–25. To continue the example, I
looked at each site from top to bottom and
answered each of the preceding questionsuntil I was satisfied they were answered
properly (see Figure 1–29). I quickly
found some great features on each site
that I had not previously thought about
adding to the stamp site! You should do
the same as this for each site on your list .
At this point, you want to put the book
down again and nose around the sites you
found; with any luck, you’ll find some
useful ideas there!
If your research came up with many
answers, fantastic! However, if you foundyour market research rather light on
information, don’t worry because the
next stages will expand upon what you
have, giving you something you can use to
generate a site structure. If you’re looking for
a specific way in to lay out the information
you have collected, you might organize the
information into the previously mentioned
ideas pad. This pad helps you ensure that
you don’t forget anything, and it might
consist of pieces of paper or note taking or
word processing software (which is easier to
organize).
Tips and Tricks:
What to Include in the Ideas Pad
The previously mentioned ideas pad might
include several different kinds of information
that will come in handy when you structure
your site’s functionality, including:
• Bullet point answers to what the
questions posed in this chapter (plus
others you might have formed)
• Notes or snippets of information based
on what you found on reviewed sites
• Screenshots, images, or drawings based
on elements of site layouts you like• Links to useful information you have
found that explain ideas you have
• Direct quotes of feedback from your
competition on requests for features
LinkED
The preceding tips will get you started with
search-engine research, but the following
site holds some useful details about how to
conduct research to learn about your the needs
of your users, as opposed to what existing
sites provide: www.businesslink.gov.uk/bdotg/ action/layer?topicId= 1073901910.
You’ve now finished reading about
market research for your site. At this
point, it’s possible you’re suffering from a
headache as you try to get your brain around
everything discussed so far. However, it’s
possible to sum up the topics discussed in
a few simple sentences. Basically, you want
to search the Web for examples of how sites
like the one you plan to build and then
apply the best ideas you find on your own
site. After all, if your rivals offer something
useful, it seems only fair that you can offersomething similar to people who visit your
site. Just browsing the Web for ideas can be
a real lifesaver when you don’t know what
people expect from a site. Of course, when
you find all of these useful ideas, you need
to write them down, take screenshots, and
keep notes about them so you don’t forget
important when you get around to building
your site. Once you have noted everything
you want to remember and got your ideas in
order, it’s time to move onto the next stage
in the process.
ExplainEDAt the end of this session, you will have an
ideas pad filled with things you might want
to include in your own site. These ideas might
consist of screenshots (for things you like the
look of), site addresses, and even just bullet
lists of sections of a site you have discovered
that you think might be useful.
BrainstormingNow that you have a few basic ideas, you
want to expand upon them to decide how
best to use them—a process commonlyknown as brainstorming. While this is
usually a group activity (and it’s often more
effective when practiced by more than
one person), but it’s perfectly acceptable
to brainstorm by yourself. That said, the
more people you can get involved, the more
unique ideas you will end up with. Perhaps
you might want to get a few friends or
people who are aware of the site to give a
few minutes of their time to help you out.
It generally doesn’t require a large amount
of time to conduct brainstorming sessions.
However, the process can help you organize the information, which is the most intensive
and complicated part of cultivating an idea
at the development stage.
ExplainED
While brainstorming can produce a variety
of results, the overall effectiveness of this
method has not been found to be productive,
according to studies. Nevertheless, I’ve
included this method because it helps you
prepare the results of your research for mind
mapping.
The method of brainstorming I’lldescribe differs from traditional forms of
brainstorming because you already have
some ideas and structure to work with,
as opposed to a traditional problem you
need to solve. Whether you use “solo”
or “group” brainstorming, you need to
take the method applied to standard
brainstorming sessions and use it to build
upon your ideas. This will enable you to
sprout additional concepts around the
ideas generated by your market research. So
put down your book (again) and get either
a sheet of paper or a note taking program,
and then use the ideas you uncovered
during the market research section or any
ideas you have for your site’s functionality,
scribbling down anything that comes to
mind. In the following example (whichFigure 1-29. Answering these questions illustrates ways to improve stamp nding signicantly!
�
�
�
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 42/107
What Kind of Website Should I Make?
02/2010 (10) 43
diverts slightly from the stamp site), you
can see an actual brainstorming session I
undertook when designing a portfolio site.
Notice how I used images, text, questions
and just basic doodles: the point of this
exercise is to make a note of anything
useful that you don’t want to forget, so goahead and scribble (see Figure 1–30)!
Try It Yourself: Brainstorm Your Ideas
The only preparation you should make
before starting this process is to dedicate a
piece of paper (or related material) for each
piece of information or idea that resulted
from researching he sites you looked at.
While this might seem like a lot of things
to look at, you could simply select the
most interesting or potentially useful ideas
to expand on. Using this piece of paper tobrainstorm is easy: simply create a page for
each question, using each question as a page
heading, and then write down anything that
comes to mind in relation to each subject.
Your brainstorm can be made up of words,
phrases, ideas, drawings, or anything else
you believe will be relevant during the
session.
You can get the most out of your
brainstorming by adhering to the following
guidelines:
• Remember to focus on quantity, as theidea here is to throw any potential idea
about.
• Do not critique or think about how
good an idea it is at this stage, just get it
written down!
• No matter how quirky or unusual
the idea is, it might end up becoming
something useful.
• Start with each item as a separate
brainstorming session and expand as
you see fit.
• Spend anywhere between ten minutes
to an hour on each item (or until yourun out of ideas).
• Wait until you have finished “storming”
ideas for each item before you evaluate
the results.
Once you complete the brainstorming
session, you will want to look at the results.
The first thing you should do is remove
anything that makes no sense, repeats
another idea or is too closely related
to other ideas or things that cannot be
implemented, and anything else that falls
apart under criticism. Throughout this
process, you should use your best judgment
(or ask someone else to look at the ideas and
see what stands out). The process might
seem quite lengthy, but the majority of
the ideas you come up with will probably
fail due to one of the aforementioned
reasons or due to something else. You
might wonder why you should bother. It’s
sometimes the case that the most unique
and clever ideas can come out of the ether
when you’re simply placing an “idea flood”
onto the page, so it’s worth coming up with the brainstorm even if you return with
only a few gems.
Once you select the highest quality and
freshest ideas and attach them to your
existing research (your ideas pad must be
getting quite big by now!), you’re ready
to use the final method of attempting to
produce new ideas, which is less erratic than
brainstorming, but also less productive in
many ways than market research. However
it’s still something that has been known
to produce results, so why not give it a try! Take a look at how a computer-based
brainstorming session for this stamp
collection site could look; using the ideas I
had for its features. This approach certainly
isn’t as messy as the preceding, paper-based
brainstorming session, but it still produces
a written list of the basic ideas that were
intended as possible features of the stamp
site, some of which prove to be good ideas
(see Figure 1–31).
Mind MapsMind maps have a lot of similarities
to brainstorming, but they come with
their own unique set of advantages for
idea classification and grouping. While
brainstorming works best with a group of
people who need to solve a problem or create
possible enhancements for a service, mind
mapping works well for individuals who
want a simple way to expand on a particular
subject. In the case of the ideas pad that youput together, you have two ways that you can
use mind maps to enhance what you already
have to produce improved results:
Figure 1-30. This diagram shows the results of a sample brainstorming session
Figure 1-31. This computer-produced brainstorm is much better organized and has four “idea” sectors
�
� �
�
�
� �
� �
�
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 43/10702/2010 (10)44
Beginners
• Keyword expanded structure: Under
each item within your ideas pad, you
create a bulleted list of expanded
information that you believe is relevant
to a feature or how you should integrate
it into the site (this is similar to the
brainstorming method, except thisapproach focuses on implementation
and functionality, rather than on
questions and ideas).
• Traditional tree structure: This is
probably the most familiar and usually
the most fun way of approaching mind
maps. In this instance, you have each
question in the center of a piece of
paper with the ideas you have made
from brainstorms branching out from
the question itself. Finally you branch
out from each idea to indicate how you
think you could implement the idea or
any related functionality that might
result or prove beneficial as a result.
Most people use traditional, tree-based
mind maps because you can read themmore easily; however, some people might
prefer to use bulleted-list mind maps
because they let them keep their entire
project digital, but without having to use
a drawing or painting package or a specific
piece of software aimed at producing mind
maps or technical diagrams. Let’s take a
look at a pair of example mind maps. The
first is for a portfolio site that builds on
the example for the brain storming s ession
(see Figure 1–32); the second relates to the
stamp collection site idea (see Figure 1–
33). Once you look at the examples and
read the instructions, put down the book
(again) and start making a mind map for
your idea. All of the materials you gather
throughout this chapter wil l become part
of a detailed plan that you can refer back to as you write content and code your
site, so it’s important that you participate
in these activities, even if you only spend
five minutes on each one. The amount of
new, useful ideas you can get out of this
walking through these examples can be
amazing.
See for Yourself: A Mind Map Example
The following example shows an inward out
mind mapping session where you explore
ideas for the various pages of a site. Thesession also includes words that describe the
various elements you might include on your
site’s pages.
Try It Yourself: Map Your Mind
It’s easy to integrate both brainstorming
and mind maps one after the other into
a process that you can follow. First create
your usual brainstorming session on a
large piece of paper, spreading lots of
ideas spread all over your brainstorming
document. After you complete that step,
convert your existing brainstorm into aloosely structured (in terms of layout)
mind map.
Following four simple steps can help you
produce a mind map:
1. Put the site you wish to expand upon in
the center of the page.
2. Branch out with a series of pages to
include within the site.
3. Branch out further with specific
functionality or content to include.
4. Finally, branch out again if required to
give specific details or references.
The result of whichever mind mapping
technique you choose should be vast and
specific, and it should give you tons of
ideas for both the content and features
you should provide on your site. If you feel
later on in the development process that
you need to further expand on your ideas
and come up with some new ones, you
should feel free to repeat the process as
required until you get a sufficient number
of ideas for site updates. Let’s revisit the
stamp-collection example and builds a
list of possible pages and ideas (see Figure
1–33). Note that you can make the mind
map as simple or as complex as you like, I
prefer to use the hand-drawn method, but
you should do whatever works for you, as
Figure 1-32. This diagram shows the results of a sample mind-mapping exercise
Figure 1-33. This simple mind map shows possible pages and features for the stamp-site example
�
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 44/107
What Kind of Website Should I Make?
02/2010 (10) 45
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 45/10702/2010 (10)46
Beginners
long as you now take the time to produce
one for your site.
LinkED
If you would like to use software to generate
and manage your mind maps, rather than
drawing them or creating lists on paper, youcan find a wide variety of programs to help
you achieve this task. I recommend the free
(cross platform) product XMIND, which you
can acquire at www.xmind.net/ .
Information ArchitectureThe field of information architecture
dedicates itself to the expression and
modeling of information that requires
explicit details for portraying complicated
information. If you look at the ideas pad you
have developed, you’ll notice that it containsa large range of items that you can implement
and refer back to at different points of the
project. The complexity of the items in your
ideas pad fully qualifies the pad and elements
that comprise it as a kind of information
architecture. Information Architecture
itself allows you to structure information
and ideas effectively to build a model that
describes how a resulting site should look as
you develop it.
Information Architecture is a process
that does not end at the initial concept
and the method you use to model yourideas and design will change as you begin
producing the site. This might be due to
inherent limitations of language or the way
visualizing something on a page can differ
from how you see it in your head. Because
of this, I’ll cover only the areas that occur
before coding begins at this stage. As you
progress through the book, you will realize
that many factors affect design, and you’ll
employ many techniques to structure
your designs and enable them “leap off the
page” when you come to sections where
can take advantage of them. You should take the opportunity to produce all of the
mentioned elements for your site as you
read about them. However, you can also find
a handy step-by-step guide at the end of this
chapter that can help you quickly and easily
pull together a useful series of information
architecture doodles for your site; once
you complete these doodles, simply attach
them to your ever-expanding ideas pad for
later use.
LayoutWhen providing the information
architecture for your design, layout models
can be highly effective in allowing you to
take a visual approa ch to structuring your
site. Many visually minded people choose
to take this approach, but it can be helpful
for anyone because it can give you a good,
general look-and-feel for your design as
you create it. You want to try and achieve a
professional look, so at this stage you need
to remember t hat change is inevitable, and
even if you enter the process with a visual
layout and some inspirational elements of
the site that you want to provide, what
makes web design unique is that, in many
cases, the visual appeal of what best suits the end result will be determined piece-
by-piece as you code the site. It is in that
spirit that I’ ll cover several layout methods.
These approaches can provide a rough
guide for initially representing your site.
Concept Artwork This stage in the process of creating a site
is most often thought of as the fun part!
Yes, boys and girls, it’s time to get your
paint out and start designing how your
finished site will look. Unfortunately, this
is the one thing this book cannot help youwith. Why? Because only you can design
the physical appearance of a site to meet
whatever standards you have, and only
you can know your personal views on
how you want everything to appear. You
might initially view this as a flaw of the
book or a huge missing component of the
site-creation process, but it’s important to
realize that everyone has different tastes,
and only you understand the levels of
navigation, content, functionality and
other elements required to put the plan for
your site into action. There are simply too
many variables to consider when deciding
how your site should look (aesthetically)
for me to walk you through this part. Even
so, feel free to look at my own concept
sketch for inspiration, which shows one
potential feature you might implement on
a site (see Figure 1–34).
See for Yourself:
An Example of a Concept Sketch
The following sketch concept sketch
outlines a button that will appear in the
bottom of a page on the right-hand side. The
page you place it on pops up a list of social-
networking links (that you can use alongside the site). The sketch itself reflects this by
showing the position of the element, what it
might look like, and how it might function
on the page.
Try It Yourself: Concept Art
When you begin coding, you should
have a visual model to work with; even if
the design is only roughly drawn out or
incomplete, the design itself will evolve
with the site. Unless you have a graphically
prebuilt mock-up you wish to use, concept
drawings rarely remain the same over time, and letting the design evolve will
produce a more natural and graceful worn
in appearance. Trying to create a complete
package might seem rather daunting, so I
recommend designing individual features
of the site; these can be much easier to
make alterations to and do not require
you to rethink the site design itself. Use an
image-editing package or a blank sheet of
paper to create basic drawings of the ideas
you have and to get a feel for how things
might look.
The whole point of this exercise is to pull
your general ideas and design skills together.
You want to come up with a physical
representation of the idea you have in your
head, which you can use to map out generally
how you want things to appear when you
Figure 1-34. This concept artwork shows early ideas for a social-networking button
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 46/107
What Kind of Website Should I Make?
02/2010 (10) 47
begin coding the site. While you might want
to produce some sketches that represent your
entire site’s look and how it all might fit
together, sometimes creating simple concept
artwork for individual elements can be just
as useful when trying to decide on how your
ideas should eventually look on the page.These concept drawings of your potential
site should be attached to your ideas pad;
eventually, you will assemble the ideas
contained in your ideas pad as you would the
pieces of a giant jigsaw puzzle.
Tips and Tricks! Producing Concepts
You can use this list of tips to help you draw
possible design elements:
• Keep things simple; fancy designs often
complicate the concept beyond the point that you can execute them.
• Remember that the colors you use
on paper will not look the same on
computer screens.
• Annotate your diagrams with short but
descriptive text for ease-of-recollection.
• Try out alternative versions of the same
design to see what looks best.
• Do not use software to convert concepts
into code because the tools to do this
don’t do it well.
While it will be your job to design yoursite and mold that design around your
content and functionality based on your
research and your instincts, you don’t
have to go through this process alone!
This book cannot decide for you what
physical structure you should choose (for
the reasons mentioned earlier), but you
should have gained some ideas for how to
organize your content from your review of
potentially competitive sites. For example,
I’ll bet you found some great visual and
functional elements you can incorporate
in your own design. Later chapters on
coding your site will also offer helpful
advice on the design process, as well as
tips on how psycholog y, conventions,
accessibility, and usability should factorinto the complete design and its general
appearance.
StructureWhile the structure of a site is determined
mainly by the code you use, structural
mock-up in information architecture can
help you implement the jigsaw-puzzle
model mentioned earlier, by enabling
you to make some early decisions on how
your design should appear. The layout
model of design allows you to give apotential feature, element, or page some
form before you decide how it should
be implemented, which spares you the
irritation of throwing away your hard
work in later chapters). The structural
model of design allows you to place the
elements of the site around the page and
helps you decide how you want to tie
everything together.
SitemapsDo you remember when you were in
school and you made those family trees that showed how you were related to
each member of your family? Well, the
purpose of a sitemap is identical to this in
the method that it tries to structure your
site and calculate how each page relates to
other pages or files (see Figure 1–35). In
most cases, you produce a sitemap when
your design has been approved or decided
upon. You should now have plenty of ideas
based on what you have discovered in your
research of other sites, and you might have
come up with some potential navigation
thoughts when you built a mind map,
which I demonstrated in the examples
that show how to organize your thoughts
into groups. These groups would be ideal
for pages of your site because they let youplace multiple pieces of information and
functionality on one page. By organizing
your site’s content into categories you can
assign pieces of information to a page,
thereby determining how many pages you
actually need (and even what each page
should cover in terms of content).
ExplainED
Most people recognize that having too
many links on a single page can be an issue.
Therefore, you should generally restrict that each menu (and subsequently each
submenu) to a maximum of eight links.
See for Yourself: A Structured Sitemap
The following sitemap takes the ideas from
the mind-mapping sessions and groups them
into related categories; thus, each of these
groups of information ends up becoming a
page of the design.
You head the start of a sitemap with the
site or index page name, with branches that
split off beneath it. Each branch represents
a page that users can reach by clicking orfollowing an internal link (not an external
resource or site). For this reason, it’s highly
recommended that you wait to create
your sitemap until you complete writing
your site’s content and functionality (or at
least until you are sure about what pages
you will require for your site); otherwise,
you might find yourself with holes in
your site’s navigation once you place all
the information (with additional links)
within the flow of your pages. With each
descending level in the sitemap, the child
of the parent it is linked from has childrenof its own; in other words, each child has
additional links that aren’t declared in
a parent or an ancestor of that child or
any other page because you want to avoid
repetition). Forming a sitemap helps you
see the structure of your site more clearly;
it can also provide insight for where to place
new content or content related to existing
content.
WireframingWebsite wireframing is a well-documented
form of information architecture that
provides benefits similar to those of concept
artwork, which describes how elements
should look; and prototyping (which
requires coding or an environment to test
the design). However, wireframing comes atFigure 1-35. This sitemap shows how you might structure a basic site in the form of a family tree
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 47/10702/2010 (10)48
Beginners
the problem differently from most models
by focusing more on how to arrange the
visual elements on the page (see Figure
1–36). A wireframe is a based around a
series of grids and blocks that represent
the way the content will be laid out in your
completed work.
See for Yourself: Wireframing at Work
The following wireframe could represent
any site. It has all the standard conventions
people expect, including a logo, search
box, navigation bar, footer, and links (plus
content) for articles and news.
The vast majority of cases require only a
single wireframe model; however, you do
find exceptions, such as when the homepage
needs a different design than the rest of your
pages. Note that whether you want to createsuch a design boils down entirely to your
personal tastes). You can implement either
a basic or complex level wireframe. A basic
wireframe consists of referencing where to
place elements such as navigation, and you
should use it only as a rough overview of
a design. In a complex wireframe model,
you would also provide details about the
navigation element, such the number
of navigation links that you can squeeze
into the header of a site without causing
overflow in a fixed-screen resolution. Such
an approach is more complex, but it alsoprovides some added value.
Tips and Tricks: Wireframe Defaults
A wireframe includes several default
components:
• Header: Logo, Search Box, Header
(Navigation), Callout boxes.
• Sidebar: Category (Navigation), Adverts,
Important Details.
• Content: Adverts, Feature Blocks,
Content / Category listings.
• Footer: Copyright, Footer Links, SiteMaps, Badges (Awards etc)
In Figure 1–36, the header navigation
contains “Network, Social, and Skip”
elements, as well as a search box on the
right-hand side. Below that, you can see
the logo with a News callout box beside
it, which has a link to the site’s feeds (you
will learn more about syndication feeds in
Chapter 09). The Articles box is a sidebar
navigation link with an image gallery
callout box on the right-hand side that
contains a few functions inside it. The
box with scribbles under that is basically a
content block; this block has two columns
where you can place all the text. Finally,
at the bottom of the page, you can see the
footer links to the right, space for some
footer text, and a copyright message on
the left. Simple!
A basic wireframe conveys several benefits:
it places any specific requirements upon the
individual implementing the code, and it
provides a flexible way to address your layout
needs along the way; however, a built-indownside to them is that they provide rather
limited control of the overall appearance of
your site. A complex wireframe provides
more control over specific details of your
design, so it lets you account for basic issues
and decisions that might apply later on in the
process; however, it provides a less flexible for
controlling your site’s appearance due to the
way explicit details can evolve in a prototype.
The more things evolve, the more your page
loses its generic structural value, which is the
main benefit of using a complex wireframe.It’s up to you to determine which wireframe
suits your needs better. However, under
many circumstances, you might want to start
out with a basic wireframe model and add in
any detail that might be relevant when you
transition from designing to coding. This
will prove helpful when you begin producing
prototypes (such as basic working models as
you code the site).
The Vision Quest You can use concept artwork, visual
prototypes (if you have any built already),wireframes, and sitemaps to help you take
your mental image of your site’s look-and-
feel and turn that into something that
others can see, comment on, and appreciate.
You can optimize the design process by
using the models discussed to impose a well
structured order for your site. The purpose
of this vision quest is to take into account
every element of information architecture
you have and put it all together as a series
of quick examples that you can literally
complete in a matter of five minutes each
(or longer, depending on how quick you
are with a computer or pen-and-paper). By
following this vision quest, you should end
up with some schematics that will help
you immensely when you begin writingcontent and code because you will know
what pages you need to create, as well as the
functionality that you need to refer to.
Try It Yourself:
Bringing Everything Together
The process of choosing and working with
information architecture can be quite
complicated (as you might have noticed),
but you can simplify things by undertaking
things in this order:
1. Break down your ideas pad regions into
grouped site sections.
2. Produce a sitemap to represent the
hierarchy based on the preceding
sections.
3. Create a basic wireframe to represent
the sections of the generic web page.
4. Use your concept art to convert the basic
wireframe into a complex wireframe.
Step 1Begin optimizing your use of information
architecture by looking at your ideas pad andorganizing all of your information. This might
seem rather daunting based on all the research
you have done, but you can use your old friend,
the mind map, to accomplish this. You need to
build a mind map that will suit the needs of
your individual site, rather than using the
examples noted previously. Create a central
element called My Website. Next, branch off
this element by indicating the names of the
pages you want to include (branching off from
Figure 1-36. This wireframe portrays a simplistic two-column layout with navigation, a logo, and a
footer
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 48/107
What Kind of Website Should I Make?
02/2010 (10) 49
these, as required). Next, attach labels for each
of these page elements that indicate where
your research results would best fit in. For
instance, including a contact form, feedback
form, and message board would fit well in
a page labeled contact. After you complete
this step, you will have a structure that, ifyou look carefully, will provide an accurate
representation of how you will lay out your
site (in terms of content and features that you
don’t use across multiple pages—don’t worry
about content or elements that would span
multiple pages for now).
Now let’s return to the stamp-collection
example, so you can see how you might
follow the first step. This step combines the
brainstorming session created initially in
Figure 1–31 with the mind map generated
in Figure 1–33 to extend what is possiblewith information architecture. If you
haven’t already done so, you should set the
book down and do this exercise for your own
site. You should refer back to relevant parts
of this book as you produce your diagrams
if you require assistance or a recap on the
details of how they work; however, I cannot
stress enough how important it is that you
complete the steps described for your own
site to ensure you have all the materials
you need when you’re ready to create your
content and produce the code to implement
everything. Finally, you should refer back to the figures included in this chapter to
see the kind of information included in the
stamps site example. You’re now ready to
move onto the second stage of the process.
Step 2In this step, you take your recently created
mind map and brainstorming session and
convert them into something that is easier
to read and work with later on. This step is
almost identical to the first step, with one
significant exception: rather than organizingyour research into a map of what should
go where, you turn this information into a
sitemap that gives you a visual reference of
what pages your site will require.
You can combine the details about the
sitemaps you created earlier with your page
details (including any references they make to
other pages) to give yourself a visually complete
structure of your site’s hierarchy. Note that
you need to retain your mind map because the
sitemap will show only the structure of pages
based on the mind map, not the functionality
details of your pages. You can see an exampleof this for the stamp-collecting site in Figure
1–37, where you outline the pages and their
possible content. While you might not know
what pages you need at this time, having a
general idea of your required pages based on
your mind map session could prove useful).
Step 3Now you need to create a basic wireframe
that encompasses all of the global elements
that will exist on your web pages, such as
a logo, navigation, footer, and content, and then arrange them on the page as required
(see Figure 1–38). Alongside this, you should
begin creating some concept artwork for
functionality that you need to integrate onto
specific pages. As you do this, use the artwork
you create to determine the basic wireframe
structure. Note that this step requires you to
have the visuals for each page roughly mapped
out, which shouldn’t be an issue now that you
know the structure of your site (based on the
initial sitemap you created in Step 2.
Step 4Now you’re ready to place your concept art for
any elements you want to include on every page
within the basic wireframe model (see Figure
1–39). This enables you to account for any
modifications for height, width, or positioning.
Doing this transforms your basic wireframe
into a complex model. Be sure to label things
appropriately and provide details about specific
functions you want to include, such as a search
box or dropdown menu. In the example of the
stamp-collection site, you can see the difference
between the early wireframe model and the
more complicated (but more visual) layout.At this point, you should have an ideas pad
full of research, plenty of screenshots of sites
to draw inspiration from, useful snippets of
information, lists of pages you want to include,
bulleted lists of items on your to do list, and
anything else you think might prove useful to
remember. The ideas pad allows you to pull
everything you could possibly need (along
with all of your models and representations)
into a single resource. This means you can
take a quick flick through your ideas pad if
you forget something, or you want to get some
inspiration for your site and its content.
SummaryIn this chapter, you learned how to factor
in your needs and ideas to understand
what kind of site you want to create, how
Figure 1-37. You can produce a sitemap by listing your site’s pages and functionality
�
�
Figure 1-38. This basic wireframe takes into account the segments of the site, as well as its contents
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 49/10702/2010 (10)50
Beginners
to form an identity and gain inspiration for
what your site should include, and how to
take advantage of the basics of information
architecture. You also learned and how to
use the models associated with information
architecture to create both a design proposal
that gives you a physical representation
(whether you used pen-and-paper or software to create this) of the look-and-feel you want
your site to have, as well as how it should be
structured. You also organized your ideas and
developed some concepts that lay out a plan
of action for your site. This will prove useful
when you’re ready to stop theorizing over the
cooking instructions and get on with mixing
your site’s ingredients together. In the next
chapter, you will begin writing and publishing
your content. This will give you something to
fill up your site’s pages when you start coding
your site you will have something to fill up all
of those pages you outlined in the sitemapsand wireframes you just built.
Chapter Checklist
You should accomplish the following tasks
before leaving this chapter:
• Get an idea which will form the basis for
the site.
• Decide how much time can be given to
the project.
• Choose the type of site that would fit
your idea best.
• Produce a brand identity to represent
you online.
• Create a mission statement for the site’s
purpose.
• Perform market research to determine
the functionality you should include.
• Brainstorm and create a mind map to
expand your ideas list.
• Prototype your ideas and produce
concept artwork.
• Create a basic wireframe and sitemap for
your site’s structure.
Questions and Answers
Q: How do I create a wireframe for dynamic
content, such as dropdown menus?
A: A wireframe’s static nature doesn’t
lend itself to describing dynamic interactions
(especially if they are on paper). If you draw
out your wireframe on paper, the simplest
way to do this is to cut pieces of paper
(literally!) that represent the before and
after elements. You can then layer these
elements at the appropriate place on your
wireframe; this approach lets you extend
the functionality of your wireframes.
Q: What if I want my site to use elements
from multiple site types?
A: It’s fantastic that you want to enhance
your site in as many different ways as
possible, but you should remember that
you need to focus your intentions clearly for
each “part” of the site’s structure when you
produce a sitemap, as well as when creating
any prototypes or working models of your
design. If you incorporate multiple site
types (such as a blog and a niche site), thedesign should be well balanced and reflect
the needs of your visitors, adhering to the
type of content and pages your users will
expect to find in such sites. This means that
you should be consistent with your design
and always ensure your design is relevant for
the audience you wish to receive.
Q: What exactly is the point in producing an
ideas pad?
A: The main purpose of this chapter
and the ideas pad is to get you thinkingand looking at what is possible, so you can
decide what you want to achieve with your
site before you set out on your journey
of putting it together. Remember that
if you start churning out code without
considering your fundamental goals,
then you might end up wasting your own
valuable time by deleting the stuff that
doesn’t make the cut; it will also take
you longer to write your code as a result.
Creating an ideas pad can help you avoid
walking into this long-term commitment
blind and to prepare you for the real-world issues that you face when you begin
building the final result.
Where You Are Now
By the end of this chapter you should have
the following:
• A finalized idea for your sites main aims
• An identity to go with your sites goals
• An idea’s pad full of really useful
snippets and images
• A mission statement declaring your
aims• Some primary research on your rivals
• Some brain storming and mind mapping
to place in your ideas pad
• A vision quest to produce a concept
design
Figure 1-39. This more advanced wire model takes some of the more visual aspects of the site into
account
Getting StartED Building Websites
by Alexander Dawson
Published: 11th December 2009
ISBN-10: 1-4302-2517-3
ISBN-13: 978-1-4302-2517-1
RRP: $24.99 (USD)
350 Pages
http://friendsofed.com/book.html?isbn=1430225173
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 50/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 51/10702/2010 (10)52
Workflow
If you have ready any of my articles in the past
few issues, you will have heard me talk about
planning and organization. Two words whose
mention often cause dread but once you and your
team get used to the process, you will find that the
whole project will have a better chance at success.
Soon, it will become as customary as opening Flash
when you start a project.
Planning a project is a subject for another article
and actually reaches beyond the realm of Flash. This
is because the Flash is usually one small piece of an
entire project. At the very least, a project will includenot only the Flash but HTML, Javascript and some
back end technology. If you are lucky enough to work
on a team with a technology director or lead, it is
usually up to them to figure out how all of these pieces
fit together.
We are going to talk about how to organize files when
creating a Flash project since Flash does not enforce
a file system as Flex and some other products do.
While the title of the article mentions best practices,
these are not rules that can not be broken. It will be
more of a starting point because the organization that
you use will need to be discussed with your team and
what will work best for you. You will often find thatwhat works best in one company or team will not fit as
well with another for a variety of reasons.
Organization within a Flash project is also important
and we are going to look at how to get your layers and
assets in order within the Flash environment itself.
Again, this is a guideline and the best way to organize
will be decided by your team.
Why do it?Often when discussions of project organization come
up, it is met with resistance. It can be a dirty word
for many developers but as teams and projects get
larger, the need for organization gets more important.
Without it, valuable time can be wasted while other
team members get up to speed with your project or
important files can get lost.
When a project is passed to another team member,
they will know exactly what to expect when they open
the file. They will know where to find the working
files, the assets and where the output will end up. This
consistency will make the whole process smoother,
which will be important when the project gets into the
last minute crunch.
Setting up the layers and assets within the Flash
environment will also help to speed the process when
the fla is passed to another team member. By taking
a few extra minutes to organize the library and the
layers, the next person to touch your project will know
exactly where to expect to find assets and animations.
Even if that person is you after being away from theproject for a long period of time.
File system structureThere are three basic elements to a Flash project. The
first being the fla and the associated custom classes.
The second is the output and the supporting files
that go with them and the last is the assets that get
loaded into the Flash but do not need to be part of the
output. It can be broken down into working, external
and output.
The working files will include the fla files and
the associated ActionScript classes that you have
created. This directory is your source folder withall of the working files in it. A good name for it
would be source or src. The name of the folder
isn't important as long as it is consistent between
projects. This folder is where to keep the fla files on
the top level and then another folder that contains
all of the ActionScript files. It is usually called
classes or _classes, the underscore to make it
easily identifiable.
If the project is an ActionScript 3 project, the
folders should follow the package that is specified
in the class definitions. For example, if the package
is com.company.datahandler and the class name is
DataHandler – the folder structure should be class
es>com>company>datahandler >DataHandler.as . To
get good idea of how this works, take a look at some
third party classes and see their folder structure. It is
possible to have your custom classes mix with a third
party in the same folders.
Project Organization
Best PracticesPlanning and organization of a project may seem like too much troubleat first, but it can often help ensure the success of the project. Soon it willbecome second nature to start a project with a good file structure andwill make the project easier to share with other members of your team.
What you will learn…
• Why project organization is
important and how to do it.
What you shouldknow…• You should be familiar with the
basic working of Adobe Flash
CS4.
Level of difficulty
by Louis DiCarro
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 52/107
If you look at some third party classes,
they will have their own file structure –
usually starting with com. If your custom
classes start with com, you can put your
folders and the third party folders. It would
not be good to put loose files from different
sources in the same folder because then things would get confusing. These folders
follow the domain naming system as
a standard which is why they look like an
URL backwards.
Next is what to do with the output from
the Flash project. A second directory on the
same level as the source folder will contain
the files expor ted to Flash. This will
include the swf output and any supporting
files such as HTML documents, JavaScript
files and images. Also, this is where to
keep files that are loaded in the swf at run
time. These would be external swf files ,
xml documents, sounds, video and other
external files.
Flash, by default, will automatically
export swf files into the same folder as
the fla file. To have Flash expor t the swf
to a directory other than the one with the
02/2010 (10)
fla, go to File>Publish Settings and change
the path in front of the name of the file.
For example, if my folder was named
Output and the fla is named sample.fla,
on a Mac I would go into the publish
settings folder and where the Flash is put
../output/sample.swf. The ../ is Unixspeak for go one directory above this one.
Unfortunately, I have not found a way
to make this behavior the default when
creating a new project, so you have to do
it every time.
The reason you would want to keep
your output separate from the source
files is to make the final output easier to
move to its final destination. A lot o f Flash
projects have multiple files that get loaded
in at run time and having a separate
output folder allows you to keep those
file organized. Then, when it is time to
move the swf files to the site, it as simple
as either moving the folder or the folder
contents without having to search for the
final files.
The last directory to discuss is the assets
folder. The assets folder is used for all of the
external artwork, fonts, sounds, videos and
any other files that are embedded into your
Flash. The benefit of using an assets folder
to keep all external embedded files is to
keep the source directory uncluttered. This
makes it easier to find working files without
having to dig through hundreds of jpgs toget to one fla.
Now that we have looked outside of Flash
to get organized, let's look in Flash and get
ourselves organized there.
Library organizationThe library panel in Flash is one of the
wost offenders in randomness. Developers
often import files into the fla and just
leave them. This is ok with a small project
with only a few assets but when you get
into a larger project with a lot of assets, it
can get unwieldy quickly. There are a lot
of different ways to organize your library
and it will take a discussion with your team
to figure out which is going to be the best
practice for you. Here, I am going to show
a very high-level way that can be a good
starting point.
A D V E R T I S E M E N T
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 53/10702/2010 (10)54
Workflow
Look at any Flash project and you can
see there are three assets that cover the
majority of the project. These are movie
clips, buttons and imported images. So
what we do it create a directory in the
library for each of these. In the method
my team uses, we have at least three foldersin the library that include :movieclips,
:bitmaps and :buttons. Notice the colon
in front of the names. This helps keep the
folders at the top of the list and easier to
find. Any character should work as long as
you are consistent.
But what if you have other assets, such as
video or sounds. That is easy enough using
folders called :video or :sound. This will even
work for components that get pulled in from
the components panel, just have a folder
called :componentszz.
The library has the flexibility to
be organized the way that best fits
your team's work flow. If this naming
convention does not work for your team,
come up with one of your own! As long as
it makes sense to everyone who works on
the project , it is the correct way of getting
thi ngs organi zed.
It is also important to have a naming
standard for the assets that get imported in.
This standard can be as strict or loose as best
fits the team. It is not usually what the assets
are named but how the name is spelled andif there are designators included in the
name. Often, teams will use some form of
camel case in their naming conventions.
Camel case refers to how to name an assets
using multiple words without spaces. For
example, a submit button could be named
submitButton. Usually, the first letter is
lower case while the following words are
capital letters.
Some teams will require the asset to be
names with designators to what the asset is
supposed to be. For example, all movie clips
could have the name followed by _mc ora button's name followed by _btn. Adding
the designator allows you to easily find an
element that when scanning the library
panel.
Finally, and most importantly, name all
of the assets that are in the library panel.
It is impossible to work efficiently when
every asset in the library is name Symbol
xx. You will spend more time looking for
a particular asset than editing it and a 15
minute job easily turn into an hour-long
ordeal.
Setting up layersAs with assets in the library, it is important
to name all of your layers. Be as specific as
possible – instead of having multiple layers
named button, try to name each layer by
LOUIS DICARROLouis DiCarro is a consultant based in NYC
and has been working with Flash since the rst
version. He has taught web development at the
college level and has worked for numerous large
clients. He can be reached at
what they do. One layer could be named
submit button while another could be
named reset button. Giving descriptive
names on a layer makes it easier for someone
to find an individual element whose tween
needs to be tweaked.
This also applies within movie clips assetswith multiple layers. If you have a button
that has multiple layers and looks like a glass
button, it is best to name the layers names
that describe the artwork on the layer. It
could be shadow, base color, highlight, sheen,
etc. This will give the person working on your
project some indication of what is on the
that layer and able to find what they need
quickly.
Any time there are frame scripts, frame
labels or sounds, they should be on the top
layers in the timeline. Usually, a layer named
actions is the top layer and this contains all
of the frame scripts. Now that most people
write most of their ActionScript in external
classes, the only code you usually see on this
layer is the stop() command. The same
holds true for frame scripts that are within
movie clips, the first layer should be named
actions.
The next layer holds all the frame labels
and is usually named labels. Again, the
actual name will not affect the layer but if it
is consistent between projects, it will make
the layer easier to identify. On this layerwould be any frame labels that are needed.
A naming convention for frame labels
would also be helpful, but not necessary.
Descriptive naming of the frames is usually
a good bet.
Most projects now load sound in
dynamically at run time, but there are cases
when the sound needs to be or is easier
to embed into the timeline. A third layer
named, appropriately enough, sounds would
be created to hold the sounds. If there are
multiple sounds that are embedded into the
timeline, it is good to make multiple soundlayers but best to keep the names of each
layer descriptive. One layer could be named
backing music while another could be named
voice over.
Rules are made to be brokenThe best systems are the most flexible
ones. Sometimes a new organizational rule
or naming convention needs to be created
when you get into a situation where an
element just doesn't fit the predefined
rule. When this happens, even though it
may be a one time deal, it is important
to write a comment or some kind of
notation describing what the element is
and why it is there. This way, when the
project is reopened after a period of time,
the developer will not have to take time
figuring out why the element is named
differently.
By keeping a system flexible, a project
won't grind to a halt when a unique instance
occurs. The developer will adapt the instance
to what works best and continue on with
the project. This is especially importantwhen deadlines are looming and the time is
running short.
You will also find that your system will
evolve as your projects, team and experience
evolves. Some times it is good to take a look at
a system and question whether it is still valid
for how you work. There was a time when
the standard was to keep the actions layer
on the bottom of timeline. A few years after
that, it moved to the top and has been there
ever since. So not only can your standards
change, it is also possible for the community
standards to change.
ConclusionA development team can run more
efficiently when a consistent standard
is agreed upon and every one follows it.
Once everyone has adapted to the standard,
finding elements will be as instinctive as
finding menu items.
What has been presented in this article is
just one possible way of organizing your Flash
projects. Find which methods and naming
conventions work best for you and your team and don't be afraid to change a system
once it is in place. By revisiting the system,
a team can discover a better way of getting
organized.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 54/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 55/10702/2010 (10)56
OSMF
Even when most of them work well, there was a
lack of best practices and frameworks for this
new and unstoppable world. Then, around
the middle of 2009, Adobe decided to release the first
versions of a new, compact but powerful framework
called OSMF. It stands for Open Source Media
Framework. I’m guessing you’ve already heard about
it and even seen or applied some examples. Perhaps
you’ve even already built some OSMF based apps.
In this article I will try to show a few of the little
tricks and fruits of my experience up to now. Please
note I am using for these exercises the latest availablesprint at the time of writing (sprint 9) so you may find
some differences with the former sprints.
Why someone should use OSMF?Why should we use OSMF and not just keep working
with AS3 as we used to do and which has worked well
so far?
We already had a nice, working video player, after
all, and it comes with Flash: FLVPlayback. It handles
progressive and streaming video well and comes with
skins and configurable buttons and controls. And it’s
also quick and easy to set up.
Well, as with every single framework, the idea is to speed development and bring a set of pre-made
elements, components and tools that allow us to avoid
wasting a lot of time and energy.
Furthermore, being Open Source, the community
behind this project is very active debugging and
suggesting improvements. And, of course, you
can modify the code in order to fit your needs as
desired.
What is the difference between OSMF and the
FLVPlayback component then? The two concepts
sound very similar.
While FLVPlayback is a visual component, and
more important, a closed one (you cannot modify the
code inside it if you need to customize it), OSMF is
more a controller that can be added to a view.
But you can now modify and build your OSMF
player. That gives us a complete set of fast possibilities
for great video players and video applications. You
will be thrilled with the new gamut of opportunities.
Another point is that OSMF is a specific and abstract
logic for video.
You will only make its displayObject(the view) to
appear visually. In a classical MVC pattern, we can
classify OSMF as just the controller.
But there is more. Being a common framework for
video apps developers, you can collaboratively build,
extend and improve other developers apps. And one of
OSMF’s strongest points is the possibility of building
plugins. Plugins are really useful for integrating third
party applications or service providers into OSMFplayers in a simple way.
No matter if you are a CDN, a statistics service,
a ads provider, etc, you can now create your plugin
for OSMF and then release it for OSMF developers to
integrate it in a breeze.
After this brief intro, let’s get our hands dirty..
Basic elements
First things come first: get the library. Go to
http://blogs.adobe.com/osmf/2010/02/osmf_v09_
released.html and get the source. You can see both
the s wc file and the source files without compiling.
I personally use the non-compiled source files justin case I need to extend some class. Once you have
them, create a project that includes the library,
and then proceed to import the basic classes: see
(Listing 1).
We already have our autoplay OSMF player.
Please notice I did not add buttons and controls
because we will talk just about how to get the
maximum out of our OSMF player and I already
assume you will manage to add those. Now that
we have it nicely running, let’s get into discovering
some how to’s...
Reading metadataOSMF can read 2 types of metadata: Metadata
that comes with the media (as we classically read
it with AS3 NetStream.client.onMetadata), and
dynamically added metadata to our media elements,
called facets in OSMF.
Dive into
OSMF-Part OneDue to the exponential growth of video during the last few years, a hugemyriad of video players and video based applications were developed.
What you will learn…
• Basics of OSMF in action
What you shouldknow…• As3 video basics
Level of difficulty
by Chaim Sajnovsky
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 56/107
Dive into OSMF-Part One
02/2010 (10) 57
By now, let’s listen for the metadata that
comes with our nice video. To do this, we
should listen to the loadable trait at the
VideoElement. But what is a trait?
As Adobe denes them
Traits define the capabilities of a mediaelement. Different implementations of a media
element aggregate different sets of traits,
depending on the characteristics of the media
they represent. For example, an audio element
may aggregate the IAudible, IPlayable,
ITemporal and ILoadable traits. These
individual traits define the capabilities of the
media element independently of the specific
media element implementation. For a media
element that has the ILoadable trait, the trait
provides the media element's load and unload
capability. Similarly, the implementation ofthe IPlayable trait provides media element's
ability to play itself .
First we should import some more classes:
see (Listing 2).
Listening for loading errorsHow we know if the video failed when
attempt to load it?
In our classic AS3 player, we will add
a listener to the netstream in order to listen
to its status. With OSMF we first import the
MediaErrorEvent class:
import org.osmf.events.MediaErrorEv
ent;
And then modify our onLoad function to
this: see (Listing 3).
Modifiyng the videoElementto access all the eventsSometimes we want to debug our application
made with OSMF. I prefer to create my
own custom VideoElement subclass, and
then replacing the videoElement for this
subclass.Please be advised to use these kinds of
subclasses only to test, replacing those back
with the official OSMF ones. Here is an
example: see (Listing 4).
And then modify at the init() function
this line:
myVideoElement = new VideoElement
( new NetLoader(), new URLResource( new
URL ( path ) ) );
to this:
myVideoElement = new
MyVideoElementDebugger( new NetLoader(),
new URLResource( new URL ( path ) ) );
check out the tracing…
Listing 1. Basic elements
import org.osmf.events.MediaPlayerCapabilityChangeEvent;
import org.osmf.events.DisplayObjectEvent ;
import org.osmf.media.MediaPlayer;
import org.osmf.media.URLResource;
import org.osmf.net.NetLoader;
import org.osmf.video.VideoElement;
import org.osmf.utils.URL;
Those will let us to begin building our very basic player by now.
var myPlayer:MediaPlayer;
var myVideoElement:VideoElement;
var mc_container:Sprite;
init( );
function init( ) {
//this is the container of our player
mc_container= new Sprite;
addChild ( mc_container ) ;
//MediaPlayer is the basic controller of OSMF. It will manage all the logic
myPlayer = new MediaPlayer ( ) ;
//Once the view becomes viable, it dispatches an event..
myPlayer.addEventListener( MediaPlayerCapabilityChangeEvent.CAN_PLAY_CHANGE,
onViewable );
//And once the video is loaded, will tell us what the new dimensions are
myPlayer.addEventListener( DisplayObjectEvent.MEDIA_SIZE_CHANGE, onDimensionChange
);var path:String=" here the path to your video… "
//VideoElement is the way we have to tell explicitly to the MediaPlayer that we
intend to load a video
myVideoElement = new VideoElement( new NetLoader(), new URLResource( new URL (
path ) ) );
//Here we assign the VideoElement to the MediaPlayer
myPlayer.media = myVideoElement;
}
function onViewable( evt: MediaPlayerCapabilityChangeEvent ):void {
if (evt.enabled) {
// We need to wait for this event before making anything..
//If the video is loaded and ready, just play it automatically…
if(myPlayer.canPlay)
{
myPlayer.play()
}
}
}
function onDimensionChange( evt: DisplayObjectEvent ):void {
//First we resize the OSMF view (the classic Video element
//in AS3
myPlayer.displayObject.width=evt.newWidth;
myPlayer.displayObject.height=evt.newHeight;
//Then we add the view to the stage …
mc_video.addChild( myPlayer.displayObject );
}
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 57/10702/2010 (10)58
Progressive vs RTMP
We can consider the VideoElement as
a magic one. You can load it with video, audio
and images. When loading video you can load
both Progressive (http) or streaming video
(RTMP).
Just change the string of your URL to anrtmp path. And remember, please an flv: or
and mp4: or an f4v: before the name of your
clip. I.e:
rtmp://mygreatRTMPserver.com/clips/mp4:
mygreatvideo.mp4
That is the basic approach. Then, of course
OSMF gives us more features. Change the
VideoElement creation from this:
myVideoElement = new VideoElement(new NetLoader(), new URLResource( new
URL ( path ) ) );
to that:
myVideoElement = new VideoElement(
new NetLoader(), new URLResource(
new FMSURL ( path, false ) ) );
The extra parameter is, as Adobe explains, is
useInstance:
useInstance:Boolean (default = false) – If
true, then the second part of the URL pathis considered the instance name, such as
rtmp://host/app/foo/bar/stream. In this case
the instance name would be 'foo' and the
stream would be 'bar/stream'. If false, then
the second part of the URL path is considered
to be the stream name, such as rtmp://host/
app/foo/bar/stream. In this case there is no
instance name and the stream would be 'foo/
bar/stream' .
This FMSURL will work with both VOD
and live streams. But there is more. If you
want to explicitly define your stream as live,
use:
myVideoElement = new VideoElement( new
NetLoader(),
new StreamingURLResource( new URL
( path),"live" ) );
This way OSMF will understand your
stream as live only, and then will treat it
as such, i.e, will remove the seekable trait,
since you generally cannot seek a live stream
(Note: you can seek back if you have DVR
working on FMS 3.5).
This is the first part of this deep look into
OSMF. Here you can find some links for you
to continue to learn this great framework.
• http://opensource.adobe.com/wiki/display/
osmf/Specifications (specs and classes)
Listing 2. Reading metadata
import org.osmf.traits.LoadState;
import org.osmf.events.LoadEvent;
import org.osmf.traits.MediaTraitType;
Then we proceed to modify the onViewable function to this:
function onViewable( evt: MediaPlayerCapabilityChangeEvent ):void {
if (evt.enabled) {
//we listen the loadable trait in order to know when the media was
succesfully loaded
myVideoElement.getTrait(MediaTraitType.LOAD).addEventListener(
LoadEvent.LOAD_STATE_CHANGE, onLoad)
if(myPlayer.canPlay)
{
myPlayer.play()
}
}
}
function onLoad(event:LoadEvent):void
{
//this means, it loaded OK..
if (event.loadState == LoadState.READY)
{
//here we nd the client, once the media element is loaded..
myVideoElement.client.addHandler(NetStreamCodes.ON_META_DATA, onMetadata);
}
}
function onMetadata(info:Object):void
{
//here you get your metadata extracting it from the info
//Object…
}
Listing 3. Detecting if the stream was not found
function onLoad(event:LoadEvent):void
{
//this means, it loaded OK..
if (event.loadState == LoadState.READY)
{
myVideoElement.client.addHandler(NetStreamCodes.ON_META_DATA,
onMetadata);
myVideoElement.addEventListener(MediaErrorEvent.MEDIA_ERROR,
onError)
}
}
function onError(evt:MediaErrorEvent):void{
trace(evt.error)//here you can know what was the //error type…
if(evt.type==MediaErrorEvent.MEDIA_ERROR)
{
trace("video not found")
}
}
OSMF in action
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 58/10702/2010 (10) 59
• http://groups.adobe.com/groups/7af970e6e4/hives ( Adobe OSMF
group)
• http://help.adobe.com/en_US/OSMF/1.0/AS3LR (OSMF live
docs)
• http://twitter.com/osmf (twitter osmf user group)
Listing 4. Custom VideoElement Class for debugging
package com.example
{
import ash.events.NetStatusEvent;
import ash.events.StatusEvent;
import ash.net.NetStream;
import org.osmf.media.MediaResourceBase;
import org.osmf.net.NetLoadedContext;
import org.osmf.net.NetLoader;
import org.osmf.traits.LoadTrait;
import org.osmf.traits.MediaTraitType;
import org.osmf.video.VideoElement;
public class MyVideoElementDebugger extends
VideoElement
{
private var stream:NetStream;
public function MyVideoElementDebugger(lo
ader:NetLoader, resource:
MediaResourceBase=null)
{
super(loader, resource);
}
override protected function processReadyState():void
{
super.processReadyState() var loadTrait:LoadTrait = getTrait(MediaTraitTy
pe.LOAD) as LoadTrait;
var context:NetLoadedContext = NetLoadedContext(l
oadTrait.loadedContext);
stream = context.stream;
stream.addEventListener(NetStatusEvent.NET_
STATUS, onNetStatusEvent2);
}
private function onNetStatusEvent2(evt:
NetStatusEvent):void
{
trace(evt.info.code)
}
}
}
CHAIM SAJNOVSKYChaim Sajnovsky works as ash technologies developer and consultant,
mainly specialized in ash video.
Based in Israel, you can reach him at: [email protected]
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 59/10702/2010 (10)60
Flash Media Servers
Guy has seen a consistent 5-6% monthly
growth of web servers being hosted by
private cloud providers such as Amazon
EC2 and Rackspace. Clearly, the cloud is becoming a
popular choice for web hosting. But how does it apply
to streaming media?
We found the answer in a roundabout way.
Although Wowza started with traditional stand-
alone software licenses (both perpetual and
subscription), which we still sell in great volumes,
we did recognize that many people would rather
pay as they go on a much more granular scalewithout the complexities of traditional hosting
administration. We looked at how to accommodate
these needs and found that Cloud environments
offered the best solution. Amazon Elastic Compute
Cloud (EC2) service in particular, in our analysis,
offered the right combination of features that made
it attractive for media streaming use – elasticity,
dedicated resource assignment, the ecosystem of
tools and other relevant Amazon Web Services like
Simple Storage Service (S3).
That led us to a creation of a self-managed
Software as a Service (SaaS) offering that combined
a pre-configured, pre-tuned Wowza Media Serversoftware on Amazon EC2 instances. Over the past
couple of years this offering have been refined to
be a simpler, faster, and often a cheaper way to
develop and deploy media applications and stream
videos.
For the developers, Wowza for EC2 solution has also
proven to be a cost-effective environment that is much
better suited for clients that need a greater degree of
flexibility and cost control.
Today Wowza for EC2 solution provides
streaming capabilities not only for Flash, but also
for Silverlight, iPhone, and many other player
clients. This unified media server platform gives
developers more ways to differentiate their services
and offer their customers new ways to extend their
contents’ reach beyond Flash without having to
create separate infrastructures for encoding and
streaming.
Who is the Cloud for?The Cloud with its elastic nature and the per-
consumption billing model lends itself well to media
streaming applications. Many use case scenarios are
good fit for the cloud, including:
• Users with unpredictable, uctuating
bandwidth/capacity requirements
• Users that need a CDN like environment but
with a greater degree of infrastructure control
• Event streaming (sporadic)
• Development environment and proof of concept testing at scale
• As an overow infrastructure to the existing
dedicated (hosted)
• Users with limited budgets and/or yet-to-be
proven business models
Wowza for EC2 has been used as a launching pad for
many successful businesses, such as Livestream.com
(formerly Mogulus) and Justin.tv which have since
have grown to run their own dedicated Wowza based
infrastructures. Hundreds of other customers use
Wowza for EC2 to deploy a variety of applications,
ranging from video interview services to chatand network overow supporting short duration
live events. A great example of the latter is how
a Belgian CDN Rambla used Amazon to get extra
capacity to bring worldwide live coverage of the
rst ever elephant birth in the Antwerp Zoo (http://
aws.typepad.com/aws/2009/05/ec2-and-wowza-media-
support-belgiums-largest-live-streaming-event.html ) and
a similar event recently streamed by ZapLive.tv for
WildEarth TV (http://aws.typepad.com/aws/2010/02/
thats-exibility-baby.html ).
Of course the Cloud environment is not the only
way to skin the proverbial media streaming cat. Users
obviously can subscribe to CDN/streaming services,
or get their own dedicated or virtual hosted servers.
Many factor should be considered in choosing the
right solution and involve the analysis of the users’
ability to administer the environment, their streaming
patterns, application needs, cost and complexity.
A Case for Streaming
Media and the CloudGuy Rosen writes a blog Jack of all Clouds (http://www.jackofallclouds.com) where he has been tracking via random sampling the hosting providers ofthe top 500,000 websites.
What you will learn…
• Using of the Cloud for streaming
media delivery
• Employing Wowza Server on
Amazon EC2
What you shouldknow…• Basics of system administration &
media streaming
Level of difficulty
by Craig Burriss
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 60/107
A Case for Streaming Media and the Cloud
02/2010 (10) 61
Use Case ExampleHere is just one of many use case examples.
Let’s say your company has decided to
broadcast live, weekly, hour-long classes on
how to use your product. You also want to
archive that content for a later on-demand
replay. Your early expectations are modestbut hope to grow viewership over time to
a significant level. So what options do you
have?
Get a dedicated hosted server
Lots of people jump onto this solution
because this is how things have been done for
a long time. Of course this may not be ideal
for this use case. There are multiple things
to consider. For instance, how do you scope
what level of hardware is needed for the
foreseeable future? How to make it resilient to outages? Once you do get the hardware,
how do you chose and install an OS? How
do you properly tune your streaming
server software? Of course with a sporadic
streaming like in this user case, the server
and the bandwidth you are paying for will
be idle most of the time. The flipside is the
success disaster scenario. What happens when
you get a sudden surge in visitors? How do
you expand capacity quickly to handle that?
All of this requires a high level of system
administration skills and even than may not
meet the business dynamics you encounter.
Subscribe to a virtual dedicated server
(VPS) at a provider of your choice
This option offers more flexibility in
properly sizing capacity you may need and
provisioning new servers to expand it. You
can bring up or turn off additional servers
relatively quickly (a matter of hours).The
drawbacks, however, are similar to the ones
you’d face with the dedicated machines –
you will need to have the expertise to install
and tune the streaming environment on each
server. Selecting the right VPS plan couldbe tricky – media streaming applications
require sufficient dedicated resources (CPU,
RAM, disk, bandwidth, etc) and that varies
from one provider to another, and even more
granularly from one VPS plan to another.
Use a Wowza Media Server
for Amazon EC2 solution
This option offers a great deal of flexibility and
simplicity. First, the Wowza Amazon Machine
Images (AMIs) are pre-tuned for the appropriate
EC2 instances (these are offered in various
sizes). With that it is easy to turn on additional
servers as needed, literally in minutes, to gain
more capacity when the success disaster hits.
Cost control is also a big advantage. You pay for
the use of instances by the hour and only for the
bandwidth that you actually use. Additionally
you can take advantage of the Amazon S3
storage service to securely archive content and
stream it from EC2 or as progressive download,
if you need that option.
Getting Started
with Wowza for EC2When you subscribe to Wowza Media
Server for EC2 solution, you gain access to
custom Amazon Machine Images (AMIs)
that Wowza has created with the media
server pre-installed and tuned. You can also
choose to deploy in one or more Amazon’s
regional data to provide best proximity to
your audiences.
The EC2 instance pricing varies based on
the instance size (small, large or extra large)
and where the machine is located, roughly
$0.15/hour for a small instance plus $0.15per GB of video streamed out (see Table 1,
and for the most up to pricing visit http://
www.wowzamedia.com/ec2.html ).
Instances can share a common
configuration. The makes Wowza for EC2
much simpler to deploy compared to the
dedicated or the VPS hosting route.
So how do you get started? First, you need
to have an Amazon EC2 account (sign up at
http://www.amazon.com/ec2), then subscribe
to the Wowza Media Server 2 through the
Amazon Payments website. These two steps
set up your billing and let you launch theWowza Server AMIs.
You have an option of managing EC2
instances through a command line interface
or graphical interface tools provided by
Amazon or a third parties. Wowza currently
recommends a Firefox Elasticfox plugin to
manage Wowza instances. This third party
tool offers additional features not available
in Amazon’s native web-manager, such as the
ability to load startup packages.
Everything from setting up security
keys, connecting with Telnet (via PuTTy),
specifying Wowza specific startup packages
and configuring which ports are open are
all easily set with Elasticfox. Amazon sets
a software firewall which can share rules
across any set of servers you start up and with
Elasticfox these rules are simple to set up,
view and modify.
The set up is accomplished in 6 easy steps:
1. Install Elasticfox.
2. Set up your AWS credentials in
Elasticfox.
3. Create a set of KeyPairs from within
Elasticfox to handle security when
connecting.
4. Get the latest Wowza for EC2 AMI ID
from the Wowza website. Enter the
AMI ID into Elasticfox and start your
instance.
5. FTP or Telnet to the server and upload the content you’d like to stream
6. The server is ready to stream.
Customizing Startup PackagesWowza offers a number of standard startup
packages that cover a set of the most popular
application types (e.g., live, live-record, video
on demand, video chat). A startup package is
a set of xml commands and file sets that are
loaded into your Wowza for EC2 instance
on startup.
You can customize these to meet
your specific application needs and savecustomized packages to Amazon S3 (or
to your local file system). When you start
a Wowza Server AMI you have the option
to load a Startup Package of your choice to
instantly configure it just as you like it. There
is no transfer fees between Amazon S3 and
EC2 and just a nominal fee of $0.15 per GB
of storage used per month.
Sizingand Monitoring Your ServersThree instance sizes are supported with
Wowza for EC2 solution – small, large and
Table 1: Wowza for EC2 pricing (eective Feb. 17, 2010)
Instances US-N. Virginia US-N. California Europe
Small $0.15 per hour $0.16 per hour $0.16 per hour
Large $0.46 per hour $0.49 per hour $0.49 per hour
Extra Large $0.86 per hour $0.97 per hour $0.97 per hour
Data trnsfer US-N. Virginia US-N. California Europe
First 10 TB/month Data Transfer Out $0.10 per GB $0.10 per GB $0.10 per GB
Nex t 40 TB/month Data Transfer Out $0.15 per GB $0.15 per GB $0.15 per GB
Nex t 100 TB/month Data Transfer O ut $0.09 per GB $0.09 per GB $0.09 per GB
Data Transfer Out/month over 150TB $0.09 per GB $0.09 per GB $0.09 per GB
Regional Data Transfer $0.01 per GB $0.01 per GB $0.01 per GB
Monthly Charge United States Europe
Recurring Monthly Charge $5.00 $5.00
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 61/10702/2010 (10)62
Flash Media Servers
extra large. The general sizing guidelines
for outgoing bandwidth capacity, based the
experience of hundreds of Wowza for EC2
customers, is approximately 150Mbps on
a small instance, 250Mbps on a large instance
and 350Mbps on an extra large instance. This
gives you the ability to do the math for howmany servers you may needed to support
your streaming needs.
Wowza for EC2 solution includes
a monitoring application built on a Cacti
framework. It facilitates monitoring not only
of the server CPU load, NIC I/O, disk space,
etc., but of the Wowza Server software as
well. By default you can graph connections
for Flash, iPhone, RTSP and Silverlight over
time with a current, average, maximum
number of connections for each client type.
You can add additional graphs to collect data
at any level of the Wowza Server streaming
hierarchy: VHosts, Application, Application
Instance and Streams. The Cacti based
monitoring offers a simple web interface
allowing you to connect via http://[your-EC2-
hostIP]:8080/cacti. You can even customize
the Cacti access to individual accounts whichallows you to host multiple customers from
the same server and restricts each to only
view the statistics from their own streams.
The same information is also available
through the JMX interface, if you prefer to
use a monitoring tool like JConsole.
Taking advantageof EC2 and S3 storageWe already discussed using S3 to store
configuration files. But it is also a great spot
to store the content that you want to stream.
Wowza for EC2 AMIs come pre-configured
with a caching system called S3VOD built
specifically for the EC2/S3 environment.
Storing your streaming content on S3 has
several advantages. Aside from the backup
systems Amazon has in place, you can also
point any number of Wowza for EC2 serversat it as the source for content.
Closing ThoughtsWowza Media Server 2 for EC2 has proven
to be a flexible and often a very economically
competitive solution when compared to the
dedicated or VPS hosting and even CDN
alternatives. Unlike CDN-based solutions,
Wowza for EC2 allows full server access
for creation of custom applications and
simultaneous delivery to multiple client
types from a single encode. It provides
a unified media streaming platform thatenables developers and their customers all
of the advantages that Cloud computing
environment has to offer.
CRAIG BURRISSCraig’s rst corporate job back in 1995 involved
developing video visual eects software at Xaos
Tools. By the time he left Xaos he was responsible
for the entire line of desktop video products. As
Program Manager at Adobe Systems he brought
multiple products to market, and as a principal
of his own consulting company he worked with
companies both large and small. Now Craig is
Director of Services at Wowza Media Systems
focusing on Cloud based services.
Figure 1. The Elasticfox security interface provides a simple to understand view into which ports are open on your EC2 servers
Figure 2. The monitoring interface graphs connections for all supported protocol types
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 62/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 63/10702/2010 (10)64
FLEX
Adobe AIR was introduced in public beta
in 2007 under the code name Apollo
and version 1 was released in 2008. The
current release is version 1.5 with version 2 in
beta on Adobe Labs (http://labs.adobe.com). You
can find out more about AIR and download the
run-time environment at http://www.adobe.com/air .
Adobe also has an app store to try out some of the
apps built in AIR at http://www.adobe.com/cfusion/
marketplace/index.cfm.
AIR is a run-time environment that allows rich
internet applications built in Flash, Flex and HTML to run as stand-alone, desktop applications. AIR
stands for Adobe Integrated Runtime which works
a lot like a Java Virtual Machine (JVM). Run-time
in this example means that the AIR program acts as
a host to individual applications built in Flash, Flex
or HTML. Just as a web browser acts as a host to
web pages, AIR displays and runs code built in those
technologies.
But AIR is not a web browser, it does more than
a web browser can by allowing features that are usually
restricted. With an AIR app, you can set the look of
the window the application is displayed in (known
as the chrome) and have access to the file system to
open, close and save files and preferences. Adobe has
made it so certain files can be associated with an AIR
application. That means when you double click on
a file that is associated with a particular AIR app, itwill launch the app automatically.
To develop an AIR application, you will need either
Flash, Flex or an HTML IDE. AIR development has
been integrated into Flash CS3 and CS4, Flex Builder
3 and Flash Builder 4. You can also develop AIR apps
Flex and Air
Want to write a stand-alone program but don't want to learn VisualBasic or Cocoa? Do you have an existing project online that would workgreat as an offline application? Already a Flex developer and don't wantto have to learn a new language? Adobe AIR is your answer.
What you will learn…
• Create a simple stand alone
application in Adobe Flex.
What you shouldknow…• Adobe Flex Builder 3.0.
Level of difficulty
by Louis DiCarro
Listing 1. MyFirstAIRApp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx:WindowedApplication>
Listing 2. Adding properties to the window
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="My First
AIR App" status="Running">
Listing 3. Adding styles to the window
<mx:Style>
WindowedApplication
{
background-color: "0x333333";
color: "0xffffff";
}
</mx:Style>
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 64/107
Flex and Air
02/2010 (10) 65
with the free AIR SDK using the command
line tools to compile and run the apps. Using
the SDK is little more difficult than using
Flash or Flex Builder because the IDE takescare of most of the command line processes
for you.
Starting a new appIn this article, we are going to focus on
creating a basic app using Flex Builder 3
and AIR 1.5 although any 1.x version of
AIR should work with these examples. To
get started, open Flex and create a new Flex
project. In the first window give the project
a name and a location to save it in (the defaultworkspace is good).
Notice under Project name and Project
location there is a section called Application
type and you are given two choices see (Figure
1). This section determines what kind of
application you want the output to be. The
first choice, Web application, is meant for
a project whose end result is the web browser
using the Flash plug-in. This is the most
common type of project and one that you
probably have used for most of your projects.
The second option, Desktop application, is theone that causes Flex to set up the project and
compile as an AIR app. Select this second
option and click next.
Although AIR apps can connect to server
services to send and retrieve data, we are
not going to cover it in this article. Be aware,
though, that AIR apps can connect to most
web services just as you can with a browser
based rich internet application (RIA). Using
services on the web to send and retrieve data
opens up a lot of possibilities for your app.
In the next window, Flex will ask whereyou would like the application to be
compiled to. bin-debug is the default and
it is fine. If your team's workflow requires
a different directory to compile the
applications to, it should not affect outcome
of your project. At this point, you can click
Finish and Flex will set up your project. If
you choose Next> instead, you will have the
normal options when setting up a normal
Flex project. We don't need these extra
options for now.
As you have seen so far, setting up a Flex
project targeted for AIR is a lot like settingup a normal Flex project targeted for web
use. The same steps apply as you are used
to with a few minor changes. You will find
that development for AIR is a lot like the
development you are already used to.
Figure 1. The New Flex Project window
Figure 2. Compare the Flex and AIR fle systems Figure 3. An empty AIR app
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 65/10702/2010 (10)66
AIR project filesOnce a project is created and loaded into
Flex, take a look at the Flex Navigator pane.
There you will see your newly created
project ready to be worked on. But notice
the lack of files in this project compared
to a default web based project. In Figure 2you can see a default AIR project compared
to a default web project. As the project
grows, there most likely be more files added,
but at the bare minimum, there is a lot of
difference.
In the src folder, there are two files. The
first, the .mxml file, is where you write your
application and is set to be the starting point
of your app. The second file is a xml file
that holds the template of settings for your
application. Also notice that the bin-debug
folder is missing some of the files that weare used to in a web based project as well as
the html-template directory. This is because
there are not as many dependencies (HTML,
JavaScript, etc.) for an AIR app as there is
with a RIA.
At this point, we can click the debug
button in the tool bar and run the app. The
AIR Debug Launcher (ADL), which is one of
the command line applications, will launch
to run the application. You should get
something similar to the blank window as
seen in Figure 3. Once you have taken a goodlook at the blank window, close it and return
to Flex.
We can now start working with our
two files starting with the .mxml. If it is
not already, open the file to edit in the
editor window. Here you will see the
starting point of your file which looks
like a normal Flex project except the
tag is mx:WindowedApplication instead
of mx:Application (Listing 1). mx:
WindowedApplication is part of the mx.core
package and looking at the documentationfor the class, we can see that there are a lot of
properties that can be set on the window.
The windowed application container
has properties, styles and events as most
other containers in Flex. Let's set the
title of the window using the property
title="My First AIR App" and set the
status to status="Running" within the mx:
WindowedApplication opening tag (Listing
2). This time when you run the application,
the window will still be blank but the title
will have the new title and the status bar
will now have text in it.We can also style the window using
the mx:Style tag. Within the mx:
WindowedApplication tag, insert opening
and closing mx:Style tags. The style tags
uses CSS style rules so we will change the
backgound and forground colors of the
application. Add the code in Listing 3 and
then run your application. The window now
has a dark grey background.
Now we can get some controls into
the application. The great thing about
building an AIR app in Flex is there is
not much difference in development formost of the controls. Searching through
the ActionScript 3 reference, you will
see a lot of libraries that are available
only to AIR applications. One example
is the WindowedApplication that we are
using. There may also be functions of
a component or class that is specific to
AIR but most of the components should
be the same as working in a regular Flex
application.
Choose which components you want to
add to your application and add them just
as you would with a web based app. In this
example (Listing 4) I added two labels and
a button. The second label's text is left blank
because it is going to get filled in when the
button is clicked. Above the components,
I also added a simple script to handle the clickFigure 4. The app running
Listing 4. Adding components to the window
<mx:Label text="AIR and Flex!" verticalCenter="-30" horizontalCenter="0"></mx:
Label>
<mx:Button label="Ok!" click="doButton(null)" verticalCenter="0"
horizontalCenter="0"></mx:Button>
<mx:Label text="" id="resultLabel" verticalCenter="30" horizontalCenter="0"></
mx:Label>
Listing 5. The button functionality
<mx:Script>
<![CDATA[
private function doButton(e:Event):void
{
resultLabel.text = "Together at last!";
}
]]>
</mx:Script>
Adobe AIR
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 66/10702/2010 (10) 67
event of the button and fill in the second
label's text (Listing 5).
Run the application again and you should
get something that looks similar to figure
4. Click the button and the second text
label should be populated. This app, while
not very useful in the real world, is a fully
functional application but can only run from
the Flex environment through ADL. Now we
need to make it a stand alone app and we will
start by editing the xml file that was created
with your project.
Figure 5. The export window
Figure 6. Certicates
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 67/10702/2010 (10)68
FLEX
Editing the XMLIn Flex, open the xml in the src folder for
editing. In the xml document, you will see
a lot of parameters that can be edited while
developing the app and before compiling
the final version. Some of the parameters
can also be edited in the mxml or throughActionScript, such as the title of the
window that we edited earlier. To use one
of the parameters, uncomment the line by
removing the <!-- and --> surrounding
the line and change the parameter. There
are comments in the document that explain
what values the parameters take and whether
they are optional or not.
To add a little interest to our app, lets
make the background of the window slightly
transparent. In the xml, find the line that has
the<transparent>
tag and uncomment it.The comment on the line above it says that
we need to set our the <systemChrome> tag
to none, so uncomment that line and enter
none between the tags. Then enter true in
the transparent tag.
Switch back to the mxml file. We are
going to make the background translucent,
so add the line background-alpha: "0.5";
in the mx:Style tag. Run the application and
you will see the window's alpha is reduced.
Also notice the chrome of the window has
changed.
If you look through the xml file, you will
find settings including icon definition and
accepted file types. These are just some of the features that you can set to make your
app unique.
Making the final appSo far, we have been testing the application in
Flex and ADL. Now let's make it run in the
AIR environment. From the Project menu,
select Export Release Build..., a window will
appear as in figure 5. This first window will
allow you to choose which project to export,
what to name it and where to export it to.
You can export the app anywhere you wouldlike. Fill in these settings and click Next .
The next screen (Figure 6) deals with
certificates. Certificates allow you, your
client or your company to digitally sign the
application to authenticate its source. It also
helps protect the end user from malicious
code pretending to be another program. You
will need to create a temporary certificate in
order to export your application to run in the
AIR environment.
Select the first option then click the Create
button. You will then see a second window
as in Figure 7. Fill in the Publisher Name and
Password fields (that is all you need for now)
with any value you want. Click the Browse
button to select where you would like to save
the certificate and then click OK.
Back in the export window, click Finish
and your app will be created. Navigate onyour computer to where you specified the
final app to be compiled to. Double click on
it and AIR will install the application for you.
Once it is installed, you can see it running
as a stand alone application. Click on the
button to see the label fill in just as in the test
environment.
ConclusionIt is already known that it is easy to create
powerful web based in Flex with components
and ActionScript. Now, with Adobe AIR,
you can create powerful desktop applicationsusing knowledge that you already have.
Many existing rich internet applications can
translate to a desktop application successfully
and can even be more powerful with AIR's
expanded capabilities.
Many large media companies have
used AIR to create applications and user
acceptance seems to be positive so far. Adobe
continues to develop the technology and
expand it. AIR has been recently announced
for mobile devices which will allow Flex
developers to create mobile apps. It will also
allow enterprise developers to create customapps without having a large and complicated
deployment scheme.
We only scratched the surface of what you
can do with Flex and AIR. This article was
to get you set up and used to the process of
creating an AIR app with Flex. Dig through
Adobe's documentation on AIR to learn
more about the capabilities and look for more
articles in this magazine on special features.
Figure 7. Setting up a temporary certifcate
Figure 8. Double click on this to install
LOUIS DICARRO
Louis DiCarro is a consultant based in NYC
and has been working with Flash since the rst
version. He has taught web development at the
college level and has worked for numerous large
clients. He can be reached at:
On the 'Net
• http://www.adobe.com/air – Adobe AIR product page• http://www.adobe.com/cfusion/marketplace/index.cfm – Adobe Marketplace• http://labs.adobe.com – Adobe Labs
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 68/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 69/10702/2010 (10)70
FLEX
This will get you on your way toward
building your own collection of Spark-based
components that take advantage of Spark
architecture.
Spark component architectureIf you’ve been a Flex developer for a little
while, or you’ve used a different framework
for client-side interface creation, you may have
heard of the conceptual Model-View-Controll er
(MVC) architectural design pattern. MVC
is continuously evolving, spawning new and
innovative implementations to create morescalable applications on a regular basis. This
evolutionary process is parallel to the evolution of
best practices for Flex in the enterprise. Figure 1
shows the overall structure of a Flex 4 enterprise
application.
In this article, you’ll learn about Component Skins
and Components, the second and third levels of the
overall application architecture. The Spark component
architecture is one of the results of this evolutionary
process, as illustrated in Figure 2.
As you saw a moment ago, there are two pieces to
a Spark component: the skin and the component class
that contains the behavioral logic for the component.
According to the Flex 4 documentation,
The general rule is any code that is used by multiple
skins belongs in the component class, and any code
that is specific to a particular skin implementation
lives in the skin.
Let’s put all this theory into practice by taking a look
at some real-life situations.
The many flavorsof custom componentsCreating a custom component means extending
a preexisting class that either directly or indirectly
extends one of the Flex framework classes. For
example, imagine three 2010 Ford Mustangs side-
by-side. The first is the base Mustang Coupe with
the standard V6 engine. The second is the Mustang
GT with a 4.6-liter V8, improved wheels, and some
other upgrades. The third is a Shelby Cobra, sporting510 horsepower, premium sound, and a navigation
system, among other enhancements. The second and
third Mustangs both extend the base Mustang, so they
inherit all of the properties of the first and then add
their own additional amenities. In some cases, they
override a property or function of the base Mustang
as well.
The Cobra extends the GT, so the Cobra inherits
the properties of the GT and the standard Mustang,
while adding its additional features. But wait!
How could the Cobra and the GT inherit the
properties of the standard Mustang if the engines
are different? The answer is that the GT overrides
the engine propert y of the standard Mustang, and
the Cobra overrides the engine propert y of the GT.
The relationship among these three automobiles
is illustrated in the simple class diagram shown in
Figure 3.
Understanding Flex 4
ComponentsIn this article you’ll learn about the underlying foundation of the Sparkcomponent architecture in Flex 4. Most important, you’ll learn key facetsthat are specific to the Flex 4 Spark architecture.
What you will learn…
• Spark component architectu re
• Simple vs. Composite comp-
onents
• MXML vs. ActionScript comp-
onents
• Flex 3 to Flex 4 migration tips
• Spark skinning basics
What you shouldknow…• Basic Flex concepts
• Basic ActionScri pt syntax
• What components are
Level of difficulty
by Tariq Ahmed, Dan Orlando, John C. Bland II, and Joel Hooks
This article is taken from the book Flex 4 in Action, 2nd Edition.
Flex 4 in Action, 2nd EditionEarly Access Edition Tariq Ahmed, Dan Orlando, John C. Bland II, and Joel HooksMEAP Release: June 2009Softbound print: June 2010 (est.) | 600 pagesISBN: 9781935182429Manning Publications
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 70/107
Understanding Flex 4 components
02/2010 (10) 71
When you extend classes in the Flex
framework, you inherit the properties,
functions, events, and styles from the class
you’re extending. This makes code a lot more
manageable and is one of the fundamental
characteristics of object-oriented
programming and code reusability. Let’s takea look at two different component types.
Simple vs. compositeThe two major types of custom components
are simple and composite. A simple custom
component extends a single, preexisting
component.
The fun doesn’t stop there, though. When
developing Flex applications, you’ll find
it valuable to group simple components
together, keeping your application better
organized. You can create components thatgroup disparate components in what’s called
a composite component, which is a container
that holds any number of additional
components inside it, as you’ll see later in the
composite component example.
MXML vs. ActionScriptWhen developing custom components, you
have the option of creating your component
in either MXML or ActionScript. In most
cases, either will do. The main advantage
of MXML is that you can usually write
the code needed with fewer lines. Butsome flexibility is lost in regard to object
customization, so advanced custom
components are almost always written
as ActionScript classes. But allow me
to emphasize the point that in Flex 4,
anything you can do with ActionScript you
can also do in MXML. The biggest issue at
this point is breaking old habits, and I’m
no exception. For example, I’ve developed
my custom components using ActionScript
for so long that it’s been challenging to get
used to the fact that MXML is just as
powerful in Flex 4. Ultimately, MXML isbroken down to basic ActionScript when
it’s compiled anyway. If you’ve ever reverse-
engineered an SWF file that was developed
with Flex, you know that you’ll never find
any of the original MXML that was written
for the application.
Whether you decide to use ActionScript or
MXML for component development in Flex
4 is really a matter of personal preference,
although you could save considerable time
by writing your composite components
with MXML. An excellent example of this
is a shipping information form. It’s useful
to have a reusable shipping form component
because it can be used for many applications.
With Spark, this can be created to be fully
skinnable depending on the context of the
application, and all in about 10 minutes.
Migration tip
In Flex 3, MXML composite components
were usually based on the Flex Canvas
container from the Halo library. In Flex 4,
MXML composite components are created
using the MXMLComponent base class or
the Group class from the Spark library.
The only real disadvantage to using
ActionScript to build composite
components is that you can’t use Flash
Builder’s design view. Another thing to
keep in mind if you decide to go with
ActionScript is that you need to know
about the Flex component lifecycle so
that you use the built-in methods of the
UIComponent base class to handle things
like adding display objects to the stage.
When done in MXML, Flex handles all
this for you, so you generally don’t have to
worry about it. You also have the option
of overriding methods of UIComponent
such as commitProperties() and
updateDisplayList() from within the
<fx:Script/> tag in MXML if necessary.
We’ll talk more about all of that in a
moment. The bottom line is that nding
the formula that works best for you is real ly
a matter of trial and error. The important
thing is that you know enough about each
to make an informed decision.
Now that you’ve learned about the optionsavailable, the first custom component you’ll
build is of the simple type.
Tip
When it comes to making custom
components, your goal should be to make
it simple for other developers to use your
component (even if it’s complicated inside).
This is referred to as encapsulation.
Creating simple custom
componentsAt the most fundamental level, a viewable
component (one that’s added to the display
list of your application) can be categorized
according to the purpose that it serves.
This is broken down three ways: controls,
containers, and item renderers.
Figure 1. Organizational structure of a Flex 4 enterprise application
Figure 2. Application layers that compose the Spark component architecture
�
�
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 71/10702/2010 (10)72
ControlsThe first custom component that you’ll
build is an extension of the Flex ComboBox.
This falls under the control category
because it has an effect on application state.
This brings up an important point: The
use of the term states to refer to differentsections of a Flex application sometimes
causes confusion with application state
as it’s used in computer programming
in general. A change in application
state generally refers to an effect on the
model, either the presentation model
or domain model of the application. In
the ComboBox example, the control can
initiate an action or sequence of actions
when the selected value is changed, which
has an effect on application state because
the view (presentation) model or the data
(domain) model has been altered in some
way.
ContainersCategorizing container components is
easy because the container’s job is to holdan array of controls. For example, I had to
create a lightweight container component
for a project that was a subclass of the
Spark Group object, and the only thing
that it did was draw a repeating set of
vertical and horizontal lines using the
drawing API.
Item renderersThis is another really easy one to categorize
because item renderers share the common
characteristic of being a repeatable object
whose display is dependent on the data
(or listData) property that’s passed to it by
its parent. A simple example is the Label
that’s used as the default item renderer
in a list-based component. Note that any
control or container is categorized as anitem renderer if it’s being repeated for each
item in collection data that’s passed to its
parent.
Build your ownhomegrown simple ComboBoxLet’s walk through a simple example. Say
your application is geocentric, meaning
that pieces of information carry location
data. Therefore several forms in the
application require the user to specify
an address, complete with the state orprovince they reside in.
For the sake of usability, let’s say you
have functionality on the server side to
determine the user’s location based on
their IP address and communicate the
country they’re in to the client-side Flex
application. If the server tells the Flex
application that the user is in the United
States, you want to display a drop-down
menu of U.S. states for them to select from
when they encounter an address form, as
Figure 4 demonstrates.
Figure 4 is a good example of simplecustom ComboBox control that shows
a list of U.S. states when clicked and allows
selection of a state to be submitted as a data
object. Listing 1 contains the code for the
component shown in Figure 4. As you’ll see,
this component is highly reusable, because
it’s often needed when creating an address
submission form.
As Listing 1 shows, we use the dataProvider
property of the ComboBox to bind the list of
states to the component #1. Notice that the
data collection is created within the <fx:
Declarations/> tag #2. This is extremelyimportant: In Flex 4, any objects that aren’t
directly part of the display list must be
specified within <fx:Declarations/>. This
is where our states data collection must be
declared for the U.S. states ComboBox example
#3.
Wouldn’t it be awesome if any part of
your application could display this list by
calling a single line of code? Okay, that’s
a loaded statement. As you can see in the
main application file provided in Listing 2, it
really does take only one line of code to make
this happen.
Listing 2 demonstrates how the
component is instantiated with MXML
in a Flex application. One advantage of
extending preexisting Flex user-interface
components is that anyone who uses it willFigure 4. This custom component uses a ComboBox to present a list of U.S. states
Listing 1. USStatesComboBox.mxml: ComboBox-based custom component
<?xml version="1.0" encoding="utf-8"?>
<s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/ex/spark"
xmlns:mx="library://ns.adobe.com/ex/mx"
dataProvider="{this.statesCollection}"> #1
<fx:Declarations> #2
<s:ArrayCollection id="statesCollection"> #3
<fx:Object stateCode="AK" label="Alaska"/>
<fx:Object stateCode="AL" label="Alabama"/>
<!-- the rest of the US states -->
</s:ArrayCollection>
</fx:Declarations>
</s:ComboBox>
Cueballs in code and text.
#1 Binds to the data collection
#2 Nonviewable objects go in <fx:Declarations/>
#3 Data collection for the drop-down
ActionScript Development
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 72/107
Understanding Flex 4 components
02/2010 (10) 73
know its general properties and behaviors
as a result of inheritance. In this case, if
they know your simple custom component
is based on a ComboBox, then they also
know your component supports the same
properties, events, styles, and functions as
the Flex ComboBox control.
Simple Spark componentsA visual object on the stage is considered
a Spark component when it inherits the
Spark component architecture by extending
a Spark visual component base class. These
include
• SkinnableContainer
• SkinnableDataContainer
• Group
• DataGroup• MXMLComponent
• ItemRenderer
• SkinnableComponent
• Any Spark library component (for
example, a Spark List)
• UIComponent
If you’re familiar with Flex 3, you may
be wondering about the last item in
the list , UIComponent. Although it
may be a messy way of doing things,
it’s still technically accurate to state
that all visual components in Flex aresubclasses of UIComponent, regardless
of the component library that the
component comes from. Therefore, if a
component that subclasses UIComponent
instantiates a Group, SkinnableContainer,
or SkinnableComponent object to
hold a set of display objects, then
we’d refer to it as a Spark composite
component. Use caution if you must
take this approach, because you may be
causing a needless performance hit by
nesting containers. Most of the time,
subclassing a Spark-specific base classsuch as SkinnableComponent or Group
will suffice, as you’ll see in the examples
that come later. Before we dive into the
examples, though, it’s time for some
discussion on skins and how the Skin
object fits into the picture.
Migration tip
Beware! One of the biggest compatibility
issues that haunted the Flex 4 beta
releases involved placing Spark
components inside a Canvas container.
The problem reared its ugly head in some
unusual ways, even after it was thought
to have been resolved. In one of my own
experiences, the problem caused compile
errors within the Flash Builder beta of
type unknown and source unknown. The
Listing 2. Main application le for USStatesComboBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/ex/spark"
xmlns:mx="library://ns.adobe.com/ex/mx"
xmlns:control="com.fx4ia.view.components.controls.*"
minWidth="955" minHeight="600">
<control:USStatesComboBox id="states" /> #A
</s:Application>
#A Declaration of custom ComboBox component
Listing 3. Example of a skin for a Spark Button
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" #A
xmlns:mx="library://ns.adobe.com/ex/mx"
xmlns:s="library://ns.adobe.com/ex/spark"
xmlns:ai="http://ns.adobe.com/ai/2008" #B
xmlns:d="http://ns.adobe.com/fxg/2008/dt" #C
minWidth="21" minHeight="21">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<!-- FXG exported from Adobe Illustrator. -->
<s:Graphic version="1.0" viewHeight="30"
viewWidth="100" ai:appVersion="14.0.0.367" d:id="mainContainer">
<s:Group x="-0.296875" y="-0.5" d:id="rstGroup"
d:type="layer" d:userLabel="Group One">
<s:Group d:id="secondGroup"> #D
<s:Rect x="0.5" y="0.5" width="100"
height="30" ai:knockout="0">
<s:ll>
<s:LinearGradient x="0.5" y="15.5" scaleX="100" rotation="-0">
<s:GradientEntry color="#ffffff" ratio="0"/>
<s:GradientEntry ratio="1"/>
</s:LinearGradient>
</s:ll>
<s:stroke>
<s:SolidColorStroke color="#0000ff" caps="none"
weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Rect>
< /s:Group>
</s:Group>
</s:Graphic>
<s:Label id="labelElement" horizontalCenter="0" #E
verticalCenter="1" left="10" right="10"
top="15" bottom="2">
</s:Label>
</s:Skin>
#A Skins always extend Skin in Flex 4
#B Namespace declaration for Illustrator graphics
#C Namespace declaration for FXG graphics
#D Group object followed by design
#E Label declaration followed by style information
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 73/10702/2010 (10)74
source of the problem turned out to be a
SkinnableContainer that was instantiated
inside a Canvas. The moral of the story
here is, if you find yourself debugging
and feeling like you’re chasing a ghost,
consider checking your application to see
if you have any Canvas objects before youstart banging your head against the wall.
If you do, try switching the Canvas to a
Group. If that doesn’t fix the problem, I
still suggest leaving the Group in place of
the Canvas beca use I’ve generally found
the Group container to be more reliable
and functional than Canvas.
Skinning with the Spark SkinobjectThe decoupling of display logic is one of the
most valuable architectural enhancements in the Spark library.
Spark skin basics
Imagine you just built an application with a
set of five custom components. If your five
components each extend one of the classes
listed earlier from the Spark library, you
can create an unlimited number of skins
for each of your five custom Spark-basedcomponents and keep them organized in
an entirely separate package or library. You
can then declare a different default skin
for each instance of the same component
or even swap skins on the fly by triggering
an event during runtime from a user-
initiated behavior or sequence. Isn’t that
cool? Listing 3 is an example of a Spark skin
component.
When you create Spark components,
you’ll usually create two classes for every
component. The component class holdsbehavioral logic, such as events that
are dispatched by the component, the
component’s data model, skin parts that
are implemented by the skin class, and view
states that the skin class supports.
The skin class, on the other hand,
is responsible for managing the visual
appearance of the component and visualsubcomponents, including how everything
is laid out and sized. It must also define the
supported view states, graphics, and the data
representation.
Migration tip
FXG stands for Flash XML Graphics and, in
essence, does for MXML what CSS did for
HTML. But FXG has quite a bit more power
under the hood, so although its relationship
to Flash and Flex components can be loosely
compared to the relationship between CSSand HTML, it doesn’t make logical sense
to compare FXG directly to CSS. Many of
the limitations imposed on CSS don’t exist
with FXG. Although it may seem strange
to compare FXG to CSS, FXG theoretically
accomplishes the same thing that CSS does:
It separates layout structure and behavioral
code from design and graphics code. This
makes it easier to create components that
can be quickly and easily integrated into any
application without even having to look at
the component’s code base.
Using metadata
to bind component skins
The component and skin classes must both
contain certain metadata in order for them
to work properly together.
The component class must
• Dene the skin(s) that correspond to it
• Identify skin parts with the [SkinPart]
metadata tag
• Identify view states that are supported
by the component using the
[SkinState] tag
The skin class must
• Use the [HostComponent] metadata tag
to specify the corresponding component
• Declare view states and dene the
appearance of each state
• Dene the way skin parts should appear
on the stage
Let’s look at the three basic essentials of
a skin component in further detail, starting
with the SkinState metadata tag.
Migration tip
Note that skin parts must have the same name
in both the skin class and the corresponding
component class, or your application will
Listing 4. View states are dened directly above the class statement
package
{
import spark.components.supportClasses.SkinnableComponent;
[SkinState("default")] #A
[SkinState("hover")]
[SkinState("selected")]
[SkinState("disabled")]
public class SkinStateExample extends SkinnableComponent
{
public function SkinStateExample()
{
super();
}
}
}
#A SkinState tags precede the class declaration
Listing 5 Controlling custom component state
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/ex/mx"
xmlns:s="library://ns.adobe.com/ex/spark"
xmlns:MyComp="myComponents.*">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label text="Login or Register"
fontSize="14" fontWeight="bold"/>
<MyComp:SkinStateExample currentState="default"/> #A
</s:Application>
#A Use currentState to set the component’s state
ActionScript Development
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 74/107
Understanding Flex 4 components
02/2010 (10) 75
show compile errors or throw runtime
errors.
Custom component view states
The view states that are supported by
a component and its corresponding skin
must be defined by placing a [SkinState] tag for every view state. These tags are placed
directly above the class declaration, as shown
in Listing 4.
You can now control the state of the
component by setting the currentState
property with the component declaration in
MXML, as shown in Listing 5.
Whereas states are defined in
a component’s implementation class and
controlled in the skin, skin parts are defined
in the MXML skin and controlled by the
implementation class.
Defning skin parts
The importance of the [SkinPart] metadata
tag is another critical facet of understanding
the relationship between component classes
and skin classes in the Spark architecture.
As you’ll see in a moment, this metadata
tag is especially useful for creating custom
components.
The implementation of the SkinPart
metadata is simple. First, define skin parts
in the same way as you’d declare objects in
a standard MXML file. For example, if oneof your skin parts was a Spark Button with an
id property of myButton, you’d define it with
the following code:
<s:Button id="myButton" width="100"
height="20" x="0" y="0" />
Next, declare the skin parts in the
component using the [SkinPart] metadata
tag. Make sure that the variable is typed
the same as what you just dened in the
MXML skin and that the id of the object
in the MXML skin matches the name of the
variable in the component. The componentcode for the myButton skin part that you just
saw is illustrated in Listing 6.
Notice the use of the required property
after the SkinPart metadata tag is declared.
Make sure you declare this property because
required is—pardon the pun—required.
You’ve now learned two of the three
essentials of Spark skinning. The third
essential element is tying the component
implementation to the skin using the
HostComponent metadata.
WARNING
In order for your skin part bindings to work,
you must be sure to type the variable the
same as the MXML object definition, and the
variable must be named the same as the id
attribute that’s set on the respective MXML
object definition.
Declaring the host
The last of the three basic essentials to using
skins with custom Spark components is
the declaration of the host component in
the skin. To accomplish this, you use the[HostComponent] metadata tag. An excellent
example of this was provided in the example
skin at the beginning of this section. The code
from Listing 3 that’s used for the declaration
of the host component is provided again in
Listing 7.
You now know how to make a simple
custom component.
Flex 4 is major step forward in theevolution of the technology. Its developers
didn’t just add more features; it was a major
architectural effort to set the foundation of
the Flash platform going forward. Flex 4’s
Spark components are the next generation
of Flex components, so having a good
understanding of their architecture is
essential to being a successful Flex developer.
Listing 6. The SkinPart tag binds component variables to MXML skin part denitions.
public class CustomComponent extends SkinnableComponent
{
public function CustomComponent()
{
super();
}
[SkinPart(required="true")] #A
public var myButton:Button;
}
#A SkinPart metadata binding on the myButton variable
Listing 7. Use HostComponent metadata to bind a skin to a component class.
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
©Manning Publications Co. Please post
comments or corrections to the Author
Online forum: http://www.manning-
sandbox.com/forum.jspa?forumID=572
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 75/10702/2010 (10)76
FLEX
Real Time Systems, Instant Messaging,and the Flash PlatformReal-time and embedded systems (RTE systems) must
execute in a much more constrained environment
than traditional computer systems such as desktop and
mainframe computers. RTE systems must be highly
efficient, optimally utilizing their processor and
memory resources, and yet must often outperform
systems with significantly more computing power. In
addition, many RTE systems have to be scalable, easy
to maintain and open to extension. Real-time systems
are NOT a well-defined class of systems, what I meanis that all criteria for distinguishing real time from
nonreal time in the real world are artificial and depend
on what we decide to consider real time.
We can consider a Real Time System any system
in which the time at which output is produced
is significant. This is usually because the input
corresponds to some movement in the physical world,
and the output has to relate to the same movement.
The lag from input time to output time must be
sufficiently small for acceptable timeliness.
If you look right now to the traffic over the net you
can see that over the 60% is instant messaging (IM)
traffic, the IM systems are the most diffused real timesystems.
The digital life of millions of people is based upon
IM software, there are dozens of public IM services,
companies ranging from the leading software
developer, Microsoft, to the leading web application
developers, Yahoo and Google, offer free IM services.
To make sure you use them, they also develop IM
clients that work across platforms from Microsoft
Windows, Apple Mac OSX, and Linux, mobile phone
and PDA.
Like it or not, instant messaging appeared also in the
enterprise and is here to stay. But rather than being on
the back foot, it's time for all corporations, both big
and small, to come forth and embrace this technology.
IM can increase connectivity within the realm
of your business and have a positive impact on
productivity but can also represent a time consuming
stuff.
The growth of IM usage represents a great
opportunity for all the developers because there are
right now two separate markets (entertainment and
enterprise) that are continuously searching for new
IM applications. Let’s look to the enterprise market.
Now that companies are beginning to acknowledge
the issue of employees using IM during company hours,
they face a difficult choice. Blocking IM also stops
employees from using it as a means to communicate
with clients or other employees. Thankfully, several
organizations aren't opting for this easy way out.
In my personal experience, more and morecompanies are trying not to curb the proliferation of
IM, but are rather taking steps to manage its use and
looking for ways to use it to increase productivity and
make communication easier (a good example is the
IDE Talk panel of IntelliJ IDEA that allow developers
to collaborate in real time on the same pieces of code).
By bringing the Enterprise Instant Messaging (EIM)
infrastructure in-house, with an EIM server, a business
can truly manage IM sessions, completely eradicating
concerns about security and privacy.
As with any good server application, an EIM system
is also designed to function like any other enterprise
application, offering centralized management,and directory and user integration with corporate
directory systems such as Lightweight Directory Access
Protocol (LDAP).
Since the release of Flash Communication Server
1.0 (right now named Flash Media Server 3.5) real
time applications built upon the Flash Platform
started to grow up and to catalyze the interest of
developers.
Few years after the release of the FCS a group of
developers released the open source project RED5, a
java solution that have almost the same features of the
Flash Media Server. As a result all the developers that
were afraid about licensing costs started to offer their
customers real time applications.
One year ago Adobe announced plans to publish
the Real-Time Messaging Protocol (RTMP) specification,
which is designed for high-performance transmission
of audio, video, and data between Flash Platform based
Flex and Jabber
The widely adopted open protocol for instant messaging XMPP (alsocalled Jabber) is a de facto standard used in various instant messagingsystems. The aim of this article is to show how easy and fast it is tocreate a real time application using this protocol that relies on a restfularchitecture.
What you will learn…
• XMPP protocol building blocks
• Real Time applications with Flex
and XMPP
What you shouldknow…• Flex application fundamentals
• Real time system fundamentals
Level of difficulty
by Giorgio Natili
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 76/107
Flex and Jabber
02/2010 (10) 77
products and that is the building blocks of
the communication between clients both for
the FMS and RED5.
During the last Adobe Max the Live Cycle
Collaboration Services have been announced
and right now developers can easily create
a real-time application with the SDK and the tools available on the official web site https://
cocomo.acrobat.com/ .
It’s quite evident how much is active
the real-time applications micro cosmos,
since a couple of years several ActionScript
libraries for Jabber have been released (http://
xmpp.org/software/libraries.shtml ) and also
this protocol have to be carefully considered
when an organization is planning to develop
a real time system.
The Jabber protocol (XMPP)One of the most interesting feature of XMPP
is that is based upon the routing of XML data
so that the protocol is really platform and
language independent.
The web site http://xmpp.org/ is the best
place to start your studies and to search for
information, what impressed me since the
first look was the amount of libraries that
are available for each different programming
language http://xmpp.org/software/libraries.shtml
and the servers available right now to handle
data transfer based over the XMPP protocol
http://xmpp.org/software/servers.shtml .A network based on XMPP uses a client-
server architecture (i.e. clients do not talk
directly to one another) but in a decentralized
way. There is no central authoritative server,
as there is with services such as AOL Instant
Messenger or Windows Live Messenger,
anyone may run their own XMPP server on
their own domain and start to communicate
with this protocol.
Every user on the network has a unique
Jabber ID (usually abbreviated as JID), to
avoid the need for a central server with
a list of IDs, the JID is structured likean e-mail address with a username and
a DNS address for the server where that user
resides separated by an at sign (@), such as
Another useful feature of the XMPP
system is that of transports, also known
as gateways, which allow users to access
networks using other protocols. Several
XMPP servers provide plugins to connect
also with other IM clients like IRC, ICQ,
Google Talk, etc.
The main strengths of XMPP are
• It’s open: the XMPP protocols are free,
open, public, and easily understandable;
in addition, multiple implementations
exist in the form clients, servers, server
components, and code libraries
• It’s a standard: the Internet Engineering
Task Force (IETF) has formalized the core
XML streaming protocols as an approved
instant messaging and presence technology
• It’s proven and stable: the rst Jabber/
XMPP technologies were developed
by Jeremie Miller in 1998 and are nowquite stable, hundreds of developers are
working on these technologies, there
are tens of thousands of Jabber servers
running on the Internet today, and
millions of people use XMPP for instant
messaging through public services such
as Google Talk
• It’s decentralized: the architecture of
the XMPP network is similar to email;
as a result, anyone can run their own
XMPP server, enabling individuals and
organizations to take control of theircommunications experience
• It’s secure: any XMPP server may be isolated
from the public network and moreover
robust security using SASL and TLS has
been built into the core XMPP specications
Figure 1. XMPP communication workfo w
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 77/10702/2010 (10)78
• It’s extensible: using the power of XML,
anyone can build custom functionality
on top of the core protocols, to maintain
interoperability, common extensions
are published in the XEP series, but
such publication is not required and
organizations can maintain their ownprivate extensions if so desired
Rather than documents, XMPP deals in
XML streams (containers for exchanging
XML elements between any two entities over
a network) and stanzas (the rst-level child
elements sent over those streams). As you
might guess, an XMPP server’s core functions
are to manage streams and route stanzas.
Given that most XML streams are
negotiated over long-lived TCP connections
and that XML stanzas are simply first levelchild elements, we might say that a minimal
XMPP implementation needs to do only
two things: maintain TCP connections and
incrementally parse XML. In XMPP, one's
contact list is called a roster, which consists
of any number of specific roster items, each
roster item being identified by a unique JID
(usually of the form <contact@domain>). The
user’s server on the user’s behalf stores a user’s
roster so that the user may access roster
information from any resource. The typical
workflow of communication using XMPP can
be summarized as following (Figure 1)
• The Actor 1 negotiate a stream with his
server
• The Actor 1 retrieves his contact list
• The Actor 1 sends his presence that is
broadcasted to all his contacts from the
server
• The Actor 1 receives a list of online
contacts (i.e. a roster)
• The Actor 1 and another Actor start to
exchange messages
Message stanzas qualied by the jabber:
client or jabber:server namespace
are used to push information to another
entity. Common uses in instant messaging
applications include single messages,
messages sent in the context of a chat
conversation, messages sent in the context ofa multi-user chat room, headlines and other
alerts, and errors.
A message is an XML chunk, this is
the reason why XMPP is so flexible and
extendible, it seems to really fit the needs of
any architecture and especially the needs of
a restful architecture.
RESTful architectureREST stands for the Representation State
Transfer and is an architectural model for
creating web services. REST describes anarchitecture focused on resources.
REST architecture applies web services on
the web, while REST is not a standard, it uses
the following standards
• HTTP (Hypertext Transfer Protocol )
• URI (Uniform Resource Identier )
• XML/HTML/GIF/JPEG.
Basically REST supposes to build a web
service using HTTP, XML and URI as the
web was built. Because it is not sufciently
detailed to dene the actual architecturewe will tell about that REST that it is an
architectural style.
The Web is a real example of architecture
which is broadly in REST rules. To
understand these rules we must have
a picture of architecture without constraints.
In REST architecture there are two important
features:
• Data on which the client tells the server
to operate are in URI
• Operation the server makes on data it is
described directly by the HTTP method
The benet of this kind of architectures
is that the data driven out can be used by
several consumer like the Flash Player, Java,
HTML pages, etc. Most of the time happens that this exibility is misused and systems
based on REST start to be not scalable and
difcult to maintain.
We could obtain a RESTful compliant
architecture by an existing SOA simply
by mapping services into resources (e.g.
mapping the existing OGC services interfaces
into the common resource interface) with no
others resource types foreseen in the derived
architecture.
One of the key point of a RESTful architecture
is that layered components (intermediaries, suchas proxy servers, cache servers, gateways, etc.)
can be inserted between clients and resources
to support performance, security, etc. and that
each request from client to server must contain
all the information necessary to understand
the request, and cannot take advantage of any
stored context on the server. It seems to me
that the XMPP standards totally fit the needs of
a RESTful architecture.
Flex and Jabber,a practical approach
In order to start to play with Flex and theXMPP protocol you have to select the server
you prefer and install it.
My choice is Open Fire (http://
www.igniterealtime.org/ ), the main reasons
are:
• It’s fully compliant to the standards
• It’s very easy to install
• It’s able to work with several databases
in addition to the built-in one (it
supports MySQL, PostgressSQL, Oracle,
SQLServer and IBM DB2)
• It can interact with OpenLDAP and / orActive Directory
• It’s able to track all the IM trafc and
store it as XML les
• It has a great log panel
• It’s able to administer easily chats and
rooms
• Options allow control over room
moderation, maximum occupancy,
presence information, and more
• There is a good ActionScript library that
can interact with Open Fire
In order to setup your environment you
have to follow the wizard provided with
the Open Fire installer (I suggest to keep in
place the built-in database and the default
settings) and then you are able to login on
your localhost to the administrative console.Figure 2. Sample application layout
FLEX
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 78/107
Flex and Jabber
02/2010 (10) 79
Listing 1. The view
<mx:Panel width="30%" title="Authenticate" left="5" top="5">
<mx:Form width="100%" id="inputForm">
<mx:FormItem width="100%" label="Authentication Method:">
<mx:ComboBox id="method" change="handleMethodChange()">
<mx:dataProvider>
<mx:Array>
<mx:Object label="Anonymous" value="ANONYMOUS" />
<mx:Object label="Plain" value="PLAIN" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem width="100%" label="Server:">
<mx:TextInput width="100%" id="server" text="{SERVER_DEFAULT}" />
</mx:FormItem>
<mx:FormItem width="100%" label="Username:"><mx:TextInput width="100%" id="username" text="gino" enabled="false" />
</mx:FormItem>
<mx:FormItem width="100%" label="Password:">
<mx:TextInput width="100%" displayAsPassword="true" text="latino" id="password" enabled="false" />
</mx:FormItem>
</mx:Form>
<mx:HBox width="100%" horizontalAlign="right" paddingRight="18" paddingBottom="10">
<mx:Button label="Connect" id="connectButton" click="connect()" />
<mx:Button label="Disconnect" id="disconnectButton" click="disconnect()" enabled="false" />
</mx:HBox>
</mx:Panel>
<mx:Label id="userID" y="230" text="Here the uinque OF id will appear..." fontWeight="bold" left="5"/>
<mx:Label y="253" text="Available chat services" left="5" /><mx:List id="chatServices" labelField="jid" y="273" left="5" width="30%" change="recoverChats(event)" height="100"/>
<mx:Label y="379" text="Available persistent chats" left="5"/>
<mx:List id="persitenteChats" labelField="name" change="chatDetails(event)" y="399" left="5" width="30%" height="100"/>
<mx:Label y="503" text="Room essentials information" left="5"/>
<mx:TextArea id="roomDetails" y="523" left="5" width="30%" height="100"/>
<mx:Button label="::: join the selected room :::" y="627" left="5" width="30%" click="joinRoom()"/>
<mx:Button label="::: leave the selected room :::" y="654" left="5" width="30%" click="leaveRoom()"/>
<mx:TextInput y="682" left="5" width="30%" id="roomName"/>
<mx:Button label="::: create new room :::" y="710" left="5" width="30%" click="createTemporaryRoom()"/>
<mx:Button label="::: destroy room :::" y="736" left="5" width="30%" click="destroyTemporaryRoom()"/>
<mx:Label y="10" text="Users list" right="5" fontWeight="bold"/>
<mx:DataGrid id="usersList" right="5" top="35" enabled="false" width="40%" height="150"/>
<mx:Button y="188" label="Add as a friend" click="addUserAsFriend()" right="5" enabled="false" id="addFriend"/>
<mx:ComboBox id="userStatus" dataProvider="{ChatManager.PRESENCE_VALUES}" change="updateStatus(event)" y="429" right="5"
enabled="false" width="40%" />
<mx:Label y="220" text="Friends list" right="5" fontWeight="bold"/>
<mx:DataGrid id="friendsList" right="5" top="245" enabled="false" width="40%" height="150"/>
<mx:Button y="398" label="Remove friend" right="5" click="removeUserAsFriend()" enabled="false" id="removeFriend"/>
<mx:TextArea id="roller" y="460" width="40%" right="5" height="100" enabled="false"/>
<mx:HBox width="40%" y="570" right="5">
<mx:TextInput id="msg" width="80%" enabled="false"/>
<mx:Button id="send" label="send" width="20%" click="chatManager.sendMessage(msg.text);msg.text = ''" enabled="false"/>
</mx:HBox>
<mx:HBox width="40%" y="600" right="5">
<mx:TextInput id="requestFrom" width="80%" enabled="false"/>
<mx:Button id="accept" label="accept" width="20%" click="handleRequest(true)" enabled="false"/>
<mx:Button id="deny" label="deny" width="20%" click="handleRequest(false)" enabled="false"/>
</mx:HBox>
<mx:TextArea y="630" right="5" width="40%" height="60" id="requestsLog" enabled="false"/>
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 79/10702/2010 (10)80
Create a new Flex project with you
favorite IDE and add the XIFF library (http://
www.igniterealtime.org/downloads/download-
landing.jsp?file=xiff/xiff_3_0_0-beta1.zip ) to
the project.
As you can see the XIFF library is very
reach and it supports more or less all the
features of the XMPP protocol.
In a project I worked on, the first reaction
of some junior developers to the XIFF
library and to the restful architecture you
can get with the XMPP protocol was to stop
the development in order to study all the
protocol and the server we are using for the
project.
Listing 2. Initialization of the ChatManager and of the RealTimeManager
override protected function childrenCreated():void {
super.childrenCreated();
connectionType = "ANONYMOUS";
chatManager = new ChatManager();
chatManager.addEventListener(RoomUsersEvent.JOINED, onRoomJoin);
chatManager.addEventListener(RoomUsersEvent.LEFT, onRoomLeft);
chatManager.addEventListener(RoomUsersEvent.PRESENCE, onRoomPresence);
chatManager.addEventListener(FriendsEvent.LIST_RECOVERED, onFriendsList);chatManager.addEventListener(ChatMessageEvent.GROUP_MESSAGE, onGroupMessageReceived);
chatManager.addEventListener(FriendsInvitation.FRIEND_ADD_NOT_SUPPORTED, onFriendsNotSupported);
chatManager.addEventListener(FriendsInvitation.FRIEND_REQUEST_INCOMING, onFriendsRequest);
chatManager.addEventListener(FriendsInvitation.FRIEND_REQUEST_DENIED, onFriendsRequestDenied);
chatManager.addEventListener(FriendsInvitation.FRIEND_REQUEST_ACCETPED, onFriendsRequestAccepted);
chatManager.addEventListener(FriendsInvitation.FRIEND_LIST_REMOVED, onFriendsListRemoved);
chatManager.addEventListener(PersonalRoomEvent.ROOM_CREATED, onPersonalRoomCreated);
chatManager.addEventListener(PersonalRoomEvent.ROOM_EXISTS, onPersonalRoomExists);
chatManager.addEventListener(PersonalRoomEvent.ROOM_DESTROYED, onPersonalRoomDestroyed);
realtimeManager = new RealtimeManager();
realtimeManager.init(5222, "xiff");
realtimeManager.addEventListener(UserAccessEvent.LOGIN, onUserLogin);
realtimeManager.addEventListener(OpenFireErrorsEvent.ERROR, onOpenFireError);
}
Listing 3. Handler of the RoomUsersEvent.JOINED event
private function onRoomJoin(e:RoomUsersEvent):void {
usersList.enabled = userStatus.enabled = roller.enabled = msg.enabled = send.enabled = friendsList.enabled = true;
requestsLog.enabled = accept.enabled = requestFrom.enabled = deny.enabled = true;
removeFriend.enabled = this.addFriend.enabled = true;
usersList.dataProvider = e.usersList;
}
Listing 4. Handler of the RoomUsersEvent.LEFT event
private function onRoomLeft(e:RoomUsersEvent):void {
usersList.enabled = userStatus.enabled = roller.enabled = msg.enabled = send.enabled = friendsList.enabled = false;
requestsLog.enabled = accept.enabled = requestFrom.enabled = deny.enabled = false;
removeFriend.enabled = this.addFriend.enabled = false;
usersList.dataProvider = null;
friendsList.dataProvider = null;
}
FLEX
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 80/107
Flex and Jabber
02/2010 (10) 81
This reaction brought me to write down
a driver in order to deal with the XIFF library
and the XMPP protocol in order to avoid any
panic in the development team and in order
to avoid time loosing over concept that was
behind the scope of the project itself.
Let’s think to this driver as a layercomponent that hides the complexity and
the richness of the XIFF library to make
things easier.
In order to show you how it works I created
a very simple application with the following
features
• Anonymous and registered login
• Chat services discovery
• Personal chat room creation and
destruction
• Room users list• Friends request support (accept and deny)
• Messages broadcast
The user interface of this demo is quite
simple and easy to understand see (Figure 2).
The driver is made up several classes, events
and value objects but I guess it’s really simple
to use because the two most important files
you have to know are two interfaces and
a class used to discover the available services
• IRealTime
• ServiceBrowser
• IChatControls
The rst one is the responsible of the
connection to the XMPP server and of
the initialization of the communication
between the client and the server.
The available methods are
• init(port:int, resource:String):void;
// initialize the connection over
a specic port and
// send the appropriate resource type
the XIFF library
• connect(domain:String, anonymous:
Boolean, user:User = null):void;
// connect to a specic domain using
anonymous login or an User object
that is made up by username and
password
• disconnect():void;
// self explanatory
• keepAlive(live:Boolean):void;
// keep the connection with the server
alive also
// after long period of inactivity
• connection():XMPPConnection
// return the established connection
instance
• s t a r t R e a l t i m e ( r o o m:
OpenFireRoomEssentials):void
// create or join an existing room
The class that implements this interface
is the RealtimeManager, each instance of
the class is able to dispatch some events, to
keep things easy to understand the class
actually wrap some events dened in the
XIFF library using a custom event class, the
dispatched events are
• UserAccessEvent.CONNECTED
• UserAccessEvent.LOGIN
• UserAccessEvent.LOGOUT
The ServiceBrowser class is the responsible to
discover the chat services, the rooms dened
on each service and the details of each room.
Listing 5. Handler of the RoomUsersEvent.PRESENCE event
private function onRoomPresence(e:RoomUsersEvent):void {
trace("Current user", e.userData.jid, "status:", e.userData.show,
e.userData.status)
}
Listing 6. Handler of the FriendsEvent.LIST_RECOVERED event
private function onFriendsList(e:FriendsEvent):void {
friendsList.dataProvider = e.freindsList;
}
Listing 7. Handler of the ChatMessageEvent.GROUP_MESSAG event
private function onGroupMessageReceived(e:ChatMessageEvent):void {
roller.text += "[" + e.from + " @ " + (e.lastMessage.time || "") + "]:" +
e.lastPlainMessage + "\n";
callLater(scrollText, [roller]);
}
Listing 8. Handler of the FriendsInvitation.FRIEND_ADD_NOT_SUPPORTED event
private function onFriendsNotSupported(e:FriendsInvitation):void {
Alert.show("Chat not congured for friends support...", "Attention!");
}
Listing 9. Handler of the FriendsInvitation.FRIEND_REQUEST_INCOMING event
private function onFriendsRequest(e:FriendsInvitation):void {
currentRequestId = e.jid;
requestFrom.text = "Friend request from " + e.jid.bareJID + ", accept?\n";
}
Listing 10. Handler of the FriendsInvitation.FRIEND_REQUEST_DENIED event
private function onFriendsRequestDenied(e:FriendsInvitation):void {
requestsLog.text += "Friend request from " + e.jid.bareJID + ", DENIED!!!!!!!!\n";
callLater(scrollText, [requestsLog]);
}
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 81/10702/2010 (10)82
All the information are made available
through some events, the events dispatched
from the ServiceBrowser class are
• AvailableRoomsEvent
• AvailableServicesEvents
• DetailRoomEvent
Each event provides the information about the
services available on the server, the rooms that
are active on a specic service and the detail of
a specic room (needed in order to launch the
realTime method). The last interface you have
to know is the IChatControls, the methods
defined by this interface are
• updatePresence( show:String,
status:String ):void;
// send to the roster the user status
• joinRoom(room:Room, jid:
UnescapedJID):void;
// join a specic room and using the
JID initialize the loading of the roster
// and the set up of the room
• isValidJID( jid:UnescapedJID):
Boolean;
// check if the JID is valid or not
• sendMessage(message:String = null,
html:String = null):void;
// send a message in the joined room,
it supports both html and plain text
• sendMessageTo(text:String, tojid:
EscapedJID):void;
// send a message to a specic user
•createRoom(room:Room):void;
// create a personal room
• destroyRoom(room:Room, reason:
String = null):void;
// destroy the personal room the user
has created
• leave():void;
// allow the user to leave the current
room
• invite(userId:EscapedJID):void;
// invite a specic to the personal room
• addFriend(user:RoomOccupant):void;
// add an user as a friends to the
user roster• removeFriend( user:RosterItemVO ):
void;
// remove a specic user from the
friends list
• grantSubscription(id:UnescapedJID,
status:Boolean = true):void;
// grant to an user the request of
subscription to the friends list
• denySubscription(id:UnescapedJID):
void;
// deny the subscription to a specifc user
• personalRoom():Room;
// recover the personal room created
by the user
• dispose();
// free the memory and the event listener
The class that implements this interface is
the ChatManager, the class is able to dispatch
events in order to spread the data recovered
and managed internally, and the events are
• F r ie n d sI n v it at io n.F R IE N D _
REQUEST _ INCOMING
• FriendsEvent.LIST _ RECOVERED
• F r ie n d sI n v it at io n.F R IE N D _
REQUEST _ DENIED
• F r ie n d sI n v it at io n.F R IE N D _
REQUEST _ ACCETPED
• Friend sInvitation.FRIEND _ LIST _
REMOVED
Listing 11. Handler of the FriendsInvitation.FRIEND_REQUEST_ACCETPED event
private function onFriendsRequestAccepted(e:FriendsInvitation):void {
requestsLog.text += "Friend request from " + e.jid.bareJID + ", accepted!!!!!!!!\
n";
callLater(scrollText, [requestsLog]);
}
Listing 12. Handler of the FriendsInvitation.FRIEND_LIST_REMOVED event
private function onFriendsListRemoved(e:FriendsInvitation):void {
requestsLog.text += "Removed from " + e.jid.bareJID + ", friend list!!!!!!!!\n";
callLater(scrollText, [requestsLog]);
}
Listing 13. Handler of the PersonalRoomEvent.ROOM_CREATED event
private function onPersonalRoomCreated(e:PersonalRoomEvent):void {
Alert.show("Your personal room has been created....", "Attention!");
}
Listing 14. Handler of the PersonalRoomEvent.ROOM_EXISTS event
private function onPersonalRoomExists(e:PersonalRoomEvent):void {
Alert.show("Sorry, you can have only one personal room....", "Attention!");
}
Listing 15. Handler of the PersonalRoomEvent.ROOM_DESTROYED event
private function onPersonalRoomDestroyed(e:PersonalRoomEvent):void {
Alert.show("Sorry, the room you are chatting has been destroyed....",
"Attention!");
}
Listing 16. Handler of the OpenFireErrorsEvent event
private function onOpenFireError(e:OpenFireErrorsEvent):void {
if (e.errorCode == 401) {
userID.text = "wrong credentials";
}
}
FLEX
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 82/107
Flex and Jabber
02/2010 (10) 83
• ChatMessageEvent.GROUP _ MESSAGE
• PersonalRoomEvent.ROOM _ DESTROYED
• RoomUsersEvent.JOINED
• RoomUsersEvent.LEFT
• RoomUsersEvent.PRESENCE
Like for the RealtimeManager class theseevents wrap some events dened in the
XIFF library in order to keep things a little
bit simpler and to avoid those concepts like
rosters, persistent rooms, etc. start to be
a problem during the development.
Now you know everything you need
to start to use this driver that keep things
simpler and easier to understand.
Come back for one moment to the image
that shows up the user interface of our
application, and let’s start to examine what
we have to do to make it working.In order to set up our application we have
to put in place the following workflow
• Create an instance of the IChatControls
interface implementer
• Create an instance of the IRealTime
interface implementer
• Dene the listeners for the
UserAccessEvent.LOGIN event
• Create an instance of the ServiceBrowser
class in the UserAccessEvent.LOGIN
handler and recover the services available
through thecurrentServices() method• Handle through the user interface the
data propagated through the events of
the ServiceBrowser class
• Invoke the joinRoom() method of the
IChatControls interface implementer
Create a new Flex application, add the
XIFF library to your libs folder and grab the
source code of the driver you can get here
http://www.mxml.it/tutorials/xiffdriver.zip.
First of all define the user interface in the
main MXML file of the project see (Listing 1).
Open a script tag and start to define theconstants used inside the application
private const SERVER_DEFAULT:String =
"wip.gnstudio.com";
private const PERSONAL_ROOMS_SERVICE:
String = "conference";
private const PERSONAL_ROOM_SUFFIX:String
= "presenter";
the rst one represents the address of your
Open Fire installation, the second one is
the name of the service on which personal
rooms will be created and the third one is
the sufx will be added to all the personal
rooms name.
Create the class members you need to
store an instance of the 3 main actors of the
application
private var realtimeManager:IRealtime;
private var chatManager:IChatControls;
private var serviceBrowser:ServiceBrowser;
and the class members needed to store
the details of the room the user is going to
join, the unique identier provided from the XMPP server (Inject this in the chat
manager to perform all the operation related
to a user) and the unique identier of the
user that perform a friend request
private var roomDetailsInfo:
OpenFireRoomEssentials;
private var currentRequestId:UnescapedJID;
private var unescapedJID:UnescapedJID;
In order to start to play with the driver
classes perform the override of the
childrenCreated method and dene
here both the instances of the IRealTime implementer and of the IChatControls
implement and the event handlers needed
to manage the data propagated from this
classes see (Listing 2).
Let’s start to explore one by one all
the methods registered as listeners in the
childrenCreated method.
Listing 17. Handler of the login event and initialization of the ServiceBrowser
private function onUserLogin(e:UserAccessEvent):void {
userID.text = "logged as " + e.username;
unescapedJID = e.unescapedJID;
var serverJID:EscapedJID = new EscapedJID(e.unescapedJID.domain);
serviceBrowser = new ServiceBrowser(serverJID, realtimeManager.connection);
serviceBrowser.addEventListener(AvailableServicesEvents.SERVICES_RECOVERED,
onAvailableServices);
serviceBrowser.addEventListener(AvailableRoomsEvent.ROOMS_RECOVERED,
onAvailableRooms);
serviceBrowser.addEventListener(DetailRoomEvent.ROOM_DETAILS, onDetailRoom);
serviceBrowser.currentServices();
connectButton.enabled = false;
disconnectButton.enabled = true;
realtimeManager.keepAlive = true;
}
Listing 18. Handling of the services, rooms and room information
private function onAvailableServices(e:AvailableServicesEvents):void {
e.target.removeEventListener(e.type, arguments.callee);
chatServices.dataProvider = e.currentServices;
}
private function onAvailableRooms(e:AvailableRoomsEvent):void {
persitenteChats.dataProvider = e.currentRooms;
}
private function onDetailRoom(e:DetailRoomEvent):void {
roomDetailsInfo = e.details;
}
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 83/10702/2010 (10)84
Listing 19a. Methods invoked from the UI controls
private function handleRequest(status:Boolean):void {
if (status) {
chatManager.grantSubscription(currentRequestId, true);
} else {
chatManager.denySubscription(currentRequestId);
}
currentRequestId = null;
}
private function
chatDetails(e:ListEvent):void {
var jid:EscapedJID = new EscapedJID(e.itemRenderer.data.jid);
serviceBrowser.roomDetails(jid)
}
private function recoverChats(e:ListEvent):void {
var jid:EscapedJID = new EscapedJID(e.itemRenderer.data.jid);
serviceBrowser.currentChatRooms(jid)
}
private function leaveRoom():void {
chatManager.leave()
}
private function joinRoom():void {
chatManager.joinRoom(realtimeManager.startRealtime(roomDeta
ilsInfo), unescapedJID);
}
private function updateStatus(e:ListEvent):void {
var item:Object = e.currentTarget.selectedItem;
chatManager.updatePresence(item.label, item.data);
}
private function removeUserAsFriend():void {
chatManager.removeFriend(friendsList.selectedItem as
RosterItemVO);
}
private function addUserAsFriend():void {
chatManager.addFriend(usersList.selectedItem as
RoomOccupant);
}
private function handleMethodChange():void {
if (method.selectedItem.value != "ANONYMOUS") {
username.enabled = true;
password.enabled = true;
} else {
username.enabled =false
;password.enabled = false;
}
connectionType = method.selectedItem.value;
}
private function connect():void {
if (connectionType == "ANONYMOUS") {
realtimeManager.connect(server.text, true);
} else {
var user:User = new User();
user.username = username.text;
user.password = password.text;
realtimeManager.connect(server.text, false, user);
}
}
private function destroyTemporaryRoom():void {
if (chatManager.personalRoom) {
chatManager.destroyRoom(chatManager.personalRoom);
}
}
private function createTemporaryRoom():void {
var roomDetails:OpenFireRoomEssentials = new OpenFireRoomEs
sentials();
roomDetails.name = PERSONAL_ROOM_SUFFIX + roomName.text;
roomDetails.category = PERSONAL_ROOMS_SERVICE;
FLEX
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 84/107
Flex and Jabber
02/2010 (10) 85
The onRoomJoin listener Handle the UIenabling it after the user login see (Listing 3).
The onRoomLeft method handle the UI
disabling controls after the user left a room
see (Listing 4).
The onRoomPresence method is the
handler used in order to get the status of
a specific user, in this sample it simply shows
some logs, in a real implementation this is
the method in which you have to update the
status of a specific user in the room users list
see (Listing 5).
The onFriendsList method is the one
that is responsible to populate the list of yourfriends (i.e. the roster) see (Listing 6).
the onGroupMessageReceived method
is the one that handle all the messages sent
against the general chat see (Listing 7).
The onFriendsNotSupported method
is the one that catch the notification that
anonymous users cannot add another user to
their friends list see (Listing 8).
The onFriendsRequest method is theon that handles the friends request that
come from another user storing the unique
identifier of that user and updating the user
interface controls see (Listing 9).
The onFriendsRequestDenied method
is the one that notifies the application that
a friend request have been denied from
another user see (Listing 10).
The onFriendsRequestAccepted method
notifies the application that a friend request
has been accepted see (Listing 11).
The onFriendsListRemoved method is
the handler of the event that notifies theapplication that a user has been removed
from the friends list see (Listing 12).
The onPersonalRoomCreated method
simply shows up an Alert to notify the
application that the personal room has been
created see (Listing 13).
The onPersonalRoomExists method is the
handler that notify the user that his personal
room already exists and that another one
cannot be created (actually this is not a limit
of XMPP but only a feature of the driver that
doesn’t allow more than one personal room
per user) see (Listing 14).
The onPersonalRoomDestroyed method
handle the notifications that the personalroom an user joined has been destroyed see
(Listing 15).
The onOpenFireError method is the
handler of all the errors; in this sample
implementation it handles only the 401
error code that means that a registered user
has inserted wrong username and password
see (Listing 16).
The on method handle the anonymous
or registered login and initialize the
ServiceBrowser instance and all the listeners
needed to recover the information from this class, it’s important to notice here that
the realtimeManager instance is finally
connected, that the keepAlive property is set
to true and that the ServiceBrowser instance
use the connection to the server to start to
explore the available services see (Listing 17).
The listeners registered to the events
dispatched from the ServiceBrowser are
the one that populate the controls of the
user interface (i.g. the list of services and of
the list of available rooms) and that store the
information about the room the user is going
to join see (Listing 18).All the building blocks needed to handle
the real time communication provided
through XMPP are now in place, the
following code list represent all the methods
called from the user interface and it’s self
explanatory, you will be now able to run
the application against your Open Fire
installation see (Listing 19).
ConclusionReal time applications are really engaging
both for the end user and for a developer.
Sometimes people are scared of the difficultiesin creating this type of application, but, as
you have seen in this article, in order to start
to play with it no rocket science is needed.
The XMPP standard is not the only one
available for the Flash Platform, the great
advantages that comes from this standard
is that you can handle several client side
applications (developed with different
technologies) with the same back end logic.
GIORGIO NATILIGiorgio is the techincal leader and main
developer @ GNstudio.com an italian company
that relies on the agile prcatices. More info about
Giorgio can be found on www.mxml.it.
On the 'Net
• Adobe opens the RTMP protocol http://www.adobe.com/aboutadobe/pressroom/ pressreleases/200901/012009RTMP.html
• XMPP protocol http://xmpp.org/rfcs/rfc3921.html
• LiveCycle collaboration services http://www.adobe.com/devnet/ashplatform/services/
collaboration/
• Open Fire community http://www.igniterealtime.org/community/index.jspa
• XIFF ActionScript library http://www.igniterealtime.org/downloads/index.jsp
Listing 19a. Methods invoked from the UI controls
chatManager.createRoom(realtimeManager.startRealtime(roomDetails));
}
private function disconnect():void {
realtimeManager.disconnect();
chatManager.dispose();
connectButton.enabled = true;
disconnectButton.enabled = false;
chatServices.dataProvider = [];
persitenteChats.dataProvider = [];
usersList.enabled = userStatus.enabled = roller.enabled = msg.enabled =
send.enabled = friendsList.enabled =false
;requestsLog.enabled = accept.enabled = requestFrom.enabled = deny.enabled = false;
removeFriend.enabled = removeFriend.enabled = false;
}
internal function scrollText():void {
arguments[0].verticalScrollPosition = roller.verticalScrollPosition + 8;
}
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 85/10702/2010 (10)86
PureMVC
I'm a big fan of PureMVC; I've worked with
a number of the more well-known MVC
frameworks in Flash/Flex, but never found the
balance of simplicity and robustness I was looking
for anywhere else. I also prefer to do all my logic in
ActionScript, using MXML only for view markup, so
again, PureMVC is a natural fit.
No framework is perfect though; sooner or later,
you'll run into something that seems to fall outside
that prescribed framework paradigm. Since most
programmers are on tight schedules, figuring out these
non-straightforward issues can be too time consuming.So, you burn up a helper class, try to loosely couple it as
a singleton or some such, maybe some static methods,
mark it up with an apologetic TODO, and move on.
Sooner or later, another programmer runs into the same
problem, sees how you implemented it, and follows suit.
You've now got an unremovable plumbing fixture sticking
out of an impromptu hole in your living room wall, and
people are starting to run other pipes to and from it.
In PureMVC, I see this plumbing debacle usually
take the form of a ViewHelper and/or a DataHelper,
usually extending Mediator, with methods like,
public function getView ( name : String ) :
Object, and public function getModel ( name :
String ) : Object. The reason is pretty much always
the same, I've heard it a number of times:
PureMVC needs all views tied to a mediator, which is
how you request models, send and receive notifications,
etc. That's too rigid, because many of my views are created
dynamically, so won't have mediators. A ViewHelper and
a DataHelper that extends Mediator allows me to access
other views and data without a mediator so that I still get
the benefit of PureMVC's structure in a more flexible way.
It seems to solve the problem, but again, it's force-fit
plumbing, and sooner or later, when it starts to leak
– and it eventually will, because you're tying views
together by reference, which makes your project brittle
– you'll rue the day you let it creep into your code.
Fortunately, there's an answer. No matter when or
how your view is created, the PureMVC framework
can be applied straightforwardly. In this example,
I'll take on one of the most common dynamically
created views in a Flex app, which is also the view that
I see people struggling with the most in the context of
PureMVC: list item renderers in dynamically created
containers.
Item renderers work in conjunction with a List
component's data provider to display data. Typically,
you create a single MXML component, with a couple
of sub components in it, like a checkbox and an
image control, and assign it to a List component's
item renderer property. You then take a collection
of objects, like an array, and set it to the same List
component's dataProvider property. At runtime, thedata binds, and the List component displays as many of
the renderers as it needs to display all the items in the
array. Talk about a timer saver.
You usually want each of those item renderers to have
some event or other intelligence though; when one is
clicked, you might want a service call to kick off, or when
a subcomponent is used, like a checkbox selection.
Furthermore, what if the List component is in
a view that was not created at design time; it was
created at runtime as, say, a dialog box? So, now we
have this not uncommon hierarchy:
• A top level application, with anApplicationMediator.
• A dynamically created dialog box within that
application. No mediator.
• A dynamically created list component within
that dialog box. No mediator.
• A variable number of item renderers within that
list component, each with no mediator.
So, how the heck can you get those item renderers to
participate properly in the PureMVC framework via
mediators, without somehow getting a reference to
a view that has one? Time for code. The entire Flex
project structure and source is available at this link,
I commented it up pretty thoroughly, so you may want
to look it over as you continue reading this article: http:/
/ www.tcoz.com/samples/dynamicmediators.zip.
There are nine points of interest in the code, if you
do a classic search in Flex for [1-9]., or just look for all
Dynamic Views and
Mediators with PureMVC
That PureMVC is an extremely flexible framework that, in conjunctionwith some basic capabilities of Flash and Flex, can be appliedstraightforwardly to just about any development task.
What you should
know…• Intermediate-advanced
knowledge of AS3 and OOP,
working knowledge of Flex
framework, and some working
knowledge of PureMVC.
Level of difficulty
by Tim Consolazio
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 86/107
Dynamic Views and Mediators with PureMVC
02/2010 (10) 87
Listing 1.
private function onCreationComplete ( event : FlexEvent ) : void
{
_appFacade = ApplicationFacade.getInstance ( );
_appFacade.sendNotication ( Commands.STARTUP, this );
btnShow.addEventListener ( MouseEvent.CLICK, onMouseEvent );
}
/*
1. When btnShow is clicked, dispatch an event to the ApplicationMediator, which has an explicit listener for DialogEvent set up.
*/
private function onMouseEvent ( event : MouseEvent ) : void
{
if ( event.currentTarget == btnShow )
dispatchEvent ( new DialogEvent ( DialogEvent.SHOW_DIALOG, "Here is a dynamic Dialog Box!" ) );
}
Listing 2.
public function ApplicationMediator ( view : Object = null )
{
super ( NAME, view );
trace ( "DynamicMediators sample created by Tim Consolazio, Tcoz Tech Services, [email protected]." );
// explicit listener mentioned in 1.
application.addEventListener ( DialogEvent.SHOW_DIALOG, onDialogEvent );
}
private function createDialogAndMediator ( message : string )
{
...lots of code removed here for readability
/*
3. Create an instance of a DialogMediator, feed it the _dialog Canvas, and register it with PureMVC.You could even dynmaically set the name of the dialog mediator if you wanted so that a single DialogMediator could handle
simultaneous dialogs.
*/
var dialogMediator : DialogMediator = new DialogMediator ( _dialog );
facade.registerMediator ( dialogMediator );
}
/*
2. When the DialogEvent.SHOW_DIALOG is received, create the dialog and all subcomponents.
Also, hide btnShow for the heck of it.
*/
private function onDialogEvent ( event : DialogEvent ) : void
{
if ( event.type == DialogEvent.SHOW_DIALOG )
{
application.btnShow.visible = false;
createDialogAndMediator ( event.get_data );
}
}
Listing 3.
public function DialogMediator ( view : Object = null )
{
super ( NAME, view );
/*
4. Add a listener for the event that will be dispatched by a renderer.
This event will bubble from the renderer, there is no need to do an iterative loop to add explicit listeners to all the tree renderers.
*/
get_view.addEventListener ( RendererEvent.RENDERER_CLICKED, onRendererEvent );
}
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 87/10702/2010 (10)88
Listing 4.
public function CustomTreeItemRenderer()
{
super();
setStyle ( "color", 0xFFFFFF );
addEventListener ( MouseEvent.CLICK, onClick );
}
/*
5. When clicked, dispatch an event set to bubble (look in the RendererEvent class, it does this internally).
This event will bubble until it nds a handler, which in this case, will be the DialogMediator via the dynamic Dialog canvas
created in the ApplicationMediator.
*/
private function onClick ( event : MouseEvent ) : void
{
dispatchEvent ( new RendererEvent ( RendererEvent.RENDERER_CLICKED, data ) );
}
Listing 5.
/*
6. Handle the event bubbled from the CustomTreeRendere, and send notication to PureMVC
*/
private function onRendererEvent ( event : RendererEvent ) : void
{
facade.sendNotication ( Notications.RENDERER_CLICKED, event.get_data )
}
Steps 7-9 nish the job. We've listed RENDERER_CLICKED as a notication interest, so when it's received, we just implement
whatever actions we want. In this case, an Alert is shown, and when closed, removes the dialog.
/*
7. We've set up a notication interest for RENDERER_CLICKED, so it'll be received here.*/
override public function listNoticationInterests ( ) : Array
{
return [ Notications.RENDERER_CLICKED ];
}
/*
8. Handle the RENDERER_CLICKED notication when received, show an alert, which when closed, removes the dialog box
*/
override public function handleNotication ( notication : INotication ) : void
{
var note : Object = notication.getBody ( );
switch ( notication.getName ( ) )
{
case Notications.RENDERER_CLICKED:
Alert.show ( XML ( note ).toXMLString ( ), "ALERT!", 4, null, onCloseEvent );
break;
}
}
...
/*
9. When the alert is closed, kill the _dialog and make btnShow visible
*/
private function onCloseEvent ( event : CloseEvent ) : void
{
application.removeChild ( _dialog );
_dialog = null;
application.btnShow.visible = true;
}
PureMVC
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 88/10702/2010 (10)
comments bracketed with /* */, you'll find these important highlights. I'll walk through
these notes here, omitting any code not
necessary to illustrate the point.
First, in the application-level MXML,
DynamicMediators.mxml, we have a button,
which when clicked, dispatches an event, which
will be picked up by the ApplicationMediator.
If you'd be inclined to just write the logic into
the MXML file, don't; in PureMVC-think, logic
outside the immediate concerns of the view is
handled by Mediators see (Listing 1).
Once that button is clicked, theApplicationMediator receives the event via
it's DialogEvent listener, and fires off the _
dialog creation logic. Note that in /* 3 */,
after creating the _dialog view, we instantiate
a mediator for it, feed it the view reference, and
register it with the PureMVC framework. We
now have a completely dynamically created
view PureMVC enabled, no need to work with
awkward references or helpers see (Listing 2).
With the dialog created and visible, and it's
mediator active, we're free to let the user interact
with it, confident that we can communicate
with all areas of the application via theframework. Then, in the DialogMediator, we
add a RendererEvent listener. Although this
listener is tied to the dynamically created dialog
view that was fed to this mediator, _dialog
will not be directly dispatching the event;
a display list child of _dialog will. That event
will bubble up the display list hierarchy until
it finds a handler, because RendererEvents are
set to bubble (look in the RendererEvent class
in the project code).
Important point! You may wonder, why not just bubble the eventall the way up to the ApplicationMediator ,
and make it sort of a big brain? There's a lot of
reasons why you shouldn't do this; perfomance,
elegance, etc. Foremost though, it makes it
harder to scale your app. Well thought out
application areas that communicate within
their own areas of concern, only escalating
events as need be, keeps your application
code nicely divided up into easy-to-digest and
orderly areas; this is particularly important for
a distributed team of developers. If you have
a mediator that is catching tons of different
event types, particularly if they're bubbled,
you should probably look at your display list
hierarchy and break out some elements into
views with mediators of their own.
My general rule of thumb; never bubble an
event higher then the first view in the display
list hierarchy that has a mediator. If thatmediator's view is catching too many events,
create a mediator for a view somewhere closer
to the originating dispatcher see (Listing 3).
In the CustomTreeItemRenderer class, we
see the following simple code, which just
dispatches a bubbling RendererEvent when
any one of them is clicked. Along with the
event, we send the individual data object that
was bound to it via the trees dataProvider
set, which in this case, was XML.
Bonus!Subclassing TreeItemRenderer is a VERY
powerful way of controlling trees. I see a lot of
people defaulting to AdvancedDataGrid and
such for many of the things that a simple tree
with a custom TreeItemRenderer can do really
well. If you've never come by this, look it up in
Flex help, it's worth the effort see (Listing 4).
Back in the DialogMediator, the
handler receives the bubbled event, and
sends a notification along to the PureMVC
framework. Any mediator that has listed
this as a notification interest will hear
it, and receive the associated data. If youwant to stop the event from continuing to
propogate up the display list hierarchy, turn
it off with the stopPropogation ( ) or
stopImmediatePropogation ( ) methods of
the Event class (which your custom events will
have if you inherited from Event), depending
on whether or not you want other event
listeners to continue firing see (Listing 5).
So there you have it; no matter how you
create your views or renderers, be it at
design time or run time, you can tie them to
mediators and catch events from renderers
down the display list, keeping your app inPureMVC ship-shape. Bubble the event from
a renderer to the first view with a mediator,
handle the event, and push out a notification
to the app. Nice and clean.
External Links:
• PureMVC site: http://www.puremvc.org
• Source for this article: http://www.tcoz.com/samples/dynamicmediators.zip
TIM CONSOLAZIOTim Consolazio is a veteran RIA developer located
in the NYC area. His extensive client list includes
companies of all shapes and sizes, from startups
to the biggest media powerhouses in the world.
His 15-year professional history includes designer/
programmer at American Express Research
and Development, and Technology Specialist
at Microsoft. Tim currently owns and operates
Tcoz Tech Services, a "full service indie developer
shop". You can follow him on Twitter (tcoz_tweet),
friend him on Facebook, or read his blog at http://
www.tcoz.com/blogger/blogger.html
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 89/10702/2010 (10)90
ActionScript Development
Therefore the app always starts up in the same
state and users must traverse through the
app to get to the state they want to see. And
of course the back-forward browser buttons don't
work which is a common gripe among Flash haters.
Sometimes this isn't an issue but occasionally it can
diminish the User eXperience (UX) to the point that
users stop visiting your site. What apps like these need
is the ability to provide deeplinking to the different
states that a user traverses so that at any point the user
can bookmark or share the URL which will bring them
back to where they left off.As an example take a look at my website
RunPee.com which is entirely built with Adobe
Flex. RunPee.com is a website that gives users the
best times during a movie to run and pee without
missing anything important. In the vast majority of
cases users come to the homepage, select the movie
they are interested in from the left side navigation
and then see the information they want. But what
if they wanted to share the peetimes for a specific
movie, such as Avatar , with a friend or even tweet
about it? They could tell their friend to go to the site
and click on the button for Avatar in the left nav
or they could just copy the url – http://runpee.com/ #/Avatar__1 – and send that. Which experience do
you think is best?
It's easy to see the usefulness of deeplinking
but what about implementing it? Fortunately it's
easier than you would think and in many cases can
actually simplify an app by providing a centralized
framework around which the application states can
be managed.
The Adobe Flex framework provides a built in
states management framework which I would advise
you avoid like the plague. It creates bizarre URL
strings that are meaningless to the user. You can
even clean up your build folder a little by turning off
enable integration with browser navigation in project -
> properties->Flex compiler , very bottom checkbox.
Fortunately SWFAddress is, free, open source
and very easy to use. My advice is don't leave your
homepage without it .
An outline for using SWFAddressThe following outline is for a Flex application using
SWFAddress but the same can be applied to a Flash
application with minor changes.
• Get the SWFAddress library from http://
www.asual.com/swfaddress/
• Place the SWFAddress SWC in the libs folder of
your Flex project
• Place the swfaddress.js le in your build path
• Update your index.template.html le to load the
swfaddress.js le• Inside your Flex app create a listener the
SWFAddressEvent.CHANGE event
• Use SWFAddress.setValue(value:String) to
update the URL as needed
That's it. Should take you about 5 minutes to do all
that. Note: If you are using the Flash IDE then you
can add the SWFAddress.as le to your project.
SWFAddress in depthOnce you get the zip file from asual.com you'll need
to drop the swfaddress.js file into your build path.
I just put it in the application root along with all theother support files. Then copy the SWFAddress.swc
file and paste it into the libs folder of your project.
The libs folder is simply a place to drop SWC files
that you'll need to access for a specific project – very
handy.
Now open the index.template.html file in your
html-template folder. This is what Flex/Flash builder
uses to create the html wrapper for your application.
The SWFAddress code assumes that you used
SWFObject to embed your SWF in the HTML file.
If you are using Flash Builder beta 2 then you're in
luck because it uses SWFObject by default. If you're
still using Flex Builder 3 then you'll need to manually
edit your index.template.html file to use SWFObject.
You can get the files an instructions for that at http:
//blog.deconcept.com/swfobject/ .
Once you have SWFObject working you'll be ready
to add in the SWFAddress code. It is crucial that you
Deeplinking Your Flash And Flex
Applications With SWFAddress
One of the common pitfalls of any RIA (Rich Internet Application) basedon Flash or AJAX is that the state of the application changes but the URLusually stays the same.
What you will learn…
• How to create a Flash applica tion
that supports deeplinking
and the browser back-forward
buttons.
What you shouldknow…• Knowledge of basic Flex
applications is handy but not
required. These steps can also be
applied, with slight modications,
to projects created with the Flash
IDE.
Level of difficulty
by Dan Florio
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 90/10702/2010 (10)
place the HTML code to load swfaddress.js
right after the swfobject.js file. Your HTML
file should look like this:
<script type="text/javascript"
src="swfobject.js"></script>
<script type="text/javascript"
src="swfaddress.js"></script>
Lets write some ActionscriptSWFAddress couldn't be more simple. It
revolves around changing and reacting to
changes to the URL. Somewhere in the
initialization of your application you need to
create a listener for when the URL changes.
Here's an example: see (Listing 1).
Note: the init() method is called on
creationComplete of the Application.
Now every time the URL changes themethod onSWFAddressChange will fire. And
of course it will fire when the application
loads as well. That is of course essential
because that's where you'll get your
deeplinking behavior. If someone comes to
the homepage of your site then the url will
equal "/" but if they have a deep link it might
read like, /Avatar__1.
Here is all you have to do to change the
URL:
SWFAddress.setValue(value:String);
If for example on RunPee.com I passed in
Avatar _ _ 1 the URL would change to http:
//runpee.com/#/Avatar__1.
RecomendationsFirst, you can only have one listener for the
SWFAddressEvent.CHANGE event. Actually,
you can have all you want but only the last
one will work. That makes since if you think
about it. You don't want to have different
parts of your app competing against each
other to react to the URL changing.
Of course you can change the URL from
anywhere in your application simply by
calling SWFAddress.setValue('myDeeplink'
); However I would highly recommend that
you create a central location to handle calling
the SWFAddress.setValue method. Believe
me, I speak from experience here, calling
SWFAddress.setValue from various points
in your app can become unmanageable in
a hurry and it's hard to debug. This is one of
the best cases for a static class if ever I heard
of one.The fortunate side effect of using
SWFAddress in this manner is that now all
of the state changes in your application are
centralized. That's what makes SWFAddress
such a great tool. It is quick and easy to
implement and actually improves the
manageability of your code. Another plus to
centralizing your state changes is that you can
easily integrate with Google Analytics.
Things to look out forOne of the complications that SWFAddress
introduces is that you have to set the state incode to react to the SWFAddressEvent.CHANGE
event. That much is obvious but it can
sometimes be tricky and require a bit more
testing than you might normally do. For
instance in the Blogroll example that I created
it took a few tries before I managed to catch
the change event properly in all cases and
select the <RadioButton> corresponding to
the URL data. It isn't terrifically complex. It's
just a situation that we don't normally have
to account for. So keep an eye out for places
where you might miss setting the proper
state. For instance you may show the correctdata but not reflect that in the navigation.
ExploreSWFAddress can do much more than just
change and react to changes in the URL. You
can also use it to set or read the page title,
paths, history, etc.
DAN FLORIODan Florio, aka polyGeek, is a Flex developer
working for the best client in the world – himself.
His biggest success to date is RunPee.com – a site
that tells you the best time to run and pee during
movies. He and his wife currently live in an RV
traveling around the USA. You can read more
about his adventures in code at polyGeek.com.
Listing 1. Setting up event listener
private function init():void {
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onSWFAddressChange);
}
private function onSWFAddressChange():void {
var url:String = SWFAddress.getValue();
// do something with the url below
}
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 91/10702/2010 (10)92
Readers BUG
FP 10 has been around fora while, now, and FP 10.1 isreally only a minor update overthe current player. When arewe likely to see FP 11 and whatshould we expect from it?Mark: Flash Player 10.1 is the first version of
Flash Player to meet with the Open Screen
Project requirements, expanding the reach of
the Flash Platform from desktop computers
to mobile phones, netbooks and tablets. To
enable this doubling of platform support we
have invested heavily in improvements to
the Flash Player for performance, memoryusage as well as hardware acceleration for all
platforms. In this new version of Flash Player
we have also enabled greater support for touch
interfaces, including multi-touch devices and
accelerometer control; features that are not
available commonly on the web today.
Throughout 2010 we will begin the push
to deliver Flash Player 10.1 to a vast array of
platforms, demonstrating the true value of
this engineering investment.
Can you tell us about security
and FP 10.1?Mark: This new version of Flash Player
presents no significant changes to the
security model implemented in Flash Player
10. For more information on Flash Player
security please visit our Developer Center
http://www.adobe.com/products/flashplayer/
security/.
Can you give us moreinformation on Flash CS5 toiPhone development?Mark: At the Mobile World Congress
2010 we demonstrated Adobe AIR on the
Motorola Droid, an Android OS device. It
has always been our intention within the
Open Screen Project to deliver both Flash
Player and AIR to mobile and devices over
time.
With the Flash Packager for iPhone,available in the upcoming Flash Professional
CS5, developers will be able to repackage their
AIR applications for iPhone. So for the first
time it will be possible to create an application
that runs on Mac, Windows, Linux, Android
and on the iPhone using the same code.
What is the future of FP 10.1 onall mobile platforms?Mark: We are really excited about delivering
Flash Player 10.1 to mobile and device
platforms. Today we are working with all the
major device manufacturers, chipset vendorsand content providers to deliver Flash Player
10.1. In all we have announced that Flash
Player 10.1 will come to Android, Palm,
Blackberry, Symbian, Windows Mobile and
LiMo devices.
The first devices will get Flash Player
support in the first half of 2010.
When will AS3 support textsuperscript?Mark: The Flash Player, since version 10,
has provided support for TLF (Text Layout
Framework) from InDesign, that enablessupport for superscript and complex
languages. You can try the demo here: http://
labs.adobe.com/technologies/textlayout/demos/.
What’s the exact date for webOSFlash?Mark: Palm have begun their work to enable
WebOS for Flash Player support, pushing
their 1.4 software update during the past
week. We encourage Palm to complete the
Flash Player certification process, at which
time they can release this to consumers.
Why did Adobe not keep to theidea of beta testing Flash CS5?Mark: In fact Flash Professional is in beta,
although privately. Given the addition of
support for iPhone packaging we wanted to
ensure that we could focus on quality anddeliver the product on time.
Can you tell more on AdobeLivecycle ES2 and the Cloudservices.Mark: We have lots of great information on
Livecycle available on our Developer Center
here: http://www.adobe.com/devnet/livecycle/ .
With the advent of Googleindexing visible text, coupledwith things like swfObject
& swfAddress, what otheradvancements does flash player10.1 have for SEO?Mark: As always we are continuing our
efforts to improve SEO for Flash content
and working to extend the capabilities of
our search engine technology. In fact we
added support for Actionscript 3 content in
2009, to build complete coverage for indexed
content.
Where does Flash/Flex fit inHTML5?Mark: Flash content, whether it is createdin Flex or not, has always co-existed with
HTML and the latest thoughts around
HTML5 present no real differences. We’re
working with the W3C on HTML5 and have
already added support for it in our tools such
as Dreamweaver.
What can FP 10.1 do that FP 9.0won't do?Mark: Today relatively few people use
Flash Player 9, in fact most consumers now
use Flash Player 10.0. In the latest version
Flash Player 10.1 we invested heavily in
performance, memory usage and hardware
acceleration. The most important change was
the doubling of our supported platforms and
extending to mobile devices like netbooks,
tablets and mobile phones.
Readers BUG – Readers Q&A section.
Answers provided by Mark Doherty
The Flash and Flex Developer Magazine Team and it’s readers have together decided to
create a new section where everyone can have their question answered. This issue starts
things off with the important matter of FP 10.1. We asked Adobe to help us find the right
person for the task, and here you are: A Platform Evangelist specialized in Mobile and
Devices - Mark Doherty vs FFD Readers.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 92/107
Readers BUG
02/2010 (10) 93
Explain Using CSS with TLF.Mark: TLF provides far greater control over
text layout and appearance than HTML/
CSS, traditionally used on the web today.
That said, we do provide support for using
CSS within TextFlow. This property is
called formatResolver and using that youcan provide CSS markup, although please
ensure that you are using the most up-to-date
version of TLF.
Are you planning to improve theFP10 to work with a native 3dEngine ?Mark: We are always driving innovation
with the Flash Player, and we accept feature
requests from the community as part of
our open platform. http://bugs.adobe.com/
flashplayer/ .
What is happening with thepackaging solutions? It'simportant that the player isawesome, but more importantthat we can package and protectcontent easily.Mark: With Shibuya, currently available
in beta on Adobe Labs, developers can add
better protection for their applications
targeting Adobe AIR. This new service
also enables direction monetization and
distribution using Adobe’s hosted services.http://labs.adobe.com/technologies/shibuya/ .
Are there any plans for simple3d integration in Flash, similarto that of Swift 3D Xpress?Mark: Flash Player 10 provided a number
of new features for 2.5D content creation.
These new features were added to Flash
Professional CS4 to create incredible effects
like zoom and rotate on the z axis.
Why aren't you pushing mobile
Flash functionality harder inorder to secure your position inthe mobile computing space?Mark: Today Flash is available on over 1.5Billion
mobile phones, that’s 16% of all phones ever
created. In the past year alone we shipped over
500million devices, delivering Flash on a global
scale. Japan has been a source of huge success
for Flash developers stimulating a content
industry worth over $1Bn USD, and reaching
90%+ of mobile phone users.
That said, in 2010 we are delivering on our
promise of a consistent Flash Player 10.1, and
extending this to mobile platforms. To get
started you can download the desktop beta 3
from Adobe Labs today.
Why has Flashbuilder on Linuxnot been invested in?
Mark: At this time we have decided to focus
on creating Flash Builder 4 for Windows and
Mac computers. The Flex SDK is of course
available for Linux based development, and
with this decision we can accelerate support
and integration with our creative tools.
In two years, what is your goalpercentage of smart phonesthat will have Flash 10.1 (orhigher) installed?Mark: In 2012 we expect that more than 250
million devices will have shipped with Flash
Player 10.1. In all that is 53% of smartphones
that we expect to be shipping, although
these numbers tend to change as per market
forces.
Will there be tutorials on theCS5 products on Adobe TV?Mark:Absolutely!
Do you know if there is a wayto test the multitouch librariesreleased by Adobe directly ina device?Mark: Flash Player 10.1 has built-in support
for mult-touch, when the Flash Player is
made available you can begin test on your
supported mobile phone such as the iPhone,
Android or Palm Pre. Of course multi-touch
is also supported on the desktop, should youhave a touch screen or touch pad (Mac).
Will be there the FP 10.1 in olderversions of Android?Mark: The requirements for Flash Player
10.1 are complex, however we are targeting
a version of Android post-Eclair that will be
available later in the year.
What about the future of Flashand 3D? What happened withPapervision and Away3D? What
will happen in respect to iPhone/iPod/iPad technology?Mark: We are always excited to see
innovation from the developer community,
especially with Papervision and Away3D.
Sometimes the Flash community do things
with the runtime that we do not expect,
and in Flash Player 10 we enabled improved
support for these. Flash Player 10.1 also
brings hardware acceleration which will
enable these frameworks to move to
mobile devices. In fact we’ve already shownsome great demos working here http://
www.flashmobileblog.com/2010/02/24/
battery-performance-with-flash-player-10-1-on-
nexus-one/ .
When will roundtripping beavailable between Flash Builderand Flash Catalyst? This iscrucial for the product to beable to compete with MicrosoftBlend, where this is possible.Mark:
Adobe is fully committed to enable the round-trip of development between
Flash Catalyst and Flash Builder. While it
will not be available in version 1 of Flash
Catalyst we have enabled support for
importing components. Using this approach
it is possible to create an application in pieces,
and therefore mitigating the need for true
round-tripping. That said, we recognize the
demand and we are aiming to innovate on
this as the product evolves.
If Apple won't reject the Opera
Mini from the AppStore, couldAdobe bring Flash Player throughOpera to the iPhone and iPad?Mark: We cannot comment on Apple’s
acceptance of Opera Mini within the
AppStore. That said, Opera Mini is a server
based solution and as such cannot support
the Flash Player. We encourage Apple to open
their platform for innovation and provide
their users with access to the full web.
FFD Magazine Thanks to Mark Doherty.
For more info about Flash Mobiles check
Mark's Blog: http://www.flashmobileblog.com/ .
MARK DOHERTYMark Doherty is a Flash Platform Evangelist at Adobe Systems focused
on Mobile and Devices with Flash technologies. His role at Adobe is work
with leading OEMs, content providers and developer community to create
a vibrant ecosystem around the Flash Platform on mobile and devices.
Previously He has worked in Core Engineering, R&D and Custom Solutions
at Adobe as a Software Engineer on the Flash mobile platform primarily
on device integration of Flash Lite and Flash Cast on Symbian and Brew.
Before its acquisition by Adobe, He held a consulting role at Mobile
Innovation focusing on Nokia’s smartphone platforms, and with
Panasonic R&D Core working on Symbian OS hardware integration,
platform and application development with C++. http://www.ashmobileblog.com/
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 93/10702/2010 (10)94
Q: Hello! I think we areall curious to know whatFlashcreed stands for?A: Well, Flashcreed stands for our belief that
the products we create can shape, in a way,
the browsing experience we all have everyday on the web. We joined our forces from
the desire to give efficient and professional
components to everyone around the world
in need of a quick and versatile solution for
their own or their client’s work.
Q: Who are the people behind it?A: We are a young determined team of
experienced and very well trained FLASH
and FLEX programmers also with knowledge
in PHP, JAVA, CSS, HTML and database
elements from MYSQL and XML.
Q: What does Flashcreed intendto bring to the table, so tospeak, as a new arrival to themarketplace?A: We guide ourselves having in mind 3
little words: innovation, perseverance andprofessionalism. If we put our minds and
soul into it, we can achieve great things and
with that, we will strive to be always in the
top. We have a great deal of fun making all
these cool features for our products and it
brings a lot of joy when we get a big WOW
from our clients.
Q: Tell us more about your
products.A: We focused our attention mainly on
Media Galleries because similar components
on the market didn’t quite satisfy the user’s
appetite for creativity. Just to name some of
our product’s features:
New Kid In Town
Flashcreed is a multinational project dedicated in creating the mostcomplex FLASH components. Our main goal is to fulfill our client’s
wildest desires regarding versatility in design and performance. Westrive to be the best at what we do and we always push ourselves toovercome any boundaries.
flashcreed.com
Profile
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 94/107
flashcreed.com
02/2010 (10) 95
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 95/10702/2010 (10)96
Profile
• advanced AS3 programming
• dynamic xml implementation
• high performance due to low size and
small amount of resources needed
• unlimited amount of media items on
stage
• easy to install• high degree of user friendliness
• scalable size for the entire stage and
almost every element in it
• bitmap and video supported media
• high level of customization which allows
you to get the dreamed interface for
your gallery including up to 5 different
color gradients at a time, over 40 tween
effects on mouse interaction, blur and
over 100 of other settings to customize
this into your long desired professional
gallery.
Q: Are you going to only workon galleries?A: Of course not. We have a great deal of ideas
and with our clients feedback, which is very
important to us, we will make sure we reach
the same level, if not bigger, of complexity,
performance and user friendliness for all the
categories on the market.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 96/107
flashcreed.com
02/2010 (10) 97
Q: Do you know your maincompetitors?A: We wouldn’t be standing here if we didn’t.
There are a lot of developers out there, we
collaborated and worked with some of them,
we respect the dedication and effort of most
but, as stated before, we will try to be numberone in the game.
Q: True, there are a greatdeal of Flash developmentcompanies and freelancers. Howis Flashcreed going to stand outamong all of them?
A: Our belief is that there are not enough
players for the market to be oversaturated.
Now that the market has reached a degree of
complexity and is mature enough to overcome
the amateurs it will propel those who bring
new and unique innovations. Besides that,
our continuous collaboration with our clients
during and after their project is done, brings
our company to a whole different level.
Q: Can you estimate the trendthat Flash developing is going totake and if Flashcreed is going
to influence it?A: Well, yes, the trend could only be up at
this point, especially with Adobe knocking
at the door with CS5, and yes, it is our strong
belief that Flashcreed will have a major role
in its developing over the next period of
time. Expect some cool 3D components in
the near future from our team.
Q: Is Flashcreed going to keepup with the new technology?
A: We live in a very fast paced world but wehave a strong affinity for everything new in
this domain, and, unlike others that refuse
even to look and acknowledge the potential
that new technology brings, we adopt it
instantly. There are still developers that
refuse to use AS3 just because they learned
AS2 and that’s that. For that reason alone
the market is now split in two, and as soon as
everyone wakes up and make this necessary
step, we get to see more improvements and
fresh ideas.
Q: It is invigorating to see suchenthusiasm and dedication fromyour team and hope Flashcreedaccomplishes all that it set outto do. I would like to thank youfor your time and wish you thebest of luck in all your currentand future projects.A: Thanks, it was great talking and hope we
do this again.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 97/107
Interview
02/2010 (10)98
In today’s crowded arena of iPhone
developer-related startups and SDKmakers, how do you guys standapart?Carlos Icaza: We’ve got a really great team.
Between us [the founders] and our core team
members, we have over 20 years of experience
in graphics software, including experience at
Adobe, Pixar, and Apple. We’ve worked on
industry-standard applications like Illustrator,
Flex, Creative Suite...
Walter Luh: There were also mobile runtimes
like Flash Lite.
Carlos: ...Right, we led the mobile Flash team
in the pre-smartphone, pre-iPhone days. So, we
have an exceptional knowledge of mobile device
integration, rendering engines, graphics, and
authoring tools. When you come from that
kind of a background, not only do you know
what you’re doing but you also have a track
record of success to show for it.
So, why should Flash developers take up your Corona SDK insteadof, say, waiting for Adobe’s PackagerFor iPhone?
Walter: The short answer is that
Corona was designed from theground up for mobile devices and
– more importantly to developers
– it’s a product that’s out there right
now. From what we’ve seen, the
longer you wait to build your app
and get it into the iTunes store, the
harder it’s going to be to rise above
the noise.
In addition, we’ve done all the
hard work so you don’t have to.
For example, a Corona-powered
app automatically leverages the
hardware acceleration (OpenGL-
ES) of the device. It’s not an
afterthought, so you get it without
doing anything special.
I could go on about features, but
the great thing is that we’ve found
a way to pack everything into a 300
KB executable. That’s smaller than a
camera photo! It means you’re free
to add megabytes of great graphics,
video and sound to your Corona-
powered app without worrying
about going over the App Store’s
size limit.
What about the free, open-source SDK’s out there? Why should designers shellout money to use Corona?
Talking CoronaAn interview with the
Ansca Mobile co-founders
Ansca Mobile‘s Corona SDKfor iPhone was unveiled
in the last issue of FFD
Mag. Now – fresh off the
heels of having their
nostalgic Photoshop 1.0
app unveiled last month at
Adobe’s Photoshop 20th
anniversary event – co-
founders Carlos Icaza and
Walter Luh sit down to talk
about why they should be
the go-to choice for Flash
developers looking tobuild for the iPhone.
ANSCA MOBILE‘S CORONA SDK
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 98/107
Interview
02/2010 (10) 99
Walter: What makes Corona so unique is that
it’s the only SDK on the planet that lets you
create seamlessly integrated apps, combining
high-performance graphics/animation with
web-based views.
Carlos: You get the best of both worlds.
Walter: Exactly! You get the best of both.
You can use Corona to create web popups
for static kinds of interfaces like forms
and data entry. You can even overlay a web
popup on top of an animation you create in
Corona! However, the real novelty of mobile
devices is the variety of ways you can interact
with the phone: the accelerometer, GPS,
magnetometer, touchscreen. And to create
great mobile experiences, you have to focus on
graphics to make the interactions with your
app visually appealing. That’s where Corona
really shines.
Carlos: Also, free iPhone SDKs are generally
wrappers for Apple’s WebKit, so they
inherently limit what you can do. Don’t get
me wrong, that can be fine for building certain
form-based apps – which is why we added web
popups to Corona – but it cannot really be
used to make the kinds of graphics-intensive
apps that Flash designers are used to making.
Corona can.
What is the learning curve for Flashdevelopers to pick up the Corona
language?Carlos: The Corona framework is far more
Actionscript-like, and a lot faster to learn than
Objective-C. But it’s also much faster to use on
a daily basis once you’ve learned it. We’re now
seeing people who already know Objective-C
turning to Corona for its advantages in rapid
prototyping and development.
Walter: And if you’re a web developer or a
Flash designer, you’ll feel right at home in our
environment. We’ve designed our framework
to specifically target common mobile tasks,
and boil them down into a few lines of code. In
addition, the syntax is very similar to JavaScript
or ActionScript 2. You can create objects and
add properties to them as you please. Some of
our developers have ported their Flash games
and told us they spent more time improving
the images and sounds than they did porting
the code!
So, will Corona’s quick and easyapp-making process for the iPhonebe enough to take on the biggerresource and graphical platform of
the iPad? Walter: When we say quick and easy, we mean
that you can do an incredible amount of things
with just one line of code. We designed the
framework with the 80/20 rule in mind, so
the common case (80%) can be accomplished
in a single line of code, but we make sure to give
you enough flexibility to take on more complex
cases (20%).
For the iPad, this will be even more important
since the apps will be much more multi-faceted
than they are on the iPhone. With a larger canvas
comes higher user expectations, so developers
will find Corona’s advantages especially handy,
whether it’s prototyping rapidly on devices or
cutting development time exponentially.
What has Corona been used tomake already in its relatively newlife?Carlos: All sorts of apps – arcade games,
puzzles, screen-savers, informational apps – you
name it! Most recently, we put our own claims
about speed and ease to the test by putting
together the Photoshop 20th Anniversary iPhone
app (video demo at tinyurl.com/ps20app) in one
weekend.
What new features are you shootingfor in the next version of Corona?Carlos: We have a lot of features planned that
are specifically aimed at game development,
including a 2D physics engine, tiling support
for large images, multi-touch, and MapKit to
name a few.
And where do you see Corona goingin the foreseeable future?Carlos: Because of our backgrounds in shipping
industry-standard authoring applications like
Illustrator, Flash, and Final Cut Pro, we will
continue on our path of enabling anyone to
create iPhone apps.
Walter: For us, the Corona SDK is just the
beginning of our vision. Soon, the mobile app
party won’t be just for those who code – it’ll be
open to everyone!
Corona SDK 1.0 is available right now for
$99; (https://developer.anscamobile.com/products/
get-corona) developers not quite ready to take the
plunge can check out a 30-day trial version (http://
developer.anscamobile.com/products/get-corona-
trial ) for free directly from Ansca Mobile (http://
www.anscamobile.com / ).
Twitter: http://twitter.com/CoronaConnect
Facebook: http://facebook.com/CoronaConnect
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 99/10702/2010 (10)100
STORY
The topic of designer/developer
productivity has been addressed to death in article after article,
but the topic of client-server integration
as a strategy for increasing developer
productivity is seldom, if ever, addressed.
Yet, there is undeniable value in using
integration as a strategy for increasing
developer productivity and bottom line
profit margin on any project. While this is
a management objective, developers benefit
too by cultivating integration smarts as a
way to set them apart from the rest of the
pack to ensure they are constantly booked
for project work.This article walks the reader through Joe
the Coder’s thought process, choices and
actual client-server integration for a new
application.
A Day in the Life of Joethe CoderDuring the requirements gathering phase
Joe’s team decided that they would build a
Rich Internet Application (RIA), which would
provide the interactivity and efficiencies
offered by this new breed of technology. The
team was faced with numerous choices forboth client and server environments.
Client-Side Technologies
On the client-side they could choose to
develop the application in Flash, Flex,
AJAX, Silverlight, or JavaFX. The server-
side environment could be one of fiveenvironments – .NET, Java, PHP, Ruby
on Rails and Cold Fusion. After careful
consideration, the team chose Adobe Flex for
the client, because they felt Flex was a more
mature technology that was widely adopted,
had a versatile IDE and well-documented
framework.
Server-Side Technologies
On the server side, there was a need to
access data from two different environments
– .NET and Java. Based on these decisions,
the development team would be usingFlashBuilder 4 for the Flex project, Visual
Studio for the .NET code because the team
had experience with that environment. On
the Java side, the team can use a Java IDE like
Eclipse or IntelliJ IDEA.
Joe also had a little personal PHP project,
so he was really glad he was tasked with
figuring out how to integrate Flex with the
various server side environments. It wasn’t
clear to him if web services was the best way
to integrate the two environments. He’d
heard about the AMF binary protocol and
remoting, and how it was supposed to havean advantage of terseness over XML web
services, which meant that remoting would
be faster in terms of speed of transmission
and serialization. XML, on the other hand,
was a text based integration approach with
verbose and thus bloated data transfer
packets. This meant the integration codewould lose some simplicity and out-of-
the-box integration at the object level.
Additionally the web services based
solution could potentially have poorer
performance, especially where large datasets
need to be delivered to and presented on the
Flex client.
Joe realized that if he were to recommend
remoting, he’d have to choose a remoting
server or build some sort of remoting gateway
himself (clearly not an option due to involved
complexity and the time it would take to
build it). Joe decided to craft a list of criteriaand set out to evaluate the different remoting
solutions. In his mind, the remoting solution
must:
• Integrate Flex to .NET and Java
• Support the IDE’s that Joe’ team uses
• Provide some way to synchronize clients
working with shared data
• Provide access to database
• Support real-time messaging
infrastructure for integration with
MSMQ or JMS, data push and text chat
use cases• Support streaming media (audio and
video)
• Be secure
• Meet budgetary requirements
• Offer commercial support if needed
A Day in the Life of Joe the CoderDiscover His Secret Sauce for Saving
His Company Time and Money
by Kathleen Erickson
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 100/107
Discover His Secret Sauce for Saving His Company Time and Money
02/2010 (10) 101
As Joe dug into the research he found that
most remoting servers met some of his
criteria but not all.
Flex to Java Integration Choices
The solutions available for connecting Flexclients to Java backends include both open
source and commercial solutions. The open
source solutions were BlazeDS, Red5, and
GraniteDS. LiveCycle Data Services (LCDS)
and WebORB for Java are commercial
products, with WebORB also offered as a free
product. For the most part, the open source
solutions would meet Joe’s remoting needs,
but not all. A media server would need to
be purchased separately and there was no
built-in data management functionality.
Commercial support wasn’t available
either, at least for the Red5 and GraniteDSofferings.
As for the commercial products, both
LCDS and WebORB for Java provide
most of the functionality needed, if not
all, and the products are commercially
supported. WebORB for Java even
supports media streaming right out of
the box. Joe would still have to buy FMS
if he chose LCDS. The decision to choose
one of the commercial offerings would
come down to price and Joe was pleased to
learn that there were some free WebORB
products for development and production
environments.
Flex to .NET Integration Choices
Joe found only two Flex to .NET remoting
solutions: FlourineFX and WebORB
for .NET. He applied the same set of
criteria and was surprised to see that once
again WebORB would meet all criteria.
FlourineFX is an open source product that
met the remoting requirement, but the
fact that it was commercially unsupportedand lacked an active community left
Joe suspicious about FlourineFX’s
direction. Joe already knew WebORB was
commercially supported, so he decided to
dig in a little more into WebORB and was
elated to find there was also a WebORB
for PHP product that was free and open
source.
At this point, Joe is so excited about
WebORB that he goes to the product pages
on the Midnight Coders website www.themi
dnightcoders.com and downloads free versions
of WebORB for .NET, Java and PHP.Upon installing WebORB, Joe opens
the WebORB console and is so happy to
see a really slick interface that will make
the integration effort organized and
efficient. Furthermore, he sees the console
includes documentation, examples, trou-
bleshooting tips, code generation, security
configuration, data management and even
a way to test his methods before creating
the hooks into the flex application logic
see (Figure 1).
Next, Joe dives into the docs and is
dumbfounded by how easy it is going to be
to integrate Flex in all three environments.
Integration for a simple remoting application
goes something like this: see (Figure 2).
The process for deploying the compiled
.NET assemblies and Java classes/jars
into WebORB, generating the integration
code using the code generator, testing the
integration and deploying the integration
code into FlashBuilder 4 takes less than
five minutes. To write the same integration
in XML could take significantly morelines of code produced over days of effort.
Whoohooo! Joe was not going to have to
write boring XML parsing code and can
instead focus on the more fun application
logic. At this point, Joe is thinking
WebORB is a no-brainer and he can’t wait
to learn about some of the more exciting
functionality like how to incorporate
video chat and streaming media into his
applications and how to leverage WebORB’s
implementation of remote shared objects
and client synchronization. Joe’s thinking
that with everything that is provided rightout of the box with WebORB, he could
become a coding Ninja using WebORB as
his secret sauce.
You can become a coding Ninja too. To
learn more about WebORB and download
your free product, please visit www.themidn
ightcoders.com.
Figure 2.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 101/10702/2010 (10)102
Reviews
Distribution and UseThe Alternativa3D library has
been popular for two years
already among Flash developerswho have been using it for
everything from casual games
to 3D presentations. The
library has been widely used
in the development of 3D
presentations for construction
firms – from single houses to
blocks of buildings.
The library has spread wide
due to its significant feature
set. Alternative3D is the base
for Flash, so the library is easy
to pick up and you’ll be able
to apply the tools you already
know. The tool creates a Flash
clip which is embedded in
your page and which will be
visible in any modern browser.
No additional plugin is necessary for your
website visitors as Alternativa3D leverages the Flash player that almost all web users
have installed.
DrawbacksVersion 5 was developed according to
certain requirements, so some important
3D technology features were not realized.
For instance, animation is still rather limited
due to rendering peculiarities and, and that
is why the library is used for static objects in
most cases. Yet, the developer can still bring
the scene alive with the help of the camera.
Only one sorting method was available inversion 5, BSP, which sometime constrained
the use of the library. The developers
couldn’t have been happy about some of
these constraints, and there has been serious
work conducted on the new version during
the last year.
Version 7
A Review of Alternativa3D 5.6And A Peek at Version 7 – A NewStep Into The 3D Webby Greg Bolotoff
Demo „Block”: http://alternativaplatform.com/en/demos/altcity/
Demo „Tank”: in attachment or this URL http://tankionline.com
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 102/107
Alternativa3D Version 7
02/2010 (10) 103
Already in use
Version 7 of Alternativa3D has already beenused in projects on a substantial scale. One
vivid example is a multiplayer 3D game
Tanki Online with a community of over 150
thousand players.
At the moment several game projects are
in the process of development and will be
released soon.
Apart from big and complicated
projects, Alternativa3D v7 is successfully
used in development of
various promo-sites. For
example, the Moscow
company Brandstudio
developed presentational
website for Toyota IQ.
Version 7 is not limited inuse by game applications
or presentations; it can be
used in projects of different
types: social networks,
educational projects, at
entertainment resources
and for business needs.
The set of new features
broadens the limits of web
use as a whole and Flash in
particular.
New Features
The hierarchy in the new
version 7 is totally new
and has practically no
similarities with the former
one. Now it is organized
similarly to display Object
containers in Flash. This
makes the process of 3D-
scene easy to realize and
clear to Flash-developers.
Additionally the new hierarchy system helps
to reduce outlay while drawing the sceneafter its configuration change, i.e. the speed
will not change.
Also considerably increased is
Alternative3D performance: you can create
more complex and detailed models.
To quickly cull the objects which are not
visible, bound boxes are used; they are the
objects which describe the objects limits.
Culling with bound boxes is hierarchic:
if container in bounders is excepted from
drawing, all subclasses of its container will be
excepted as well.
In version 7 developers have special objects
– occluders, which can occlude other objects
excluding them from drawing. The method
is called occlusion culling.Realized bones serve to make animation
with minimum efforts. This method does
not require keeping much data because
the only information stored is that of the
bones vertices and movement. Bones prove
to be very convenient modern method of
animation.
The developers will also have a method
called LOD ( Level of Detail ) in the new
version of the engine; the method allows
to automatically choose the object with the
needed resolution depending on distance.Thus you economize resources while
drawing remote objects which do not need
detailed resolution.
Mipmapping – the methodology serves
to get rid of noise when drawing long-
distance objects and increase drawing
performance: depending on the object's
remoteness from camera, you choose
a texture with the most suitable resolution
from MIP-pyramid.
To avoid frequent use of one object we
apply to Reference system. Reference is
an object-link, which replaces itself with the object to which it refers. It gives an
opportunity to create a forest having one tree
in memory. This system is similar to symbols
in Flash.
One of the most significant innovations
is the ability to use objects sorting in 3D-
scene more flexibly. Different types of
object-containers allow proper combination
of various sorting methods depending on
current needs. This enables
you to achieve much more
results rather than use only
one BSP.
AcquireAlternativa3D v.7At the moment the 7th
version of the library is on
the stage of beta testing. It
is being prepared for the
release in the lab, so hasn't
yet gone public. There is still
much work ahead, but the
larger part has been done.
Flash-developers will be
able to evaluate the results
of the authors' intensive
work and implement all the
innovations in their work
very soon.
Demo „Bones”: http://blog.alternativaplatform.com/ru/les/2009/02/
bones.swf
Demo „MIP mapping”: http://blog.alternativaplatform.com/ru/les/2009/12/mipmapping.swf
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 103/10702/2010 (10)104
Reviews
The featuresFeature-wise the CMS supports three major
areas: content management for web sites, E-
commerce (for example on-line stores) andcommunity sites. The features are organized
into modules and depending on the license
the administrator can choose from a long list
of them. Native Kentico modules include:
a Rich Text editor, Blogs, a workflow
system, forums, international support, E-
commerce, an advanced security module,
an event calendar and booking system,
a newsletter module, an image gallery,
content staging, an on-line forms module,
friendly URLs and SEO, a friends module,
full-text search, polls, web analytics, a Wiki
module, reporting, Geomapping, a contentrating module, message boards, a taxonomy
module, a media library and a private
messaging module.
A group of administrators manage any
number of sites through an administration
interface. This designated space consists
of the site manager and the CMS desk
level. The site manager is for global and
more advance administration on the site
level, for example adding modules. The
administrators or the editors use the CMS
desk to manage content. Users typically
see the sites only. Working with content iseasy enough; mouse-clicks and a rich text
editor allow people from a non-technical
background to use Kentico.
The CMS has an open and well
documented API so it is possible to extend
Kentico through developing new modules or
purchase them from Kentico’s market place.
That allows customization for a wide range of
different use cases.
LicensingKentico is commercial software; there are
several licenses that can be purchased. Small
companies can start with the free edition
that is limited in some ways, for example to
1 editor per site, 100 site members and 10
products in the E-commerce module. The
base license starts from $1,999 and has its
limitations especially in the E-commerce and
social networking section. Companies with a
focus on one of those might consider buying
the E-commerce or the social networkingpackage instead. A large company with a
number of sites to manage could go for an
Unlimited license. All packages include
maintenance .
DevelopingKentico integrates tightly with Visual Studio.
With the help of the CMS package the
developer can access Kentico’s permission
system, UI controls and furthermore. By
using these libraries, modules for every
possible customers’ need can be developed
easily.
Design and stylingKentico has a tidy interface using AJAX
extensively. Most browsers are supported
as far as the actual sites are concerned. The
administrative interface is limited to fully
work on the most common browsers.
To customize the design designers can
change CSS for the different templates.
Editing can be done via the admin interface.
It is also possible to create new or extend
existing templates. These templates can be
structured into different web parts, static text, images or static html for example. By
placing web parts into different regions, the
designer can create a custom template via
drag and drop in the admin interface. For
more advanced templates, developers can
work with ASPX page template and create
the templates in Visual Studio.
Another possibility to customize layouts
is to use widgets instead of web parts.
Administrators, editors or even the users
themselves can be granted permission
to place widgets into templates. Several
widgets come with the Kentico installation
including general widgets like a clock or
a date and time widget but also content
widgets that show the latest posts. If
needed, custom widgets can be developed
as well.
IntegrationKentico is designed with a Microsoft
environment in mind. It is written in
ASP.net. To run it on a server the softwarerequires ASP.Net and support for a Microsoft
SQL server 2005 or higher. Within such an
environment Kentico is easy to install with
a click-through wizard. For development,
Kentico Offers two different approaches.
The portal engine development model for
developing the Web sites without deeper
programming skills and the ASPX template
development model for developing the Web
site using Visual Studio.
Summary
Kentico is a fully-fledged CMS and it can beextended without problems. It was easy to
use for a couple of standard use cases, creating
and editing static content or changing styles
of templates for example. As strength of the
system we see the E-commerce module that
offers a quite advanced solution including
payment options for easily creating small to
medium web shops. The main advantage,
however, might be for those who work in a
Microsoft environment: Kentico is tightly
integrated into .NET and works together
with Silverlight, LDAP and Sharepoint as
well.
To get an impression of Kentico yourself just
go to http://www.kentico.com/Download.aspx
and download a trial version or play with an
instance set up for you on the web under http://
www.kentico.com/Demo/VirtualLab.aspx
without bothering to install the software.
by Milena Reichel
Kentico CMSKentico is a fully-fledged CMS on the Microsoft asp.net platform.Developed by Kentico software the CMS comes with the promisethat it is a “flexible, all-in-one solution for web developers“. We willintroduce features, licenses, development, design and styling sothat you get a first impression.
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 104/107
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 105/10702/2010 (10)106
Book reviews
SInce its inception, Flash has been a very powerful 2D tool. If
you’ve used Flash for any length of time, then you’ll be familiar
with using the timeline, tweens and DisplayObjects etc. and
how to manipulate them to your needs. However, as time passes,
technology advances and clients utter those fateful words I want a
website like that , you’ll find yourself pushing 2D beyond its limits
and into the 3D realm.
Flash has been able to simulate 3D graphics for some time and
there are numerous open source frameworks available to achieve
this, but none more popular so than Papervision3D. Maybe, inshort, because it’s extensive, powerful, effective and exposes an
API very similar to other mainstream 3D frameworks for different
platforms. This all comes at a cost, though, because, if you’ve already
attempted to use Papervision3D, then you’ll know that it’s quite a
different ball of wax from what Flash developers are commonly used
to. To make matters worse, there is very little decent documentation
out there on the web and the few tutorials that do exist aren’t always
very comprehensive.
Enter the Wrox Professional Papervision3D book by Michael
Lively.
I was quite excited about reading this book as I had heard good
comments from a lucky few who were able to get their mits on it early.So, when it finally arrived, I immediately set about reading it. Upon
first leafing through its pages, one could not help but be impressed
with the shear level of detail that has been included. Beginning with
a chapter on programming 3D in Flash without using a third party
API and explaining the fundamentals of 3D in general, the author
Authors: Michael Lively
Publisher: Wiley Publishing, Inc.
ISBN: 978-0470742662
Paperback: 720 pages (16 chapters)
Price: L29.99 GBP / $49.99 USD
Website: http://eu.wiley.com/WileyCDA/WileyTitle/productCd-
0470742666.html
Professional Papervision3D
clearly makes no assumption that the reader has any prior knowledge
of developing with 3D. Neither does he assume that the reader will
be instantly familiar with compiling a third party API as he explains
importing Papervision3D into both Flash and Flex.
With each passing chapter, the reader is taken on a progressive
journey through each of Paper vision3D’s features and capabilit ies,
leaving no stone unturned, until all possible topics have been
exhausted. Starting with understanding the requisite guts ofPapervision3D and building the all important Hello, world!
application, Michael describes the use of the Scene, Viewport,
Camera and Renderer objects, applying materials to objects and
moving, translating and rotating those objects. These topics are
built on over the first part of the book until the reader is able
to import models from 3D Studio Max, build complex scenes
complete with lighting, and apply shaders, bump maps and even
video materials.
At this stage, the reader should be more than capable of using
Papervision3D efficiently in their next Flash project, but Michael
Lively hasn’t finished, yet. Following a strong chapter on improving on
Papervision3D’s particle engine, Michael discusses incorporating geo-location, XML and external databases for a greater user experience,
taking Papervision3D into the information arena with some solid tips
on how to do this right.
Finally, Michael gets out the heavy artillery. Saving the best for
last, he provides a fantastic chapter on developing 3D games for
the Wii, complete with instruction on how to interact with the
Wiimote, incorporating a Flash Media Server, making 3D movies
and virtual tours and finishing up with some solid and very useful
appendices.
In short, Professional Papervision3D is a phenomenal book tackling
a very tough topic and doing it very well. While there are now several
books targeting Papervision3D and some of them doing a very good job, you’d still be hard pressed to find a book that covers everything
so neatly as this one and in such a way that it makes little difference if
you are a Flash 3D veteran or novice to Flash in general.
by Lee McColl Sylvester
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 106/10702/2010 (10) 107
Book reviews
As the Flash player is a big part of the discussions related to
open versus closed source software, I thought of sharing another
remarkable and distinctive gem from friendsofED. This is book is
different not because it speaks about how to fly to Mars in 1 hour but
because it divulges the open perspective of the flash platform. In this
book, some of the great open source developers gathered to share their
thoughts on specific but very highly acclaimed open source Flash
related projects such as Papervision3D. Don’t tell me you are also in
love with it.
The book begins with introducing the realm of open source andhighlights a few specific open source projects. The next 4 chapters
explain how to create an open source development environment
along with writing, testing, and deploying the code. Do you still need
a commercial tool for your ActionScript development? I don’t think
it likely.
The following two chapters are devoted to AMFPHP and SWX,
because they are aware of the fact that there are many developers who
use the Flash platform with PHP, one of the world’s top 5 programming
languages, and who don’t feel comfortable or efficient with XML.
SWX is a native data format just like JSON is for Javascript.
Next comes the highly acclaimed & interesting project HAXE. Haxe
is a cross platform programming language that compiles for differentplatforms such as Adobe Flash, Javascript, C++, PHP, and others. If
you are a WORA person, then you will love to know about it.
If you are thinking that the authors are going to skip the animation
libraries then you are wrong, because two tweening libraries, FUSE
and GoASAP, are discussed.
Authors: Aral; Grden, John; Allen, Chris; Mineault, Patrick;
Cannasse, Nicolas; Arnold, Wade; Hauwert, Ralph; Hughes,
Mark Balkan
Publisher: friends of ED.
ISBN: 1430209933Language: English
Pages: 350 Pages
Website: http://www.friendsofed.com/book.html?isbn=97814
30209935
The Essential Guide to Open Source Flash
Development
The last three chapters talk about the most demanding open source
Flash projects such as Papervision3D and Red5. Papervision3D is one
of the GOD projects in the Flash platform in both the closed and open
source world. On the other hand, Red5 has a very reputable position
among commercial (expensive?) media servers like FMS and Wowza.
Let me tell you something before concluding the review: if you
are assuming that you will get extensive and inclusive details about
each project, you got it all wrong. Each project itself is so immense
that it would require a separate book to be authored on each. So the
crucial question here is how this book will help you. The answeris that it not only explains how each project is beneficial, but kick
starts the process of using it.
Whether you want to know how to get started with open source
flash projects, or you are curious to know what the open source
Flash community is offering, then this book is definitely worth
your attention.
by Ali RAZA
8/10/2019 Flash and Flex - Issue #2 February 2010
http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 107/107