Flash and Flex - Issue #2 February 2010

8/10/2019 Flash and Flex - Issue #2 February 2010

http://slidepdf.com/reader/full/flash-and-flex-issue-2-february-2010 1/107

http://www.influxis.com/






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

[email protected]

Art Director: Ireneusz Pogroszewski

[email protected]

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.

mailto:[email protected]












http://flash-gallery.com/


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



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



http://www.page-flip.com/


http://www.digicrafts.com.hk/


http://www.wowzamedia.com/


http://www.kindisoft.com/

http://www.kevinruse.com/


http://www.coffeecup.com/


http://www.gamersafe.com/


http://www.flashandmath.com/


http://www.cartoonsmart.com/


http://www.erain.com/


http://www.fitc.ca/

http://www.fitc.ca/

http://www.midnightcoders.com/


http://www.flashbelt.com/


http://www.g2s.com/

http://www.g2s.com/

http://www.infosoftglobal.com/


http://www.creativeniche.com/

http://www.exsys.com/


http://www.flexer.info/


http://actionscriptjobs.com/


http://www.flexcommunity.net/







http://www.g2s.com/



http://www.fitc.ca/













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.

http://www.adobe.com/devnet/devices/articles/

http://www.adobe.com/devnet/devices/articles/delivering_video_fp10.1.html):














http://www.adobe.com/devnet/devices/articles/



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.

http://code.google.com/p/swfobject/wiki/documentation



http://www.adobe.com/livedocs/flashmediaserver/3.0/hpdocs/help.html?content=00000074.html











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");

}

}

http://www.adobe.com/devnet/devices/articles/delivering_video_fp10.1.html



http://www.adobe.com/devnet/flash/articles/as_bestpractices.html




http://www.adobe.com/devnet/flex/articles/as3_tuning.html












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

http://www.eventbrite.com/org/385269137?s=1646934


http://www.adobe.com/devnet/flashplayer/articles/mobile_demos_fp10.1.html




http://help.adobe.com/en_US/as3/dev/



http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/index.html




http://help.adobe.com/en_US/as3/mobile/



http://www.adobe.com/

http://www.adobe.com/devnet/flash/articles/authoring_for_multiple_screen_sizes.html










http://www.adobe.com/














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



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.



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



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.

http://flashartofwar.com/


http://developerhappyhour.com/

http://flashartofwar.com/2010/02/15/why-the-ipad-will-redefine-our-view-of-rias/



http://writingresearchediting.com/

http://writingresearchediting.com/




http://developerhappyhour.com/










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

http://blogs.adobe.com/flashplayer/










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/)

http://desuade.com/dmp


http://desuade.com/partigen


http://desuade.com/

http://desuade.com/








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

http://www.simalam.com/

http://www.simalam.com/






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).



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

�

�

�



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

http://aneventapart.com/alasurvey2008/








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
































































































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




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



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




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

http://en.wikipedia.org/wiki/Website#Types_

http://en.wikipedia.org/wiki/Website#Types_



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!

�

�






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

http://entrepreneurs.about.com/cs/

http://entrepreneurs.about.com/cs/




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

http://www.stumbleupon.com/





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

http://9rules.com/

http://bestweb/

http://www.cssbeauty.com/



http://www.csselite.com/

http://www.cssheaven.com/

http://cssmania.com/

http://cssremix.com/

http://www.csszen/

http://cssline.com/

http://command/

http://designshack.co.uk/

http://patterntap.com/

http://siteinspire.net/

http://www.smashing/

http://www.thebest/

http://www.thefwa.com/

http://www.unmatched/

http://www.webcreme.com/

http://www.missionstatements.com/



http://www.webcreme.com/

http://www.unmatched/

http://www.thefwa.com/

http://www.thebest/

http://www.smashing/

http://siteinspire.net/

http://patterntap.com/

http://designshack.co.uk/

http://command/

http://cssline.com/

http://www.csszen/

http://cssremix.com/

http://cssmania.com/

http://www.cssheaven.com/

http://www.csselite.com/



http://bestweb/

http://9rules.com/




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



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

�






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






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!

�

�

�

http://www.businesslink.gov.uk/bdotg/

http://www.businesslink.gov.uk/bdotg/




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

�

� �

�

�

� �

� �

�



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

�




02/2010 (10) 45







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

http://www.xmind.net/






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



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




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



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





http://www.fitc.ca/



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



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

http://www.themidnightcoders.com/community-edition-application.html?utm_source=ffd&utm_medium=banner&utm_campaign=ce

http://www.themidnightcoders.com/community-edition-application.html?utm_source=ffd&utm_medium=banner&utm_campaign=ce



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

[email protected].

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.








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.


• Basics of OSMF in action

What you shouldknow…• As3 video basics

Level of difficulty

by Chaim Sajnovsky





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 );

}



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

http://rtmp//mygreatRTMPserver.com/clips/mp4:

http://rtmp//host/app/foo/bar/stream

http://rtmp//host/

http://opensource.adobe.com/wiki/display/

http://opensource.adobe.com/wiki/display/

http://rtmp//host/

http://rtmp//host/app/foo/bar/stream

http://rtmp//mygreatRTMPserver.com/clips/mp4:


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]

http://www.g2s.com/

http://groups.adobe.com/groups/7af970e6e4/hives


http://help.adobe.com/en_US/OSMF/1.0/AS3LR


http://twitter.com/osmf







http://www.g2s.com/



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.


• 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

http://aws.typepad.com/aws/2009/05/ec2-and-wowza-media-support-belgiums-largest-live-streaming-event.html




http://aws.typepad.com/aws/2010/02/thats-flexibility-baby.html



http://www.jackofallclouds.com/







http://www.jackofallclouds.com/



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

http://www.wowzamedia.com/ec2.html



http://www.amazon.com/ec2







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






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.


• 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>

http://labs.adobe.com/


http://www.adobe.com/air


http://www.adobe.com/cfusion/

http://www.adobe.com/2006/mxml




http://www.adobe.com/cfusion/





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



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



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





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  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:

[email protected]

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




http://www.adobe.com/cfusion/marketplace/index.cfm













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.


• 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



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

�

�



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


<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"/>



</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


http://ns.adobe.com/mxml/2009

http://library//ns.adobe.com/flex/spark

http://library//ns.adobe.com/flex/mx







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


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



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


<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" #A



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>



<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







http://ns.adobe.com/ai/2008

http://ns.adobe.com/fxg/2008/dt

http://ns.adobe.com/fxg/2008/dt

http://ns.adobe.com/ai/2008









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


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



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











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

http://www.manning-sandbox.com/forum.jspa?forumID=572








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.


• 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



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

[email protected].

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

https://cocomo.acrobat.com/



http://xmpp.org/software/libraries.shtml



http://xmpp.org/

http://xmpp.org/




http://xmpp.org/software/servers.shtml







http://xmpp.org/







• 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

http://www.igniterealtime.org/







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"/>



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

http://www.igniterealtime.org/downloads/download-landing.jsp?file=xiff/xiff_3_0_0-beta1.zip










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]);

}



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


REQUEST _ DENIED


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";


}

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";


}

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



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;

}

http://www.mxml.it/tutorials/xiffdriver.zip





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



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;

}

http://www.mxml.it/

http://www.adobe.com/aboutadobe/pressroom/

http://xmpp.org/rfcs/rfc3921.html

http://www.adobe.com/devnet/flashplatform/services/

http://www.igniterealtime.org/community/index.jspa

http://www.igniterealtime.org/downloads/index.jsp

http://www.igniterealtime.org/downloads/index.jsp

http://www.igniterealtime.org/community/index.jspa

http://www.adobe.com/devnet/flashplatform/services/

http://xmpp.org/rfcs/rfc3921.html

http://www.adobe.com/aboutadobe/pressroom/

http://www.mxml.it/



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

http://www.tcoz.com/samples/dynamicmediators.zip





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 );

}







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



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

http://www.puremvc.org/




http://www.tcoz.com/blogger/blogger.html






http://ffdmag.com/forum




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.


• 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

http://runpee.com/

http://www.asual.com/swfaddress/





http://runpee.com/



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

}




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.


http://labs.adobe.com/technologies/textlayout/demos/


http://www.adobe.com/devnet/livecycle/








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/

http://bugs.adobe.com/

http://labs.adobe.com/technologies/shibuya/


http://www.flashmobileblog.com/2010/02/24/


http://www.flashmobileblog.com/








http://bugs.adobe.com/



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



flashcreed.com

02/2010 (10) 95



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.



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.



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



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

https://developer.anscamobile.com/products/get-corona



http://developer.anscamobile.com/products/get-corona-trial




http://www.anscamobile.com/



http://twitter.com/CoronaConnect

http://facebook.com/CoronaConnect



http://twitter.com/CoronaConnect










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



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.

http://www.themi/

http://www.themidn/

http://www.themidn/

http://www.themi/



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

http://alternativaplatform.com/en/demos/altcity/

http://tankionline.com/

http://tankionline.com/

http://alternativaplatform.com/en/demos/altcity/



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

http://blog.alternativaplatform.com/ru/files/2009/02/

http://blog.alternativaplatform.com/ru/files/2009/12/mipmapping.swf

http://blog.alternativaplatform.com/ru/files/2009/12/mipmapping.swf

http://blog.alternativaplatform.com/ru/files/2009/02/



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.

http://www.kentico.com/Download.aspx


http://www.kentico.com/Demo/VirtualLab.aspx












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

http://eu.wiley.com/WileyCDA/WileyTitle/productCd-0470742666.html






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

http://www.friendsofed.com/book.html?isbn=97814

http://www.friendsofed.com/book.html?isbn=97814

Documents

Flash and Flex - Issue #2 February 2010