Flash e Flash by Fabio Oliveira

Editor’s Note 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 greatest news 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

ewa.samulska@ffdmag.com

Editor in Chief: Ewa Samulska ewa.samulska@ffdmag.com Editor: Patrick French DTP Team: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Art Director: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl 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: cooperation@software.com.pl Whilst every effort has been made to ensure the high quality of the magazine, the editors make no warranty, express or implied, concerning the results of content usage.

Thanks to the most active and helping beta testers:

Russell TangChoon, Lee Graham, Jassa Amir Lang, Ed Werzyn, Yann Smith-Kielland, Justus, Csomák Gábor, Kevin Martin, Charles Wong, Ali Raza, Almog Koren, Izcoatl Armando Estanol Fuentes, Lionel Low, Michael J. Iriarte, Paula R. Mould, Rosarin Adulseranee, Sidney de Koning

To create graphs and diagrams we used company.

program by

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 networks. The editors hold no responsibility for misuse of the presented techniques or consequent data loss.

All trade marks presented in the magazine were used only for informative purposes. All rights to trade marks presented in the magazine are reserved by the companies which own them.

02/2010 (10)

CONTENTS SPECIAL REPORT 08 Delivering Video For Flash Player 10.1 On Mobile Devices EDMOND AU

12 Why the iPad Will Redefine Our View of RIAs JESSE FREEMAN

InBrief 16 News

GÁBOR CSOMÁK

Tools 20 Desuade’s Open Source Flash Motion and Particle Effect Engines ANDREW FITZGERALD

22 Four Letter Words You Need to Use: Goal & Plan ADAM MALAMIS

Beginners 24 What Kind of Website Should I Make? ALEXANDER DAWSON

Workflows 52 Project Organization Best Practices

LOUIS DICARRO

OSMF 56 Dive into OSMF-Part One CHAIM SAJNOVSKY

Flash Media Servers 60 A Case for Streaming Media and the Cloud CRAIG BURRISS

FLEX 64 Flex and Air LOUIS DICARRO

70 Understanding Flex 4 components

TARIQ AHMED, DAN ORLANDO, JOHN C. BLAND II, AND JOEL HOOKS

76 Flex and Jabber GIORGIO NATILI

PureMVC 86 Dynamic Views and Mediators with PureMVC TIM CONSOLAZIO

ActionScript Development 90 Deeplinking your Flash and Flex applications with SWFAddress

BY DAN FLORIO 6

02/2010 (10)

Readers BUG 92 Readers BUG – Readers Q&A section ANSWERS PROVIDED BY MARK DOHERTY

Profile 94 Flashcreed – New Kid in Town

Interview 98 Talking Corona – An interview with the Ansca Mobile Co-Founders

HETAL BHATT

Story 100 A Day in the Life of Joe the Coder KATHLEEN ERICKSON

Reviews 102 Alternativa3D Version 7 – A New Step into the Internet 3D. Review of version 5.6.0 GREG BOLOTOFF

104 Kentico CMS MILENA REICHEL

Book Review 106 Professional Papervision3D

102

LEE MCCOLL SYLVESTER

107 The Essential Guide to Open Source Flash Development ALI RAZA

Tip of the issue Smoothing bitmaps with jsfl Tom 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 off 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: fl.outputPanel.clear(); var item_array = fl.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; } } }

02/2009 (10)

The issue 2/2010 sponsored by Advertisers: Influxis www.influxis.com ..............................................................2-3

FITC www.fitc.ca ................................................................................51

Mediaparts Interactive S.A www.page-flip.com ................................................................5

Midnightcoders www.midnightcoders.com ...................................................53

Digicrafts www.digicrafts.com.hk .......................................................17

Flashbelt www.flashbelt.com .................................................................55

Wowza Media Systems www.wowzamedia.com ......................................................19

Gate2Shop www.g2s.com ..........................................................................59

Kindisoft www.kindisoft.com ..............................................................21

Infosoft Global (P) Ltd. www.infosoftglobal.com .....................................................63

Kevin Ruse + Associatess Inc. www.kevinruse.com ..............................................................23

Creativeniche www.creativeniche.com .................................................67

CoffeeCup Software, Inc. www.coffeecup.com ..............................................................27

Exsys www.exsys.com .......................................................................69

Gamersafe www.gamersafe.com .............................................................33

Flex{er} www.flexer.info ..............................................................91

Flash and Math www.flashandmath.com ......................................................39

ActionScriptJobs.com http://actionscriptjobs.com/ ........................................103

Cartoon Smart www.CartoonSmart.com ......................................................41

Flexcommunity.net www.flexcommunity.net ...........................................106

Electricrain www.erain.com ........................................................................45

Special Report

Delivering Video For Flash Player 10.1 On Mobile Devices by Edmond Au

rom providing engaging experiences through rich Internet applications to delivering 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 profile to target Flash Player 10.1 on devices? This article provides a table that summarizes key encoding profile settings. • Video content optimizations (http:// w w w. a d ob 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 ob 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 video encoding guidelines Based 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 advances around 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 source frame 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 configuration at 500 kbps • Medium-quality, over-3G, such as the 3G – All configuration at 350 kbps • Low-quality, over-2.5G, such as the 2.5G – All configuration at 100 kbps

Video content optimizations To improve performance, Adobe recommends avoiding or minimizing use of videos that: • Are rotated, skewed and transformed through a perspective projection • Are bitmap-cached • Have filters, such as blur or glow effects, applied • Are accessed through BitmapData • Have alpha ( _ alpha) or color transforms

Table 1. Adobe-recommended encoding parameters for video targeting mobile devices Preferred format

Video: H.264, Costrained Baseline profile at 24 fps * Audio: AAC-LC, 44.1 kHZ, stereo

Alternate format

Video: On2 VP6, Simple profile 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

100 kbps

Resolution

HVGA (480x320)

HVGA (320x240)

Audio bit rate

Up to 160 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.

02/2010 (10)

Delivering video for Flash Player 10.1 on mobile devices

• 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 file • Use Scale-9 grid

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.

Video player optimizations

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

The 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 the specific 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 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-specific 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-specific information – 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 orientation Flash 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 the UI 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!

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.

02/2010 (10)

}

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.

Special Report

Video stream selection Based 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 detection routines provide a high level of confidence that the requesting device is a mobile device, defaulting to a lower-quality video stream – for example, the 3G – 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

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;

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 for frequently changing objects Avoid bitmap caching (via the cacheAsBitmap 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 efficiency 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:

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

• ActionScript 2 Best Practices (http:// www.adobe.com/devnet/flash/articles/as_ bestpractices.html) • Tips for tuning ActionScript 3 performance (http://www.adobe.com/ devnet/flex/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 here Flash 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

02/2010 (10)

Delivering video for Flash Player 10.1 on 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 usage of the new APIs in Flash Player 10.1

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

Learn how to tailor your content to deliver the best possible user experience on mobile devices. Check out the following new draft documents:

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

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 mobile and 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. A

02/2010 (10)

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

Please consult the following resources for more information: • Learn more about Flash Player 10.1 (ht tp : / / labs.adobe.com /technologies / flashplayer10/) 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 E

Edmond 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 IT consultant 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.

Special Report

Why the iPad Will Redefine Our View of RIAs by Jesse Freeman Apple has finally released the magical and mythical Mac Tablet, affectionately named the iPad.

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 is how 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 an outdated 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 sounds like 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

02/2010 (10)

Why the iPad Will Redefine Our View of RIAs

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 that Right 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's Apps. 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 on Apple'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

02/2010 (10)

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 only way 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 their iTunes 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 Money Although Flash has enabled us to create farreaching, 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 everything on 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 it gets 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 possibility of 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

Performance When 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 motion worked 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 crossplatform, fully backwards compatible plugin 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 happens when 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 and always run in full screen mode, letting

02/2010 (10)

Why the iPad Will Redefine Our View of RIAs

dependence on local file system storage, another thing RIAs do very well.

Conclusion

the user focus on just that app. That's enough about performance, how do we stay connected?

Always On Internet connection The last piece of the puzzle is an alwayson 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

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 internet connection 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

JESSE FREEMAN With over 7 years of Flash development experience, Jesse Freeman has worked for VW, Tommy Hilfiger, 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â&#x20AC;&#x2122;t looked back since. Jesse runs a Flash blog called the Flash Art of War (http:// flashartofwar.com) and is an active leader in New Yorkâ&#x20AC;&#x2122;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 @theflashbum.

02/2010 (10)

The 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 how many 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 more powerful, 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 be amazing 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 no choice; 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/whythe-ipad-will-redefine-our-view-of-rias/ This article was edited by Ronda Lee Levine http://writingresearchediting.com.

In brief

Flash Camp Boston for free, March 19th

Where: The Charles Hotel, Harvard Square, 1 Bennett St. Cambridge, MA 02138 Why: Why not? What to Bring: Yourself and your laptop. The camp organizers will be providing the beer, food, prizes, and access to parts of the engineering team so you can get all of your Flex questions answered. From 5 pm till 11 pm there will be presentations of Flex 4, Flash Builder 4, ColdFusion Builder, Flash on Mobile, and so on..

Flash Player Gets a New Product Manager

couple of weeks ago, Justin EverettChurch left Adobe to start his own company, leaving a gap in the Flash Player product management team and Thibault Imbert has accepted this position. Thibault is an ActionScript master and will

make an awesome addition to the player team. He will be relocating to San Francisco sometime soon so things are going to get very French around here. from theFlashBlog.com

Comparison of Flash vs. HTML5 video CPU usage

from digitalBackCountry.com

iWantFlash! Website launched

If you want to let Apple know how you feel about Flash on the iPod, iPhone, and iPad, please sign this (http://iwantflash.com/ ?page_id=6) petition and re-tweet! from everythingFlex.com

Update to Flex SDK 3.5

The Flex team has released the 3.5 SDK, than a few weeks later an update to the 3.5 SDK that addresses an issue with the Flex-based AIR auto-update UI packaged within the SDK (SDK-24766). The refreshed build, SDK 3.5a, has only a few files modified in order to fix this issue and this change does not affect the signing and caching of the SDK 3.5 RSLs originally released in December.

n part, Steve Jobs stated that the iPad didn't support Flash because it was a CPU Hog, so Apple used a technology called HTML5 instead. Since the comparative efficiency of Flash vs. HTML5 seemed easy enough to quantify, Jan Ozer endeavored to do so, using YouTube's new HTML5-

based player as the test bed. Specifically, he played a YouTube video in the same browser twice, once via HTML5, once via Flash, and measured CPU utilization during playback. from streamingLearningCenter.com

Adobe AIR on devices

from blogs.adobe.com

Flash Player 10.1 Beta 3 Is Out on Adobe Labs

A new version of Flash Player 10.1 has been released: Flash Player 10.1 beta 3. The release adds or improves support for new platforms, mobility design, developer productivity, enhanced browser integration, and expanded options for high quality media delivery. Lots of bugs are fixed in this release... bugs in graphics, networking, audio/ video, text input, and other areas. from flexer.info

Steve Jobs: Flash is dead

Last month – according to Valleymag – Jobs visited The Wall Street Journal, and tried to convince the leaders not to use flash in the future.

ne of the big pieces of news at Mobile World Congress was the announcement of Adobe AIR on Android, and the tie-in with our Adobe Packager for the iPhone. At MAX 2009 Adobe demonstrated the creation of iPhone applications using the upcoming Flash Professional CS5, and the twist is that these applications are based on AIR 2.0. To demonstrate the possibilities Adobe showed some of the same applications created in

Flash Professional CS5 that are available on the AppStore today, running on Android devices using Adobe AIR. The work-flow couldn’t be simpler, it’s simply a repackaging effort with a little UX tweaking for basic layout and hardware capabilities. from flashMoblieBlog.com

02/2010 (10)

In brief The witnesses of this conversation said that Jobs was brash and rejected Flash. He described flash as a processor eater filled with security holes and dead techniques. Afterward, Jobs put a list of floppy 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 batteries would last 1.5 hours with Flash, instead of 10 hours.

Flash Player 10.1 (also on devices)

from beszeljukmac.com

The Flash Player team has a new blog

The team wanted to start this blog (http:// blogs.adobe.com/flashplayer/) 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 providing updates to the product. Now the Flash Player team has a blog as well, to provide good stuff. digitalbackcountry.com

Flash 10 was adopted fast

By 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 of momentum. 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.

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 most important addition to the mobile experience was the ability to playback Flash content in full screen mode, enabled by these powerful webkit browsers.

from flashMobileBlog.com

Adobe AIR 2.0 Beta 2 Released

2 digitalbackcountry.com

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 have a role to play in ensuring that your content works well on these new devices.

nd 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 Adobe AIR 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 file promise classes

Go to official 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 the Adobe 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

News selected by Gábor Csomák 18

02/2010 (10)

Tools

Desuade’s Open Source Flash Motion and Particle Effect Engines by Andrew Fitzgerald

Desuade Motion Package – http://desuade.com/dmp Stop – 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 realistic motion in your games with physics that doesn’t require you to be a rocket scientist. Realistic motion isn’t just for hardcore frameby-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 physics can 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/partigen Based 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 pointand-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’s fully 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. Imagine being 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.

ANDREW FITZGERALD Desuade (http://desuade.com/)

02/2010 (10)

Tools

Four Letter Words You Need to Use: Goal & Plan by Adam Malamis

hether 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 action plan – yes, you should absolutely write this down!

Know your goal Is 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?

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 market

Know your budget and time line

Does your business appeal to a wide variety of people, or a niche? What kind of imagery will 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?

Chances are you will be talking to at least a few design houses or freelancers. Having a 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 designer will 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.

Know your product/service This seems like a nobrainer, but there is a lot more thought involved than you would think. Sure, your widget 2.0 is oh-so-cool and

About Simalam Media

We specialize in helping small to medium sized businesses create customer perception, or a “brand” through definitive 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 effectively with current or potential clients, or simply maintaining mindshare. www.simalam.com – 1-888-520-3553

02/2010 (10)

Beginners

What Kind of Website Should I Make? Excerpted from the book Getting StartED Building Websites by Alexander Dawson (FriendsofED/Apress, 2009).

by Alexander Dawson Before you can sit down and start publishing your website, you need to have an idea in your mind of what you want to achieve.

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

Understanding this can help you create something that appeals to the needs and views of other people around you.

• How to mold your initial idea into something potentially useful • Where to find and draw inspiration for your design and site features • The basics of information architecture and producing a design

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

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.

Your Inner Processes While 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 people have 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?

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 Analysis If you already have a few ideas you want to put to the test, ask yourself the following questions. 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 activity 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 will show you the kinds of answers you could give and

02/2010 (10)

What Kind of Website Should I Make?

• 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 the service 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,

02/2010 (10)

Every decision you make in the process of creating your site will derive from various questions 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’

��

Q: Why do I think this is a good idea?

How Do You Think?

��

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

yet show tremendous enthusiasm when it comes to piling on criticisms of our efforts and skills!

��

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 chapter, so you can see how everything comes together.

��

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 finalize 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 Internet is a public place; once you put your site out there, it’ll be available for 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 the needs 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. Not only 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 both in-depth and interesting from a statistical point of view. You can see them at http:// aneventapart.com/alasurvey2008/.

Blog A 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 bring up 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!).

Commercial

Figure 1-3. Jonathan Snook’s blog focuses entirely upon web development and his own projects

Sites 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 feel of 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!

Community

Figure 1-4. Amazon sells a wide variety of goods, including books, entertainment, electronics and computers

Sites 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

02/2010 (10)

What Kind of Website Should I Make?

Web Form Builder by John Shaffstall

Create Web Forms With Ease. No Scripts, No HTML, No Coding!

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 Web Form 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 Experience I 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 clicked Close 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 few unpleasant 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 eyepopper. 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.

Discount coupon

www.coffeecup.com

You can also use the coupon FLEX for 15% off any order 02/2010 (10)

Beginners

sites or sites that provide powerful usergenerated services, such as wikis, forums, chat rooms, and other interactive functionality, which I’ll cover greater detail in Chapter 8 (see Figure 1–5).

Content Content-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 a particular subject.

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 large consumer 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.

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

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

Intranet Intranets are a more unusual type of site because they aren’t usually available to the

Figure 1-7. Microsoft’s homepage provides detailed information about its goods and services

02/2010 (10)

What Kind of Website Should I Make?

Microsites Microsites 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 product or 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 information about 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.

Mirror

Figure 1-8. The media and Internet giant AOL maintains a .tel domain to give its basic contact details

The 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 the original 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 unavailable for 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!

News 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 offers a wide range of services

02/2010 (10)

One 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

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 catch a 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.

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.

Portfolio Many 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 includes methods 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

Niche Sites that are described as “niche” have highly focused 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.

Figure 1-11. The hello world collection allows you to see the words “Hello World” in various programming languages

Personal One 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 of sites 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!

Figure 1-12. Professor Stephen Hawking has his own personal site!

Portal Many 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

Figure 1-13. The homepage of the W3C brings all of the various working groups they run together

02/2010 (10)

What Kind of Website Should I Make?

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.

Review The 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 sites focus 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.

Targeted

Figure 1-14. Headscape is a web-design business with an attractive portfolio that shows off the various services offered

Figure 1-15. The Internet Movie Database offers detailed reviews about movies and television shows

Figure 1-16. Google’s dedicated site for mobile browsers allows small handsets to gain access to the powerful search engine

02/2010 (10)

Finally, 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 the previously 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-thanpleasing 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:

Beginners

Finally, you need to decide whether you want the site to be content, user, or service driven: • 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 fit multiple 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 book is 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

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 Identity At 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 your site 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 Confusion When 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

��

• Yes: Commercial and Portfolio • No: Corporate, Intranet, Mirror, and Personal • Maybe: Blog, Community, Content, Micro, News, Niche, Portal, Review, and Targeted

��

Second, you want to determine whether you want to make income as a result of the site:

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.

��

• Personal: Niche and Personal • Business: Commercial, Corporate, Intranet, and Portfolio • Both: Blog, Community, Content, Micro, Mirror, News, Portal, Review, and Targeted

��

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!

02/2010 (10)

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 Name The 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 understand its 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 venture acts 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 the same 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 wordbased 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 existing names. • 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 things harder 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 Choice Now 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 to remember 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 your site. From there, the creative process will end, and the hard work of producing the site itself will begin.

Inspiration for the Masses Inspiration 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 larger audience 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 Inspiration Do 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 upcoming information helpful because it provides some general places where you can find quick inspiration.

Natural Inspiration We 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

02/2010 (10)

What Kind of Website Should I Make?

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 might also 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 Media Another 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 if you look at the way things are portrayed or how things are expressed, as long as you have a good imagination.

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 can decide based upon the other elements of your site’s structure (including whether you need something that complicated).

StumbleUpon While 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 directs you 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 Blogs If 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. Many of 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 development blogs that are worthwhile to read on a regular

Friends and Family When 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!

Figure 1-19. The ribbon in Microsoft Office 2007 ribbon is simple, yet beautiful

Figure 1-20. The StumbleUpon toolbar sits in your browser, ready to rate sites you like and dislike

Software Design As 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

02/2010 (10)

Figure 1-21. Smashing Magazine is one of the more popular design blogs and galleries on the Internet

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 Galleries Site galleries are my personal preference when I’m looking explicitly for design ideas for how 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 (or at 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 Techniques What you should do with any inspirational bits 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 of looking 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 your wonderful 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 creativity and getting yourself organized along the way, all of which I’ll cover in detail in the course

Figure 1-22. Command + Shift + 3 takes a unique approach to galleries by using a “hot or not” system

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 Statement A 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 a site 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. Through his 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/.

02/2010 (10)

What Kind of Website Should I Make?

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 document will 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 description about 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 thought about 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

02/2010 (10)

stamp collecting find the stamps they are missing from their collections and complete them.

Market Research Are 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 know I 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 lowquality sites that offer nothing to the end user, 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 search worthwhile (or until you cannot find any more quality results). The stamps example

��

Figure 1-26. Here you can see a simplified version of the word-association process

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” technique described 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 be even 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 site links 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 that might 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 highquality 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 with

02/2010 (10)

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 found and 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 visitors and 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 socialnetworking sites that hold your favorite bookmarks or services that extend a rudimentary service that exists on the Web. 3. Sources: These sites contain useful information, 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 might be 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? Ask yourself 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 identification guide

02/2010 (10)

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 questions until 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 found your 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 offer something 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

��

Figure 1-29. Answering these questions illustrates ways to improve stamp finding significantly!

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. ExplainED At 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.

Brainstorming Now that you have a few basic ideas, you want to expand upon them to decide how best to use them—a process commonly known 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’ll describe 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 (which

02/2010 (10)

What Kind of Website Should I Make?

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 go ahead 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 to brainstorm 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 the idea 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 you run 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

02/2010 (10)

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 Maps Mind 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 you put 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 this approach 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 them more 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 session (see Figure 1–32); the second relates to the

��

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

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 will 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. The session 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 a loosely 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

02/2010 (10)

What Kind of Website Should I Make?

02/2010 (10)

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, you can 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 Architecture The 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 contains a 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 your ideas 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.

Layout When providing the information architecture for your design, layout models can be highly effective in allowing you to take a visual approach to structuring your site. Many visually minded people choose to take this approach, but it can be helpful

Figure 1-34. This concept artwork shows early ideas for a social-networking button

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 that 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 pieceby-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 you with. 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 socialnetworking 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

02/2010 (10)

What Kind of Website Should I Make?

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 your site 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 psychology, conventions, accessibility, and usability should factor into the complete design and its general appearance.

Structure While 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 a potential 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.

Sitemaps Do 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 you place 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 or following 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 children of 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.

Wireframing

Figure 1-35. This sitemap shows how you might structure a basic site in the form of a family tree

02/2010 (10)

Website 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 at

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 create such 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 also provides 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, Site Maps, 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-in downside 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).

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 writing content and code because you will know what pages you need to create, as well as the functionality that you need to refer to.

The Vision Quest

Step 1

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

Begin optimizing your use of information architecture by looking at your ideas pad and organizing 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

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.

Figure 1-36. This wireframe portrays a simplistic two-column layout with navigation, a logo, and a footer

02/2010 (10)

What Kind of Website Should I Make?

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, if you 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 possible with 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 2 In 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 organizing your 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

��

Figure 1-37. You can produce a sitemap by listing your site’s pages and functionality

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 example of 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 3 Now 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 4 Now 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.

Summary Figure 1-38. This basic wireframe takes into account the segments of the site, as well as its contents

02/2010 (10)

In this chapter, you learned how to factor in your needs and ideas to understand what kind of site you want to create, how

Beginners

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), the design 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.

Figure 1-39. This more advanced wire model takes some of the more visual aspects of the site into account

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 sitemaps and 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

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 thinking and 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 realworld 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

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

02/2010 (10)

Workflow

Project Organization Best Practices by Louis DiCarro

Planning and organization of a project may seem like too much trouble at first, but it can often help ensure the success of the project. Soon it will become second nature to start a project with a good file structure and will make the project easier to share with other members of your team.

Level of difficulty

What you will learn… •

Why

project

organization

important and how to do it.

What you should know… •

You should be familiar with the basic working of Adobe Flash CS4.

f 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 include not 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 that what 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 the project for a long period of time.

File system structure There 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 with all 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.

02/2010 (10)

If you look at some third party classes, they will have their own file structure â&#x20AC;&#x201C; 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 exported 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 export the swf to a directory other than the one with the A

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 Unix speak 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 of 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 E

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 to get 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 organization The 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. M

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 folders in 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 things organized. 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 and if 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 or a 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 layers As with assets in the library, it is important to name all of your layers. Be as specific as possible â&#x20AC;&#x201C; instead of having multiple layers named button, try to name each layer by

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 assets with 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 layer would 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 sound layers but best to keep the names of each layer descriptive. One layer could be named backing music while another could be named voice over.

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 important when 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.

Conclusion A 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.

Rules are made to be broken The 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

LOUIS DICARRO Louis DiCarro is a consultant based in NYC and has been working with Flash since the first version. He has taught web development at the college level and has worked for numerous large clients. He can be reached at louis.dicarro.ffd@gmail.com.

02/2010 (10)

OSMF

Dive into OSMF-Part One by Chaim Sajnovsky Due to the exponential growth of video during the last few years, a huge myriad of video players and video based applications were developed. Level of difficulty

What you will learn… •

Basics of OSMF in action

What you should know… •

As3 video basics

ven 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 available sprint 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 OSMF players 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 swc file and the source files without compiling. I personally use the non-compiled source files just in 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 metadata OSMF 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.

02/2010 (10)

Dive into OSMF-Part One

Listing 1. Basic elements import org.osmf.events.MediaPlayerCapabilityChangeEvent; import org.osmf.events.DisplayObjectEvent ;

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?

addChild ( mc_container ) ;

As Adobe defines them Traits define the capabilities of a media element. 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 of the IPlayable trait provides media element's ability to play itself. First we should import some more classes: see (Listing 2).

//MediaPlayer is the basic controller of OSMF. It will manage all the logic

Listening for loading errors

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;

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

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

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

And then modify our onLoad function to this: see (Listing 3).

Modifiyng the videoElement to access all the events Sometimes 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 ) ) );

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

to this: myVideoElement = new

MyVideoElementDebugger( new NetLoader(), new URLResource( new URL ( path ) ) );

check out the tracing…

02/2010 (10)

OSMF in action

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

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 an rtmp path. And remember, please an flv: or and mp4: or an f4v: before the name of your clip. I.e:

succesfully loaded rtmp://mygreatRTMPserver.com/clips/mp4:

myVideoElement.getTrait(MediaTraitType.LOAD).addEventListener(

mygreatvideo.mp4

LoadEvent.LOAD_STATE_CHANGE, onLoad) if(myPlayer.canPlay)

That is the basic approach. Then, of course OSMF gives us more features. Change the VideoElement creation from this:

{

myPlayer.play() }

}

myVideoElement = new VideoElement(

new NetLoader(), new URLResource( new

}

URL ( path ) ) );

function onLoad(event:LoadEvent):void {

to that: myVideoElement = new VideoElement(

//this means, it loaded OK.. if (event.loadState == LoadState.READY) {

//here we find the client, once the media element is

new NetLoader(), new URLResource(

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

if(evt.type==MediaErrorEvent.MEDIA_ERROR) {

}

trace("video not found")

new FMSURL ( path, false ) ) );

loaded..

//error type…

The extra parameter is, as Adobe explains, is useInstance: useInstance:Boolean (default = false) – If true, then the second part of the URL path is 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 new

NetLoader(),

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)

02/2010 (10)

Listing 4. Custom VideoElement Class for debugging package com.example {

import flash.events.NetStatusEvent; import flash.events.StatusEvent; import flash.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)

}

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

CHAIM SAJNOVSKY Chaim Sajnovsky works as flash technologies developer and consultant, mainly specialized in flash video. Based in Israel, you can reach him at: chaim.sajnovsky@gmail.com

02/2010 (10)

Flash Media Servers

A Case for Streaming Media and the Cloud

by Craig Burriss

Guy Rosen writes a blog Jack of all Clouds (http://www.jackofallclouds.com) where he has been tracking via random sampling the hosting providers of the top 500,000 websites. Level of difficulty

What you will learn… •

Using of the Cloud for streaming media delivery

•

Employing Wowza Server on Amazon EC2

What you should know… •

Basics of system administration & media streaming

uy 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 standalone 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 scale without 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 Server software 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 perconsumption billing model lends itself well to media streaming applications. Many use case scenarios are good fit for the cloud, including: • Users with unpredictable, fluctuating 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 overflow 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 chat and network overflow 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 first ever elephant birth in the Antwerp Zoo (http:// aws.typepad.com/aws/2009/05/ec2-and-wowza-mediasupport-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-flexibility-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.

02/2010 (10)

A Case for Streaming Media and the Cloud

Use Case Example Here 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 modest but 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 could be 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

02/2010 (10)

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 EC2 When 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.15 per 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 the Wowza 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 Packages Wowza 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 save customized 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.

Sizing and Monitoring Your Servers Three instance sizes are supported with Wowza for EC2 solution – small, large and

Table 1: Wowza for EC2 pricing (effective Feb. 17, 2010) Instances

US-N. Virginia

US-N. California

Europe

Small

$0.15 per hour

$0.16 per hour

Large

$0.46 per hour

$0.49 per hour

Extra Large

$0.86 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

Next 40 TB/month Data Transfer Out

$0.15 per GB

Next 100 TB/month Data Transfer Out

$0.09 per GB

Data Transfer Out/month over 150TB

$0.09 per GB

Regional Data Transfer

$0.01 per GB

Monthly Charge

United States

Europe

Recurring Monthly Charge

$5.00

Flash Media Servers

Figure 1. The Elasticfox security interface provides a simple to understand view into which ports are open on your EC2 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 how many 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-EC2hostIP]:8080/cacti. You can even customize the Cacti access to individual accounts which allows 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 advantage of EC2 and S3 storage We 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 servers at it as the source for content.

Closing Thoughts Wowza 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 that enables developers and their customers all of the advantages that Cloud computing environment has to offer.

CRAIG BURRISS

Figure 2. The monitoring interface graphs connections for all supported protocol types

Craigâ&#x20AC;&#x2122;s first corporate job back in 1995 involved developing video visual effects 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.

02/2010 (10)

FLEX

Flex and Air by Louis DiCarro Want to write a stand-alone program but don't want to learn Visual Basic or Cocoa? Do you have an existing project online that would work great as an offline application? Already a Flex developer and don't want to have to learn a new language? Adobe AIR is your answer. Level of difficulty

What you will learn… •

Create a simple stand alone application in Adobe Flex.

What you should know… •

Adobe Flex Builder 3.0.

dobe 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, it will 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

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>

02/2010 (10)

Flex and Air

Figure 1. The New Flex Project window

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 takes care of most of the command line processes for you.

Starting a new app In 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

Figure 2. Compare the Flex and AIR file systems

02/2010 (10)

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 default workspace 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 the one 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 where you 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 setting up 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 3. An empty AIR app

Adobe AIR

AIR project files Once 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 2 you 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 we are 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.

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>

Figure 4. The app running

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 good look 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 documentation for 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 for most 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 click

02/2010 (10)

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

02/2010 (10)

FLEX

Editing the XML In 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 through ActionScript, 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 app So 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 would like. 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

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

Figure 8. Double click on this to install

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 on your 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.

Conclusion It 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 applications using 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 custom apps 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.

LOUIS DICARRO

Figure 7. Setting up a temporary certificate

Louis DiCarro is a consultant based in NYC and has been working with Flash since the first version. He has taught web development at the college level and has worked for numerous large clients. He can be reached at: louis.dicarro.ffd@gmail.com

02/2010 (10)

FLEX

Understanding Flex 4 Components by Tariq Ahmed, Dan Orlando, John C. Bland II, and Joel Hooks In this article you’ll learn about the underlying foundation of the Spark component architecture in Flex 4. Most important, you’ll learn key facets that are specific to the Flex 4 Spark architecture. Level of difficulty

This article is taken from the book Flex 4 in Action, 2nd Edition. Flex 4 in Action, 2nd Edition Early Access Edition Tariq Ahmed, Dan Orlando, John C. Bland II, and Joel Hooks MEAP Release: June 2009 Softbound print: June 2010 (est.) | 600 pages ISBN: 9781935182429 Manning Publications

What you will learn… •

Spark component architecture

•

Simple vs. Composite components

•

MXML vs. ActionScript components

•

Flex 3 to Flex 4 migration tips

•

Spark skinning basics

What you should know… •

Basic Flex concepts

•

Basic ActionScript syntax

•

What components are

his will get you on your way toward building your own collection of Spark-based components that take advantage of Spark architecture.

Let’s put all this theory into practice by taking a look at some real-life situations.

Spark component architecture

Creating 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 sideby-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, sporting 510 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 property of the standard Mustang, and the Cobra overrides the engine property of the GT. The relationship among these three automobiles is illustrated in the simple class diagram shown in Figure 3.

If 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-Controller (MVC) architectural design pattern. MVC is continuously evolving, spawning new and innovative implementations to create more scalable 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.

The many flavors of custom components

02/2010 (10)

Understanding Flex 4 components

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 take a look at two different component types.

Simple vs. composite The 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 that group 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. ActionScript When 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. But some 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 is broken down to basic ActionScript when it’s compiled anyway. If you’ve ever reverseengineered 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.

02/2010 (10)

Figure 1. Organizational structure of a Flex 4 enterprise application

��

Figure 2. Application layers that compose the Spark component architecture

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 finding the formula that works best for you is really 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 options available, 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 components At 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.

ActionScript Development

Controls The 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 different sections 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.

Containers Categorizing container components is easy because the container’s job is to hold an 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 renderers This is another really easy one to categorize because item renderers share the common

Listing 1. USStatesComboBox.mxml: ComboBox-based custom component <?xml version="1.0" encoding="utf-8"?>

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

xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" dataProvider="{this.statesCollection}">

<fx:Declarations>

<s:ArrayCollection id="statesCollection">

<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

Figure 4. This custom component uses a ComboBox to present a list of U.S. states

#1 #2 #3

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 an item renderer if it’s being repeated for each item in collection data that’s passed to its parent.

Build your own homegrown simple ComboBox Let’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 or province 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 simple custom 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 extremely important: 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 will

02/2010 (10)

Understanding Flex 4 components

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 components A 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 are subclasses 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 class such 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

02/2010 (10)

Listing 2. Main application file for USStatesComboBox.mxml <?xml version="1.0" encoding="utf-8"?>

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

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

xmlns:control="com.fx4ia.view.components.controls.*" minWidth="955" minHeight="600">

<control:USStatesComboBox id="states" />

</s:Application>

#A Declaration of custom ComboBox component

Listing 3. Example of a skin for a Spark Button <?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark" xmlns:ai="http://ns.adobe.com/ai/2008"

xmlns:d="http://ns.adobe.com/fxg/2008/dt" minWidth="21" minHeight="21">

#B #C

<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="firstGroup" d:type="layer" d:userLabel="Group One">

<s:Group d:id="secondGroup">

<s:Rect x="0.5" y="0.5" width="100"

height="30" ai:knockout="0">

<s:fill>

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

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

ActionScript Development

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 you start 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 because I’ve generally found the Group container to be more reliable and functional than Canvas.

Skinning with the Spark Skin object The 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-based components 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 userinitiated 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 holds behavioral logic, such as events that

Listing 4. View states are defined directly above the class statement package {

import spark.components.supportClasses.SkinnableComponent; [SkinState("default")] [SkinState("hover")]

[SkinState("selected")] [SkinState("disabled")]

public function SkinStateExample() {

}

super();

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

#A SkinState tags precede the class declaration

Listing 5 Controlling custom component state

The skin class must

<?xml version="1.0" encoding="utf-8"?>

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

• Use the [HostComponent] metadata tag to specify the corresponding component • Declare view states and define the appearance of each state • Define the way skin parts should appear on the stage

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

xmlns:s="library://ns.adobe.com/flex/spark" xmlns:MyComp="myComponents.*">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<s:Label text="Login or Register"

fontSize="14" fontWeight="bold"/>

<MyComp:SkinStateExample currentState="default"/>

</s:Application>

#A Use currentState to set the component’s state

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 CSS and 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

public class SkinStateExample extends SkinnableComponent {

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 visual subcomponents, including how everything is laid out and sized. It must also define the supported view states, graphics, and the data representation.

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

02/2010 (10)

Understanding Flex 4 components

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. Defining 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 one of 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 defined 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 component code 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.

You now know how to make a simple custom component. Flex 4 is major step forward in the evolution 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.

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.

Listing 6. The SkinPart tag binds component variables to MXML skin part definitions. public class CustomComponent extends SkinnableComponent {

public function CustomComponent() { }

super();

[SkinPart(required="true")] }

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>

02/2010 (10)

©Manning Publications Co. Please post comments or corrections to the Author Online forum: http://www.manningsandbox.com/forum.jspa?forumID=572

FLEX

Flex and Jabber by Giorgio Natili The widely adopted open protocol for instant messaging XMPP (also called Jabber) is a de facto standard used in various instant messaging systems. The aim of this article is to show how easy and fast it is to create a real time application using this protocol that relies on a restful architecture. Level of difficulty

What you will learn… •

XMPP protocol building blocks

•

Real Time applications with Flex and XMPP

What you should know… •

Flex application fundamentals

•

Real time system fundamentals

Real Time Systems, Instant Messaging, and the Flash Platform Real-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 mean is 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 time systems. 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 more companies 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

02/2010 (10)

Flex and Jabber

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.

• 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 first Jabber/ XMPP technologies were developed by Jeremie Miller in 1998 and are now quite 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 their communications 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 specifications

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 languagehttp://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 clientserver 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 like an e-mail address with a username and a DNS address for the server where that user resides separated by an at sign (@), such as username@domain.com. 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

02/2010 (10)

Figure 1. XMPP communication workflow

FLEX

• 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 own private 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 first-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 level child 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

Figure 2. Sample application layout

Message stanzas qualified 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 of a 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 architecture REST stands for the Representation State Transfer and is an architectural model for creating web services. REST describes an architecture 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 Identifier) • 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 sufficiently detailed to define the actual architecture we 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 benefit 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 flexibility is misused and systems based on REST start to be not scalable and difficult 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, such as 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 the XMPP 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 / or Active Directory • It’s able to track all the IM traffic and store it as XML files • 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.

02/2010 (10)

Flex and Jabber

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

02/2010 (10)

FLEX

Create a new Flex project with you favorite IDE and add the XIFF library (http:// www.igniterealtime.org/downloads/downloadlanding.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; }

02/2010 (10)

Flex and Jabber

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

IChatControls

init(port:int, resource:String):void;

UserAccessEvent.LOGOUT

The ServiceBrowser class is the responsible to discover the chat services, the rooms defined 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 {

}

Listing 8. Handler of the FriendsInvitation.FRIEND_ADD_NOT_SUPPORTED event private function onFriendsNotSupported(e:FriendsInvitation):void { Alert.show("Chat not configured for friends support...", "Attention!");

// initialize the connection over

}

// send the appropriate resource type

Listing 9. Handler of the FriendsInvitation.FRIEND_REQUEST_INCOMING event

connect(domain:String,

private function onFriendsRequest(e:FriendsInvitation):void {

the XIFF library

anonymous:

// connect to a specific domain using anonymous login or an User object that is made up by username and password

•

disconnect():void;

•

keepAlive(live:Boolean):void;

currentRequestId = e.jid;

requestFrom.text = "Friend request from " + e.jid.bareJID + ", accept?\n"; }

// self explanatory

Listing 10. Handler of the FriendsInvitation.FRIEND_REQUEST_DENIED event

// keep the connection with the server

private function onFriendsRequestDenied(e:FriendsInvitation):void {

// after long period of inactivity

requestsLog.text += "Friend request from " + e.jid.bareJID + ", DENIED!!!!!!!!\n";

alive also

connection():XMPPConnection

// return the established connection

•

UserAccessEvent.LOGIN

callLater(scrollText, [roller]);

Boolean, user:User = null):void;

•

UserAccessEvent.CONNECTED

e.lastPlainMessage + "\n";

ServiceBrowser

a specific port and

•

• • •

roller.text += "[" + e.from + " @ " + (e.lastMessage.time || "") + "]:" +

IRealTime

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

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 defined in the XIFF library using a custom event class, the dispatched events are

instance

s t a r t R e a l t i m e ( r o o m:

callLater(scrollText, [requestsLog]); }

OpenFireRoomEssentials):void

// create or join an existing room

02/2010 (10)

FLEX

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 specific service and the detail of a specific 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

Listing 11. Handler of the FriendsInvitation.FRIEND_REQUEST_ACCETPED event private function onFriendsRequestAccepted(e:FriendsInvitation):void {

•

status:String ):void;

•

// send to the roster the user status

joinRoom(room:Room,

jid:

// join a specific room and using the

JID initialize the loading of the roster

•

// and the set up of the room isValidJID( Boolean;

•

jid:UnescapedJID):

// check if the JID is valid or not

sendMessage(message:String = null, html:String = null):void;

n";

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

Listing 12. Handler of the FriendsInvitation.FRIEND_LIST_REMOVED event

•

createRoom(room:Room):void;

private function onFriendsListRemoved(e:FriendsInvitation):void {

•

destroyRoom(room:Room,

callLater(scrollText, [requestsLog]); }

•

Alert.show("Your personal room has been created....", "Attention!");

room

invite(userId:EscapedJID):void;

// invite a specific to the personal room

addFriend(user:RoomOccupant):void; user roster

removeFriend( user:RosterItemVO ): void;

Listing 14. Handler of the PersonalRoomEvent.ROOM_EXISTS event

// remove a specific user from the

•

friends list

grantSubscription(id:UnescapedJID, status:Boolean = true):void;

Alert.show("Sorry, you can have only one personal room....", "Attention!");

// grant to an user the request of

•

}

has created

// add an user as a friends to the

•

private function onPersonalRoomExists(e:PersonalRoomEvent):void {

leave():void;

// allow the user to leave the current

•

}

reason:

// destroy the personal room the user

Listing 13. Handler of the PersonalRoomEvent.ROOM_CREATED event private function onPersonalRoomCreated(e:PersonalRoomEvent):void {

// create a personal room String = null):void;

requestsLog.text += "Removed from " + e.jid.bareJID + ", friend list!!!!!!!!\n";

subscription to the friends list

denySubscription(id:UnescapedJID): void;

Listing 15. Handler of the PersonalRoomEvent.ROOM_DESTROYED event

• private function onPersonalRoomDestroyed(e:PersonalRoomEvent):void {

// deny the subscription to a specific user personalRoom():Room;

// recover the personal room created by the user

Alert.show("Sorry, the room you are chatting has been destroyed....",

•

}

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

"Attention!");

Listing 16. Handler of the OpenFireErrorsEvent event private function onOpenFireError(e:OpenFireErrorsEvent):void {

dispose();

// free the memory and the event listener

•

F r i e n d sI n v it a t i o n.F R I E N D _

userID.text = "wrong credentials";

• •

FriendsEvent.LIST _ RECOVERED

}

•

F r i e n d sI n v it a t i o n.F R I E N D _

}

•

FriendsInvitation.FRIEND _ LIST _

if (e.errorCode == 401) {

show:String,

UnescapedJID):void;

requestsLog.text += "Friend request from " + e.jid.bareJID + ", accepted!!!!!!!!\ callLater(scrollText, [requestsLog]);

updatePresence(

REQUEST _ INCOMING

F r i e n d sI n v it a t i o n.F R I E N D _ REQUEST _ DENIED

REQUEST _ ACCETPED REMOVED

02/2010 (10)

Flex and Jabber

• • • • •

ChatMessageEvent.GROUP _ MESSAGE

private var realtimeManager:IRealtime;

RoomUsersEvent.JOINED

private var serviceBrowser:ServiceBrowser;

PersonalRoomEvent.ROOM _ DESTROYED RoomUsersEvent.LEFT

RoomUsersEvent.PRESENCE

Like for the RealtimeManager class these events wrap some events defined 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

private var chatManager:IChatControls;

and the class members needed to store the details of the room the user is going to join, the unique identifier provided from the XMPP server (Inject this in the chat manager to perform all the operation related to a user) and the unique identifier 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 define 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;

• Create an instance of the IChatControls interface implementer • Create an instance of the IRealTime interface implementer • Define 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 the currentServices() 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

var serverJID:EscapedJID = new EscapedJID(e.unescapedJID.domain);

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 the constants 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 first 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 suffix 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

02/2010 (10)

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

FLEX

Listing 19a. Methods invoked from the UI controls private function handleRequest(status:Boolean):void {

private function addUserAsFriend():void {

if (status) {

chatManager.addFriend(usersList.selectedItem as

chatManager.grantSubscription(currentRequestId, true); } else { chatManager.denySubscription(currentRequestId); } currentRequestId = null;

} private function handleMethodChange():void { if (method.selectedItem.value != "ANONYMOUS") { username.enabled = true; password.enabled = true;

}

} else {

private function chatDetails(e:ListEvent):void {

username.enabled = false;

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

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;

private function joinRoom():void {

realtimeManager.connect(server.text, false, user);

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

}

RoomOccupant);

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

02/2010 (10)

Flex and Jabber

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

The onRoomJoin listener Handle the UI enabling 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 your friends (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 the on 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 the application 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 personal room 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).

Conclusion Real time applications are really engaging both for the end user and for a developer. Sometimes people are scared of the difficulties in 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.

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/flashplatform/services/ collaboration/ Open Fire community http://www.igniterealtime.org/community/index.jspa XIFF ActionScript library http://www.igniterealtime.org/downloads/index.jsp

02/2010 (10)

GIORGIO NATILI Giorgio 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.

PureMVC

Dynamic Views and Mediators with PureMVC by Tim Consolazio That PureMVC is an extremely flexible framework that, in conjunction with some basic capabilities of Flash and Flex, can be applied straightforwardly to just about any development task.

Level of difficulty

What you should know… •

Intermediate-advanced knowledge of AS3 and OOP, working

knowledge

Flex

framework, and some working knowledge of PureMVC.

'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, the data 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 an ApplicationMediator. • 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

02/2010 (10)

Dynamic Views and Mediators with PureMVC

Listing 1. private function onCreationComplete ( event : FlexEvent ) : void {

_appFacade = ApplicationFacade.getInstance ( );

_appFacade.sendNotification ( 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, tcoz@tcoz.com." ); // 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 ); }

02/2010 (10)

PureMVC

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 finds 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 notification to PureMVC */ private function onRendererEvent ( event : RendererEvent ) : void {

facade.sendNotification ( Notifications.RENDERER_CLICKED, event.get_data ) }

Steps 7-9 finish the job. We've listed RENDERER_CLICKED as a notification 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 notification interest for RENDERER_CLICKED, so it'll be received here. */ override public function listNotificationInterests ( ) : Array {

return [ Notifications.RENDERER_CLICKED ]; }

/* 8. Handle the RENDERER_CLICKED notification when received, show an alert, which when closed, removes the dialog box */ override public function handleNotification ( notification : INotification ) : void {

var note : Object = notification.getBody ( ); switch ( notification.getName ( ) ) {

case Notifications.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; }

02/2010 (10)

External Links: â&#x20AC;˘ â&#x20AC;˘

PureMVC site: http://www.puremvc.org Source for this article: http://www.tcoz.com/samples/dynamicmediators.zip

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, the ApplicationMediator 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 the framework. 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 event all 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

02/2010 (10)

list hierarchy that has a mediator. If that mediator'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 you want 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 in PureMVC 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.

TIM CONSOLAZIO Tim 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

ActionScript Development

Deeplinking Your Flash And Flex Applications With SWFAddress by Dan Florio One of the common pitfalls of any RIA (Rich Internet Application) based on Flash or AJAX is that the state of the application changes but the URL usually stays the same.

Level of difficulty

What you will learn… •

How to create a Flash application that

supports

deeplinking

and the browser back-forward buttons.

What you should know… •

Knowledge

basic

Flex

applications is handy but not required. These steps can also be applied, with slight modifications, to projects created with the Flash IDE.

herefore 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 SWFAddress The 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 file in your build path • Update your index.template.html file to load the swfaddress.js file • 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 file to your project.

SWFAddress in depth Once 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 the other 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

02/2010 (10)

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 }

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>

Lets write some Actionscript SWFAddress 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 the method 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.

Recomendations First, 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

02/2010 (10)

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 for One of the complications that SWFAddress introduces is that you have to set the state in code 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 correct data but not reflect that in the navigation.

Explore SWFAddress 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 FLORIO Dan Florio, aka polyGeek, is a Flex developer working for the best client in the world â&#x20AC;&#x201C; himself. His biggest success to date is RunPee.com â&#x20AC;&#x201C; 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.

Readers BUG

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.

FP 10 has been around for a while, now, and FP 10.1 is really only a minor update over the current player. When are we likely to see FP 11 and what should 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, memory usage 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 more information on Flash CS5 to iPhone 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 on all 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 vendors and 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 text superscript? Mark: The Flash Player, since version 10, has provided support for TLF (Text Layout Framework) from InDesign, that enables support for superscript and complex languages. You can try the demo here: http:// labs.adobe.com/technologies/textlayout/demos/.

What’s the exact date for webOS Flash? 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 the idea 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 and deliver the product on time.

Can you tell more on Adobe Livecycle ES2 and the Cloud services. 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 Google indexing visible text, coupled with things like swfObject & swfAddress, what other advancements does flash player 10.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 in HTML5? Mark: Flash content, whether it is created in 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.0 won'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.

02/2010 (10)

Readers BUG

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 you can provide CSS markup, although please ensure that you are using the most up-to-date version of TLF.

Are you planning to improve the FP10 to work with a native 3d Engine ? 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 the packaging solutions? It's important that the player is awesome, but more important that we can package and protect content easily.

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 goal percentage of smart phones that will have Flash 10.1 (or higher) 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 the CS5 products on Adobe TV? Mark: Absolutely!

Do you know if there is a way to test the multitouch libraries released by Adobe directly in a device?

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

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 you have a touch screen or touch pad (Mac).

Are there any plans for simple 3d integration in Flash, similar to that of Swift 3D Xpress?

Will be there the FP 10.1 in older versions of Android?

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 in order to secure your position in the 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 Linux not been invested in? 02/2010 (10)

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 Flash and 3D? What happened with Papervision and Away3D? What will happen in respect to iPhone/ iPod/iPad technology?

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 shown some great demos working here http:// www.flashmobileblog.com/2010/02/24/ battery-performance-with-flash-player-10-1-onnexus-one/.

When will roundtripping be available between Flash Builder and Flash Catalyst? This is crucial for the product to be able to compete with Microsoft Blend, 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, could Adobe bring Flash Player through Opera 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: We are always excited to see innovation from the developer community, especially with Papervision and Away3D.

MARK DOHERTY Mark 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.flashmobileblog.com/

Profile

New Kid In Town flashcreed.com Flashcreed is a multinational project dedicated in creating the most complex FLASH components. Our main goal is to fulfill our client’s wildest desires regarding versatility in design and performance. We strive to be the best at what we do and we always push ourselves to overcome any boundaries. Q: Hello! I think we are all curious to know what Flashcreed 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 every day 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: What does Flashcreed intend to bring to the table, so to speak, as a new arrival to the marketplace? A: We guide ourselves having in mind 3 little words: innovation, perseverance and professionalism. 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: 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: 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:

02/2010 (10)

flashcreed.com

02/2010 (10)

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 work on 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.

02/2010 (10)

flashcreed.com

Q: Do you know your main competitors? A: We wouldnâ&#x20AC;&#x2122;t be standing here if we didnâ&#x20AC;&#x2122;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 number one in the game.

Q: True, there are a great deal of Flash development companies and freelancers. How is Flashcreed going to stand out among 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. time. Expect some cool 3D components in the near future from our team.

Q: Can you estimate the trend that Flash developing is going to take 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

Q: Is Flashcreed going to keep up with the new technology? A: We live in a very fast paced world but we have 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â&#x20AC;&#x2122;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 such enthusiasm and dedication from your team and hope Flashcreed accomplishes all that it set out to do. I would like to thank you for your time and wish you the best of luck in all your current and future projects. A: Thanks, it was great talking and hope we do this again.

02/2010 (10)

Interview

Talking Corona

An interview with the Ansca Mobile co-founders ANSCA MOBILE‘S CORONA SDK

Ansca Mobile‘s Corona SDK for iPhone was unveiled in the last issue of FFD Mag. Now – fresh off the heels

having

their

nostalgic Photoshop 1.0 app unveiled last month at Adobe’s Photoshop 20th anniversary event – cofounders Carlos Icaza and Walter Luh sit down to talk about why they should be the go-to choice for Flash developers

looking

build for the iPhone.

In today’s crowded arena of iPhone developer-related startups and SDK makers, how do you guys stand apart? 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 instead of, say, waiting for Adobe’s Packager For iPhone? Walter: The short answer is that Corona was designed from the ground 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 (OpenGLES) 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 Coronapowered app without worrying about going over the App Store’s size limit.

What about the free, opensource SDK’s out there? Why should designers shell out money to use Corona? 98

02/2010 (10)

Interview

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 Flash developers 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 easy app-making process for the iPhone be enough to take on the bigger resource 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

02/2010 (10)

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 to make already in its relatively new life? 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 shooting for in the next version of Corona?

And where do you see Corona going in 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-coronatrial) for free directly from Ansca Mobile (http:// www.anscamobile.com/). Twitter: http://twitter.com/CoronaConnect Facebook: http://facebook.com/CoronaConnect

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.

STORY

A Day in the Life of Joe the Coder

Discover His Secret Sauce for Saving His Company Time and Money by Kathleen Erickson

he 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 Joe the Coder During 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 for both client and server environments. Client-Side Technologies On the client-side they could choose to develop the application in Flash, Flex,

100

AJAX, Silverlight, or JavaFX. The serverside environment could be one of five environments – .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 using FlashBuilder 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 have an 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 code would lose some simplicity and out-ofthe-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 criteria and 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

02/2010 (10)

Discover His Secret Sauce for Saving His Company Time and Money

Figure 2.

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 Flex clients 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 GraniteDS offerings. 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

02/2010 (10)

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 unsupported and 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, troubleshooting 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 more lines 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 right out 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.

101

Reviews

A Review of Alternativa3D 5.6 And A Peek at Version 7 – A New Step Into The 3D Web by Greg Bolotoff

No additional plugin is necessary for your website visitors as Alternativa3D leverages the Flash player that almost all web users have installed.

Drawbacks Version 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 in version 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. Demo „Block”: http://alternativaplatform.com/en/demos/altcity/

Version 7

Distribution and Use The Alternativa3D library has been popular for two years already among Flash developers who 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. Demo „Tank”: in attachment or this URL http://tankionline.com

102

02/2010 (10)

Alternativa3D Version 7

used in development of various promo-sites. For example, the Moscow company Brandstudio developed presentational website for Toyota IQ. Version 7 is not limited in use 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 Demo „Bones”: http://blog.alternativaplatform.com/ru/files/2009/02/ makes the process of 3Dbones.swf scene easy to realize and clear to Flash-developers. Already in use Additionally the new hierarchy system helps Version 7 of Alternativa3D has already been to reduce outlay while drawing the scene used in projects on a substantial scale. One after its configuration change, i.e. the speed vivid example is a multiplayer 3D game will not change. Tanki Online with a community of over 150 Also considerably increased is thousand players. Alternative3D performance: you can create At the moment several game projects are more complex and detailed models. in the process of development and will be To quickly cull the objects which are not released soon. visible, bound boxes are used; they are the Apart from big and complicated objects which describe the objects limits. projects, Alternativa3D v7 is successfully 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 longdistance 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 3Dscene 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.

Acquire Alternativa3D v.7 At 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 „MIP mapping”: http://blog.alternativaplatform.com/ru/files/2009/12/mipmapping.swf

02/2010 (10)

103

Reviews

Kentico CMS Kentico is a fully-fledged CMS on the Microsoft asp.net platform. Developed by Kentico software the CMS comes with the promise that it is a “flexible, all-in-one solution for web developers“. We will introduce features, licenses, development, design and styling so that you get a first impression. The features Feature-wise the CMS supports three major areas: content management for web sites, Ecommerce (for example on-line stores) and community 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, Ecommerce, 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 content rating 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 is easy 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.

Licensing Kentico 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

104

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 networking package instead. A large company with a number of sites to manage could go for an Unlimited license. All packages include maintenance .

Developing Kentico 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 styling Kentico 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.

Integration Kentico is designed with a Microsoft environment in mind. It is written in ASP.net. To run it on a server the software requires 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 be extended 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

02/2010 (10)

Book reviews

Professional Papervision3D 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/productCd0470742666.html

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, in short, 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

106

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 Papervision3D’s features and capabilities, leaving no stone unturned, until all possible topics have been exhausted. Starting with understanding the requisite guts of Papervision3D 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 geolocation, 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

02/2010 (10)

Book reviews

The Essential Guide to Open Source Flash Development

Authors: Aral; Grden, John; Allen, Chris; Mineault, Patrick; Cannasse, Nicolas; Arnold, Wade; Hauwert, Ralph; Hughes, Mark Balkan Publisher: friends of ED. ISBN: 1430209933 Language: English Pages: 350 Pages Website: http://www.friendsofed.com/book.html?isbn=97814 30209935

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 and highlights 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 different platforms 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.

02/2010 (10)

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 answer is 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

107