Flash&Flex - IPTV And Flash Lite 3.1 by Curtis Brenneman

Editor’s Note What’s new ...

Do we have a special issue for you this month! There is a lot to cover, so let’s get down to it. Make sure you check iPhone Development section out, on page 18 that talks about Creating an iPhone Application that Responds to Touch Gestures. Ryan claims that creating this application will be quick and simple. Getting it on the device is the tough part if you’re doing this for the first time. He’ll be giving you direction and resources that you’ll need in order to sign up for the Apple Developer Program. On page 16, read about the Flash technology by Pedro, his article aims at analyzing how this technology relates with Flash Lite 3.1 and at establishing which among its characteristics are crystallized and which are singular, unstandardized features, so that Flash developers can embark on this new market, on page 26, you will find the second column by Huw Collingbourne on how to create an object-handler class. You should go to page 44 to read the 4th part of Chris’ article on Monetizing Your Web Game. All articles are very interesting and they need to be marked as Need to be Read! And do not forget to check our book review and interviews out so you can get a glimpse of some great sources to help you create your own applications. Please keep up the great work and send in your articles, tutorials or product reviews, questions, ideas and advises. I would like to mention that we will have the new regular sections in the magazine and you can find articles of your best authors in each issue: iPhone Development section by Ryan D’Agostino, Flex/ActionScript 101 section by Marc Pires and Games by Chris Hughes. I would like to personally thank the Beta Testers and Proofreaders for their excellent work and dedication to help make this magazine even better. They work hard and under deadlines, like we do to get each and every magazine out for your to read. Enjoy reading! Ewa Dudzic & FFD team

Editor in Chief: Ewa Dudzic ewa.dudzic@ffdmag.com Proofreaders: Betsy Irvine, Patrick French

All rights to trade marks presented in the magazine are reserved by the companies which own them.

DTP Team: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Art Director: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Senior Consultant/Publisher: Paweł Marciniak

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

Flex/ActionScript 101 Section Editor: Marc Pires marcpiresrj@gmail.com iPhone Development Section Editor: Ryan D’Agostino ActionScript in Action Section Editor: Huw Collingbourne Games Section Editor: Chris Hughes Contributing Editors: Pedro de La Rocque, Ali Raza, Csomák Gábor

To create graphs and diagrams we used company.

program by

The editors use automatic DTP system Mathematical formulas created by Design Science MathType™

Publisher: Software Press Sp. z o.o. SK ul. Bokserska 1 02-682 Warszawa Poland Worldwide Publishing

ATTENTION!

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. All trade marks presented in the magazine were used only for informative purposes.

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.

09/2010 (17)

CONTENTS Special Report

ACTIONSCRIPT IN ACTION

08 Google TV

26 Create An Object-Handler Class

BY BETSY IRVINE

BY HUW COLLINGBOURNE

InBrief

Flex/ActionScript 101

10 News

32 States in Action

BY CSOMÁK GÁBOR

BY MARC PIRES

Tools

Flex Development

14 Silex, The Designer Friendly Publishing Platform

36 Action Message Format and Data-centric Flex

BY ARIEL SOMMERIAKLEIN

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

Flash Technology

GAMES

16 IPTV and Flash Lite 3.1

44 Monetizing Your Web Game Part 4

BY PEDRO DE LA ROCQUE

BY CHRIS HUGHES

iPhone Development

WebORB

18 Creating an iPhone Application that Responds to Touch Gestures

46 Game-Changing Technology for Data Intensive Applications

BY RYAN D’AGOSTINO

BY JASON TAYLOR AND KATHLEEN ERICKSON

Questions & Answers

Tip of the issue Driving Conversion Rates Higher Within a Game Yuval Ziv – COO of Gate2Shop

Whenever you have a game that requires a player to purchase stuff to continue playing, the most important thing is to make it as easy as possible for them to do so. If you redirect them to an external payment page, you have too many steps during which you may lose a player – they need to decide whether to buy, then they will be taken outside of the game (thus seeing a different page), then they need to enter credit card details, then see the “Success” page and then be returned back to the game. At any of these steps, a player may decide they don’t feel like going through with the transaction. This can easily be �xed with implementing in-game �ash payments. First of all, you don’t have the player leave the game. A lot of the hassle described earlier is taken care of. Then you don’t force them to reach for that plastic to type in the credit card details over and over again. Once they have entered them initially, it’s a matter of one click to purchase that next level. That should de�nitely drive your conversion up.

09/2010 (17)

50 Flash Payments are the Best Way to Drive Your Conversion Rates Higher BY FFD TEAM AND G2S

Book Review 52 Getting Started with Flex™ 4 BY ALI RAZA

Interview 54 Interview with Valeriya Mallayeva, Manager of the Flash GAMM Conference and Co-manager of Ukrainian Adobe Flash Platform User Group BY FFD TEAM

Sponsors of the November Issue Influxis www.influxis.com ............................................. 2-3

FlashEff Nano www.flasheffnano.com .......................................25

EdgeCast Networks www.edgecast.com/ .........................................4-5

gate2shop www.g2s.com ....................................................29

Midnight Coders www.themidnightcoders.com ........................13, 49

Mart3 | the Flash Platform Company http://mpresenter.mart3.org .............................. .55

Gamersafe www.gamersafe.com ........................................ 15

JetBrains www.jetbrains.com ............................................. 56

Exsys www.exsys.com ................................................ 21

Google TV G

oogle TV combines television, DVR recordings, and the Internet. By no means the first service to try to combine TV and the Web, with its proven open platform, combined with industryleading partners, Google TV does have the potential to change the game. I am sure many of you will be considering trying Google TV in the near future; I know I am. Google TV debuted on October 12 in devices from Sony and Logitech. Sony will sell HDTVs and Bluray players with built-in Google TV capabilities, while Logitech’s Revue companion box to your current TV is available in late October.

“ The coolest thing about Google TV is that we don’t even know what the coolest thing about it will be

”

The web is now a channel

Google TV lets you access everything on the web. Watch your favorite web videos, view photos, play games, check fantasy scores, chat with friends, and do everything else you’re accustomed to doing online.

Content

As of October 4, 2010, Google TV partners include Turner Broadcasting, NBC Universal, and HBO. Video content will also be available from companies like Netflix and Amazon, while Twitter has said it too will be developing an app. Ambarish Kenghe, a developer product manager at Google, wrote in a blog post (http:// googletv.blogspot.com/2010/10/here-comes-googletv_04.html), Turner Broadcasting has been optimizing some of its Web sites for viewing on Google TV, including TBS, TNT, CNN, Cartoon Network, and Adult Swim, which will be available any time through Google TV.

Watch it now

Access over 40,000 shows and movies on demand with Netflix ($8.99 a month) or Amazon Video On Demand (shows start at 99 cents).

HBO subscribers will be able to access over 600+ hours of programming on-demand via a Google TVspecific Web site known as HBO GO. Other partners include Napster, Vevo, Pandora and blip.tv. Starting early next year, apps from Android Market will work on Google TV as well.

Search capabilities

(Google Chrome and Adobe Flash Player 10.1 are builtin) Google TV lets you seamlessly search all of the content on your TV, the web, and apps – then access it with a single click. You can also easily switch between TV and the web or even have them both on the screen in dual-view mode. The device itself is DLNA-compliant and can access music, photos, and videos stored on networked computers. That content is also, as with everything else in the Google TV environment, searchable.

Optional Accessories: Logitech TV Cam

High-de�nition video calling on your HDTV. Talk to anyone with a camera and a Logitech Vid™ account, whether it’s another TV cam or a computer web cam. Logitech Vid HD on Google TV comes pre-installed and works with an external 720p webcam that can be attached to the top of your HDTV. The Webcam also features a Carl Zeiss lens and two microphones. Revue owners can pan and zoom their own image via the remote control’s D-Pad. $149

Logitech Mini Controller

For a more compact companion to your Google TV™, you can use the Logitech Mini Controller, a compact palm-sized keyboard/ touch pad/remote control combo. With the same power as the Keyboard Controller, you can search for and �nd things to watch using Google TV. You can play, pause, rewind and fast-forward shows. And you can even surf the web with a built-in combination touch pad/D-pad. $129

Logitech Keyboard Controller

With its integrated keyboard, touchpad, and remote control, the compact Logitech keyboard controller lets you search, �nd, and enjoy whatever you watch with Google TV. The Keyboard Controller is included with the Revue. The keyboard remote control is roughly the size of a full-sized computer keyboard, but adds a touchpad and D-Pad, and fully integrates the Logitech harmony remote technology. $99 Source: www.logitech.com

09/2010 (17)

Your phone = remote control

Your iPhone or Android phone can be used to control your Google TV just like a remote control. Use your voice to search, and even use multiple phones to control the same TV. Or, stick with the wireless handheld QWERTY controller that comes with it.

Fling a video to your television

Now you can just Fling what you’re watching, listening to, or doing on your phone by sending it to your TV with the press of a button.

TV Playlist

Want to watch something, but don’t have time right now? Watch it on your schedule by adding it to your Google Queue. You can also subscribe to your favorite video podcasts, add YouTube videos, and websites, like building a DVR for the web.

Video calling on your TV

You can add hardware accessories to expand your Google TV experience including the Logitech TV Cam for high definition video calls right on your HDTV.

Meanwhile, partner Dish Networks, has built the Revue technology in its latest DVR so it can work with the Logitech Revue set-top box. It will not work with, say, a Sony Google TV. The Revue-ready Dish network DVR’s ($179) should be ready by the end of this month. Current Dish boxes should be able to accept software upgrades that allow the same pairing. Sony, has not released pricing structure yet, however, these sleek TVs will be Internet and Google TV ready, packed with an Intel processor so you can surf the web without the need for any other device. Sonyinsider.com leaked that the 46” model will cost around $1,400. Pricing was unavailable for 24” model, however they think it should be under $1,000.

Developer Kits

Anyone can develop content for Google TV’s open platform through made-for-TV websites, and, starting in 2011, Google TV apps. Soon after launch, the Google TV SDKs and web APIs will be released for TV so that developers can build even richer applications and distribute them through Android Market.

“

Source: PC Magazine http://www.pcmag.com/article2/ 0,2817,2370416,00.asp

At last, the TV screen has been liberated

Extra Features for DISH Network Subscribers

BETSY IRVINE

DISH Network subscribers enjoy many enhanced TV and DVR features, including recording a show right from the search bar and being able to search all of your recordings at once.

Price/Availability

The Logitech Revue box and keyboard lists for $299.99. The keyboard alone costs $99.99 and the mini remote is $129.99. The HDTV camera will go for $149.99. All devices are available for pre-order now on Amazon.com, BestBuy.com, and Logitech.com. Consumers who pre-order a Revue should receive it by month’s end, executives said.

09/2010 (17)

”

Betsy Irvine is a freelance Flash designer/developer based in Dallas, Texas. She started her career as a graphic designer (founding Bgraphic http://www.bgraphic.net/ in 1992), but quickly grew tired of the limitations in print design and started offering web design services in 1995. The �rst time she saw a site designed in Flash (1999), she was blown away and enthusiastically started learning Flash. With no programming background, the innovation of ActionScript 3.0 proved a huge obstacle to overcome, but she persevered and �nally passed the Adobe Certi�ed Expert exam in Flash (CS4) and rebranded her company as Dallas Flash (http:// www.dallas�ash.com/) in 2008. She is a hybrid designer (Creative and Code). She has developed many �ash pieces for well-known companies such as Coke, McDonalds, Jaguar, and Seventeen.

IN BRIEF

Public Preview Releases of Flex SDK, Flash Builder and Flash Catalyst available for download

For the past 9 months the Flex team has been hard at work building the next versions of Flex, Flash Builder and Flash Catalyst. You can now download preview releases of all three products from Adobe Labs (http:// labs.adobe.com/technologies/flex/). Adobe also released Adobe AIR 2.5, which extends AIR to run on a number of mobile platforms. Together, these releases open up a significant new opportunity for Flex developers to build applications that span the web, desktop and now mobile. Here’s a quick snapshot of the new major feature sets: •

•

Flex SDK “Hero” provides new mobile features for building standalone applications for mobile devices, additional Spark components and capabilities as well as infrastructure improvements that target large-scale applications. Flash Builder “Burrito” provides integrated workflows for building multi-screen applications, improved designer/developer workflows with Flash Catalyst, provides enhancements to core performance, and includes a wealth of new coding productivity improvements for Flex and ActionScript projects. Flash Catalyst “Panini” provides improvements which enable bi-directional workflows between Flash Catalyst and Flash Builder, adds support for resizable applications and components, provides improvements to project-defined interactions, and includes a newly designed Components panel.

The labs page also includes numerous samples and tutorials (http://labs.adobe.com/technologies/flexsdk_hero/ samples/) to help you get up and running more quickly, plus a set of videos (http://labs.adobe.com/technologies/flexsdk_ hero/videos/) that showcase larger features and workflows. People at Adobe are all very excited to provide you with an early opportunity to evaluate in-development features and to allow us to get your feedback. Please remember that they are preview releases, so they have not undergone the same level of testing as you will find in our finals, and therefore may contain a higher number of bugs. Please also note that they are not yet feature complete. Enjoy! Flex SDK, Flash Builder and Flash Catalyst Product Teams source: The Official Flex Team Blog

Tour de Mobile Flex – Now Available for Android!

Tour de Flex (http://flex.org/tour) was launched at Adobe MAX two years ago. In that time Tour de Flex has become an essential resource for learning Flex. Using Flex Hero and AIR for Android (http://www.adobe.com/products/air/) they created Tour de Mobile Flex (http://flex.org/tourmobile)!

This is a great way to explore the capabilities of Adobe AIR and Flex on mobile devices. Get it from the Android Market by searching for “Tour de Mobile Flex”! source: JamesWard.com

Flash gets the GPU-accelerated 3D! MAX Racer with P2P multiplayer features The revolution is here and the world is never going to be the same!

The last couple of months were exciting like never before. The guys at FlashRealtime have been working with Alternativa Platform (http://alternativaplatform.com) and Mythos Labs (http://mythoslabs.com) on a 3D racing demo with realtime multiplay over P2P. The game is set in Los Angeles, where the popular developer conference Adobe MAX just took place. The game uses the new set of GPU-accelerated 3D APIs – currently codenamed Molehill (see Adobe Labs page http://labs.adobe.com/technologies/flash/molehill). You will be able to get your hands on this API in the first half of 2011.

Multiplayer demo – controlling with three computers

The advancements in gaming and 3D support planned for an upcoming Flash Player release are probably the best thing this year’s MAX has. On the top of the tick list is game controller support, the ability to simply plug in your USB joypad or steering wheel and start playing games! Needless to say, gaming on the web is set for a complete overhaul, with 3D capabilities that use leverage GPU hardware and render millions of triangles per second. What’s more incredible is that the demo below uses 0% CPU, and if our current stats hold true, they can get this out to 3/4 of the online world in three months after launch. Check the full video out… http://www.youtube.com/ watch?v=tgwi0lWgX8w source: FlashRealtime.com

Flash Access in your living room, also on Google TV

During the Adobe MAX developer conference, Adobe announced the availability of AIR for TV, bringing the Flash Platform to digital home devices such as Internetconnected TVs, BluRay players and set-top boxes. AIR for TV includes Flash Access. By providing support for content protection on these devices, Adobe is working with their partners to bring premium content via the Flash Platform to a broad range of devices. And where would great video content look better than on a big display in your living room?

09/2010 (17)

IN BRIEF

In other news, Google launched the first Google TV devices. Google TV has set out to revolutionize the way we all enjoy television by bringing the web and search to the experience. All Google TV devices will ship with a beta version of Adobe® Flash® Player 10.1, a great step towards bringing a full web browsing experience to Internet connected televisions and other digital home devices. With support for Adobe Flash, more than three million developers worldwide are now able to extend their web content to the digital home so users can enjoy rich, high-definition videos and other Flash-based web content. Thanks to the ubiquity of Flash, there is a tremendous amount of engaging content on the web. Watching video on computers and smartphones is great, but it is an even better experience watching web videos streamed to the biggest screen in your home – your TV. Flash Player for Google TV is optimized to deliver amazing HD Flash video – all the way up to pristine 1080p. Users can access both free and premium video content from sites across the web. Some great examples are YouTube, TBS, TNT, CNN, Cartoon Network, Adult Swim, VEVO, Amazon Video On Demand, and HBO GO, just to name a few! This is another important milestone for the multiscreen vision, enabling Flash content across devices, platforms, and browsers. Similar to the release of Flash Player 10.1 for Android smartphones in May, the initial release for Adobe Flash on Google TV is a beta version. Users will be able to benefit from “over-the-air” updates of the Google TV platform and Flash Player as Adobe continues to collaborate with Google to improve the capabilities of Flash on these devices. Adobe has been working closely with Google to integrate Flash Player 10.1 into all of their platforms, including Chrome, Android, and now Google TV. While the beta version of Flash Player 10.1 on Google TV is a work in progress and still needs to be optimized for certain types of content, it is very exciting about the unlimited potential a full browser combined with Flash Player will bring to the TV experience. Adobe are committed to delivering updates to the Flash Player over the coming months to constantly improve the web experience on Google TV. source: Flash Media Blog, Adobe Flash Platform Blog

Alternativa3D goes free

Russian 3D engine makers Alternativa LLC recently changed their terms, making use of Alternativa3D version 7 entirely free. The 3D Flash scene has changed a lot in the latest years and the community is shifting from Papervision to other alternatives. source: Flash Magazine

09/2010 (17)

AlternativaPlatform announces the development of Alternativa 3D 8 technology with support for the new Flash player

AAlternativa3D 8 and new Flash-player will dramatically change the computer game scene allowing developers to create 3D worlds with stateof-the-art special effects right in the browser. Due to Molehill 3D API with hardware 3D acceleration support in new Flash player, Alternativa3D8 will draw more than 3 millions of polygons with high performance. And due to vertex and pixel shaders support in new Flash player it is possible to use modern special effects like lighting, shadows, particle systems, posteffects, and other visual technologies. To simplify development of applications the engine will be complemented with handle tools for designers. Finally, API of A3D 7 and A3D 8 will be maximally similar to provide smooth porting from 7 to 8. The possibilities of the new technology were shown for the first time during a presentation of new Flash player at the Adobe MAX conference in Los Angeles on the 25th of October. A showcase game called MAX Racer was created specially for this event. It is a Racer game where player drives a sports car near Los Angeles Convention Center controlling it with keyboard, steering wheel, joystick or gamepad. Application is intended for several players but uses a peer-2-peer connection instead of a server. You can watch video from MAX Racer at the http://alternativaplatform.com in the showcase section. The application demonstrates such A3D 8 features as high speed drawing (hundreds of thousands of polygons with 60 FPS), advanced shaders (reflections on the car body and buildings) and realistic physics. There is also anti-aliasing combined with semi-transparent objects and light maps for realistic lighting. Two browser-based online games built on Alternativa3D 8 are already in development. The first is an the in-house realtime sci-fi actionRPG Ostrova Online. The second is the turn-based MMORPG Metro 2033 Online which is developed by Open Games. AlternativaPlatform acts as a technical partner, providing 3D-engine, server side and technical support. Videos from both projects can be watched at http://alternativaplatform.com. Also you can find the free version of Alternativa3D 7 engine there. A3D 7 is used in a commercially successful browser-based 3D shooter Tanki Online (http://tankionline.com). There are a lot of 3D-sites and applications built on it, including Toyota and Volkswagen promotional projects. Everybody can get and use Alternativa3D 7 absolutely free. The latest, improved and enhanced version of the engine can be downloaded with no charge. It is just necessary to place the link to AlternativaPlatform company in case of using engine in some projects.

IN BRIEF

Today Alternativa3D 7 is one of the most advanced solutions for realizing 3D in the browser.

Platform applications that communicate with Facebook using the OpenGraph API.

source: AlternativaPlatform

source: Serge Jespers

Adobe AIR on iPhone is back!

Adobe has just posted the following at: http:// labs.adobe.com/technologies/packagerforiphone Download The Packager for iPhone, which is a feature of Adobe Flash® Professional CS5 software and the Adobe AIR® SDK 2.0.1, offering Flash developers a fast and efficient method to reuse existing code from ActionScript 3 projects to deliver native applications on iOS devices. source: EverythingFlex: Flex & AIR

Adobe AIR Launches on Android Market

Today is the day for which many of us have been waiting a long time. Last night the Adobe AIR runtime officially released on the Android Marketplace (http:// www.android.com/market/#app=com.wsl.CardioTrainer ). Developers can distribute and sell their AIR applications to the millions of Android users worldwide. No amount of words can express how exciting this is. So what do you have to do to get started? A while back I created a couple of video tutorials (http://gotoandlearn.com) on using the AIR for Android pre-release (http://labs.adobe.com/ technologies/air2/android) tools. You will still need to do that for now so go and check those out if you haven’t done so already. Today I launched a new tutorial (http: //gotoandlearn.com/play.php?id=131) showing how you actually publish your applications to the Android Marketplace. Go on over and check out that one as it only took me 6 minutes to do it, and that included building the app. Many have wondered what the process is like when you download an AIR application but don’t have the runtime installed. I just recorded a quick video showing what the experience is. Pretty darn smooth in my opinion. source: The Flash Blog

Facebook ActionScript 3 SDK updated

The new Adobe ActionScript 3 SDK for Facebook Platform API (http://code.google.com/p/facebook-actionscript-api), fully supported by Facebook and Adobe, makes it really easy to build applications that combine the strengths of the Flash Platform and the Facebook Platform. Millions of people use Facebook every day and it’s the ideal platform for which to build interactive and social applications. This new library is developed by the very talented team at http: //gskinner.com and facilitates the development of Flash

Flex Builder for Linux project ending

After a long Labs alpha, Adobe is stopping further development of Flex Builder/Flash Builder running on the Linux operating systems. Adobe closed the project after studying the market opportunity for the sale of a commercial Linux Flex Builder/Flash Builder product. Linux developers will still be able to use the Flex SDK from the line command to build and debug Flex applications. As Adobe announced, the decision is specific to Flash Builder and does not affect other Linux activities for other Adobe products. Adobe continues to be committed to providing ongoing support for Adobe Flash Player and Adobe AIR for the Linux platform. source: The Official Flex Team Blog

Flash Player “Square” With IE9, Native 64-bit Support

Adobe released a version of Flash Player, codenamed “Square” (http://adobe.com/go/ fpsquare) which not only has support for IE9, but includes code collaboration that Adobe did with Microsoft to create a really streamlined experience. As part of Adobe’s collaboration with Microsoft’s Internet Explorer team over the past few months, Flash Player “Square” has been enhanced to directly support the hardware-accelerated graphics capabilities in the newest version of IE. Flash Player “Square” leverages the new GPU support available with Internet Explorer 9 Beta to deliver a faster and more responsive user experience with Flash-based content. In our internal testing, significant improvements are shown in Flash Player graphics performance – exceeding 35% in Internet Explorer 9 Beta compared to Flash Player running in previous versions of IE. While the performance improvements will vary based on the type of content and how it’s created, bitmap-heavy content for Flash Player will experience the greatest benefit. Flash-enabled content that’s embedded as transparent (wmode=”transparent”) will also run more efficiently given the benefits of offloading the HTML and Flash content compositing to the GPU. Try it out by downloading the Internet Explorer 9 Beta and the Flash Player “Square” preview. Adobe finally got native 64-bit binaries for Mac, Linux, and Windows. source: Ryan Stewart

09/2010 (17)

IN BRIEF

Sencha Animator Debuts: Create Powerful CSS3 Animations for Web Browsers and Mobile Devices

demonstrate its capabilities. Read more about Sencha Animator on the Sencha blog (http://www.sencha.com/ blog/2010/10/26/introducing-sencha-animator-thehtml5-css3-alternative-to-flash), or view the Sencha Animator demos (http://www.sencha.com/products/ animator/#demos). A fully functional preview version of Sencha Animator is available for immediate download at http://sencha.com. Sencha Animator addresses a frustrating problem for today’s designers: Apple iOS and numerous other mobile devices do not support popular animation platforms like Adobe Flash and Microsoft Silverlight. This means that many rich-media animations and ads are blocked from playback on some of the most popular mobile platforms. Sencha Animator bypasses the need for rich-media plug-ins by making it easy to create CSS3 animations that will play anywhere. CSS3 is an HTML5 family technology that runs on modern browsers. CSS3 is also hardwareaccelerated on Apple iOS, rendering smooth, detailed animations that deliver a more immersive experience.

Sencha Animator, the CSS3 alternative to Flash, helps interactive designers create rich animations for deployment on web browsers and devices, without relying on third-party media plug-ins 10.27.2010– PALO ALTO, Calif.: Sencha (http://www.sencha.com), the leader in enterprise JavaScript frameworks, has released a preview of Sencha Animator (http: //www.sencha.com/products/animator), the industry’s first purpose-built tool for creating rich and engaging CSS3-based animations that can be viewed on the latest WebKit browsers and mobile devices. Designed for interactive designers and advertising creatives that want to create cross-platform animations for playback on smart-phones and touch-based mobile devices, Sencha Animator brings static objects and text to life-quickly and easily-and ensures high-fidelity playback on the Apple iPad, Apple iPhone, iPod Touch, BlackBerry Torch, and Google Android-based devices. Sencha Animator will be featured at the upcoming Sencha Conference (http://www.sencha.com/ conference), where a special session is planned to a

09/2010 (17)

Source: Sencha News selected by Gábor Csomák i

TOOLS

Silex, the designer friendly publishing platform Silex is used to assemble multimedia content and publish it online or on the desktop.

ilex is a free and open source RIA which lets you build Flash websites for Flash Player 7, 8, 9 and 10. Silex is a new kind of Content Management System, a mix between editing software and an online media assembler. All multimedia file formats can be

this out of the way so that you can concentrate on the interesting features that are specific to your website. As you’re probably interacting with designers, Silex provides a common ground for communication with them. They can easily manipulate and tweak and skin

assembled in the SILEX WYSIWYG editor for publishing website online, on a local computer and on CD-R. The backend is PHP, and the frontend is a mix of HTML, Javascript, and ActionScript. In order to build maintainable, optimized and full featured Flash websites, you only need Silex and whatever software you use to design the background, illustrations, etc. In Silex you can add interactivity and build the structure of your publication. With Flash you will be able to add more complex interactivity and customize components and animation.

the site within Silex, and you can concentrate on the functionality. Finally, a market is starting to emerge for third-party addons within the thriving Silex community. The plugin architecture is made so that anyone can design their own components, themes, skins, etc. and integrate them in Silex. The framework is flexible and hookable with either AS3 Flex and Flash, AS1/2, javascript, php and haXe. Package and distribute your plugins on the exchange platform, installation and configuration will be made by the user with Silex toolboxes or with the manager. Official website http://projects.silexlabs.org, Wikipedia http://en.wikipedia.org/wiki/Silex_Flash_CMS

So where does this fit in in a developer’s workflow?

Flash on it’s own doesn’t come with tools for making a website, let alone a web application. So developers often find themselves rewriting the same boiler plate code for deeplinking, generating some html, basic navigation, etc. It’s all standard code and Silex allows you to get

ARIEL SOMMERIAKLEIN Ariel Sommeria-klein Freelance Flash/Flex architect, instructor, developer team lead for AMFPHP, contributor for Silex http://arielsommeria.com/blog/

09/2010 (17)

FLASH TECHNOLOGY

IPTV and Flash Lite 3.1 While the iPhone market seems surprisingly bleak for Flash developers, another great opportunity might brighten our days: IPTV What you will learn…

What you should know…

• Monetization methods • How IPTV technology relates with Flash Lite 3.1

• Flash Lite Basics

his article aims at analyzing how this technology relates with Flash Lite 3.1 and at establishing which among its characteristics are crystallized and which are singular, unstandardized features, so that Flash developers can embark on this new market.

IPTV != WebTV

Amidst the existing plethora of recent technologies that took the classic concept of television to a point where it now stands as a TV/PC hybrid, it might seem difficult at first to differentiate IPTV from WebTV, Digital Television (DTV), and Digital Media Receivers (DMR). Nevertheless, it is quite simple to comprehend, at least synthetically, what each of those technologies is: IPTV IPTV, or Internet Protocol Television, is a system that allows for the streaming of audio and video by means of the good old Internet Protocol Suite – which is, simply put, the exact same TCP/IP model on which the Internet is based. This system frequently depends on a set-top box to decode and request data, and is mostly based on streaming. WebTV WebTV is the simple broadcast of audio and video through the Internet to a terminal which is usually a personal computer. The delivery method is not restricted to conventional streaming and may vary from case to case – Joost, for example, is a WebTV service that is built on P2PTV technology, and, thus, has its users uploading videos while they download whatever it is they are watching. DTV DTV, probably the best known of the three, refers to the digital standard that has been gradually replacing conventional analog television sets by more modern, high-definition pieces of equipment.

DMRs DMRs, on the other hand, are home entertainment devices that connect either to a common home PC or to a dedicated domestic server in order to retrieve media files from the computers connected to the LAN. In despite of the fact that these technologies are standardized as described, recent technological advances are rendering them progressively harder to set apart one from the other – specially when it comes to their data transmission methods, which can no longer be exclusively attributed to a certain system and guaranteed as excluded from other formats.

Finally open

Initially made available almost solely by subscriptionbased services providers, the technology used to rely on closed set-top boxes which only a few hired programmers could code for – even though most of us knew it was all built on Java and Flash from the start, it was a pretty inhospitable environment for AS developers back then. Sure, one could connect a media computer to a home theater set and have it access a dedicated domestic server from which every movie, song, and image in the vicinity would be reachable – but it would require a wireless keyboard and mouse to be available in the living room in order for the user to interact with the system, which is really not very practical. In the best scenario, a DMR could be installed and thus substitute the awkward input devices by its own remote – undeniably much more adequate – but the core limitation of this network would still remain, as the user would be restricted to the media library already owned. In other words, this solution, albeit functional for accessing the data you already have in your machines, does not serve for live television reception. Nowadays, as companies such as Popcorn Hour offer more and more open set-top boxes capable of running Flash Lite 3.1 swf files – while Adobe has already secured a deal which grants them a great share of TVs, set-top boxes, and media players manufactured

09/2010 (17)

IPTV and Flash Lite 3.1

from this year on will have its technology embedded in the shipped chips – the circumstances are much more favorable for Flash developers in this market, and the commercial prospects are very exciting if you consider how culturally important the act of watching television is in the current stage of our civilization.

Monetization opportunities

It is just a matter of time for online markets to surface and allow developers to sell their software to set-top box users much like iPhone owners do. Being so, it is only logical to presume most of the monetization methods available for online Flash games and apps will be feasible in this new environment. From Mochi Media and its competitors to the old fashioned but effective online offering of payed software, it is now up to developers to come up with how they will make money with their next killer apps for compatible TVs and similar devices. Just a helpful suggestion: before really diving into the development of your game or app, you should first ponder on what revenue model works best for your case, and only then start building the app around this precept. By doing so, you will spare yourself the headache of discovering your project, regardless of how great it is, is not practical as a host for the API that would provide you with the highest monetization performance. In case you have any doubts or need assistance deciding on how to proceed from here, I recommend the excellent series of articles Chris Highes has been writing for FFD magazine. If you already have some experience developing for the Flash Lite 3.1 player, it might be a good idea to take some time considering what would be useful or desirable for people who wish to have some quality time in their television rooms, and you will be all set up and ready to go.

Useful links • •

http://help.adobe.com/en_US/�ashlite/dev/4/index.html https://developer.popbox.com/c/devuser/home

Optimisation techniques

One important thing you must remember is that, while Flash Lite 3.1 renders vectors through software calculations, it is capable of processing bitmaps with hardware acceleration on most set-top boxes. Therefore, in order to lessen the load of processes for which Flash is responsible and, consequently, improve overall performance significantly, one should use the built-in command cacheAsBitmap – which is pretty much self-explanatory, so let us jump into action without further delays. In order to be able to call this function, you just have to a line like this to the constructor class of the MC you want to optimise: anyMovieClip.cacheAsBitmap = true;

Just bear in mind that this resource is only available for movie clips, and does not work with buttons. Other performance-enhancing methods should also be applied depending on the nature of the swf you are working on: e.g. 3D worlds benefit immensely from level of detail (LoD) algorithms, while any piece of software profits from a well thought garbage-collection method that removes movie clips that will no longer be used from memory. This can be achieved by simply calling removeMovieClip(target) in AS2 or removeChild(target) if you are coding in AS3.

Conclusion

As the online market for TV-oriented applications and games is still in it initial stages, there is still a lot of room for both uncertainty and innovation. It does not mean, however, that we have all the time in the world to decide which path to take – after all, it has been a long time since technology stopped evolving in baby steps. Consequently, the developers that risk endeavoring into these new territories will also be responsible, to a high degree, for shaping the monetization and distribution services that will allow Flash programmers to make some money right out of the user’s living room.

PEDRO DE LA ROCQUE

Figure 1. Simple schematic depicting a monetization system in which the same API is implemented within different �les deployed for the Web and IPTV set-top boxes

09/2010 (17)

Pedro de La Rocque is a professional programmer, developer, and translator. About to graduate in Philosophy in UFRJ, he currently works for Alpha CRC and develops under his own trademark Protomni Multimedia. Even though Pedro has been working as a freelance Flash developer and AS coder for about �ve years, his acquaintance with programming dates back to green phosphor displays. These days, he has been doing most of his coding in AS3, Python, Lua, and DarkBASIC. http://codingreality.blogspot.com/

IPHONE DEVELOPMENT

Creating an iPhone Application that Responds to Touch Gestures This tutorial teaches you how to create an iPhone application that responds to a user swiping and zooming. We’ll then export the application and install it on your device. What you will learn… • creating an iPhone OS project • gestures in ActionScript 3.0 • exporting the application and setting it up on your device

What you should know… • ActionScript 3.0 basics (variables, conditionals, loops, events, etc.) • Knowledge of third party tweening libraries.

What you need to have... • a copy Flash CS5 • an iPhone • iTunes

reating this application will be quick and simple. Getting it on the device is the tough part if you’re doing this for the first time. I’ll be giving you direction and resources that you’ll need in order to sign up for the Apple Developer Program. The Apple Developer Program is costs $99 and is necessary to generate the certificate and provisioning profile required to export your iPhone app from Flash CS5. Without a valid certificate and provisioning file you can’t export your application from Flash nor will you be able to get it on your device for testing.

Setting up the stage

First download the source files that accompany this project. In the download you’ll find the finished project along with the basic image files I use to develop this project. If you want to you can skip this section and jump into the next that deals with the specific ActionScript for this project. If you’re going to follow along from the beginning start off by opening Flash CS5 and create a new iPhone OS

Figure 1. Setting up a new iPhone OS document

09/2010 (17)

Creating an iPhone Application that Responds to Touch Gestures

project (Figure 1). Save the file as Gestures.fla any where you like. Now import arrow.png and background.jpg onto their own layers. Make sure the arrow is on top of the background and convert the arrow to a MovieClip. When you convert the arrow to a MovieClip ensure that the registration point is set to the center and give it an instance name of arrow_mc. We’ll be animating the rotation of the arrow so it needs to be in the center. Next, create a new layer and draw a dynamic text field in it. Give the newly created text field an instance name of swipe_txt and set the font family to _sans. _sans defaults to Helvetica on the iPhone. I specified a default message of swipe or zoom but you don’t have to. Your interface should now look like mine (Figure 2).

The Document Class

Let’s dive right into the code. Create a new ActionScript class and save it as DocumentClass.as in the same location as Gestures.fla. Copy and paste the code from Listing 1 and I’ll explain what’s going on. The constructor of the class calls one method called init(). The init() method sets up everything. First we set the alpha property of arrow_mc to 0. We then set the inputMode of the MultiTouch class to GESTURE. Multitouch.inputMode = MultitouchInputMode.GESTURE

The GESTURE mode supports a variety of gestures like rotate, pan, swipe, and zoom. We’ll be working with the swipe and zoom gestures in the tutorial. Okay, we’ve setup the input type. The next thing we do is call a method that registers the stage with the GESTURE _ SWIPE and GESTURE _ ZOOM events. GESTURE _ SWIPE calls a method named onSwipe and GESTURE _ ZOOM calls a method named onZoom .

Figure 2. The interface setup in Flash

09/2010 (17)

stage.addEventListener (TransformGestureEvent.GESTURE_ SWIPE, onSwipe, false, 0, true);

stage.addEventListener (TransformGestureEvent.GESTURE_ ZOOM, onZoom, false, 0, true);

Swiping

The onSwipe method is straight forward. We setup four conditional statements. One for each direction the user could swipe (top, right, bottom, left). The event parameter has two properties we’re interested in offsetX and offsetY. These variables detect the direction that the user swipes. If the user swipes to the right, the value of offsetX is positive 1 and -1 if swiped left. The same concept is applied to the offsetY property. If the value of offsetY is positive 1 then the user swiped towards the bottom, and -1 if swiped towards the top. We then make a call to TweenLite to rotate arrow_mc to point towards the direction we swiped and change the value of swipe_txt to reflect that as well.

Zooming

The onZoom method is even simpler. When the user puts his or her two fingers down and begins pinching or expanding their finger we zoom in on the contents. We just multiply the amount of zoom produced by the pinching to the whole application to get the zooming effect. I applied this to the entire viewing area. We could have just easily applied it to a specific object and had that object zoom. this.scaleX *= e.scaleX; this.scaleY *= e.scaleY;

Open Gestures.fla, located the properties panel and type in DocumentClass in the class input field. This

Figure 3. The application running

IPHONE DEVELOPMENT

Listing 1a. The Document Class package

{

import flash.display.MovieClip; import flash.events.MouseEvent;

import flash.events.PressAndTapGestureEvent; import flash.events.TouchEvent;

import flash.events.TransformGestureEvent; import flash.ui.Multitouch;

import flash.ui.MultitouchInputMode; import gs.TweenLite; public class DocumentClass extends MovieClip

{

public function DocumentClass ()

{ }

init ();

private function init ():void

{

// Setup interface arrow_mc.alpha = 0; // Setup device Multitouch.inputMode = MultitouchInputMode.GESTURE; // Setup events

}

setupGestures ();

private function onSwipe (e:TransformGestureEvent):void

{

this.scaleX = this.scaleY = 1;

arrow_mc.alpha = 1; // Swipe right if (e.offsetX == 1)

{

}

swipe_txt.text = "you swiped to the right!"; TweenLite.to (arrow_mc, 1, {rotation:0});

// Swipte left if (e.offsetX == -1)

{

}

swipe_txt.text = "you swiped to the left!"; TweenLite.to (arrow_mc, 1, {rotation:180});

// Swipe down

09/2010 (17)

IPHONE DEVELOPMENT

Listing 1b. The Document Class if (e.offsetY == 1)

{

}

swipe_txt.text = "you swiped downward!";

TweenLite.to (arrow_mc, 1, {rotation:90});

// Swipe up if (e.offsetY == -1)

{

}

swipe_txt.text = "you swiped upward!";

TweenLite.to (arrow_mc, 1, {rotation:270});

private function onZoom (e:TransformGestureEvent):void

{

swipe_txt.text = "you're currently zooming!";

arrow_mc.alpha = 0; // Zoom in

this.scaleX *= e.scaleX;

}

this.scaleY *= e.scaleY;

private function setupGestures ():void

{

0, true); 0, true);

}

stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, onSwipe, false, stage.addEventListener (TransformGestureEvent.GESTURE_ZOOM, onZoom, false,

}

Figure 4. Getting the UDID from iTunes

09/2010 (17)

Creating an iPhone Application that Responds to Touch Gestures

hooks our class file with the Document Class. Test your application. If you receive any errors please make sure all instance names are specified correctly and that your code matches mine. You should see something similar to Figure 3. Now everything is compiling and running but we can’t do a single thing with this. There is no way to simulate touch gestures from our machines. Now we have to upload it to our device and do a real test. This is where the real fun begins.

Once you become a member of the iOS Developer Program you must generate a certificate for your program. On a Mac it’s really really simple and explained clearly on Apple’s website. Windows users will have no instruction on how to do this but Adobe has written the instructions for you. No matter what platform you’re using, you’ll need to convert the certificate you acquire from Apple’s website into a format of P12 so that Flash understands it. Follow the instructions on Adobe’s website.

Acquiring the Developer Certificate

Acquiring the Provisioning Profile

Now that we have our code the way we want it, we have to get it onto our device. To do this you’ll need to sign up for the Apple iOS Developer Program, which requires a $99 payment for the year. Near the top of the page you’ll find an “enroll now” button. Click that and you’ll be on your way to becoming a registered developer. If you’re not serious about becoming a developer, your journey through this tutorial stops here. There is no way of testing your application (that I know of yet) without becoming a registered developer.

Now that you’ve created your certificate it’s time to acquire your provisioning file. There are two types, one for development and one for distribution. We only need the one for testing purposes. You can acquire your provisioning profile from the iOS Provisioning Portal. The involves you doing the following:

Warning

This is a pretty straight forward process and apple has a great help section incase you get stuck. To get your device ID you’ll have to plug in your device and access iTunes on your computer and write down its UDID number. Check the summary tab and click on the the serial number to show your UDID (Figure 4). Once you have your provisioning file, save it, and continue on.

During the process of signing up I ran into a problem. Apple wants you to use the name on your credit card to sign up. If you were already a user on Apple’s site this could be a problem. If you’re like me, your name has an apostrophe in it. Which is no big deal but Apple wants you to sign up for the program with exactly the same spelling as on your credit card. My card doesn’t have the apostrophe in it. When I received my verification email and clicked the link, I was denied my membership. A quick call to Apple and that was all fixed.

Figure 5. Adding your �les to the iPhone OS publish settings

09/2010 (17)

• • •

Creating an application ID. Creating a device ID for devices you wish to test. Creating a provisioning profile

Exporting your iPhone Application

Once you have all your certificates ready, you can export your iPhone application by going through File>iPhone

Figure 6. Adding your icons to the application

IPHONE DEVELOPMENT

Figure 7. The application running on the device

Figure 8. Adding the loading screen to the application

OS Settings. From there, go to the deployment tab locate your certificates in order to generate your application (Figure 5). The icons tab always you to create icons that will appear in iTunes, and your device. Go ahead and select the icons i’ve provided or feel free to create your own (Figure 6). When you’re ready, click publish. This takes a little bit longer that the normal publishing time.

Also check full screen while you’re at it. This removes the the top and bottom bars when viewing your application. At this point you’ll need to repeat the process of exporting your app, adding it to iTunes, and syncing.

Installing the Application on your iPhone

We’re almost done. The last part is done through iTunes. First you’ll need to do is install your provisioning profile on your iPhone. To do this go through File>Add To Library and browse for your provisioning file. Once you add it to the library you’ll need to sync your device. This should install the file on your device. Make sure it’s installed by going to Settings>General>Profiles on your device. Now that the provisioning file is installed. Add your application to iTunes by going to File>Add To Library. Sync your application to your phone. Your application should now be installed on your device. Test! Slide your finger in the different directions to watch the arrow animate and the text change. Zoom in and out (Figure 7). You might have noticed when you loaded your app there was a black screen. To fix that create a graphic to fit the size of your device (320px x 480px). Save it as a Default.png in the same location as Gestures.fla. Go to your iPhone OS publish settings and in the general tab, add Default.png to the included files (Figure 8).

Resources

Here are a list of resources you can use to help you with your iPhone development troubles. Thanks to Republic of Code for allowing me to use some of their steps in this article. • • •

Republic of Code theFlashBlog Adobe Developer Connection

Conclusion

There you have it. You’ve just created your first iPhone app. Please explore this further, try new things, and let me know if you come up with any awesome ideas. Like always, feel free to email me at codedbyryan@gmail.com if you have any questions.

RYAN D’AGOSTINO Ryan D’Agostino is an Interactive Developer at NAS Recruitment Communications in Cleveland, OH, Digital Media Instructor at Virginia Marti College of Art and Design in Lakewood, Ohio, and freelance designer and web developer. For more information about Ryan please visit http:// www.codedbyryan.com/

09/2010 (17)

ACTIONSCRIPT IN ACTION

Create an ObjectHandler Class This month Huw Collingbourne builds a class to process the associative arrays inside ActionScript objects In last month’s column I looked at the internal structure of Object, the base class of the entire ActionScript class library. It turned out that an Object may contain a fairly complex data-structure – an ‘associative array’ of key-value pairs. Inconveniently for us, however, the Object class does not provide a rich set of methods for manipulating its own data. What you will learn…

What you should know…

• How to process associative arrays • How to use static methods • How to create arrays of keys and values

• How to create new classes • The difference between ‘for’ and ‘for each’ loops • An associative array is like a hash (see last month’s column)

The other possible scenario is when you wish to create a descendant class of Object which has its own dataprocessing methods built in. This might be preferable if you are creating all your own classes from scratch but it is not an option if you have to work with existing code that returns instances of Object. I’ll explain an approach to subclassing Object next month. First, however, I’ll explain how to create a library of methods capable of processing standard ActionScript objects.

useful. If you have experience using associative arrays or hashes in other programming languages, you may already have some clear ideas of what you need. Personally, I do quite a bit of programming using the Ruby language, and when I move to ActionScript it is often the Ruby hash methods that I miss the most. Two of the most valuable methods in Ruby are the ones that return an array of all the keys or all the values in a hash. So let’s start by creating a class that does this for ActionScript. Here it is my intention that each method in this class will be passed an ActionScript object as an argument and will return the processed data as its result. The most convenient way of doing this would be to create static methods. A static method is bound into the class itself (in Ruby this would be called a class method) and it can be invoked using the class name rather than requiring that an object instance be created first. This is my first go at a static method that returns an array of the keys in an object:

Keys To Success

public static function keysArray( anOb : Object ) :

here are two possible scenarios in which you might want to process the items in an associative array. The first is when you are dealing with a raw ActionScript object, by which I mean an object that has been created as an instance of the Object class either by using the new keyword or by assigning values in an object literal in this way:

var anOb:Object = {crunchy:”apples”, tangy:”oranges”, juicy:”pears”};

Before doing any coding, we have to decide exactly what kind of object-processing methods would be

Array {

var _keys : Array = [];

09/2010 (17)

Create An Object-Handler Class

associative array using a for..in loop. To obtain the values, you just need to use a for each..in loop instead.

for( var aKey : String in anOb ) { } }

_keys.push( aKey );

Establishing Order

return _keys;

It’s important to bear in mind that, unlike a normal numerically-indexed array, an associative array is not guaranteed to store its items in a predetermined order. In some cases, it may store items in order but you cannot rely upon it to do so. If you want to be certain that the returned array is sorted, you should explicitly sort its items. You can do that by calling the sort() method on the array of keys or values. I prefer to have keys and values sorted so I want this behaviour to be applied by default. However, there may be times when sorting is not required and so I also want to provide the option to omit this. I do this by adding a Boolean argument, doSort, to my two methods and assigning it the default value true. When the calling code omits the second argument (e.g. ObjectHandler.keysArray( myOb )), the default value is used, causing the returned array to be sorted. If a second argument is supplied (e.g. ObjectHandler.keysArray( myOb, false )) then the value of that argument will be used, allowing the programmer to omit sorting the array. The two methods inside the class are shown in Listing 1.

Assuming this method belongs to a class named ObjectHandler, my code would be able to use it in this way: ObjectHandler.keysArray( myOb ). The following example assigns an associative array to the Object variable, myOb, and then passes it as an argument to keysArray(): var myOb : Object = {1:”goodbye”, 2:”cruel”, 3:”world”} var myKeys : Array;

myKeys = ObjectHandler.keysArray( myOb );

After this code executes, the Array variable, myKeys, contains the following array items: [“1”, “2”, ”3”]. If you are using an IDE such as Flash Builder or Amethyst, the IntelliSense or code completion should now make your new methods available when coding (Figure 1). Having written a method to return the keys, we now need a method to return the values. The keys of the keyvalue pairs are obtained by iterating over the a

09/2010 (17)

ACTIONSCRIPT IN ACTION

Figure 1. Accessing Static Methods Here I’ve used Amethyst to create a Visual Studio project showing the ObjectHandler class in the top window and a program that uses the class in the bottom window. As the methods are all static, I just enter the class name, ObjectHandler, followed by a dot in order to display an IntelliSense list of the methods

Figure 2. Decomposing Objects into Arrays Here the Amethyst debugger is being used to show the internal structure of the arrays returned by the methods of the ObjectHandler class. The arrays of keys and values are shown in the Watch window and an array of paired key-value objects is displayed in the debug tip. Notice that key “4” has a null value

09/2010 (17)

Create An Object-Handler Class

But what if you’d like to have an array containing not just the keys and not just the values but key-value pairs sorted on the key. That’s pretty easy to do too. You can find my implementation in a function called keysAndValuesArray() (Listing 2). This uses a for..in loop to obtain both the key and the value of each item and this values is then used to initialize a new Object, kv. This is passed into an array, _ KsAndVs. The key item of each object in the array has been created using a property named key like this: kv.key = aKey;

Remember that (as explained last month) an object can have properties such as this created dynamically. There is nothing special about the name key. I could just as well have used the name myproperty and assigned it as kv.myproperty = aKey. Once a property has been created in this way it may be accessed as a string (that is, as the key of the object’s associative array) using a syntax like this: kv[“key”] or kv[“myproperty”]. An array has a sortOn() method which takes a string argument that can be used in a similar way, to refer to the name of the property (Figure 2). Here my property is called key so I can sort the array on that property like this: _KsAndVs.sortOn( „key” );

Testing Time

Now I’d like to write some methods to test if an object already contains a given key or value. Testing for a key is straightforward. If you try to index into an associative array with a string key, you will either retrieve the value associated with the key or, if the key does not exist, you will obtain a null value. So this method will return false when the specified key does not exist: public static function containsKey( anOb:Object, aKey: var yes:Boolean;

String ):Boolean {

if ( anOb == null ) { yes = false;

} else { } }

yes = ( anOb[aKey] != null );

return yes;

There’s just one problem with this. It will also return false when the specified key does exist but its associated value is null. For example, let’s assume you have this object: var myOb : Object = {1:”goodbye”, 2:”cruel”, 5:”world”, 4:null};

09/2010 (17)

ACTIONSCRIPT IN ACTION

Listing 1. Returning Arrays Of Keys and Values package {

public function ObjectHandler( ) {

public class ObjectHandler { public function ObjectHandler( ) {

}

// returns all keys in Object as an array – sorted by default public static function keysArray( anOb:Object,

doSort:Boolean = true ):Array {

var _keys:Array = [];

// returns all keys in Object as an array

for ( var aKey:String in anOb ) {

– sorted by default public static function keysArray( anOb :

Object, doSort : Boolean = true )

}

if ( doSort ) {

: Array {

var _keys : Array = [];

for( var aKey : String in anOb ) {

}

_keys.push( aKey );

if( doSort ) {

}

_keys.sort( );

return _keys;

}

– sorted by default Object, doSort:Boolean = true ): Array {

var _values:Array = [];

for each ( var aValue:Object in anOb ) {

– sorted by default Object, doSort : Boolean = true )

}

var _values : Array = [];

for each ( var aValue : Object in anOb ) {

}

_values.sort( );

return _values;

}

_values.sort( );

return _values;

// returns array of key=>value objects – sorted by default on key public static function keysAndValuesArray(

anOb:Object, doSort:Boolean =

true ):Array {

var _KsAndVs:Array = [];

}

var kv:Object;

for ( var aKey:String in anOb ) {

Listing 2a. The complete ObjectHandler Class

kv = new Object( );

kv.key = aKey;

package sapphiresteel.steelutils.steelobjectutils {

kv.value = anOb[aKey];

import mx.collections.ArrayCollection;

}

an associative array Object

}

* */ public class ObjectHandler {

_KsAndVs.push( kv );

if ( doSort ) {

* Class that provides methods for manipulating

_values.push( aValue );

if ( doSort ) {

: Array {

if( doSort ) {

return _keys;

public static function valuesArray( anOb:

public static function valuesArray( anOb :

_values.push( aValue );

_keys.sort( );

// returns all values in Object as an array

}

_keys.push( aKey );

}

_KsAndVs.sortOn( "key" );

return _KsAndVs;

09/2010 (17)

Create An Object-Handler Class

Listing 2b. The complete ObjectHandler Class // private: returns true if anObject is found in anArray private static function arrayContains( anArray:

Array, anObject:Object ):Boolean {

var arrayColl:ArrayCollection;

arrayColl = new ArrayCollection( anArray );

}

return arrayColl.contains( anObject );

// returns true if aValue is found in anOb public static function containsValue( anOb:

Object, aValue:Object ):Boolean {

var _values:Array = valuesArray( anOb ); return ( arrayContains( _values, aValue

) );

}

// returns true if aKey is found in anOb public static function containsKey( anOb

: Object, aKey : Object ) : Boolean {

var _keys : Array = keysArray( anOb );

}

return ( arrayContains( _keys, aKey ) );

// returns true if aKey:value is null (i.e. if {aKey:null} or aKey not found) public static function keyValueIsNull( anOb:

Object, aKey:String ):Boolean {

var yes:Boolean;

if ( anOb == null ) {

yes = false;

} else { } }

}

09/2010 (17)

yes = ( anOb[aKey] != null );

return yes;

On the ‘Net • • •

Republic of Code – http://www.republicofcode.com/ theFlashBlog – http://blog.the�ashblog.com/ Adobe Developer Connection – http://www.adobe.com/ devnet.html

When you test for key 4 (ObjectHandler.containsKey (myOb, „4”)) which does indeed exist, containsKey() will return false when it should return true. To deal with this, it requires that I do a bit more coding. First, I’ve written a generic arrayContains() method which simply initializes an ArrayCollection with an array and makes use of its contains() method to determine whether or not a given object can be found in the array. My containsKey() method then calls the keysArray() method to get an array of all the keys in an object’s associative array and it passes these keys to arrayContains() to determine whether a specific object can be found in the array. This now returns true if a key is found even if its associated value is null. It only returns false in the key is not found. I’ve written a containsValue() method that works in a similar manner,. First it calls the valuesArray() method to obtain an array of values then it calls arrayContains() to find out if a specific object is in that array. The full code of my ObjectHandler class is shown in Listing 2. This is all very well if you are working with standard ActionScript Objects. But what if you prefer to create your own descendent classes of Object? Instead of sending objects as parameters to be processing by my static methods, any objects created from a descendent class should have built-in methods to process their own associative arrays. But that means that we’ll need to reimplement all the static methods of the ObjectHandler class as non-static methods in our new descendent class. Or does it? In fact, we can use a little programming trick to avoid duplicating our existing code. I’ll be explaining how to do this in next month’s column when I shall also be creating separately compiled libraries. This will make it easy to use these classes and methods in multiple different projects.

HUW COLLINGBOURNE Huw Collingbourne is Director of Technology at SapphireSteel Software. Over more than 20 years, he has programmed in languages ranging from Ruby to C# and has been a technical columnist for computer magazines such as PC Pro and PC Plus. He is the software lead of the Amethyst Designer, the Flex user interface design environment of the Amethyst IDE for Visual Studio. SapphireSteel Software: http:// www.sapphiresteel.com/

FLEX/ACTIONSCRIPT 101

States in Action We will be developing a basic app to demonstrate the use of states, where the user will be able to add, edit and delete information about products.

What you will learn…

What you should know…

• Use states in your mxml views

• Basic knowledge of ActionScript • Familiar with Flex Components

he user interface consists in a form with all the controls we need to the example application and a data grid where we will have a edit and delete buttons. Using states we will change the UI, without the need to create various views for each operation or write a bunch of code to alter the UI, because it will be changed accordingly with the app operation being performed by the user by using states.

Deconstructing the User Interface

Your user interface consists in a product cart with 2 TextInputs, 1 ComboBox, 4 Buttons, a TextArea and an AdvancedDataGrid (Figure 1). As you can see in Figure I, we positioned all the controls we need for the

Figure 1. User Interface

Figure 2. States Panel

User Interface of our example. By using states we will change the UI accordingly.

Creating the States

Now we have your user interface will all the needed elements, it’s time to create our states. We will be

Figure 3. Show StatesPanel

09/2010 (17)

States in Action

creating 1 new state – along the Default state – to change your user interface (Figure 2). The new state will be used when editing a product information where the user will be able only to change the product category, it’s price and description, the product name cannot be change and the datagrid will be disabled during editing. Goto to the states panel or if you’re not seeing it select Window->States (Figure 3),

and click in the New State button to create a new state another state called sta_edit (Figure 4 and Figure 5).

Changing States

In our newly created state all controls are being display as it’s based on our Default state (Figure 6). Select the Confirm button in the Default state and in the Flex Properties panel, change it’s visible and

Figure 4. Creating new state

Figure 5. Newly created state

Figure 8. Property Details

Figure 6. Adjusting properties for sta_edit state

Figure 9. Adjusting datagrid properties

Figure 7. Changing the state

Figure 10. Hidding the add button

09/2010 (17)

FLEX/ACTIONSCRIPT 101

Listing 1. Calling // ActionScript file /** * * Init the logic */

includeInLayout properties to false, so in the default state the control will not be available to user interaction (Figure 7 and Figure 8). The includeInLayout property puts the control out of sight making it invisible and ignoring it when laying out our UI. When the includeInLayout property is set to true but the visible property is set to false, the control will not be visible, but Flex will layout the container as it was.

public function load() : void

{

this.FrmAdd();

Listing 2. FrmAdd method uses the default state // ActionScript file

this.SetUpComboBox();

}

/**

//-------------------------------------------------

* * Configure the app to add product data */

/** * * SConfigure the app to add product data */

public function FrmAdd() : void

{

public function FrmAdd() : void

{

nt.CLICK, this.AddProduct);

this.btn_editProduct.addEventListener(MouseEv

this.btn_addProduct.addEventListener(MouseEve

nt.CLICK, this.AddProduct);

this.btn_editProduct.addEventListener(MouseEv

ent.CLICK, this.FrmEdit);

}

this.btn_addProduct.addEventListener(MouseEve

ent.CLICK, this.FrmEdit);

}

Listing 3. Changing the State for editing mode

//------------------------------------------------// ActionScript file /** *

/**

* Configure the app to editing product data

public function FrmEdit(event : MouseEvent = null)

: void

{

if( !this.ValidateEdit())

{

}

*/ public function FrmEdit(event : MouseEvent = null)

{

Alert.show(this.message);

if( !this.ValidateEdit())

{

else

{

: void

}

else

this.currentState = 'sta_edit';

{

this.btn_confirm.addEventListener(MouseEven

t.CLICK, this.ConfirmEdit);

}

this.currentState = 'sta_edit';

this.btn_confirm.addEventListener(MouseEven

t.CLICK, this.ConfirmEdit);

this.FillProductData();

//-------------------------------------------------

Alert.show(this.message);

}

this.FillProductData();

09/2010 (17)

States in Action

Figure 11. Default State

When editing a product, our datagrid, product name textfield will be disabled, the add button will also be hidden and the confirm button will show up (Figure 9). To do so, select the sta_edit state in the state panel, then select the product_name textfield, the DataGrid and the Add button in the Flex Properties panel, change their visible and the includeInLayout properties to false (Figure 10). In the user Interface it’s all that need to be done. Now it’s time to change the states of our app.

Creating the app Logic

Now that we’re finished with the User Interface, open the StatesExample file in the logic folder, let’s modify it to use the states we’ve created. The StatesExample.as has a bunch of methods that drive the logic of your app (Listing 1). The FrmAdd method set ups the listeners to adding and editing the product data. It’s not meant to be changed because it uses be the Default state when adding a product that all mxml file already has. Without the use of states, this method would require two more lines (Listing 2). Listing 4. FrmAdd without using states // ActionScript file

/** * * Configure the app to add product data */ public function FrmAdd() : void

{

this.btn_addProduct.addEventListener(MouseEve

So we will be changing the FrmEdit method and add calls to change our UI. Go to the FrmEdit method and add the following line as the first of the method (Listing 3 – FrmEdit without using states). The following line (this.currentState =‘sta_edit’;) will change the current state of our app from the Default state to the sta_edit state you create in the States panel (Figure 11). Maybe if you’re new to states, you might be thinking it’s not worth to use it. But it saves us to write a bunch of code in our app. Here’s what’s going on. When our app starts the Confirm button is not included in the layout and it’s visible property is set to hidden, if you don’t use states these two lines of code would the written in the FrmAdd method (Listing 4). In the ConfirmEdit method things could be much more annoying, because we should hide the add button, disable the datagrid and textinput and include the confirm button in the layout and make it visible. This would require 5 lines of code, unnecessary code for you to write. And after editing, return all controls to normal and hide the confirm button again. More unnecessary code to write. Using states all we need to do is set the currentState property with the corresponding state we want to use and after editing return to the Default state passing and empty string to the currentState property. So as you can see, States saves us to write a lot of code to make the changes to the UI of the app, even in this simple example. It’s a resource worth using in your apps. Another thing that if you’re a novice in ActionScript programming is, despite the example is very basic, it contains a lot of methods. This approach enables your code to be easy to maintain and read, because each method does just one thing and each one is very small in line count. The complete source code of this example – StatesExample.zip – is available at http:// code.google.com/p/flashcapabilities/downloads/list. So that’s it guys and see you next article where i will be presenting some cool things i’m doing here at RGSistemas. See ya later.

nt.CLICK, this.AddProduct);

this.btn_editProduct.addEventListener(MouseEv

ent.CLICK, this.FrmEdit);

this.btn_confirm.visible = false;

}

this.btn_confirm.includeInLayout = false;

09/2010 (17)

MARC PIRES Marc Pires is a RIA Developer at RGSistemas, Brazil which is preparing to release an upcoming version of the Esus System. Contact information: @MarcPires (Twitter) IChat: marcpiresrj@aim.com www.rgweb.com.br

FLEX DEVELOPMENT

Action Message Format and Data-centric Flex Excerpted from

Flex 4 in Action 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 For Source Code, Sample Chapters, the Author Forum and other resources, go to: http://www.manning.com/ahmed2/

This article is taken from the book Flex 4 in Action. The authors discuss different flavors of Action Message Format. They also explain how to build data-centric applications with Flash Builder and using data-centric Flex with ColdFusion.

vents are central to understanding how to work with Flex and how to create compelling, welldesigned applications. Events are a powerful tool and one of the main features of the Flash Player. Events are deceptively simple, but at the same time, they’re an extremely powerful communication mechanism for your applications. Flex is built around an

event-driven framework. Events are the central nervous system within your applications, with information flowing in and out of them, up and down, and side to side. We don’t mean to be melodramatic, but without understanding events Flex becomes a terrible chore and ActionScript 2.0 begins to look sexy again. Let’s begin by introducing the event system and describe its all-important role in a Flex application. Next we will explore sending and receiving events.

��

Figure 1. Example of a synchronous request

Figure 2. Example of event listening

09/2010 (17)

Action Message Format and Data-centric Flex

Table 1. Core event properties

Property

Description

Event.target

Event dispatcher

Event.currentTarget

Component currently containing and is inspecting the event or thedispatcher.

Event.type

A string name that identi�es the type of event, such as a click event (clicking a button), a mouse event (moving the mouse), or a select event (selecting an item). Events come in many types, and each type includes its own unique items; but each event has the generic types mentioned here.

Event.eventPhase

Current phase of the event

The event system

When working with web technologies such as ColdFusion, .Net, ASP, PHP, PERL, and Python, information is transmitted on a request and response basis or what is called synchronous requests. In this model, remote servers wait for requests from clients (users), then gather and process information relevant to the request. They build the appropriate response and send the data back to the client, at which point the transaction is over-until the client requests the next transaction. Figure 1 shows a request from your laptop, over the Internet, to the web server (where the site is held), and back to your computer. Between step 1 and 2 there is latency, or a delay, due to the time it takes to travel from your location to the location of the server. The same goes for step 3 to step 4. The Flash Player employs a different paradigm. Instead of sending out requests and receiving responses, the Flash Player makes requests then listeners patiently wait and listen for asynchronous events. When a listener hears an event, it performs the task it was designed to do then waits again for the next event to occur. Figure 2 shows an example of a profile manager with a form and the resulting information as two separate components. In phase 1, the top graphic, the “Your Information” pod registers as a listener for “update” events from the “Update your information” component. At this point nothing happens until the update event is dispatched and the rest of the application is still available for interaction. Once the user enters some information and clicks the “Update” button, an event is dispatched and anything listening for this event will be notified; as shown phase 2, the bottom graphic. Notice all of this interaction happens within the application and never returns to the server. In the Flash Player, events are constantly fired in response to a variety of user inputs and system notifications. The main instigator for these events is the user. By clicking a mouse button, moving the mouse, or selecting an item from a drop-down menu, the user is unwittingly setting off events, which trigger the application to respond accordingly. With Flash Player applications, the difference is in the user-transparent operations that take place in the

09/2010 (17)

background. This gives you the ability to fire off tasks asynchronously, in parallel, none of which are dependent on each other, allowing for transparent activities to go on behind the scenes while your application interacts with and provides feedback to the user in real time (versus having code execute synchronously, or sequentially, while the user waits for it to complete). In addition, when requests for new information are made, they’re sent to the target server and the application carries on with other tasks or patiently waits. The response will be processed whenever the result comes back, whether that happens to be in five seconds or five minutes. In contrast, when making a request to a web server, an HTML page viewed using a web browser shows the page in a vertical manner starting with the top of the page to the bottom of the page, unless JavaScript is used to asynchronously update the page after the page has loaded. We’ll get into how this works in a moment; before we do, let’s look at how the Flash Player event system is similar to another system you already know well, ”I’ll call you, don’t call me.”

Event system – the Hollywood Principle

Components and classes, also known as dispatchers or targets, need to communicate and pass data to each other through the event system. To illustrate this

Figure 3. The event �ow from component to root and back to component

FLEX DEVELOPMENT

more clearly, we can draw a parallel between the event system and the Hollywood Principle, which states, “Don’t call me, I’ll call you.” Think of a person calling you asking to borrow money. You tell them you will contact them with an answer after checking your bank account first. This is the Hollywood Principle which is nothing more than an asynchronous request in tech terms. Consider the following example. Your Flex application is supposed to load data from the server but while the data is loaded you want to show some cute, animated message to the user. The data loading component would be you on the phone, the application is the person in need, and the cute, animated message would be you dancing to Footloose in your mirror while checking your bank account. The request has been made. The amount of time between the request and the resulting call back is undetermined. So, you could be dancing for a while, but once you have checked your account and have an answer you are ready to inform the caller of your answer. This is exactly how Flex applications are developed and why events are critical: dispatchers receive requests and dispatch events accordingly but not necessarily immediately.

Event-delivery system

It’s important to know the pathway events take within a Flex application, because this pathway determines which components receive the events and which don’t. Events originate from the dispatcher, traverse the display tree vertically to the Application root then to the stage, and are sent back down to the dispatcher, as shown in Figure 1. The event goes through the parent tree (and any components that are specifically listening to it), which has implications for which components receive notifications about events. For example, as shown in Figure 3, a component’s parent typically receives event notifications; children and siblings don’t receive notifications. From an application perspective, when a component dispatches an event, that event can either bubble or not bubble. If the event bubbles, it traverses up the parent chain to the application root, passing by every parent in the chain. Each parent can listen for application events at its own level and rebroadcast those events as needed, stop the propagation, or call methods to take specific action. This is the real power behind the Flash Player event system: the ability to create custom events and pass them around. Tying into the event system allows for maximum decoupling of logic and maximizes the components that can use that logic, which Listing 1 Event listening with MXML and an ActionScript event listener in turn affords maximum code reuse. <?xml version="1.0" encoding="utf-8"?> Now that you’ve learned a bit about <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" how the application passes events xmlns:s="library://ns.adobe.com/flex/spark"> around, let’s break down the event’s <fx:Script> journey from start to finish by exploring <![CDATA[ sending and receiving events. import mx.controls.Alert;

protected function onClick(event:Event):void{

Alert.show(event.target.label + " clicked", "Event

]]>

}

Test");

</fx:Script>

<s:Button label="Button 1" click="onClick(event)" />

</s:Application>

Listing 2. Event listening with inline mxml <s:Button label="Button 1"> <s:click>

<![CDATA[

Alert.show(event.target.label + " clicked", "Event Test");

]]>

</s:click>

</s:Button>

Sending and receiving events

A Flash Player event is made up of the following core properties (see Table 1). NOTE In the Target phase currentTarget has the same value as target, the dispatcher, but in the Capture and Bubbling phases currentTarget is different. Each phase of the event journey – from dispatcher to parents to stage and back again – can be divided into phases. Events have only three phases, depending on where they are in the process, as shown in Table 2. NOTE Bubbling and Capturing phases travel through parents but never through the children of the dispatcher.

09/2010 (17)

Action Message Format and Data-centric Flex

Table 3. Event listener properties and method arguments

Property

Type

Description

Type

String

(Required) Type of event for which to listen. You can de�ne the event type as a string or use best practices and use the event type constant de�ned on every event object.

listener

Function

(Required) The function to call when the event is dispatched.

useCapture

Boolean

(Optional) Phase in which to listen. If true, the listener listens for the event during the capture phase. The default value is false (uses the bubbling or target phase).

priority

Integer

(Optional) When the listener is called. The higher the number, the sooner it’s called. The value can be negative; the default value is 1.

weakReference

Boolean

(Optional) How quickly the event listener object is picked up and destroyed by the garbage collector. true means it’s discarded sooner. The default value is false, which prevents garbage collection from destroying the listener (performance at the cost of memory).

You can determine which phase you’re in by using the event object’s eventPhase property. This property contains an integer that represents one of the following Event constants: • • •

Event.CAPTURING _ PHASE:uint = 1 Event.AT _ TARGET:uint = 2 Event.BUBBLING _ PHASE:uint = 3

BEST PRACTICE

occur inline. This has advantages and disadvantages. Ultimately it boils down to a preference but keep in mind an inline event listener cannot be used by multiple dispatchers. In the case where multiple Button components need to call the same method, this approach would fail miserably. Although these examples do the event adding in MXML, you are not restricted to work in that environment. You can do the same thing in ActionScript by using the addEventListener() function.

When you’re referring to or monitoring these phases, you can use either the number or the constant, Adding event listeners in ActionScript although it’s considered best practice to use constants Using the addEventListener() function provides more finewherever possible to make your code easier to read and grained control over the events and is the only way, in ActionScript, to listen for dispatched events. One huge manage. Other events and custom classes can contain other reason for adding event listeners in ActionScript is event properties as well, but at minimum they include these listeners added in MXML cannot be removed. properties. Let’s examine what happens with a Listing 3. Click event example using ActionScript simple click event generated by pressing a mouse button, as shown in Listing 1. <?xml version="1.0" encoding="utf-8"?> Copy and Paste Listing 1 into a new file <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" named mxmlAndScriptBlock.mxml then run applicationComplete="init()"> it. <fx:Script> When you click the button, a click event <![CDATA[ is generated and the onClick listener is import mx.controls.Alert; called. In the onClick listener, we show an alert. The alert is Message is the protected function init():void{ target items label, event.target.label, with button1.addEventListener(MouseEvent.CLICK, onClick); #A “ clicked” appended. NOTE Remember event.target references the dispatcher so label is a property of the target which, in this case, is a Button component. Listing 1 uses a script block to manage the click event. This can also be done without a script block. Listing 2 uses inline mxml to show the same alert. Listing 2 uses the same button but instead makes the event listening

09/2010 (17)

}

protected function onClick(event:Event):void{

}

Alert.show(event.target.label + " clicked", "Event Test");

]]>

</fx:Script>

<s:Button id="button1" label="Button 1" />

</s:Application>

#A Sets onClick to run when click event occurs

FLEX DEVELOPMENT

If you need to listen for an event in any phase other than the bubbling and target phase, you must add the listener using the ActionScript method. As a handy reference guide, we’ve included the main attributes of an event listener in Table 3. weakReference weakReference is a hot topic in the ActionScript community pertaining to the proper way of managing application performance and memory. A lot of developers rely heavily on using weakReference while others rely on removing all listeners. The arguments on both sides are solid and it all boils down to preference. Find out what works best for you and your applications. The easiest is to start with weakReference then move on to your own desired scheme for cleaning up event listeners since the Flash Player does not provide a mechanism for removing all listeners. Let’s take the previous MXML application from Listing 1 and use ActionScript to register the listener. Listing 3 shows how you add an event listener on a previously instantiated display object using ActionScript. As demonstrated in listings 1 and 3, the main difference between the MXML and ActionScript methods for adding a simple event listener involves the use of addEventListener.

When the button is clicked, it dispatches a click event which activates and passes the click event to onClick(). With the ActionScript method, you need an intermediary function to add the event listener to the button. In listing 3, this is handled by init(), which is called when the Application issues the applicationComplete event. This event is the last event dispatched in the Application startup and is called when the Application is fully initialized and added to the display list. NOTE If you add an event listener for the capture phase, passing true as the third parameter of addEventListener, of a button’s click event, it listens only during the capture phase. If you need to listen to both the capture phase and the bubbling phase, you must add a second event listener omitting or passing false as the third addEventListener parameter.

NOTE When adding listeners a serious consideration for weakReference is required. If you think the object will ever need garbage collection and you are not going to explicitly remove all event listeners from the object, use weakReference. Do not use weakReference on local objects (objects created in a method then destroyed) since they garbage collection occurs automatically, which could cause your listeners not to Listing 4. MXML binding fire if they are garbage collected before <?xml version="1.0" encoding="utf-8"?> your expected event. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" You’ve probably already gathered xmlns:s="library://ns.adobe.com/flex/spark"> this, but most actions in Flex have <s:layout> corresponding events for which you <s:HorizontalLayout /> can listen by using the event listeners; </s:layout> you can then respond as needed. This <fx:Script> is the communication and nervous <![CDATA[ system of your Flex application. Even [Bindable] #A setting variables can cause events to be protected var _labelText:String = "Label before event"; broadcast. This type of event dispatch is ]]> called binding. </fx:Script>

<s:Button id="myButton" label="Change Label!"> <s:click>

<![CDATA[

_labelText = "Label " + Math.round(Math.random()*10);

]]>

</s:click>

</s:Button>

<s:Label id="myLabel" text="{_labelText}"/>

</s:Application>

#A [Bindable] metadata means watch this variable

Binding events

Binding in Flex is carried out in the event system. When you bind a variable, you’re establishing a dedicated listener that picks up on change events issued from the variable or object to which it’s bound. Whenever you create a binding to a variable, you register an event listener to respond to any changes that occur in that variable. When binding in MXML, the updating takes place behind the scenes, as demonstrated in Listing 4.

09/2010 (17)

Action Message Format and Data-centric Flex

Table 4 Bene�ts of using each binding approach

Compare the code in MXML Binding* ChangeWatcher BindingUtils Listing 4 to what is required Ability to toggle on/off No Yes Yes to accomplish the same thing in ActionScript (Listing Call methods on change No Yes Yes 5). This ActionScript version Two-way binding Yes No No relies on a class called the ChangeWatcher, which This includes the simple {} and @{} syntax as well as using <fx:Binding />. monitors any changes in the value of a property to which you have it bound. If a specific object property. Changes made to the object a change occurs, ChangeWatcher triggers the necessary property trigger the event listener. events to watch that value. It’s much like an event When you type anything in the text input, listener object in that it listens for specific events from a ChangeWatcher automatically listens for those property. This method isn’t as Listing 5. ActionScript binding using ChangeWatcher easy or even the shortest ActionScript approach, <?xml version="1.0" encoding="utf-8"?> but it’s more flexible. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" Upon receipt of the applicationComplete="init()"> applicationComplete event <s:layout> from the application, you <s:VerticalLayout/> toggle the watcher. Since </s:layout> _watcher is null at startup <fx:Script> the first if statement in <![CDATA[ toggleWatch fails causing import mx.events.PropertyChangeEvent; #A the else block to run. import mx.binding.utils.ChangeWatcher; #A The else block binds to protected var _watcher:ChangeWatcher; changes on the inputField‘s text property by calling protected function init():void{ toggleWatch(); ChangeWatcher.watch() the } method, which acts as protected function toggleWatch():void{ the “factory” method ChangeWatcher; an if(_watcher && _watcher.isWatching()){ #C for _watcher.unwatch(); #D instantiated ChangeWatcher toggleButton.label = "Watch"; object is returned when you }else{ call the watch() method. _watcher = ChangeWatcher.watch(inputField,"text",onTextChange);#B This method takes inputs toggleButton.label = "Stop Watching"; for the object you want to } watch and a property of } the watched object that is protected function onTextChange(event:Event):void{ listened to (in this case, myLabel.text = inputField.text; you’re watching the text } property of inputField). The ]]> third property specifies </fx:Script> which function to call when <s:Button id="toggleButton" label="Watch Text" click="toggleWatch()"/> this event is triggered – in <s:TextInput id="inputField" text="start text"/> this case, onTextChange(). <s:Label id="myLabel" /> If you look back at the </s:Application> addEventListener() method, you’ll see this approach #A Necessary imports to dynamically bind variables acts in a similar manner. #B Tells ChangeWatcher to detect changes With the addEventListener() #C Checks list of watched variables method, you’re listening #D Removes watched variable to the entire object; with the method presented in Listing 5, you’re watching

09/2010 (17)

FLEX DEVELOPMENT

updates and executes the listening method. Each time you press a key, you send out an event that is monitored by the ChangeWatcher. As demonstrated in Listing 5, your binding event can be as simple as copying the user input value into the myLabel

component, or it can be as complex as you need it to be. Another benefit of this implementation is the ability to remove a binding from an object. You canâ&#x20AC;&#x2122;t remove the binding in MXML. As shown in Listing 5, using

Listing 6. Example of adding and removing events <?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">

<s:layout>

<s:VerticalLayout/>

</s:layout> <fx:Script>

<![CDATA[

protected function toggleListeners():void{

if(box.hasEventListener(MouseEvent.CLICK)){

log("Listeners removed");

box.removeEventListener(MouseEvent.MOUSE_OVER, onEvent);

box.removeEventListener(MouseEvent.MOUSE_OUT, onEvent);

box.removeEventListener(MouseEvent.MOUSE_MOVE, onEvent);

box.removeEventListener(MouseEvent.CLICK, onEvent);

}else{

log("Listeners added");

box.addEventListener(MouseEvent.MOUSE_OVER, onEvent);

box.addEventListener(MouseEvent.MOUSE_OUT, onEvent);

box.addEventListener(MouseEvent.MOUSE_MOVE, onEvent);

}

box.addEventListener(MouseEvent.CLICK, onEvent);

protected function onEvent(event:Event):void{

log("Event triggered: " + event.type);

}

protected function log(text:String):void{

]]>

}

logField.text = text + "\n" + logField.text;

</fx:Script>

<s:Button label="Toggle Listeners" click="toggleListeners()" /> <s:Group id="box">

<s:Rect width="200" height="50"> <s:fill>

<s:SolidColor color="0x979797" />

</s:fill>

</s:Rect>

</s:Group>

<s:TextArea id="logField" width="400" height="400" />

</s:Application>

#A Removes event listeners #B Adds event listeners #C Event listener

09/2010 (17)

Action Message Format and Data-centric Flex

ActionScript, when the toggleWatch is called and _ is true, the bind event is removed using _watcher.unwatch() causing future property changes to not call the event listener. If you look at the toggle method, the toggleButton’s label is changed to reflect the current watch state of _ watcher. This could be done using multiple buttons or by listening to other types of events as well. This approach is just for user interface simplicity. watcher.isWatching()

NOTE also has a weakReference argument. Use this argument in the same instances and for the same reasons as you would with addEventListener(). The BindingUtils class also allows binding through ActionScript but it is only a wrapper around ChangeWatcher. Using BindingUtils.bindProperty or BindingUtils.bindSetter you can setup a ChangeWatcher binding. It is a helper class to condense the lines of code necessary to bind objects in ActionScript. The following line of code is similar to calling ChangeWatcher.watch(): ChangeWatcher.watch()

BindingUtils.bindProperty(myLabel, „text”, inputField, „text”);

Table 4 lists a few of the benefits between the different approaches to data binding.

Removing event listeners

You’ve just seen the unwatch() method in action, which lets you stop monitoring a variable for changes. When using event listeners, you have the same type of capability. If

an event listener was added at runtime in ActionScript, you’re able to remove it using the removeEventListener() method. In fact, unwatch() merely uses removeEventListener to stop the events from dispatching. If you look at the underlying code for the ChangeWatcher class, you’ll notice on line 500 the following statement: host.removeEventListener(p, wrapHandler);

Take a look at Listing 6 (testingForListeners.mxml) to see how to remove event listeners. Listing 6 shows how to test an object to determine if a particular event listener was added then removes the listeners or adds them back accordingly so the same listener isn’t added multiple times. Run the code and you will see output similar to Figure 4. NOTE removeEventListener(),

in Listing 6, only uses two arguments but it is important to note the third parameter. The third argument is useCapture which is false by default. When an event listener is added for the Capture phase to remove it you must pass true to as the third argument. toggleListeners() introduces a new method: hasEventListener(type:String):Boolean. This method checks the target object for existence of the passed in event type. If the listener hasn’t been added to the target object, the event listener is added; otherwise, it is removed essentially toggling the existence of the listeners. This is for logging purposes; we add and remove four different types of events, allowing you to see the different events trigger accordingly.

Removing event listeners added using the MXML

It’s important to remember removing event listeners only works on events added using the ActionScript method of defining an event listener; listener functions added using the MXML format are permanently attached to the object. For example, you can’t remove an event listener added using the MXML script shown in the following snippet: <s:Button label=”Toggle Listeners” click=”toggleListene rs()” />

If you think you might need to remove the event listener at some point, use the add-EventListener() method. Knowing how to add and remove event listeners is the starting point to building a great application.

Figure 3. Show StatesPanel

09/2010 (17)

GAMES

Monetizing Your Web Game Part 4 Currently there are many choices when it comes to monetizing a web game. It can be daunting to decide which model is best for a developer. On top of this, there are conflicting reports as to which ones are truly lucrative.

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

Part 4: Not-so-popular monetization models

This article in the Monetization series is meant to be a little more light-hearted. By “not-so-popular” I don’t meant to imply that any of these models are bad or shouldn’t be tried. Rather, these are models that are not used very often, and in many cases they are actually innovative. Though, some are indeed bad.

Current models

Below are some current models that I’ve seen used. Some developers have had success with them, but in most cases these models have not worked out. Donations To many developers who are mostly interested in providing an enjoyable game to the masses, donations look like a great option. However, whenever I’ve talked to developers who have done this, the amount they end up earning from donations is effectively 0. However, I don’t believe this is because the model is flawed, but more so that there are good ways of asking for donations and bad ways. In most cases I’ve seen, developers merely slap on a “donate” button that links to paypal and leave it at that. It is hard for a player to feel strongly about giving you money when there is such little thought into how you ask. You need to make a connection with the player. And let them know that their donation not only supports you but also future games you make. Even with this, though, the best tactic is to offer the player something in return as a gesture of appreciation for their donation. Not only does this excite them more about giving you money, but it is an acknowledgement that you have received their payment and are grateful. Now, you are probably thinking, “how is that different than micro-

transactions, then?” And that is a good thought, because the answer is “it is not different.” There are ways to present it differently to the player, though. But at that point, you should think if it would be better to just go with microtransactions as a monetization method rather than just asking for donations. And I’ve seen games do both. In the end everything is the same, anyway. You are providing a service that the user enjoys and is willing to pay for. Custom Ad sales This is one I’ve seen attempted in various forms multiple times. Basically, the developer tries to sell ad space that they control within their game. This is sort of like a sponsorship except that it only lasts for a limited duration. Also, since most developers have limited connections to brands or companies interested in marketing on a large scale, many of these ad sales are focused on businesses that are local to the developer. At first, this doesn’t seem like a horrible idea. This is truly a great opportunity for small to medium sized businesses looking to do creative marketing. They have the potential to get their branding and info in front of millions of gamers. But there are a couple of huge pitfalls to local businesses: they are unable to geotarget the ads, and they are unable to target key demographics. So, of the millions of players enjoying the game and seeing the ads, only a very very small portion of them will truly be potential customers. Even in cases where a company that is buying ads has more global reach, or where local companies don’t mind the extra exposure, there is an issue for the developer. Keeping up with selling ads is a lot of work. This is usually what kills this system for developers I’ve seen try it. They get a few advertisers on board at start up, but then months in find that if they want to keep making money they have to focus on sales and not on what they want… making games. Subscribe to developer Some developers are lucky enough to amass a large loyal following. When a developer is able to produce a number of high quality, fun games the result is that they

09/2010 (17)

Monetizing Your Web Game Part 4

gain a fan base. Fan bases are much easier to monetize than regular players who have no emotional connection or feelings toward a developer. So, some developers make an effort to monetize this base especially. One way I have seen this done is to have users pay to “subscribe” to a developer. By subscribing, these players get a number of perks such as free access to current and future games, inside info about games being created, access to special forums, or any other number of things that would excite the fan base. To me, in theory, this sounds like a solid business model. However, in the biggest case I’ve seen of this implemented it was, as put by one of the founding developers, “a failure.” This was Flashbang Studios, and their idea was to charge $20 for 6 month subscriptions. They figured that if they could convert merely 5,000 of the millions of players that enjoyed their games they could cover their $100,000 budget for that time period easily. But alas, it didn’t work out. There is another way to monetize a fan base in a similar way, though. Micro-transactions. I suggest you check out Part 3 of this series, if you haven’t already, to learn more about Micro-transactions.

Thinking of the future

I had the benefit of speaking at the Flash Gaming Summit in 2010 on a panel titled “The future of Monetization.” The talk was dominated by the subject of micro-transactions. And even though micro-transactions were indeed a hot subjects at the time, I don’t believe that was truly doing the topic of the panel justice. I have to admit that I did little to change this, though, as we were pushing our new platform GamerSafe at the time, which helps developers easily implement micro-transactions into their games. I hope to redeem myself, at least a little, here. Micro-licensing Micro-licensing is a term I use to refer to selling a license to a game on a small scale (combination of micro-transaction and licensing… duh.) The thought is that many of the players who enjoy your game may be interested in owning a specialized version for themselves. This could be to put on their company website, or to give as a gift to a significant other, or any number of things. The main issue would be designing a system to support this model in a scalable way. It would be best if a user could merely upload some graphics, and text, and whatever else could be modified in the game, then push a button to simultaneously purchase the license and get the modified game file. Games that I’ve seen that allow similar functionality are usually very niche (elf yourself, etc) and/or the end result is very poor or tacky. Borrowing CPU I’ve only known of one company to try this at a commercial level, but the idea is very interesting. Basically, when a

09/2010 (17)

user is playing your game, you could borrow some of their unused processor power and sell the cycles to other companies. This is similar to several non-profit services that do this to power things from searching for intelligent life on other planets to finding a cure for cancer. They huge drawback (and the downfall of the company I know of) is that if this isn’t presented in just the right way users will perceive you are stealing from them. And, in most cases, when this is presented as an option for the user, they will choose not to participate. Further innovation I think one largely untapped market is in the area of user actions. Gamers are a very active bunch and are willing to go to great lengths to achieve something in the games they play. In a few of our GamerSafe games I have done cost models comparing time spent to achieve an item (instead of buying it in the shop) vs working a minimum wage job. A staggering number of gamers would rather spend 3 times or more on the item through time than they would to pay for it out of pocket, and that is just at minimum wage. Of course, the reality is that they are spending 3 times the amount of time enjoying a game rather than working, but the outcome is the same: they are willing to go out of their way to accomplish things for a game. We’ve seen some movement to monetize this through the lead-gen, or “offer”, systems. These systems allow players to fill out surveys, or sign up to newsletters, or buy products they would buy anyway in order to give them something in a game (usually virtual currency that you usually have to buy). But I think this is a tacked-on system, and isn’t capturing the full potential of what could be. I think there is a huge amount of room for innovation in this space. There are, of course, many ways to monetize web games, and there is also a lot of innovation going on that I have not covered and probably many innovations I am not even aware of. This article is not meant to be all encompassing or definitive. I also invite all readers to visit our sites: FlashGameLicense.com and GamerSafe.com to find out more. On top of FGL containing a wealth of information about everything web game related, FGL is also THE place to buy or sell web games, so be sure to visit if you are hoping to do either or both. As a final note I want to stress that the all of the models that are covered in the articles in this series are not mutually exclusive of each other. Developers can, and should, take advantage of all of them. I am merely presenting them individually as to make them less confusing to understand. The final article in this series will cover the best ways to combine as many of these monetization models as possible to maximize the revenue generated by your game.

CHRIS HUGHES Chris Hughes – FlashGameLicense.com

WebORB

Game-Changing Technology for Data Intensive Applications A conversation with Dedoose’s Chief Architect/Co-Founder, Jason Taylor about how his company is using WebORB to carve out a new market niche in a sea of very large fish. What you will learn…

What you should know…

• How Dedoose is leveraging WebORB to produce a better way to do qualitative and quantitative (mixed methods) research • How WebORB is used for integration • Why WebORB is the best integration solution for your project

• You should have a basic understanding of client- or server-side programming

ason Taylor is an expert architect/developer of data intensive Flex and Flash applications. He is also the Chief Architect and Co-Founder of Dedoose. Dedoose is a start-up having deeply established roots in the qualitative and quantitative research industry. Together with highly respected and well-known researchers and co-founders Thomas Weisner and Eli Lieber, Taylor is carving out a new market niche for “mixedmethod” research, which is taking a predominantly desktop and paper-based research industry to the web for a new, highly collaborative way to do qualitative and quantitative research. Taylor, one of the early adopters of WebORB, has much to say about Flex and Flash integration using WebORB.

then integrating the qualitative and quantitative data. Considering the lack of mixed-method research technology, the difficulty of performing these tasks and lack of easy collaboration is what spawned the idea for creating Dedoose.

Q: What is unique about your business?

Jason: Dedoose is in the business of collecting massive amounts of qualitative and quantitative data (mixed-method data). We deal with extremely large datasets and the relationship between complex objects and their hierarchical structure. The core of our technology consists of 8 main objects, which consist of

Q: What prompted you and your partners to found Dedoose?

Jason: The idea for Dedoose was born when my partners Thomas Weisner and Eli Lieber, became involved in a huge project consisting of a geographically distributed team that conducted a large-scale survey. At that time, Weisner and Lieber were responsible for training design, designing various research protocols, training the fieldwork team to do data analysis and

09/2010 (17)

Game-Changing Technology for Data Intensive Applications

over 100,000 datasets for a single project. Even some of the documents that users upload consist of 30,000 pages. In fact, our datasets are so large that we had to develop our own data grid, because when we were throwing 300,000 items at the Flex controls, it would choke at 10,000 elements. We can throw 50,000 elements at our Super Mega Grid without a problem. One huge differentiator is the fact that our technology frees researchers from the limitations of desktop software. Traditional qualitative software requires you to buy seat licenses that are locked to a single computer. You have to have your IT team install it and then update and maintain it. By being online, we instantly get rid of those expensive license fees and the cost to maintain and update cycles. If someone asks for a feature update, a lot of times we are able to provide it the next day. That’s one of the amazing things about this online technology and if we are talking about collaboration- there is no collaboration with desktop applications. Being on the web is collaborative by nature and definitely a game-changer when it comes to offering qualitative research data.

Q: Tell me about your solution stack.

Jason: We use Adobe Flex on the client-side for presenting vast amounts of data in a concise, usable and interactive format. It’s probably the most complex and largest application in terms of feature-set on the web today. It is also the only online qualitative research application and the first and only mixed-method research application. While I chose Microsoft .NET/C# for my backend and WebORB for NET for integration on this project, I have used WebORB for Java and WebORB for PHP on other projects. WebORB for .NET is used as the backbone of our entire Dedoose offering and integrates our Flex client application to our server-side resources and databases. We also use Microsoft SQL Server, SubSonic, and inside of the Flex framework we use Robot Legs and Access.

Q: What were some of the initial challenges you had?

Jason: We had to figure out how to collect, manage and share massive amounts of qualitative data and integrate them with the quantitative data in an easy to use and collaborative environment. Furthermore, we had the challenge of dealing with multiple types of computer users. Some were Mac users and others were PC users, some were not particularly comfortable with computers at all. Delivering an application that would meet our needs in terms of functionality, time and monetary cost to develop was the “mother of invention” for our team. The core driving principles for our application required computer platform independence, collaboration, ease

09/2010 (17)

of use, mixed-methods data integration, low cost and data transparency. Additionally, our application had to be different from any other desktop offering provided by significantly larger solution vendors. The collaboration and usability aspects we envisioned had to offer huge improvements over existing bulky offerings and the data visualization features had to enable researchers to more easily expose patterns in the qualitative data– something that has been difficult to discover, much less even think about using other solutions.

Q: What solutions did you consider to help you solve these challenges?

Jason: While Flex provided the usability and interactivity we were looking for on the client interface, we needed something solid on the back-end that would enable rapid communication between our Flex client and our backend database. I looked at FluorineFX in the past and that was truly a nightmare. Not only did Fluorine lack the enterprise features we needed, it was also very difficult to work with. I wasted quite a bit of time trying to get that to work for my team and me. The fact that FluorineFX lacks support and the features that WebORB provides just does not make FluorineFX a good solution for my business or any business that needs to do rapid development and scale their enterprise for that matter. WebORB on the other hand has a robust set of features, is commercially supported and can handle my large datasets. In my mind, there is NO better way to build a Rich Internet Application in Flex and .NET than to use WebORB. WebORB’s productivity tools alone enable us to go head-to-head against larger development teams if we need to, but honestly, we don’t even see them as competitors. Our Rich Internet Application blows whatever larger corporations offer out of the water and it’s because of our tooling - solutions like WebORB that make this possible. We can get a phenomenal amount of work done with just a very small team. In fact, our team of two developers has produced an application far more complex, compelling and intuitive than anything else out there using WebORB.

Q: What WebORB features have your team used?

Jason: We use quite a number of WebORB features. In fact, WebORB is the backbone of our entire company and lifeline that moves data back and forth. We have by far the most data intense online application and this is a testament to WebORB’s remoting ability to deliver massive amounts of data with very little overhead. Dealing with record sets the size of what we deal with… I’d say good luck doing that in SOAP. It will destroy you and your server trying to

WebORB

serialize all that. WebORB handles the serialization with ease.“ We also use WebORB’s real-time messaging for online chat and notification systems. Unlike traditional desktop applications that cannot be easily updated, WebORB enables our application to instantly push messages out to our clients anytime we implement a new update. This usually calls for a simple screen refresh. Implementing new features is pretty easy too. Many times we can add a new feature and get it out to our customers in a day. Trying to do that with a desktop application is not possible.

Q: Are you using media streaming?

Jason: We will be adding video chat, streaming video and video tagging to our application and the cool thing is that WebORB supports media streaming right out-ofthe-box.

drive is fantastic. The code generation is really second to none and we couldn’t live without it. Also having the ability to use custom serializers and adapters saves us time.

Q: What about data management?

Q: Have you heard, we are working with SapphireSteel, creators of Amethyst, on an integration that will put Amethyst and WebORB right inside of Visual Studio? This will enable end-to-end development and deployment inside Visual Studio.

Jason: Given the nature of our application, we’ve had to do some customized data management, but we do use WebORB Data Management for Flex (WDMF) for rapid prototyping. There’s nothing like it!

Jason: You’re kidding! That’s totally the way to go!

Q: You mentioned you are using Hellfire. What for?

Q: Are there any other WebORB features that you’ve used.

Jason: The management dashboard that consists of code generation, service browser and invocation test

Jason: We use Hellfire to do the compilation. It’s a multi-core compiler plug-in for FlashBuilder that takes the compilation process out of FlashBuilder making it 10 times more responsive. It uses your entire computer and all your cores. It’s insane! It used to take me 2-3 minutes to compile and now it only takes me 1.6-2.8 seconds. It’s awesome and a great paring with WebORB, which is best for enterprise applications with really large datasets and makes it really easy to develop Flex applications.

Q: Can you comment on what it has been like to work with Midnight Coders?

Jason: I’ve been working with Midnight Coders and the WebORB community for a long time. First off, WebORB is a much more professional product that offers a lot more documentation, examples. Just right there you don’t need nearly as much support. Also the Community has always been there when I’ve had a tough question. The Community is quite active so I’ve received help there when I’ve needed it too. I remember several years back when Mark Piller and Larry Snyder showed up at my company to actually provide hands-on guidance and consulting and I tell you there really is no comparison for that kind of service.

09/2010 (17)

Q: Shifting gears back to Dedoose, how do people get started with Dedoose?

Jason: Dedoose is an online service. You can sign up for free for the first month and we provide a demo project so you can play with an actual dataset. After the first month, you can choose from one of several subscription options priced at around $11/month.

Q: Any closing thoughts Jason?

Jason: I love WebORB and Midnight Coders. I could not have started or launched my business without them. That’s how important they are to my business. Midnight Coders makes it easy for startups like mine to get to market cost effectively and I highly recommend them and WebORB to any company building Rich Internet Applications. To learn more about WebORB, take the Guided Tour. To learn more about Midnight Coders, visit www.themidnightcoders.com To learn more about Dedoose, visit www.dedoose.com

Jason Taylor Jason is a Los Angeles based Rich Internet Application Architect that led the product development for the original EthnoNotes web application and is now Director of Product Development and co-Founder of Dedoose. With more than 15 years of experience in developing distributed computing applications, Jason has worked on all aspects and levels of programming from hardware robotics systems leading the Beach Cities Robotics team to their National Victory in the F.I.R.S.T competition in 2001 to enterprise websites including Gerber. com, JuicyJuice.com, PurinaOne.com, and many more.

Kathleen Erickson Kathleen is the EVP of Marketing and WebORB Evangelist for Midnight Coders, Inc. With more than 15 years of sales, marketing and customer care, Kathleen’s primary responsibility is to help educate the online application community about Midnight Coders’ technology and how it can be used to help companies not only get their applications to market faster, but at a quality, performance and cost level that is acceptable for companies of all sizes.

QUESTIONS & ANSWERS

Flash Payments are the Best Way to Drive Your Conversion Rates Higher We are talking with Mr. Yuval Ziv about flash payments and the payment industry as a whole. Mr. Ziv is an experienced executive whom one can learn a lot from when it comes to e-commerce, payments and monetizing games. He is the COO of Gate2Shop – an e-commerce solution provider for digital vendors. Yuval Ziv

“ The flash-based payment solution can be integrated in the very application being developed. It helps a game be more successful in terms of monetization. “ Tell us a few words about Gate2Shop, please?

Gate2Shop was established as an answer to the digital vendors’ needs, as they wanted to sell their products online – software, games, digital services, virtual goods, etc. Gate2Shop is backed by more than a decade of experience. What G2S brings to the market is not only payment solutions but a complete e-commerce platform that can handle your payments, your risk management and your fraud prevention by combining automated tools and a human touch. Furthermore, we provide more than eighty alternative payment methods to our vendors.

What is flash payment?

Flash payment is something that we have come up with to meet the demand of flash developers. They need a solution to integrate in their games and applications. It should run natively in the development environment. This is exactly what we came up with – a flash-based payment solution that can be integrated in the very application being developed. It helps a game be more successful when it comes to monetizing it. We can’t really help in developing a game – that’s up to the developers but we can really help when you begin selling it.

How is flash payment helping a game be more successful?

Our own research and experience, combined with the feedback from our clients show amazing results. The vast majority note that they have abandoned payment because they were redirected to an external payment page and were worried that they would not get what they had paid for in the game. In addition, we were told repeatedly that it was quite a nuisance to enter credit card details every time a purchase was necessary in a game they had been playing for months. Based on this research and many other factors, we have created Flash Payment to tackle exactly these two issues. By not forcing the player leave the application we really drive that conversion ratio up. It feels natural not to be redirected to a separate payment page for you to pay a dollar or two every time the game requires it. Furthermore, you only need to enter your credit card details once. After that, every time you need to make a payment, it only takes one click.

You mentioned improved conversion rates – please elaborate on that?

This is the number of visitors to your payment page who actually complete a transaction. Improving conversion is very close to science – you need to know where to look and for what. Driving conversion up depends a lot on the business model and the game itself. You cannot really apply the same approach to an MMO game and a social or casual game. I will mention some of the core elements that will shed light on what we do to meet our vendors’ expectations. It is essential that the transaction be easy to perform and doesn’t look like a hurdle for a customer to complete. The flash payment provides exactly that experience. The end user is not being redirected to a different page outside of the game. We have the experience to achieve the best possible

09/2010 (17)

Flash Payments are the Best Way to Drive Your Conversion Rates Higher

approval ratios. This is our way of achieving the best results from the traffic a game or an application has

Which business models are suitable for flash payments?

Any flash-based game or application can use the technology. The only requirement is that the game or app should comply with our content requirements.

What was the reasoning behind your coming up with the flash payment solution in the first place?

We felt that it was good to give developers a tool to sell directly their applications. So far the trend has been that they rely mostly on advertising. We want to give them something that will help them monetize their efforts directly. Promoting direct flash payments is something Gate2Shop is firmly focused on and we will do our best to develop the module further. As a matter of fact, we’re running a promotional contest right now – we’re giving away some nice awards for the best flash game or application that comes to us. The best way to learn more is to get in touch with us and we will provide all the necessary information.

How easy is it to integrate flash payments?

We have a Technical Integration Support team which is available via email and phone. The experience the members of that team have is quite extensive and any questions flash developers may have in terms of hooking up with the G2S system will surely find an answer.

How customizable is the flash payment solution?

It is customizable to a certain extent. What I mean is that we can customize the colors and the branding of the module so that it fits well with the game it is being implemented in. End users are familiar with the secure payment page and that proves to be an additional factor in driving the conversion rate up so that is why we are not very eager on implementing changes to the payment page.

09/2010 (17)

In the beginning you mentioned alternative payment methods. What exactly are those and are they applicable in the flash payment solution scenario?

That’s correct, we offer more than eighty alternative payment methods. Among them are PayPal, ClickandBuy, Sofortueberweisung, to name but a few. They are at the disposal of the clients who implement flash payments at no additional cost. The only caveat is, obviously, that if an end user wants to pay with such a method, they will have to be redirected to an external payment page.

Do you have this solution implemented and working with any client?

Yes, we have it running in the industries of games, online broadcasting, video promotions and conversion improvements platforms.

Apart from flash, what sets you apart from the competition?

First and foremost, we try to provide a boutique level of customer service. Each of our clients has its own account manager, available via email and phone. Our best clients have joined us after a reference – wordof-mouth seems to be the best marketing channel we have. Then we are really proud with and confident in our superior fraud prevention and risk management.

Tell us some more about that?

We are constantly implementing the latest fraud prevention tools on the market and by combining them with the irreplaceable human judgment of our expert riskanalysts; we can proudly state that Gate2Shop’s fraud prevention is one of the industry’s most powerful available today. Some of those measures are velocity rules, geo-location, AVS, CVV and custom fraud rules. On top of that we have a decade’s worth of experience and technology to spot fraud as soon as possible. We go the extra mile and educate our clients on the importance of fraud prevention from every aspect. In addition our account managers work really close with our clients to help them navigate through the sea of fraud and chargebacks that is out there.

BOOK REVIEW

Getting Started with Flex™ 4 Authors: Jeanette Stallons, Andrew Shorten, and Vince Genovese Publisher: O’Reilly Media, Inc. ISBN: 978-0-596-80411-4 Pages: 208

I’m quite a huge fan of cookbooks and books that follow a project-based approach, not because they are to the point but also that you don’t have to waste your time in reading already known details and rather end-up solving your problems or completing a project that teaches you how things are done in a specific technology. Getting started with Flex 4 is good news for those who have just started learning Adobe Flex and want to impress their bosses that how quickly they can develop an application in Flex that is not only data-driven, but also comprised of styles and data visualization.

This book consists of 7 chapters that help you learn how to develop a Flex application with view states, transitions, layouts, data management, a decent look and groovy charts. It has also a dedicated chapter on debugging so if you mess up with the beautifully written code, you could know the tools to correct it. Recommended for newcomers.

BY ALI RAZA Adobe Certi�ed Instructor Sun Certi�ed Java Programmer Zend Certi�ed Engineer

09/2010 (17)

INTERVIEW

Interview with Valeriya Mallayeva, Manager of the Flash GAMM Conference and Co-manager of Ukrainian Adobe Flash Platform User Group Could you tell our readers what is Flash GAMM about?

Flash GAMM! is a conference of professional flash games developers and publishers. The aim of the event is to share experience, contacts and ideas. The two main trends of the conference are indie flash games and social games.

For people who are not familiar with your group, can you tell us a little bit about the Flash GAMM?

Flash GAMM is held twice a year â&#x20AC;&#x201C; Moscow meetings take place in May and Kyiv events are carried on in December. We try to keep balance between technical (game development, design and animation) and marketing (monetization, advertising and sales) lectures. Apart of lectures we have different master classes, round tables, trainings trainings, blitz-sessions section, gamelynch and flash games contest. Besides each time a catalogue of game developers is published, so, we try to make the conference interesting for our participants, and mainly in content aspect.

Our conference is a kind of link between large publishing companies, small studios, development teams and indie developers. Thatâ&#x20AC;&#x2122;s why, I guess, it will be interesting for representatives of all these niches to attend our meeting.

Who will be speaking at the Flash GAMM conference?

During the next conference lectures will be presented by such recognized flash-industry authorities as Anton Volkov (Alternativa Platform CTO), Tom Krcha (a member of European Adobe Platform Evangelism team), Alexey Kostarev (I-Jet Media founder and Chief Producer), Alexey Anikutin (flash-developer at SKAZKA), Martine Spaans (Senior Licensing Manager at SPIL Games) and many more. The list of speakers is already available on the conference web-site: http:// www.flashgamm.com/kyiv2010/en/program

What kind of criteria do you use to select the topics for the conference agenda?

How did Flash GAMM start and how has it evolved to where it is today?

The first event took place in 2008. It was organized by only two people within a month, it gathered 100 participants or so. After two more meetings, the conference was optioned by Absolutist Ltd, which has been working on casual games market since 2000. It provided considerable quantitative and qualitative growth of our event. The last Moscow meeting enjoyed 380 visitors, so, we expect over 400 participants to come to Kyiv in December .

Let us know what should attend to the conference?

09/2010 (17)

Flash GAMM!

Regarding technical lectures, we try to select the topics, which are both interesting and useful, backed with the examples from oneâ&#x20AC;&#x2122;s own development experience. We also welcome sessions covering related technologies like Silverlight, Unity3d, HTML5, Mobile Platforms, etc.). As for marketing section we prefer real figures and true stories (whether successful or not), analyses and forecasts. Such lectures attract large auditory as because this information can be relied on while taking important decisions.

The future of Flex â&#x20AC;&#x201C; all the web-interfaces will be realized in Flex framework. The future of Flash is flash in each coffee machine and microwave oven :)

Backing to the Flash GAMM conference, what are your future plans?

Today Flash GAMM is a meeting of all flash games developers from the former USSR. The plans for future are making it a meeting for flash games developers from all over the world in order to make it the event all of them to be looking forward to most!

Where do you see Flash/Flex going in the future? a

09/2010 (17)

Flash GAMM

Gate2Shop

Homepage: www.flashgamm.com

Digicrafts

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

Advertise here!

Homepage: http://www.g2s.com

IntellIJIDEA

Homepage: http://www.jetbrains.com/idea

Advertise here!