Editor’s Note Dear Readers!
There is a lot of buzz in the Flash community surrounding Android-based devices. There are going to be so many interesting things that you will be able to do on Android as well as many new skills that you will need to learn, especially if you are new to mobile design. If you haven’t heard, the Android mobile operating system is going places where no other operating system has gone before. Android is not only on mobile phones, but it is coming to tablets (Notion Ink ADAM, Dell Mini 5, Marvell Moby), Smart TV’s (Sony & Samsung) and is even being integrated into automobiles like the Chevy Volt. Interesting? Read more on page 8 – Lee Graham, as always, has prepared for you a great portion of hot topics that are important for Flash and Flex Developers. Adobe certification proves your expertise in Adobe products and provides employers and clients a means to recognize it. The candidate who holds industry certifications related to the required job skills is more likely to succeed on the job – to see more reasons for getting certified check out page 12. Do you know how to be paid for your Flash applications? The interview with Mark Rose from PlaySpan will give you the answer. To start making money from your passion do not miss our Creating an AS3 Game Framework series of articles. There are many more articles than those mentioned here – let’s not waste your time and skip to the great content inside. We look forward to sharing more information with the community in the coming weeks and months. If you have questions, comments, or concerns, please don’t hesitate to contact me directly, or ask our authors about any details. I want to thank you for your continued commitment to the FFD mag community, and I look forward to new opportunities to work together. Best regards,
Ewa Samulska
ewa.samulska@ffdmag.com
Editor in Chief: Ewa Samulska ewa.samulska@ffdmag.com Proofreaders: Patrick French, Betsy Irvine DTP Team: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Art Director: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Senior Consultant/Publisher: Paweł Marciniak
Publisher: Software Press Sp. z o.o. SK ul. Bokserska 1 02-682 Warszawa Poland Worldwide Publishing Software Press Sp. z o.o. SK is looking for partners from all over the World. If you are interested in cooperating with us, please contact us by e-mail: cooperation@software.com.pl Whilst every effort has been made to ensure the high quality of the magazine, the editors make no warranty, express or implied, concerning the results of content usage.
Thanks to the most active and helping beta testers:
Russell TangChoon, Lee Graham, Jassa Amir Lang, Ed Werzyn, Yann Smith-Kielland, Justus, Csomák Gábor, Kevin Martin, Charles Wong, Ali Raza, Almog Koren, Izcoatl Armando Estanol Fuentes, Lionel Low, Michael J. Iriarte, Paula R. Mould, Rosarin Adulseranee, Sidney de Koning
To create graphs and diagrams we used company.
program by
The editors use automatic DTP system Mathematical formulas created by Design Science MathType™
ATTENTION!
Distributing current or past issues of this magazine – without permission of the publisher – is harmful activity and will result in judicial liability.
DISCLAIMER!
The techniques described in our articles may only be used in private, local networks. The editors hold no responsibility for misuse of the presented techniques or consequent data loss.
All trade marks presented in the magazine were used only for informative purposes. All rights to trade marks presented in the magazine are reserved by the companies which own them.
4
04/2010 (12)
CONTENTS Special Report
Flex Development
08 Flash Player 10.1 on Android & AIR for Android
28 Creating an XML Photo Gallery with AS3 – PART II
BY LEE GRAHAM
BY RYAN D’AGOSTINO
InBrief
Games Developer’s journal
10 News
38 Flash Game Achievements with GamerSafe
BY CSOMÁK GÁBOR
BY AARON CLIFFORD
Events
Interview
11 Flash & Flex Events 2010 BY LOUIS DICARRO
40 Working with Creative Niche – Interview with Stephen Hodges
Tools
44 Getting Paid for your Flash Applications – a Q&A with Mark Rose
12 Taking the Pain Out of RIA Development BY DANNY KOPPING
Success Story
13 Amethyst -The Flash Platform in Visual Studio
46 Rob Shoesmith – Mobile Application Marketer
BY HUW COLLINGBOURNE
Review
CERTIFICATION 16 Validating Skills and Best Practices with the Adobe Certified Associate Exam
48 Flex 3 Component Solutions 48 Flex 3 with AIR Exam Aid BY ALI RAZA
BY SINEAD HOGAN
ActionScript Development 18 Using Flash Builder 4 to Code Flash CS 5 Projects BY LOUIS DICARRO
Compressing Bitmap Animation in Flash
ZEND and PHP
Jeremy Mayes, Director of Game Production
24 Writing a Remote End Point (PART 1) BY KEVIN SCHROEDER
The issue 4/2010 sponsored by Advertisers:
6
Tip of the issue
Influxis www.influxis.com ............................................. 2-3
Exsys www.exsys.com ................................................. .37
Mediaparts Interactive S.A www.page-flip.com ............................................. 5
Creativeniche www.creativeniche.com .................................... .39
Digicrafts www.digicrafts.com.hk ...................................... 7
ScreentimeMedia www.screentime.com ........................................ .41
Kevin Ruse + Associatess Inc. www.kevinruse.com .......................................... 15
Kindisoft www.kindisoft.com ............................................ .43
FlexAppsStore.com www.flexappsstore.com ......................................21
Flex{er} www.flexer.info .................................................. 45
ElementRiver www.elementriver.com ........................................23
Infosoft Global (P) Ltd. www.infosoftglobal.com .................................... 49
Gamersafe www.gamersafe.com ......................................... 33
ActionScriptJobs.com http://actionscriptjobs.com/ ........................ .....50
We’ve all been there- you worked really hard to get a Flash project out the door on time only to realize that it’s way too large (in terms of �le size) at the last moment. Before you sacri�ce the visual �delity of your bitmaps in one fell swoop, try this: If you have a lot of frames of animation, compress those that are only displayed for one frame at a time. For example, let’s say you have an animation of a character standing still (a frame you stop the playback head on), then she transitions into a looping walk cycle before coming to a complete stop (another frame you stop the playback head on). Do not compress the frames you hold on because they are displayed on screen for long durations of time. Since the remaining frames are only displayed at 1/30th of a second (or whatever your frame rate is set to), you can afford to sacri�ce their visual quality a bit because compression artifacts are very hard to discern during these incredibly short durations- focus the majority of your compression here.
04/2010 (12)
Flash Player 10.1 on Android & AIR for Android
G
oogle I/O just wrapped up and there are many great news items for Flash and AIR platform developers. There is a lot of buzz in the Flash community surrounding Adobe and Google partnership (http://blogs.adobe.com/conversations/2010/04/adobe_ air_on_the_android_platf.html) on bringing Adobe AIR and Flash Player 10.1 (FP 10.1) to Android-based devices. Google publicly announced Android OS 2.2 (FroYo), as well as Google TV during the conference. Froyo FroYo will be much faster, support tethering, turn your Android mobile into a wireless hotspot, and many more really great improvements. You can read more about those improvement on my blog posts here: Android becomes a Man, but is it Ready to be the King? And Google TV is born! (http:// l33.me/android-becomes-a-man-google-tv-is-born) If you haven't heard, the Android mobile operating system is going places where no other operating system has gone before. Android is not only on mobile phones, but it is coming to tablets (Notion Ink ADAM http://gizmodo.com/5471559/ notion-ink-adam-tablet-caught-on-video-specs-finalized, Dell Mini 5 http://www.engadget.com/2010/02/11/dellmini-5-we-have-it/, Marvell Moby http://www.marvell.com/ company/news/press_detail.html?releaseID=1397) Smart TV's (Sony http://www.informationweek.com/news/ hardware/virtual/showArticle.jhtml?articleID=224900139& subSection=News & Samsung http://www.techradar.com/ news/phone-and-communications/mobile-phones/ samsung-looking-at-android-for-new-tv-platform-685978) and it is evening being integrated into automobiles (Chevy Volt http://reviews.cnet.com/8301-13746_7-2000522648.html). With Google TV being released this Fall (2010) this presents a whole new platform for Flash developers to deploy their apps on. Google TV will support Flash Player 10.1, as well as Android Apps. Adobe has said their AIR for Android apps will run on Google TV, but no timeline yet, because their main focus is making AIR for Android work amazingly well on the Android mobiles that are currently on the market.
• •
• •
•
To sign up for the AIR for Android SDK go here: http://labs.adobe.com/technologies/air2/android/ Open Flash CS5 (or download the 30 trial here https://www.adobe.com/cfusion/tdrc/index.cfm? product=flash) and create a new AS3 project or AIR for Android project Build, code and design your app and test it within the IDE. Get an Android device that supports AIR for Android or Android FP 10.1 I highly recommend the Google Nexus One (http://www.google.com/ phone). If you are building an AIR for install the AIR for Android runtime, then install your app. The workflow is very similar to build desktop AIR apps. If you are building AIR for Android, you can go ahead and setup for Android Market Developer Account (http://market.android.com/publish/signup). It will cost you $25 per year, which is much better than $99 for iPhone Developer Program. NOTE: You will not be able to immediately sell your apps in the Android Market as that the AIR for Android program is still in
Getting Started
Adobe's AIR for Android developer program is now OPEN! This means that you can download the AIR for Android SDK and runtime to start developing new apps or converting your older apps, so that they work on Android-based mobiles when the AIR for Android runtime is made available sometime later this year.
8
Figure 1. RunningMap (Website: http://www.randytroppmann.com/)
04/2010 (12)
beta. When it goes live for end users you will be able to sell or distribute your apps however you see fit. Things to keep in mind as you develop •
•
Size does matter! Screen size is the largest difference when developing mobile apps. Each mobile devices has different resolution, DPI/PPI and physical screen size. If you aren't familiar with developing scalable content, I recommend checking out Christian Cantrell's article: Authoring mobile Flash content for multiple screen sizes (http:// www.adobe.com/devnet/flash/articles/authoring _ for_multiple_screen_sizes_print.html). This is especially useful if you are planning on developing for both Android mobiles and all of the Android tablets that are coming out this summer. Optimize. Optimize. Optimize. Most mobile devices don't have the processor or RAM that a typical computer has, so you must keep that in mind as you develop your framework and assets. Adobe has assembled a great set of documentation specifically for developing mobile apps with ActionScript 3.0: Optimizing Performance for the Flash Platform (http:// help.adobe.com/en_US/as3/mobile/index.html). While it does mention the Flash CS5 iPhone Packager, and that entire pissing match has been documented in the last edition of http://ffdmag.com/magazine/1058-theflash-on-iphone-war), most of that information is still relevant to developing Android apps as well.
Figure 3. StudyShuffler (Video Demo: http://vimeo.com/11070417 | Website: http://memoryspiral.com/)
•
Multitouch & Gestures Event. Learn how to use the Multitouch & Gesture Events (http:// www.adobe.com/devnet/flash/articles/multitouch_ gestures.html) within AS3 and learn what is available on the specific device you are building for.
While I can't speak about how the actual AIR for Android SDK works yet, my guess it that it will function much like the Flash CS5 iPhone Packager, but without having to jump through all of the hoops of setting up an Apple Developer Certificate and mobile provisioning file. Stay tuned, more coming soon about developing AIR for Android and Flash Player 10.1 workflows and examples on mobiles. In the meantime, check out a couple of screen captures of AIR for Android apps that are currently in development. Special thanks to Joseph Labrecque (http:// memoryspiral.com/) & Randy Troppmann (http:// www.randytroppmann.com/) for sharing these images and links.
LEE GRAHAM
Figure 2. Sketch-N-Save (Video Demo: http://vimeo.com/11036849| Website: http://memoryspiral.com/)
04/2010 (12)
Lee Graham is co-founder of TRImagination (http:// trimagination.tumblr.com/), an educational app company based in the United States. He has been involved in developing interactive eLearning application for �ve years and working with Adobe in beta testing Flash CS5, AIR 2.0, AIR for Android & Flash Player 10.1. You can connect with him on Twitter: http://twitter.com/donaldleegraham or his Blog: http://l33.me/.
9
IN BRIEF
Events 2010 Flashbelt – Design. Develop. Engage. Date: June 13 – 16, 2010 Location: Minneapolis, MN
Professional Development & Creative Inspiration
The 7th annual Flashbelt Conference brings together rock-star designers, whizkid developers and best-selling authors from around North American and Europe to lead sessions and workshops covering multimedia design and development. Don’t miss this amazing opportunity for intaeractive designers, developers and enthusiasts to learn from the pros. http://www.�ashbelt.com/#/about/
Flash Platform at Google I/O Recap Google I/O 2010 was a really great event, where three exciting topics were introduced connection with the Flash Platform: •
•
•
FITC San Francisco 2010
Date: Aug 17 – 19, 2010 Location: San Francisco, CA FITC is proud to present FITC San Francisco 2010. With the launch of Adobe CS5, it is the perfect time for an event such as this! Since we’re in Adobe’s head office hometown, we’ve added the Adobe ‘Under The Hood’ presentations to the schedule. Get up close and interact with the people behind Flash! http://www.fitc.ca/events/location/ ?event=110
Flash on the Beach
Date: Sept 26 – 29, 2010 Location: Brighton, UK If you are a designer, developer, coder, student, manager, game developer, artist, animator or a newbie, then this conference is for you! Don’t miss this opportunity to see nearly 60 of the best minds in the industry, delivering 3 full days of awe-inspiring sessions, plus one day workshops that will give you in-depth training from the worlds best speakers! www.�ashonthebeach.com
Adobe officially launched the public beta release of Flash Player 10.1 for devices upgraded to Android 2.2. Get a lot of great details from Paul Betlem, Sr. Director, Flash Player Engineering on all the efforts behind the mobile-ready runtime. Adobe announced the public availability of the Adobe AIR for Android Developer Prerelease program. Any designer or developer can join to build Android applications using the Flash Platform with the beta SDK – whether you are a seasoned Flash developer or just interested in learning. People who join will also have access to a new extension to Flash Professional CS5 that publishes directly to Android devices. Adobe demonstrated how they are working closely together with Google on Google TV – Google’s new Android based platform that brings the power of the web in to the living room. Google TV includes Flash Player 10.1 integrated directly into the Google Chrome browser delivering the full Web to consumers on their television sets. from: Matt Rozen, Adobe Flash Platform Blog
AIR 2 for Android Public Beta! The AIR team did it! While at Google I/O this week developers are getting blasted with awesome news and new technology, Google and Adobe have worked hard on this and IMO it is a top 5 event of the week. For those of you who don’t know AIR, Adobe AIR for Android enables developers to build standalone applications that run on Android devices, like the Nexus One (my all time favorite smartphone). You can use any text editor and the free SDK to build applications and easily deliver applications that works across Linux, Mac, Android and PC. When developing for Android, you must use the AIR for Android SDK. If you are interested in joining the Prerelease program, just hit: http://labs.adobe.com/technologies/air2/android/ from: Duane „Chaos” Nickull, Adobe Flash Platform Blog
The Truth About Flash Player
MAX 2010
Adobe published a few numbers about Flash Player, numbers that we may already know:
MAX 2010 is the perfect time to connect with thousands of designers, developers, and business leaders as we shape the future of digital media together. Discover new opportunities presented by the growth of rich experiences across screens and devices. Explore strategies for monetizing content in the new digital economy. Learn how the latest innovations enable powerful synergies between designers and developers.
• • • • • • •
Date: Oct 23 – 27, 2010 Location: Los Angeles, CA
98% of Internet connected PCs have Flash Player 85% of the top 100 websites use Flash Player (Alexa) 75% of web video is viewed using Flash Player (Comscore) 98% of enterprises rely on Flash Player (Forrester) 70% of web games are delivered using Flash Player (Evans Data Corp.) 3.5 million developers use the Flash Platform 19 of the top 20 device manufacturers worldwide have committed to shipping Flash technology on their devices Read more on Adobe’s article: http://www.adobe.com/choice/flash.html
http://max.adobe.com/
News selected by Gábor Csomák
10
from: Andrei Ionescu, FLEX{er}
04/2010 (12)
EVENTS
Flash and the City 2010 by Louis DiCarro What better way to learn about the latest in Flash and Flex development? Learning it in New York City!
F
lash and the City was held May 13th through the 16ht, 2010 in New York City and is in its inaugural year. The event was held at the 3LD Technology Center in lower Manhattan and is a space used for a variety of events dealing with technology and art. It was three days of presentations by some of the top names in the Flash and Flex development community, brought together to share their knowledge, show demos and meet with the community. It was also an opportunity to network with members of the Flash community who arrived from around the world. But what makes FATC different from other Flash conferences? Most importantly, it is how the event was organized. The event team was led by Elad Elrom, who is a developer based in NYC and has worked on the Flash Platform for many large companies such as Viacom and NBC Universal. He has also worked on several books for Flash, Flex and Flash Testing – his most recent release is AdvancED Flex 4 from Apress publishing. He and his team are not event organizers but are working developers. This makes a big difference on the type of material that was presented at the event. Elad spoke on the last day of the event on some of his thoughts about the philosophy behind the planning of the event. Since this is a conference put on by developers and not organized by event planners, the subject matter was carefully chosen to reinforce the development community. Most of the speakers were sought out by the conference organizers instead of putting out a general call for speakers. There were many sessions that either pushed new technologies, dug deeper into the current technologies or just presented views of the current state and future of the Flash platform. Another important facet that sets FATC apart from most other conferences is an issue that many attendees have to deal with at other conferences. Often, you go to a conference in a cool new location and are in presentations from 9am to 6pm every day. Then there are some social networking functions in the evening before getting back to the hotel. FATC knows that this is NYC, and it would be a shame to be here for three days without getting to see the city. In addition to the normal tracks that are usually offered by conferences, FATC also offered a City track
04/2010 (12)
Figure 1. Flash and the City logo
that took tours of NYC, visited museums and allowed the conference goer to visit different parts of the city. Most of the trips were half day adventures so it was not a rushed offering. Tours were held of Brooklyn, Liberty Island, South Street Sea Port and Wall Street while the American Museum of Natural History and the Museum of Sex visits were available. Ample opportunity was set aside for social networking with developers from across the country and the world. Friday night after the last session had a performance by the band 22nd Century who played while attendees enjoyed pizza and beer provided by conference. After the band, attendees were able to participate in bar hopping through the city’s Meat Packing District in Manhattan. Saturday had a cruise that went around lower Manhattan and an awards ceremony and Sunday had a final happy hour after all the events had wrapped up. On the cruise, the Statue of Liberty awards were presented for various categories to recognize outstanding members of the Flash community. It has caused a bit of controversy as a person claiming to be a certain CEO from a well known fruit named company accepted the Most Influentual Person of the Year award. He began claiming that his company had just purchased Adobe and the cruise was now known as the iBoat. He began discussing his future plans for iFlash and changing the name of the conference to Objective C and the City.....
click here to read the rest of the article
11
TOOLS
Taking the Pain Out of RIA Development Aerial CMS is a simple Content Management System and framework that allows developers to rapidly scaffold and develop Rich Internet Applications with a stable, concise backend. Aerial CMS was built from the ground up with RIA developers in mind, to help you get the job done fast and efficiently.
A
erial assists developers by generating all necessary models and services with which to build simple or complex data-aware applications that integrate with any database engine and PHP5. Aerial CMS was originally founded by Danny Kopping and later joined by Robert Cesaric. Aerial is only in its infancy now but there are many great things to come; the scope for a framework like this is massive, and we have a long list of additions and modifications to make for upcoming releases.
Technology Stack
•
Simple structure, few enforced conventions and – above all – a shallow learning curve to have you up and running in minutes
Getting Started
Head over to http://aerial-project.org/ to get started with Aerial CMS. On this site you will find video tutorials plus clear & concise walkthroughs to help you on your journey with Aerial. Aerial is incredibly simple and easy to learn, and will help you automate all of the dull tasks of RIA development. Happy coding!
Aerial CMS utilizes two well-established and stable frameworks to accomplish rapid RIA development: • •
Doctrine ORM http://doctrine-project.org AMFPHP http://amfphp.org
Aside from these technologies, Aerial takes advantage of the myriad new features of PHP5 to give you the following feature-set as of version 0.7: • • •
12
Generation of database tables from a simple schema file using Doctrine ORM Generation of ActionScript 3.0 & PHP model classes Generation of ActionScript 3.0 & PHP service classes
DANNY KOPPING & ROBERT CESARIC Aerial CMS – http://aerial-project.org
04/2010 (12)
Amethyst – The Flash Platform in Visual Studio
Amethyst The Flash Platform in Visual Studio The Amethyst IDE lets you edit, design and debug Flash, Flex and AIR applications
I
f you want to build Flex, AIR and ActionScript projects using a full set of visual design and coding tools you have only one choice, right? Well, actually, no. Adobe’s Flash Builder is no longer the only visual IDE for the Flash Platform. SapphireSteel Software’s Amethyst provides a powerful editing, debugging and design environment built into Microsoft Visual Studio. I’ve been involved in the design of Amethyst from the outset and I can tell you that the technical challenges of integrating a Flex design and debugging environment into Visual Studio have been formidable. Right at the start we decided that Amethyst had to be a truly visual system. There was really no point in creating yet another ActionScript editor or a feature-light Visual Studio plug in. Visual Studio users tend to be quite demanding and anything less than a complete IDE with a drag-and-drop Designer and a first-class debugger would fall far short of their expectations. Our aim was to make Amethyst a natural part of Visual Studio with a feature set comparable with those of Microsoft’s C# and Visual Basic IDEs – one that would give Windows programmers a real alternative to Microsoft’s own tools for its WPF/Silverlight platform. Adobe Flash Builder, built on Eclipse, has its own way of doing things and it is ideal for people who are familiar with an Eclipse-based IDE. But Visual Studio is fundamentally different. We wanted to make Amethyst look and work in a way that would be immediately familiar to Visual Studio developers so that they would very rapidly be able to engage in serious development for the Flash Platform.
Drag, Drop, Click and Code
Even though the Amethyst visual Designer is developed entirely in Flex, from the user’s perspective it has
04/2010 (12)
much more in common with the Microsoft Windows Forms Designer than with the Flash Builder design environment. For example, the Amethyst Designer uses the standard Visual Studio layout toolbar. This toolbar contains a set of buttons which you can click in order to align selected controls to the left, right, top or bottom, adjust the spacing between controls, make them all the same size and so on. The Amethyst Designer also provides the same interactive alignment options as the Windows Forms Designer. You can either display a customizable grid which causes controls to snap the nearest grid line or you can align controls using on the fly alignment bars that appear when you drag components around on screen. In common with the C# designer (but unlike Flash Builder), Amethyst controls are always shown live. When you move or resize a control, its entire contents – all the buttons and panes in a Rich Editor, say – are moved, aligned and resized too. This means that that you can see the effect on the appearance and layout of a control with every single pixel change you make. The Amethyst Designer also has a go live mode which makes all the controls in the user interface react to events such as mouse clicks and keystrokes so that you can try out the rollover effects of buttons or enter text into a Text Area in order to preview the font settings. The Designer is tightly integrated with the code editor and it also has active links to many of the tools and panels in Visual Studio. When you select a control, its properties and styles can be changed in the Properties panel. When you want to create an event-handler you can either select an event in the Events page of the Properties panel or you can double-click a component in the Designer. If you double-click a component the code editor automatically creates a method to handle
13
TOOLS
its default event or, if such a method already exists, it navigates directly to that method. For example, if you double click a Button called button1, this click eventhandler will be auto-generated: private function button1_click (event: }
flash.events.MouseEvent):void {
The ActionScript code editor supplies a similar range of features to those available for C#. There is IntelliSense with code completion and auto-expanding snippets. And there is code reformatting with 23 userdefined options to adjust spacing and indenting and either place brackets onto new lines or keep them on the same line as the preceding code. The code coloring capabilities go far beyond those available to C# developers. In addition to supporting all the standard colors for strings, comments and so on, it has 76 additional syntax coloring options specifically for ActionScript and MXML.
Refactoring and Debugging
Amethyst has a fast and powerful code refactoring. You can, for example, rename identifiers such as methods and variables, mark an arbitrary piece of code and extract it into its own method, encapsulate a variable by adding getter and setter methods and change the order of arguments in a function’s parameter list. Any code that calls a refactored method or uses a renamed variable is automatically rewritten to use the refactored version. A preview window can be used to view all the refactoring prior to committing any changes. This gives the user the chance to omit specific items from being refactored by toggling a checkmark alongside one or more lines of code. Amethyst has its own integrated debugger. Based on technology originally developed for SapphireSteel Software’s Ruby programming IDE, Ruby In Steel, the Amethyst Cylon Debugger can be used to set simple breakpoints or conditional breakpoints and these may optionally be triggered after a specific number of hits (for example, on the tenth iteration through a loop). The Cylon Debugger lets you step through code one line at a time and it lets you step into, over or out of method calls. You can drag variables from the editor into a watch window or you can hover over variable identifiers in the editor itself. You can then drill down inside objects to view, for example, the individual items in an array. There is an unlimited number of drill-down levels so that you can expand complex structures to many levels deep. The Amethyst Cylon debugger is even able to debug multiple SWFs simultaneously. Let’s imagine that you are developing a multi-user database application
14
or game. You may want to debug one or more SWFs implementing the user interface or game play environment each of which uses a different SWF to handle data saving and loading. With Amethyst you can run and debug all three SWFs simultaneously. Breakpoints placed on code in each of the three projects will fire whenever that line executes.
Flash Development
While Amethyst supports both the Flex 3 and Flex 4 frameworks as well as AIR, it is certainly not just a Flex environment. It can also share projects with the Adobe Flash IDE. In a team environment this would make it possible for several developers and designers to work on a shared codebase. For instance, artists and animators might work in the Flash IDE while the ActionScript programmers could work on the exactly same files and folders using the editing and debugging tools of Amethyst. Interoperability with other editors and IDEs has been a fundamental design goal of Amethyst. To assist in this, Amethyst provides an Importer wizard which can either make a complete new copy of an existing project in a new location or can convert a project in its original location. When converted in this way, Visual Studio creates solution and project files containing the existing code but it does not make any modifications to that code. Amethyst Professional is available for Visual Studio 2008 and 2010. A free edition, Amethyst Personal, which lacks some of the high end features such as the visual designer and refactoring, is also available. For more on Amethyst, visit the SapphireSteel Software web site. The best place to look for breaking news is on the Blog. Comments and technical queries may be posted on the forum.
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/
04/2010 (12)
04/2010 (12)
CERTIFICATION
Validating Skills and Best Practices with the Adobe Certified Associate Exam Suppose you are a contractor in the running for an Adobe® Flash® software development project. The employer narrowed the hiring pool down from a list of a hundred applicants due to the scarcity of IT jobs. Now suppose you and the other final candidate are virtually equal on paper – who will get the job? In order to secure jobs, promotions and esteem from your colleagues, consider industry certifications as the ideal tie breaker.
T
he candidate who holds industry certifications related to the required job skills is more likely to succeed on the job. Let’s face it, resumes can be exaggerated or even false. A portfolio shows what you may have done in the past, but it does not give any indication of how long the project took to complete and whether or not you used best practices. Industryrecognized certifications however, prove that valuable skills and best practices have been learned and retained rather than studied long ago and forgotten. According to Certification Magazine's 2009 Salary Survey incorporating detailed responses from more than 40,000 IT professionals in over 150 countries, a majority of respondents reported receiving a raise after earning their most recent certification. Around 47 percent said they think their most recently earned certification played a role in them getting a raise. Furthering their certification portfolios also contributed to respondents’ career progression. Roughly one in five respondents received a promotion in the first year after receiving their most recent certification. In the survey, certifications were also credited with helping IT professionals get along better in this volatile market. More than 85 percent of respondents agree that since they’ve become certified, there is a greater demand for their skills. More than 86 percent said becoming certified has improved their problem-solving skills, and roughly the same number report that achieving certification has increased their productivity on the job. Both students and professionals need to demonstrate their technical expertise to succeed in today’s competitive job market. Whether they are looking for a new position or simply working to excel in their current role, any IT professional can use certification to prove they are invaluable. Many employers now recognize the value of technical certifications as a means to validate real world knowledge more effectively than a completed course or even a degree. If you still need to be convinced, let’s discuss the value of one certification – the Adobe® Certified Associate.
16
The Value of Digital Media Certification
The workplace demand for digital media skills – communicating information using multimedia, video, graphic, web, or design software – is on the rise. Since 2000, more specialized digital tasks have gained substantial traction in the workplace. According to a study by the California Community Colleges Media & Entertainment Initiative called Digital Media Skills Initial Findings, 20 percent of respondents said they performed video, audio, Web, or graphic production tasks once or twice a week while another 40 percent said they executed such tasks at least once every couple of months. Products such as Adobe® Flash®, Adobe® Photoshop® and Adobe® Dreamweaver® applications are popular among ordinary users and professionals alike, and more industries than ever before are utilizing these tools to accomplish their technical goals. Flash is the world’s most pervasive software platform, with more than 1.5 million users worldwide and an audience of more than 560 million users across the web. Due to an accessible development environment, there are a large number of amateur Flash and Flex developers. Even dabblers can call themselves experts and most claim they are proficient in a long list of digital media products. With such a broad community ranging from hobbyists to true experts, certification becomes increasingly useful to prove job candidates are more than familiar users of digital communications technology. In particular, the Adobe Certified Associate (ACA) certification program confirms that individuals have the entry-level skills to plan, design, build, and maintain effective communications using different forms of digital media. By requiring ACA certification, managers can standardize base skill sets and best practices for both permanent and contract employees. One such professional, the art director for Virginia Tech Magazine, discovered that Adobe Certified Associate has helped boost his capacity and credibility to support Web design projects at Virginia Tech, as well as through freelancing opportunities.
04/2010 (12)
Validating Skills and Best Practices with the Adobe Certified Associate Exam
I feel like I’m moving my career forward, said Glen Duncan. It’s something I can put on my resumé. I can tell clients I have an Adobe certification. It’s something that can build a lot of trust for clients.
Getting Certified
The ACA certification program aims to ensure test takers not only understand Adobe products including Adobe Flash, Adobe Photoshop and Adobe Dreamweaver, but that they are using best practices for building a website and designing rich media content. The ACA exam is more than a multiple choice test. To reinforce best practices, the test simulates the actual application and asks test takers to develop in a true Flash environment. In developing the ACA exam, Adobe and Certiport identified the foundational skills students need to create effective communication using digital media tools. Adobe met with educators and design professionals and surveyed businesses and educational institutions around the world. The research resulted in objectives that cover entrylevel skill expectations for the following: • • •
Rich Media Communication using Adobe Flash Web Communication using Adobe Dreamweaver Visual Communication using Adobe Photoshop
The Adobe Certified Associate certifications are offered for the following versions: Adobe Creative Suite® 3, Adobe Creative Suite® 4 and the Adobe Creative Suite® 5 available summer of 2010. The ACA exam measures a core group of skills for each software program regardless of any version updates. Then, Certiport updates the tests continually as Adobe releases new versions of the software, so employers and professionals are assured the test measures individuals against the most current look and feel for each product. As a Certiport developer, I can tell you we are using the skinning features in Flex® and Flash® to cleverly update how our simulations look each time there is a revision to the software. Armed with validation from Adobe, becoming an Adobe Certified Associate will give professionals the inside track to careers in graphic design, Web marketing, video production, Flash development and more. Students often seek out technical certifications while they are in school. Four-year and two-year colleges, and even high schools, are starting to offer more certifications to set their students up for success in the workplace. Large corporations can also offer Certiport certifications to their employees, and individual professionals can seek out a testing center to obtain certification.
Certification Builds Development Project Success
As the leader of our development team at Certiport, the exclusive provider of the ACA exams, I recently discovered the value of having my own employees earn the ACA
04/2010 (12)
credential. We build all of our certification tests using Flash and Flex. We have a base of employees who are experts, but when we ramp up for large projects we hire additional contractors. In assembling a team of independent contractors, I used to peruse portfolios and ask interview questions about their knowledge of Flash and Flex. I quickly realized this superficial method did not always produce the most qualified team of professionals who knew the tools well enough to hit the ground running. Someone who claims to know Photoshop may have simply cropped family photos a few times. In most cases employers realize hiring mistakes quickly in the work environment, but waste time and money on the wrong individuals. Now, requiring that my team earn the Adobe Certified Associate credential assures me the entire group will have a foundational knowledge of the design tools we use. I can hand recent graduates new tasks with confidence they will use best practices to deliver the project on time and up to specifications. Professionals who earn ACA certification can use it to their advantage in securing a new position or proving their current value. They should point out the ACA certification requirements to their superiors and compare them directly to job requirements to confirm they have the most applicable skills. Furthermore, professionals who are ACA certified will be able to spend more time completing projects rather than training or wandering aimlessly with Adobe products trying to figure out how to complete a task. Emerging Technologies Director Jonathan Huer, Ball State, noted that students who interviewed for positions often overstated their knowledge of key graphic design programs like Adobe Photoshop. The combination of an outstanding portfolio and Adobe Certified Associate credentials makes graduating students credible professionals in the workforce, said Huer. It’s a technical foundation that says, [this] didn’t take me ten years to make. I can do it efficiently and effectively, using the right processes.
SINEAD HOGAN Sinéad Hogan holds a �rst class honors degree in Management Science and Information Systems Studies from Trinity College, Dublin, Ireland’s top ranked university. Sinéad has over 10 years of training and assessment development experience with a strong background in evaluation and measurement. This includes: four years directing development with Skillspro, an CBT content publisher and three years consulting internationally on the development of rich interaction environments for testing and training, developing primarily for the Flash Platform. Sinéad joined the Certiport team three years ago, helping expand Certiport’s performance testing offering with the development of cutting edge, web delivered simulations using Flex and Flash.
17
ACTIONSCRIPT DEVELOPMENT
Using Flash Builder 4 to Code Flash CS 5 Projects Developers often don't need a lot of the tools that Flash Professional offers and would like to write their code in Flex. With Flash Professional CS5 and Flash Builder 4, Adobe has provided a round trip solution for the developer and designer to work together. What you will learn…
What you should know…
• How to set up a Flash Professional project to code in Flash Builder 4
• ActionScript 3 • Flash Builder 4 • Flash Professional CS5
I
18
n the past, designers would build the interface of application in Flash and the developer would either have to write their code in Flash or another tool. The problem with writing with another tool is many features are missing such as running the swf without having to switch to Flash or code hinting. There are some tools that are exceptions to this but for the most part, the integration is not there. Flash Professional CS5 (FP5) has made many improvements to the coding environment but developers often would rather work in Flash Builder 4 (FB). One of the many new features in FP5 and FB is the ability for Flash Builder to open a Flash project. In the past, Flex Builder would be able to open a Flash
project but did not understand the fla files. Flex Builder also could not publish the swf directly, the developer would have to switch to Flash to run the project then switch back to Flex Builder to continue working. This is different from creating and running an ActionScript project. ActionScript projects do generate swf files but are built without fla files using only ActionScript files. The ActionScript project does not have a fla file associated with it.
Figure 1. New File dialog in Flash Professional
Figure 2. Create ActionScript 3.0 Class dialog
Starting from Flash Professional
The process of setting up this workflow is very simple and Adobe has made it streamlined. The first step is to create a new ActionScript 3 fla in FP5 and save it. We want to do a little set-up of our own so the files are saved where we want them and the project is more organized. Open the Publish Settings dialog and set the swf file to publish to bin-debug which will be in
04/2010 (12)
Using Flash Builder 4 to Code Flash CS 5 Projects
Figure 6. Movie and Publish buttons in Flash Builder
Figure 4. Flash Professional preferences
the same folder as the fla. FB will create this folder automatically, so we might as well use it. Close the dialog and in the Properties pane, click the ActionScript Settings button. In the window that opens, add a source folder to the Source Path tab. Name this folder src as that is standard with most Flex projects. Also, fill in the name of the base class as the name of the fla file. Click OK. The src folder will need to be created in the project folder because FB will not create it for you. From the File menu, select New which will bring up a dialog as seen in Figure 1. Select ActionScript 3.0 Class and click OK. FP5 will then ask where you would like to edit your ActionScript files and what is the name of the Class that is created (Figure 2). In the text field, enter the name of the fla file, select Flash Builder and click OK. Flash Builder should launch
Figure 3. New Project dialog in Flash Builder
04/2010 (12)
and display a dialog asking to create a new Flash Professional Project. The target file in the first text field of this dialog should be the file that was created earlier. The second dialog is a little trickier. You have to make the decision to work on the project in the file folder that you have already saved the file in or have everything copied to the default workspace folder. In this example, we are going to link the project where we have already saved the fla file (Figure 3). If the package text field is not filled in, the class will be saved as part of the default package. In this example, it is ok so click Finish and the project will be set up. Note that you can set the preferences in Flash Professional to always open code in Flash Builder. Select Preferences and click on ActionScript under the Category pane. There is a drop down menu for Class editor: where you can choose which editor you would like or to have FP5 ask every time see (Figure 4). Looking at the project as in Figure 5, you will see the project has been set up just as any other FB project. Notice that the folder icon of the project has a Flash symbol on it to designate that this is a Flash Professional project. Under the default package, the new class is created and a basic template is opened for editing. Now the project is set up and ready to be coded. To test this, put a trace statement in the constructor of the Main class and press Command>Return or
Figure 5. Package Explorer
19
ACTIONSCRIPT DEVELOPMENT
All three commands can be found in the tool bar and are active when working on a Flash project (see Figure 6). The Test Movie and Debug Movie commands are found under the Run menu and have the same key commands as in FP5 Note that the debug command launches the Flash Debugger and not the debugger in Flash Builder. The Publish Movie command is under the Project menu.
Libraries and external files
Figure 8. The Square class
Control>Enter. Test Movie can also be selected from the Run menu. The application will switch to FP5 and publish the app. If everything worked properly, the trace statement should be in the output window. Close the window and the application will automatically switch back to FB. In addition to the Test Movie command available in FB, Debug Movie and Publish Movie are also available.
The project should work as if the project was built and coded in FP5. Back in FP5, create a movie clip symbol for the library and name it whatever you would like. Under the Advanced section, click Export for ActionScript and leave the settings at default (see Figure 7). Switch back to FB and create a variable in the main class of the type of the movie clip. Use this variable to position the movie clip and add it to the stage see (Listing 1). Test the movie again to see the symbol added to the stage. Back in FP5, right click on the symbol in the library and click Edit Class. In the dialog to ask which editor you would like to edit the class in, click Flash Builder. The program will switch to FB and show the New Class dialog. Name the class the same as the name that the symbol is named and keep the superclass flash.display.MovieClip (see Figure 8). Add the code in Listing 2 to make the symbol a button and test the movie. Listing 1. Adding a symbol to the stage package
{
import Square import flash.display.Sprite; public class FPCS5FB4 extends Sprite
{
private var sq:Square; public function FPCS5FB4()
{
super();
trace('it worked'); sq = new Square(); sq.x = 100; sq.y = 100;
}
}
}
addChild(sq);
Figure 7. New Symbol dialog 20
04/2010 (12)
Now when the movie launches, use the mouse to interact with object. Any external file can be loaded at run time just as you could if developing in Flash Professional. To illustrate this, add an image to the bin-debug folder where the swf is compiled to. Add the image loading code in Listing 3 and test the movie. When the app runs, an image will show on the stage along with the movie clip created earlier.
����������� ����������� ���������� �����
Listing 2. Giving functionality to the Square class
���������������
package
{
import flash.display.MovieClip;
���������������������
public class Square extends Sprite
{
private var sq:Square; public function Square()
{
super();
buttonMode = true;
addEventListener(MouseEvent.CLICK, handleClick);
addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
}
private funtion handleClick(e:
{ }
}
I imported the project into flex builder and reviewed the examples. It took maybe 30 seconds to figure out how it worked. It was perfect. I was able to code the project in a couple of hours without writing a single line of PHP. Its really really awesome!! I could do in hours what I was not able to do in days.
MouseEvent):void
trace('it worked');
private function handleMouseOver(e:
{
This is one of those rare pieces of software that does exactly what it says it does. Simple and elegant.
MouseEvent):void alpha = .5;
���������������������
���������������������������������
Develop Database Apps up to 80% Faster
private function handleMouseOver(e:
{ }
}
MouseEvent):void alpha = .5;
����������������� ������������������ ��������������������� �������������������� ��������������������
}
04/2010 (12)
����������������� 21
ACTIONSCRIPT DEVELOPMENT
Listing 3. Loading the image package
{
import Square; import flash.display.Loader; import flash.display.Sprite; import flash.events.Event;
import flash.events.ProgressEvent; import flash.net.URLRequest;
public class FPCS5FB4 extends Sprite
{
private var sq:Square;
private var loader:Loader; public function FPCS5FB4()
{
While this method works very well, there are some things to be on the look out for. One thing is if there is an error in the code when Test Movie is run, the application will switch to Flash Professional just not run. The errors will show up in the the Compile Error pane, so if the movie does not run, check there. When creating new classes, be careful that they get saved to the proper folder. Once the default class folder is chosen, Flash Builder will not always save the files to that folder by default. If the file is saved in the wrong place, just move them to where they belong and test the movie again. Lastly, sometimes when the movie is tested from Flash Builder, it seems to hang and never switch over to Flash Professional. If you look in the lower right corner of the FB interface, you can see it processing but gets stuck. The only way I have found to fix this is to quit out of both applications and relaunch them.
Conclusion
super();
trace('it worked'); sq = new Square(); sq.x = 100; sq.y = 100; addChild(sq);
}
Gotchas
loadImg("ffdmag.png");
Despite these minor problems, this feature is one that many developers have been wanting for a long time. Having the power of Flash Builder to write code for Flash Professional projects makes a developer's life much easier. By making the developer's work easier, it also saves time on a project. On a larger scale, using Flash Builder to develop code in a project allows the project to be distributed to many developers at the same time. This is a great benefit for team based development and hooks into code management systems easier.
function loadImg(u:String):void
{
loader = new Loader();
loader.load(new URLRequest(u));
loader.contentLoaderInfo.addEventListener(P rogressEvent.PROGRESS, loading);
loader.contentLoaderInfo.addEventListener(E vent.COMPLETE, loaded);
} function loaded(e:Event):void
{
}
addChild(loader);
function loading(e:ProgressEvent):void {
//
}
22
}
}
LOUIS DICARRO Louis DiCarro is a consultant based in NYC and has been working with Flash since the �rst version. He has taught web development at the college level and has worked for numerous large clients. He can be reached at louis.dicarro.ffd@gmail.com. 04/2010 (12)
SourceMate, the new must-have companion tool for Flash Builder 4, increases an Actionscript developer’s productivity exponentially. As Flash Builder’s use in the enterprise continues to increase the importance of being a productive developer has never been greater. With SourceMate refactoring features, code templates, and more you can take your Flash development to the next level.
Features Include: Code Templates (i.e. code snippets) // Code templates available from both the content assist popup and the templates view // Works in both .as and .mxml files
// Create your own templates and share them with other developers (snippets.png)
Code Generation // Improved Getter/Setter generation
// Generate Override/Implement methods // Generate Constructor from Fields // Generate toString()
// Generete ASDoc comments on all elements (getset.png)
Refactoring // Extract Method
// Extract Variable
// Extract Interface // Convert Local Variable to Field // Extract Constant // Change Method Signature (extractinterface.p
Metadata Tag Support // Content assist for metadata
// Metadata validation during compilation
// Support for 3rd party or framework metadata tags (metadata1.png
What they’re saying about SourceMate “… incredibly impressed with SourceMate …” -----------------------------------------------------“Loving SourceMate snippets.” -----------------------------------------------------“SourceMate > the product is awesome…”
Other features // Globally Disable/Remove trace() statements // Generate Ant build.xml from project settings // Build ASDoc Wizard
// TODO/FIXME/XXX task creation (disabletrace.png)
Download SourceMate:
www.elementriver.com/sourcemate
1818 Library Street Suite 500 | Reston, VA 20190 | (571) 308-9475
only
$79
ZEND AND PHP
Writing a Remote End Point (PART 1) With Zend Studio, Zend Framework and Adobe Flash Builder You may have heard the news that Adobe Flash Builder 4 now bundles Zend Framework with Action Message Format support (Zend AMF). As a Flash developer you might be looking for a jumpstart tutorial to begin using Zend Framework. In this article you will learn how to access remote data in PHP using Zend Framework in Flash Builder 4. What you will learn…
What you should know…
• How to create a data model layer using Zend Framework • How to access the data model layer through a service class
• Familiarity with Flash Programming • Some basic knowledge about PHP
I
f you want the ability to re-use components in a low-touch and loosely coupled form to make your life easier, Zend Framework is the right choice. With Zend Framework, you can dramatically simplify your data access code in PHP. In this Part 1 of a two-part article, Flash developers are provided with steps to set up a basic CRUD application using Zend Framework.
M (or Model) part of the MVC design pattern for the census application. If you do not have Zend Studio, you have two options. You can either create the structure with the Zend_Tool (a Zend Framework Component) or create a project structure manually using the following example: see (Figure 1).
Getting Started
Step 1
Let’s write a simple (and hypothetical) back-end census application that provides access to census data. First, create the project CService using Zend Studio. Select the PHP Explorer and type CTRL-2 followed by zf create project CService. This will create the basic structure of an MVC application. Note: you will only be using the
Create initial settings Look for a Bootstrap.php file in the application directory. This file contains a Bootstrap PHP class, which handles all startup settings in a structured way. This class sets up the autoloader, which loads files for the individual classes required to execute an individual request. This class also extends Zend_Application, a standard way to create and manage bootstrapping of the Zend Framework application for actions such as loading Resources, dispatching through the Front Controller, etc. see (Listing 1).
Step 2
Create the following basic database configuration settings in a file called application.ini in the configs directory see (Listing 2).
Step 3 Figure 1.
24
Create the data access layer. This is the layer that the service layer will call to handle the database calls (i.e.
04/2010 (12)
Writing a Remote End Point
Listing 2.
Listing 1. class Bootstrap extends Zend_Application_Bootstrap_
[production]
{
resources.db.adapter = "pdo_mysql"
Bootstrap
public function _initAutoload()
{
resources.db.params.username = "root"
'basePath'
);
)
resources.db.params.password = ""
resources.db.params.dbname = "census"
Autoloader(
'namespace'
}
resources.db.params.host = "localhost"
$al = new Zend_Application_Module_ array(
}
bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
_)
resources.db.isDefaultTableAdapter = true
=> '',
Listing 3.
=> dirname(__FILE_
CREATE TABLE 'census' (
'age' varchar(3) DEFAULT NULL,
'classofworker' varchar(255) DEFAULT NULL, 'education' varchar(255) DEFAULT NULL,
'maritalstatus' varchar(255) DEFAULT NULL, 'race' varchar(255) DEFAULT NULL, 'sex' varchar(255) DEFAULT NULL,
CensusService, defined later on). This is not the layer that you will be calling inside the Flash application. Create the table census using the following example: see Listing 3 and Figure 2.
Create a data access model layer
'id' int(11) NOT NULL AUTO_INCREMENT, PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=utf-8
models/Census.php,
the column named
id
as the primary
Create two files- one to represent the table and one to represent a row. The following code shows how [the census?] table is represented in the models/DbTable/ Census.php file.
key, as follows:
class Model_DbTable_Census extends Zend_Db_Table_
}
{
Congratulations, you have just created a data access model layer see (Figure 3).
}
Abstract
protected $_rowClass = 'Model_Census';//row class protected $_name = 'census';//table name
class Model_Census extends Zend_Db_Table_Row_Abstract {
protected $_primary = 'id';
Create a service access model layer
is the name of the table as spelled in the database. $ _ rowClass is the name of the class that represents the row. Model _ Census class is stored in
Before you build the service access model layer, make sure you have created a data access integration point in Adobe Flash Builder. For steps to build the PHP data service or data access
Figure 2.
Figure 3.
$ _ name
04/2010 (12)
25
ZEND AND PHP
integration point using Flash Builder, refer to my previous posting entitled Flex and Zend Framework – Part 1 (http://www.eschrade.com/page/flex-zendframework-part-4bb3e5a5). Once you have created the data access integration point in Flash Builder you are ready to create the service access layer. The first image shows a directory called public. This is where the service endpoint is installed. In this example, the directory is named services, and it contains a file named amf_config.ini. State the location of your service class in the amf_config.ini file. Flash Builder installed the gateway.php file here, but the bootstrap.php file (read more about the bootstrap.php file in Listing 4). The next step is to define the service class, which will implement the functionality you want to actually call. Place this service class in the services directory in a file called CensusService.php. The following is a partial example to show how the service class works: see (Listing 4). You’ll notice there were very few lines of code. This is the benefit of using Zend Framework. You no longer need database access code. This is all handled by Zend_ Application and the configuration file that you wrote. One caveat: the return value MUST be an array, so be sure to put toArray() at the end.
Let’s test your code now. Using Unit Testing on the PHP side allows you to test any changes made to the codebase to prevent a break somewhere else. To perform the Unit Testing you can use PHPUnit integration in Zend Studio. Or you can use PHPUnit if you like. Remember the tests directory you created earlier? You can create another directory there called services, and in that directory you can add a file called CensusServiceTest.php where you can write Listing 5. require_once realpath(dirname(__FILE__).'/../
application/bootstrap.php');
require_once realpath(dirname(__FILE__).'/../../ public/AMFService/services/ CensusService.php'); /** * CensusService test case. */ class CensusServiceTest extends PHPUnit_Framework_
TestCase {
/** * @var CensusService */
Listing 4.
private $CensusService;
class CensusService
protected function setUp() {
{
parent::setUp ();
public function getAllCensus()
{
}
$this->CensusService = new CensusService();
$tbl = new Model_DbTable_Census();
}
return $tbl->fetchAll()->toArray();
/** * Tests CensusService->getAllCensus()
public function getCensusByID( $itemID )
{
}
*/ public function testGetAllCensus() {
$tbl = new Model_DbTable_Census();
return $tbl->find($itemID)->current();
$ret = $this->CensusService->getAllCensus(); $this->assertGreaterThan( 0,
public function createCensus( $item )
{
count(
$tbl = new Model_DbTable_Census();
);
$row = $tbl->fetchNew();
$this->assertType(
$row->setFromArray((array)$item);
'array',
$row->save();
}
26
}
$ret
)
return $row->id;
}
);
$ret }
04/2010 (12)
Writing a Remote End Point
Listing 6. // Define path to application directory defined('APPLICATION_PATH')
|| define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../../application'));
// Define application environment defined('APPLICATION_ENV')
|| define('APPLICATION_ENV', (getenv('APPLICATION_ENV') ? getenv('APPLICATION_ENV') : 'production'));
// Ensure library/ is on include_path set_include_path(implode(PATH_SEPARATOR, array(
realpath(APPLICATION_PATH . '/../../library'), get_include_path(),
)));
/** Zend_Application */ require_once 'Zend/Application.php'; // Create application, bootstrap, and run $application = new Zend_Application( APPLICATION_ENV,
);
APPLICATION_PATH . '/configs/application.ini'
$application->bootstrap();
all of your Unit Tests. Check out a helpful video called Unit Testing Zend Server PHP Job Queues (http:// www.eschrade.com/page/unit-testing-zend-serverqueue-actions-4bd5a19a) to review the basics. The brief sampling of Unit Tests starts with including the files to be tested, setting up tests and calling the individual functions, and comparing actual with expected results see (Listing 5). The idea here is to assert that the code will return more than one census item. For each piece of functionality, add another function that starts with the word test, and verify that the return values are what you would expect. For a test on collections of information, you want to assert both that the count is greater than zero and that the return type is an array, not a result set. There is one last thing to do before going on to the next part and integrating your front-end Flash application. You need to bootstrap the remoting requests, which is done by adding a require call to the top of Flash Builder's gateway.php file, as follows:
production, set the include path to include a library path (which you could probably remove) and then load and execute the Zend_Application class with the current configuration. This simply establishes the database models that you defined earlier. As the previous exercise shows, this approach can make your life much easier as you start to add database tables and service layers. This concludes Part 1 – Writing a Remote End Point: Building a CRUD Flash Application with PHP. Watch this space for Part 2 in July issue. Download Zend Studio projects here (http://www.zend.com/ en/products/studio/downloads). If you have any questions, please email Kevin Shcroeder at Kevin@zend.com. You may want to check out Kevin’s blog at www.eschrade.com.
require_once 'bootstrap.php'; ini_set("display_errors", 1); // ..etc.
Then you can create the file that does the bootstrapping see (Listing 6). What’s being accomplished here is to set the application path directory, define the environment as 04/2010 (12)
KEVIN SHCROEDER
27
FLEX DEVELOPMENT
An XML Photo Gallery with AS3 Part II
click to download the listings
Developers often don't need a lot of the tools that Flash Professional offers and would like to write their code in Flex. With Flash Professional CS5 and Flash Builder 4, Adobe has provided a round trip solution for the developer and designer to work together.
What you will learn…
What you should know…
• How to create masks with the Drawing API • Use dynamic values to place objects on screen • Dispatching events
• Familiar with general programming concepts such as data types, variables, loops, and functions • Familiar with class creation and construction • Some understanding of XML
T
his article is a follow-up to Creating an XML Photo Gallery with AS3. If you haven’t had the opportunity to read Part I, you can download it here: http://ffdmag.com/magazine/1058-the-flashon-iphone-war. Once you’ve made your way through the lesson you can start the second phase of placing dynamic values in the code so that you can use different size images and have more flexibility and diversity in your design to make it more visually appealing. We’ll be discussing masking, dispatching events, and changing hard-coded values (fixed values) to dynamic values that change based on the XML file attributes or image size.
Some cleanup
Before we begin open up ThumbNail.as (Listing 3) and in the imageComplete() method remove these two lines of code. _imageLoader.x = -(_imageLoader.width / 2);
_imageLoader.y = -(_imageLoader.height / 2);
After you remove those two lines, open PhotoGallery.as (Listing 2), locate the loadImages() method, and change the following lines of code. This will serve as cleanup and preventative maintenance. _thumbContainer.x = 78; _thumbContainer.y = 78;
to this
28
_thumbContainer.x = 2; _thumbContainer.y = 2;
Masking the ThumbNails
After completing the first lesson you might have been wondering why all the thumbnails needed to be at a fixed size of 150x150. Did you try to put a bigger image in for a thumbnail? Did you notice that the image ran directly into the next thumbnail? This is a poor choice of coding. If you sell this to your clients, they will probably use any image they want, breaking your design. Good practice says we should account for this potential problem. We’ll be adding a mask to the ThumbNail class to prevent this problem. With that being said open up ThumbNail.as (Listing 3) and add the following properties to the class. private var _maskWidth:Number;
private var _maskHeight:Number;
These two properties will store the width of the mask and the height of the mask. Next, locate the constructor method, and add two required parameters to the method. Name these two parameters maskWidth and maskHeight, data typing them both to Number. Also, in the body of the constructor method, assign the properties _ maskWidth and _ maskHeight to maskWidth and maskHeight respectively. public function ThumbNail (maskWidth:Number, maskHeight: Number)
04/2010 (12)
An XML Photo Gallery with AS3 Part II
{
this._maskWidth = maskWidth;
this._maskHeight = maskHeight;
}
init ();
Locate the private method drawMask(). Originally this method drew a mask around _ descriptionContainer. We’re going to alter this method in two different aspects; the first by changing the way the mask is being drawn (drawRect()); and the second, by changing what the mask is being applied to. Locate this line: _mask.graphics.drawRect (_imageLoader.x, _
imageLoader.y, _imageLoader.width, _imageLoader.height);
Change the previous line of code to this: _mask.graphics.drawRect (-1, -1, _maskWidth + 2, _ maskHeight + 2);
Now change this line: _descriptionContainer.mask = _mask;
To this:
We’re no longer going to rely on the size of the image loading in to draw our mask. _ imageLoader.x and _ imageLoader.y have both been to set to -1. We use 1 because we’re including our background of the thumbnail. We then changed _ imageLoader.width to _ maskWidth + 2. What ever we pass in for the width of the mask we add 2 to it. If we didn’t add 2 to _maskWidth, the background wouldn’t show completely around the thumbnail (see Figure 1). Remember that we draw a background behind the thumbnail to give it a 1px white stroke. We have to add one more method to ThumbNail.as. Add the following getter method to the class: public override function get height ():Number { }
return this._mask.height;
And move the call to drawMask() from imageComplete() to init(). This will prevent a null reference error from occurring. We’re overriding the default getter method height() . If we didn’t override this method the content outside the mask we be included in the height. Remember that the description is below the visible area. Even though it’s not visible, it still adds to the height of the thumbnail. Now I didn’t add one for the width, you can if you want but it won’t affect the account of the final piece in any way. When you
this.mask = _mask;
Figure 1. Background around the thumbnail’s are the wrong size
04/2010 (12)
Figure 2. Notice the gap on the y-axis. That’s why we override the height() method
29
FLEX DEVELOPMENT
Listing 4. Method for drawing a background around the description private function drawDescriptionBackground ():void
{
_descriptionContainer.graphics.beginFill (0x000000, 0.75);
_descriptionContainer.graphics.drawRect (0, 0, _maskWidth, (_description.height + 10));
_descriptionContainer.graphics.endFill ();
}
_imageContainer.addChild (_descriptionContainer);
Listing 5. Updated methods for mouse interaction private function onMouseOver (e:MouseEvent):void
{
}
Tweener.addTween (_descriptionContainer, {y:_maskHeight – _descriptionContainer.height, time:0.5, transition: "easeOutExpo"});
private function onMouseOut (e:MouseEvent):void
{
}
Tweener.addTween (_descriptionContainer, {y:_maskHeight + 1, time:0.5, transition:"easeOutExpo"});
finish the lesson, come back to the block of code and comment it out. You should see something like this (see Figure 2). Before we can test the application we have to make a couple more changes. Open up gallery.xml (Listing 1) if it’s not open already. Change image_height and image_ width to mask_height and mask_width. We don’t have
to do this but I think it’s best to change the names of variables/attributes/methods to be as descriptive as possible. Next, open up PhotoGallery.as (Listing 2). Find the private method loadImage() and change the following lines of code: var imageHeight:uint = _xml.@image_height; var imageWidth:uint = _xml.@image_width;
to var maskHeight:Number = _xml.@mask_height; var maskWidth:Number = _xml.@mask_width;
We’re simply changing the names of the local variables to more descriptive names. Then we assign the correct XML attribute to the variables. Nothing too complicated here. If you were to run the application now you would see something like this (see Figure 3). If you’re asking yourself if we forget something, we did. Remember we added two required parameters to the thumbnail constructor. We just didn’t supply the values to it. Add maskWidth and maskHeight to the Tthumbnail constructor: new ThumbNail (maskWidth, maskHeight);
Next, change the following lines of code:
Figure 3. Thumbnail’s are not arranging correctly 30
p.x = (imageWidth + imageGap) * columnCounter; p.y = (imageHeight + imageGap) * rowCounter;
04/2010 (12)
An XML Photo Gallery with AS3 Part II
to
Then change
p.x = (p.width + imageGap) * columnCounter;
_description = new TextField ();
p.y = (p.height + imageGap) * rowCounter;
Run your application. Notice the spacing on the y-axis.
The Description
At this point you can run your application. Notice that the thumbnail arrangement looks just as it did before but we can see the description information being displayed (see Figure 4). Part of the reason is because of the code we changed in the beginning of this lesson. This serves as a good point though and is part of the reason I’m writing this article. Never use fixed values unless you absolutely have too! Go back to ThumbNail.as and find the createDescription() method. Change the following section of code: _descriptionContainer = new Sprite (); _descriptionContainer.y = 150;
_descriptionContainer.graphics.beginFill (0x000000, 0.75); _descriptionContainer.graphics.drawRect (-75, -75, 150, 75); _descriptionContainer.graphics.endFill ();
_imageContainer.addChild (_descriptionContainer);
to
_description.x = -75; _description.y = -70;
_description.width = 150;
to _description = new TextField (); _description.y = 5;
_description.width = _maskWidth
We’re done with the changes to this method. Notice I removed the code to create the background around the description. There’s good reason for that. If you notice, I originally had the background being drawn at a fixed size. Personally I don’t think that’s too dynamic. Underneath the createDescription() method, we’re going to add a new method for drawing the background of our description. Add the following method to ThumbNail.as see (Listing 4). Then call the drawDescriptionBackground() method from within the setter description as follows: public function set description (value:String):void {
_descriptionContainer = new Sprite ();
_descriptionContainer.y = _maskHeight + 1;
Figure 4. Description container isn’t displaying correctly 04/2010 (12)
}
this._description.text = value; drawDescriptionBackground ();
Figure 5. On roll over the description isn’t animating to the correct position 31
FLEX DEVELOPMENT
Here’s breakdown of why we put the Drawing API code inside its own method – drawDescriptionBackgrou nd(). I wanted the background around the description to be dynamic in height. If the end user wanted to add more copy for the description I wanted the background to adjust accordingly. Look at this line of code: _descriptionContainer.graphics.drawRect (0, 0, _
maskWidth, (_description.height + 10));
I start off by placing the rectangle at the (0, 0) coordinate of the x and y-axis. I then set the width of the rectangle to _ maskWidth. If the value passed into the constructor is 150, then _ maskWidth will be 150. I then set the height of the rectangle to the height of the description text field and add 10 to it. If we were to call this method from anywhere in our class, we would really have much of a background. This is because we’re setting the height of the rectangle to the height of the text field. If the text field doesn’t have any text in it, then it won’t have a height. That’s why we call drawDe scriptionBackground() in the setter description(). The text field will be populated with text, giving a height value for us to use. Run your application again. Everything looks good until we roll over our thumbnail’s (see Figure 5). Notice the background is drawn correctly but the rollover places it in an awkward position. I don’t know about you but I think this makes for a bad visual. Let’s fix that now.
Figure 6. Description is now animating to the right correct position 32
Locate the onMouseOver() and onMouseOut() methods. Change the methods to the following see (Listing 5). All we’re doing here is animating _decriptionContainer so that it is fully visible at the bottom of the thumbnail (see Figure 6). Simple stuff.
The Big Photo
At this point everything is looking pretty good. We’ve matched everything back to how it originally was but modified the code to handle bigger thumbnail images. Have you tried to add different sized photos in for the BigPhoto. It probably didn’t center itself correctly on the screen right? Again, this is because we set a fixed value in for the photo that was just right for the size photo we were using. Let’s fix that now. Locate the thumbClick() method inside PhotoGallery.as. Change the following line of code: _bigPhoto.x = 108;
_bigPhoto.y = 107.5;
to _bigPhoto.x = (stage.stageWidth – _bigPhoto.width) / 2; _bigPhoto.y = (stage.stageHeight – _bigPhoto.height) / 2;
Run your application again and click a thumbnail. What happened here (see Figure 7). The BigPhoto isn’t centered on the screen. There’s a good reason for this. We’re trying to center the photo on the screen based on its width. Well, at this point the
Figure 7. The BigPhoto’s width is not accessible yet. Causing the BigPhoto to not center 04/2010 (12)
FLEX DEVELOPMENT
Listing 6. BigPhoto.as package classes
{
import flash.display.Loader; import flash.display.Sprite; import flash.events.Event;
import flash.net.URLRequest; public class BigPhoto extends Sprite
{
// Containers private var _imageLoader:Loader;
// Loads in the thumbnail
// Constructor public function BigPhoto ()
{
}
super();
/////////////////////////////////////////////////////////////////////////////////// // // Public Methods // /////////////////////////////////////////////////////////////////////////////////// public function loadImage (path:String):void
{
_imageLoader = new Loader ();
_imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, imageComplete, false, 0, true);
}
_imageLoader.load (new URLRequest (path));
// Clean up method public function destroy ():void
{
this.removeChild (_imageLoader);
_imageLoader.unload (); }
_imageLoader = null;
/////////////////////////////////////////////////////////////////////////////////// // // Private Methods // /////////////////////////////////////////////////////////////////////////////////// private function imageComplete (e:Event):void
{
// Add the loader this.addChild (_imageLoader);
dispatchEvent (new Event (Event.COMPLETE));
// Clean up
}
34
}
}
_imageLoader.contentLoaderInfo.removeEventListener (Event.COMPLETE, imageComplete);
04/2010 (12)
An XML Photo Gallery with AS3 Part II
photo technically doesn’t have a width because the photo hasn’t finished loading yet. What we have to do is wait for the image to finish loading, dispatch an event and then center it on screen. Open up BigPhoto.as (Listing 6) and add the following line of code to the imageComplete() method: dispatchEvent (new Event (Event.COMPLETE));
Go back to PhotoGallery.as and add the following line of code to the thumbClick() method after you instantiate BigPhoto: _bigPhoto.addEventListener (Event.COMPLETE,
bigImageComplete, false, 0, true);
We’ve registered _ bigPhoto for Event.COMPLETE . We just need to write the event handler for it. Add the following method underneath thumbClick() see (Listing 7). Notice I also moved the Tweener call to the bigImageComplete() method. Run your application now and everything should be back to normal. The BigPhoto should be centering on screen (see Figure 8).
Fixing the Navigation
We have everything where we want it. If you remember from the previous lesson, we also hard coded the values for the y position of the buttons. We even hard coded the values for animating the thumbnails. We’ll fix all of that now. Locate the createNavigation() method in PhotoGallery.as. Change the following lines of code:
_nextButton.y = 475; _backButton.y = 475;
to _nextButton.y = stage.stageHeight – _nextButton.height; _backButton.y = stage.stageHeight – _backButton.height;
If you were to change the height of your application the buttons would be fixed to 475. Now they’ll always be on the bottom of the window, no matter what. To fix the navigation we’ll need to add/change a couple of things. First add the following properties to PhotoGallery.as. private var _thumbWidth:Number; private var _imageGap:Number;
Next, change the following lines of code in loadImages(). var imageGap:uint = _xml.@image_gap;
to _imageGap = _xml.@image_gap;
Within the for loop, change the following lines of code p.x = (maskWidth + imageGap) * columnCounter; p.y = (maskHeight + imageGap) * rowCounter;
to
Listing 7. Method that is executed when the big photo �nished loading private function bigImageComplete (e:Event):void
{
_bigPhoto.x = (stage.stageWidth – _
bigPhoto.width) / 2;
_bigPhoto.y = (stage.stageHeight – _
bigPhoto.height) / 2;
Tweener.addTween (_bigPhoto, {alpha:1, time:1});
_bigPhoto.removeEventListener (Event.COMPLETE, }
bigImageComplete);
Figure 8. The BigPhoto’s is now centering 04/2010 (12)
35
FLEX DEVELOPMENT
Listing 8. Updated methods for navigating through the thumbnail’s private function nextClick (e:MouseEvent):void
{
var moveX:Number = _imageGap + _thumbWidth; if (-_thumbContainer.x < (_thumbContainer.width – stage.stageWidth))
{
disableNavigation ();
Tweener.addTween (_thumbContainer, {x:_thumbContainer.x – moveX, time:0.75, transition:"easeOutExpo",
}
onComplete:enableNavigation});
}
private function previousClick (e:MouseEvent):void
{
var moveX:Number = _imageGap + _thumbWidth; if (-_thumbContainer.x > 0)
{
disableNavigation ();
Tweener.addTween (_thumbContainer, {x:_thumbContainer.x + moveX, time:0.75, transition:"easeOutExpo",
}
}
onComplete:enableNavigation});
p.x = (maskWidth + _imageGap) * columnCounter; p.y = (maskHeight + _imageGap) * rowCounter;
After the for loop, add the following line of code: _thumbWidth = p.width;
Finally change nextClick() and previousClick() to the following: see (Listing 8). We’re really not doing much here. We first added two new properties to the class. _imageGap stores the value of the gap between the thumbnail’s. We originally had a local variable for that but we need to be able to reference that value from nextClick() and previousClick(). We also added a variable _thumbWidth. This variable stores the width of a thumbnail. This value is also used within nextClick() and previousClick(). Both nextClick() and previousClick() added a new variable called moveX. moveX stores the value of _imageGap plus _thumbWidth. Then we tell _thumbContainer to move on its xaxis by moveX. Now, we don’t have to worry about changing the values of our thumbnails because our clicking methods don’t care. They care only about the width of the thumbnail and the gap between them. Now that’s dynamic!
Conclusion
There’s a lot of code changed here but the core functionality is the same. The code attached also adds 36
a background behind the BigPhoto, and the ability to change background color behind the thumbnail. That’s a bonus for you to play around with. Can you think of anything else you could add to this? I can. The structure is there for you to use and modify. If you have questions about this project or you have an idea for another tutorial you would like to see written, please e-mail me at codedbyryan@gmail.com. Thanks for reading.
RYAN D’AGOSTINO Ryan D’Agostino is an Interactive Developer at NAS Recruitment Communications in Cleveland, OH, part-time instructor at Virginia Marti College of Art and Design in Lakewood, Ohio, and freelance designer and ActionScript developer. For more information about Ryan please visit http://www.codedbyryan.com/ 04/2010 (12)
GAMES DEVELOPER’S JOURNAL
Flash Game Achievements with GamerSafe
Whether you love them or hate them, achievements in games are a common component that can add fun for your players and lead to repeat plays for developers. This tutorial covers the basics for creating achievements for your Flash game and implementing them using the GamerSafe API.
B
efore we get started, I strongly recommend you read Achievement Design 101 (http:// www.gamasutra.com/blogs/GregMcClanahan/ 20091202/3709/Achievement_Design_101.php). Just putting achievements in your game doesn’t naturally make it a better game. You have to always remember the first question you need to ask yourself when making any decision about your game, Is it fun? If the answer is yes, then add it. Still here? Great. Let’s get on with it.
Step 1: Creating a GamerSafe Developer Account
The first thing you will need to do is head over to GamerSafe developer registration (https:// www.gamersafe.com/developer/register.php) page and create an account. GamerSafe has separate logins for players and developers, to start out you won’t need a player account, since the developer account lets you create as many test accounts as you want.
Step 2: Add Your Game to GamerSafe
In order to start building achievements for your game you will need to add it to GamerSafe. All you need to do is hit Add a Game on the developer navigation and then enter a title, description, URL, and image for your game. If you are still developing your game you can add placeholder information here, just make sure to change it before you submit the game for approval.
Step 3: Make Your Graphics
When I was designing my achievements I decided that all of them should have a fairly common look and feel. I felt this was important since the achievements are grouped together in the player’s recent achievements area. The template that I made in Photoshop was 100px by 100px and has three layers, the background, a blank layer in the middle, and a foreground with a K to represent my game, Knaves Online (http://knaves.ca/). Using this template it was actually possible to quickly import other art and do the entire process of making a new achievement in about 2 minutes. I saved my achievement images as 100x100 24 bit PNG files because I didn’t want the quality to degrade. If you want to save a bit of space you might want to save them as GIF or JPG, though.
38
Step 4: Add Achievements to GamerSafe
This step is done on the GamerSafe.com website. Make sure you are logged in to your developer account and switch to the page for your game. If you scroll down you will see a section labelled Achievements. Click on the add achievement link and then fill in the details of your achievement. Remember that you have 1000 points to distribute between your achievements, you should carefully consider the weight of each. For example, I have 12 different monsters in my game, each one has a different difficulty level. Since the player will end up fighting one of each monster if they play long enough I decided to make these worth 5, 10, and 15 points each. This adds up to 240 points for just playing the game. It also ensures a fairly steady stream of light achievements both during the early parts of the game and later on. It also leaves me with over 700 points to distribute for harder accomplishments, like maxing out stats and consecutive wins.
Step 5: Integrate the API
Go back to your GamerSafe game page and look for a section titled AS3 API and Constants. This is probably the most important part of the whole page, and the part that I missed when I was first working with GamerSafe. This was probably one of the easiest steps. GamerSafe provides a great little step-by-step guide after you click on Download the API. One thing that I would like to note is that they say to add var _gamerSafe: GamerSafe = new GamerSafe(this); to your code, but I found it was better to add the _gamerSafe variable at the class level so I can refer to it throughout the class, like this: package {
import flash.display.MovieClip; public class Knaves extends MovieClip { private var chatWindow:ChatWindow; private var _gamerSafe:GamerSafe; function MyGame() { }
_gamerSafe = new GamerSafe(this);
04/2010 (12)
}
}
Lots of help on integrating the API is available at https:// www.gamersafe.com/documentation.
Step 6: Triggering the Achievements
The GamerSafe documentation refers to your achievement IDs but unless you download the custom AS3 constants file you have no way of knowing what they are. I put the constants file at the same level as my game’s base AS file, then if I want to trigger my Deadly Dance achievement I can refer to it by the constant ACHIEVEMENT_ DEADLY_DANCE. Once you have this constants file, triggering an achievement is as simple as checking to make sure the condition has been met and then adding one line of code. Here is an example of triggering an achievement when a specific monster dies: if(currentMonster.monsterType == „bladedancer” && currentMonster.health == 0) {
_gamerSafe.bestowAchievement(GamerSafeConstants.ACHI }
EVEMENT_DEADLY_DANCE);
Step 7: Test, Test, Test
To test your achievements create a few test accounts in GamerSafe and hand them out to a few friends. The statistics on what achievements are being earned can be found in the developer admin console, but you might also want to check out my Getting Clicky with Flash Game Tracking (http://www.egoant.com/tutorials/10-flashgames/41-getting-clicky-with-flash-game-tracking.html) tutorial for ways to get other metrics about how people are playing your game. Make sure you follow up with your testers to see how they felt about the achievements, were they too hard? Too easy?
Step 8: Submit Your Game for Approval
Once your game is ready to go submit it to GamerSafe for approval. One of the additional benefits of submitting your game is that when it is approved you will automatically have some initial distribution through the portals that are affiliated with GamerSafe. And that’s it! While it might seem like a lot of work the first time through, once you have the ball rolling it actually feels like a fun way to add value and a nice level of polish to your Flash game.
AARON CLIFFORD Aaron Clifford is a certi�ed Flash Developer with over 10 years of experience in web development. He has always had a passion for games, from his earliest experiences with BASIC on an Atari 2600 to the present day, where he spends his time developing independent games.
04/2010 (12)
39
INTERVIEW
Working with Creative Niche Stephen Hodges,
photo by Jenny Gilbert
President of Creative Niche Inc.
Jayla Mortensen, Experience Coordinator, manages Creative Niche Inc.’s Refer Niche and Star Talent programs
What is Creative Niche?
We can be your best ally in your search for work. Creative Niche is a talent service for employers of every kind from boutique development studios to large mass advertising agencies to client-side creative departments, which represents employment opportunities extending right across Canada. Whether you are looking for project or freelance work, on or offsite, or an employment contract or permanent position, Creative Niche can help you land whatever you are seeking.
Can you tell me more about Account Niche?
Account Niche is a specialized practice area within Creative Niche Inc. Its focus is the professionals who manage, coordinate, sell and service marketers, and the marketing professionals who represent many of the most popular consumer and business brands in the world. Though Creative Niche had always represented the business of marketing communications, there was no one out there with a dedicated focus to their employment needs. With groundbreaking account
management assessments and an experienced team of relationship managers at Account Niche, agency and client-side marketing organizations now have the support they need to resource project and permanent professionals matched expertly to their requirements. Now with the dramatic increase in interest in social media and other emerging media technologies, agencies and marketers alike can stay on top of a rapidly changing landscape by accessing the market’s top performers through Account Niche.
What is the benefit of working with Creative Niche as a freelancer?
There are a number of benefits including access to some of the best jobs in the industry. In fact, Creative Niche often represents jobs you cannot apply for off the street; that is, the employer utilizes our services exclusively, and does not hire directly. This is a common practice amongst larger agencies and corporations who have in effect outsourced their recruitment needs in these specialized areas to a subject matter expert like Creative Niche.
Stephen Hodges is considered one of Toronto’s best senior recruitment consultants. Throughout his career, he has placed hundreds of creative people and staffed everything from outsourced project assignments to entire departments. Since 2006, Stephen has supported the Creative Niche team of expert recruitment professionals with decades of �led experience in creative communications. Stephen graduated from the University of Toronto with an Honours Bachelor of Science degree, then followed his design interests at OCAD. He has worked as a Studio Manager, Production and Database Manager, and Graphic Designer before translating this experience and skills into creative recruitment. As President of Creative Niche Inc., Stephen works with businesses to optimize their creative resources through employer services available across Canada and the US, custom team creation and management services, as well as process and work�ow consulting.
40
04/2010 (12)
Freelancers also benefit from the expertise of our relationship managers, some of whom have decades of experience both in the field, and in representing employers and professionals. They’ll help you find the right kind of work, negotiate the best rates, and provide valuable performance feedback. We have a vested interest in your success, and are always available to help sort out problems, find solutions or recommend additional resources which will advance your career. In addition, Creative Niche rewards great performance with valuable gift certificates. Another big benefit is payment. When you work with us, you don’t have to chase after payment and all the paperwork that goes with working on your own. You simply track your time on our timesheet and submit it on a weekly basis for weekly direct deposit. We look after invoicing and collections and pay you in full on a weekly basis whether or not our client has paid up. We are happy to work with you whether you are set up as a self-employed contractor or wish to be an assignment employee.
What kind of work can I find through Creative Niche?
Permanent employment, contracts, freelance, on or off-site. Some of our freelance engagements run many months, others, just a couple of days. Whatever you are looking for, or whatever suits your schedule at the time, we represent employment opportunities in all shapes and sizes.
How does the registration process work?
We try to keep the registration process as simple and fast as possible. Simply visit our Jobs section at www.creativeniche.ca and click on the link to our Online Registration System. It should only take you about 10 minutes and you only have to do this once. By registering online we are able to efficiently match you whenever an employment opportunity corresponds to your skills and experience If there’s a potential match, we’ll invite you to come and meet us face-to-face to learn more about your expertise, work history and skills.
Why should a company use Creative Niche services?
There are many reasons why companies engage our services. For some, it is the quickest and most dependable way to hire freelancers or on-demand experts. For others, it’s having access to a wide pool of high calibre talent resources, pre-screened and ready to work. Also, due in part to our strong reputation within in the community and the extensive tenure of our relationship managers, we represent professionals who aren’t publicly marketing their candidacy in the job marketplace. These passive candidates have
04/2010 (12)
41
INTERVIEW
approached us to confidentially further their career objectives, so they aren’t listing their resumes on public job boards.
Does Creative Niche provide other services to businesses other than search?
In addition to talent services, we support creative companies and organizations with employer services, which are available across Canada and the US. We also have experience staffing virtual teams, a growing trend as client-side creative organizations in particular seek ways to improve operational efficiency. We also manage on-site creative services and provide consulting services on process and workflow optimization. Creative Niche’s business services is focused on helping organizations optimize their creative and production operations.
Do you work with freelancers outside of Canada?
Though our two current service offices are located in Toronto an Ottawa, we have customers who rely on us to source or employ professionals in numerous locations across Canada and the US. If you are a US based creative professional, we’d love to hear from you – just head to our Online Registration System to make your introduction.
What kind of businesses do you work with?
One of the benefits to individual seeking our employment services is that we work with an incredible variety of employers, from boutique design and interactive agencies, to name-brand and internationally recognized agencies, and from small and medium businesses to global corporations, as well as not-for-profit and government. If you have an interest in any sector imaginable, we probably have an open role in it.
What advice do you have for freelancers who are searching for work?
Freelance employment comes in all shapes and sizes as well, and can be sourced anywhere from services like ours to direct solicitation from business, friends and family, and referrals. Freelancers may have to market their services and utilize the same tactics and strategies that they create on behalf of their customers, whether that be social media, direct and e-mail marketing, promotions, or even advertising. It’s a creative industry, and here’s your chance to demonstrate your knowledge and skills on behalf of your own interests and objectives. Go for it – be creative!
What makes a memorable portfolio? Or resume?
are generally intended to market someone’s expertise. Other kinds of portfolios may be intended as a scrap book of your career. Just don’t make the mistake of mixing up the two! As for resume writing, this should not be an onerous task. Like my advice for portfolios, keep your objective in mind when you write your resume. There are many resources out there which provide advice on the nittygritty, so make use of them. Also, don’t be afraid to ask for advice from friends and colleagues, they may help you recall achievements or past experience.
What makes a successful freelancer?
Freelance and contract employment, which has been steadily increasing in proportion to permanent employment for a very long time now, requires the same behaviours and attributes for success as a permanent employment career like punctuality, reliability, high caliber of work, etc. The most successful freelancers on our roster have demonstrated strong communication skills, shown initiative and resourcefulness, pursued their own professional development, and managed successful customer relationships. A successful freelancer must also be entrepreneurial in order to seek out regular work and willing to dedicate time and energy to the business side of their services. They may have to market and sell their services on a regular basis. They may even have to do some cold calling to seek out the better engagement opportunities.
What other programs and services does Creative Niche offer to its talent community?
In addition to ongoing support such as mentoring and coaching from our experienced relationship managers, Creative Niche has developed a number of programs to support your success. Project Greenhouse is an ongoing series of professional development seminars, roundtables and hands-on training. Although there are excellent formal education resources in our communities, it is often very difficult to access hands-on training without making a very substantial time and money investment. Often led by exceptional performers in our community, Project Greenhouse gives everyone the opportunity to share tips and tricks in just a couple of hours which otherwise might have taken months, if not years, to gather through on the job experience. Another program is our Refer Niche program which rewards successful referrals with gift certificates of your choosing ranging from $50 to $200 depending on the placement.
The single best piece of advice I have about portfolios is to keep your primary objective in mind. Portfolios 42
04/2010 (12)
INTERVIEW
Getting Paid for your Flash Applications A Q&A with Mark Rose, Director of Products/Payments and Platform, PlaySpan
When was PlaySpan founded, how many only games does your company currently support?
PlaySpan was founded in 2006, and was formed for the sole purpose of creating a safe and secure environment for buying and selling of digital goods. Since the company’s inception, we’ve witnessed the growth of a number of major platforms, and scaled our offerings to accommodate that growth. We currently power monetization solutions for more than 1,000 online games, virtual worlds, and Facebook and MySpace games and apps via UltimatePay. We also have the largest stored value multi-game card in the world, the Ultimate Game Card (UGC), which supports transactions in more than 1,000 online games.
How do you think the microtransaction economy evolved, and what do you see as the critical components for Flash Developers?
There’s been a significant shift away from subscription and advertising models towards digital goods micropayments. Previously developers had to consider multiple factors including the integration of multiple payment methods and billing systems, virtual currency support, eWallet requirements, fraud management, and virtual economy analytics. Now, much of digital goods ecommerce is turn-key, requiring little or no external cost or additional infrastructure support. Third-party payment platforms like PlaySpan can provide platform integration seamlessly, without negatively impacting a player’s experience.
In your opinion, what has worked best in terms of converting free players to paying players?
Assuming the game is fun and engaging and its premium content enhances the experience, high conversion is achieved through easy to use purchase process
44
integrated into the game. Developers must also ensure that they provide relevant payment methods for their players. Not everyone has a US credit card or PayPal. For example, pre-paid retail game cards have become extremely popular not only in the United States, but also in emerging countries like Korea, the Philippines, and other areas where there is a high rate of players who lack credit and debit cards. Other forms of payment include an eWallet and virtual currency integration where users can pay for items without incurring the overhead and expense of credit card transactions.
What are the types of opportunities that previous Flash and Flex developers have missed out on and why?
Alternative payment methods that support microtransactions give publishers and developers greater reach and increased potential to convert free players to paying players. For example, integrating UltimatePay provides immediate international distribution through it 85 global payments and retail distribution in over 70,000 retail locations worldwide via the Ultimate Game Card.
Can you give some examples of this?
Playdom, Playfish, and Crowdstar have been real market leaders here. They have highly engaging flash games and applications which monetize users via free-to-play mechanics and they are also investing mindshare into allowing more users to pay with more methods globally. We are also seeing new leadership off social networks from networks like SPIL games. To give a couple examples from UltimatePay: one of our social games publisher partners asked us to integrate Taiwanese payment methods. As soon as we did, the game started generating $2,000 to $4,000 per day from Taiwan
04/2010 (12)
players. Another social game developer that integrated UltimatePay saw its international revenue distribution shift from primarily US driven to more international.
What markets and territories do you think most embrace microtransactions and/or the free-to-play model?
Korea and China are the historical front runners, but the rabid popularity of the social games on Facebook and MySpace as well as the numerous F2P online games are leveling the playing field.
Can you share any data that provides insight to international spending?
According to our internal data, Australian gamers generate the highest ARPPU at $24.38. United States gamers place a close second with an ARPPU of $22.76. The Netherlands rounds out the top three with an ARPPU of $22.03. This makes a strong argument for the potential of digital goods sales to eclipse the standard subscription model of $14.99/month.
What are some other strong arguments for integrating microtransactions into Flash games?
Within online games that have a virtual goods business model, fraud is a major concern. Third party platforms that have experience managing payments and billing can help protect the integrity of the game and your business. By allowing safe and secure payment transactions, fraud is drastically reduced as well as the incidences of chargebacks, which leads to higher revenue and players spending more time in the game environment.
How do you see the online game market evolving over the next three to five years? Generally speaking, we see conversion sophistication happening in three key areas: • • •
and
More in-game payment experiences More international payment methods and localization for currency and language Convergence between platforms. We see users playing similar titles across devices – for example, we see users on Facebook following play-by-play action on the iPhone or iPad, then playing the game socially in the evening and weekend on their web-enabled TV.
Overall, we feel digital distribution will continue to grow tremendously. In addition, developers will create deeper integrated premium content to further enhance the game experience. I think we’ll also see one or two universal virtual currencies, like UltimatePoints, evolve into a globally accepted and preferred payment method.
04/2010 (12)
45
Suc ces s
s s e cc u S
SUCCESS STORY
Success
Suc cess
Rob Shoesmith Mobile Application Marketer Rob Shoe
smith
By day I empty trash cans and by night I develop and market Iphone apps. Iâ&#x20AC;&#x2122;m not your stereotypical trash collector to say the least. Iâ&#x20AC;&#x2122;m 28 and have been a trash collector for the last 5 years. I went to university to study online marketing but due to a lack of maturity on my part I had to drop out of my course due to spending far much time partying and not studying.
46
I have learnt the hard way to say the least. I have always had an interest in technology and on-line marketing and wanted to develop my own products. In about April of last year due to a lack of funds I scoured the internet in the hope that I could find a company to develop an iphone app idea of mine to develop for free. I stumbled across a company called MEDL Mobile who had just released an iphone application called the app incubator.
04/2010 (12)
Rob Shoesmith Mobile Application Marketer
MEDL Mobile offers a 25% share of the profits in exchange for a great idea for an iphone app.
on how a trash collector was chosen out of 20,000 iphone app ideas to hav his idea developed.
This was a golden opportunity for me to say the least. Over the next few weeks or so I spent hours and hours brainstorming iphon app ideas and submitted them to the app incubator. If I’m being totally honest I wasn’t expecting a response. A couple of weeks passed and to my sheer delight I received an email back from one of the co founders of MEDL Mobile Dave Swartz.
I even had people approaching me in the street whilst I was emptying the trash cans. I felt like a mini celebrity.
He was interested in one of my ideas. The name of my app idea was Problem Halved. Problem Halved allows people to post a problem about just about anything you can think of and allows users the chance from round the world to come and offer advice and solutions for the problems posted. I have always wanted a way to help a lot of people and this was a great way to do this. I had been given such a fantastic chance to do something with my life I was determined to give 100% effort. Part of launching a successful app is the marketing of the app itself. Over a period of around 3 months whilst Problem Halved was being developed I created a marketing plan and researched media outlets that would be interested in my story. I sat down and thought to myself ‘what kind of story would the media love?’ I said to myself ‘how about a trash collector come iphone developer?’ The more I thought about this the more the pitch excited me. I then went about building a brand for myself and once Problem Halved launched I contacted hundreds of people in the media to try and share my story with. The response back was incredible.First of all my local newspaper printed a story which was on the front page,
Over the last year I have even appeared on live national TV news and internationally on CNN International. If this wasn’t good enough MEDL Mobile even offered me a job to help their company promote other applications they have released including code red an application that works out a woman’s mood based on her period cycle and Box Head the Zombie Wars, an online game played by millions of people which was converted into an iphone app. Last Christmas I was invited out to Los Angeles to the company’s Christmas party and to stay at Dave Swartz’ house with his family. California was certainly a very different place to what I’m used to. I live in a modest house near to the city centre whilst the party I attended was like something you see off MTV cribs! Problem Halved version 2.0 went live last week and I’m currently in the process of reaching out to the media to try and gather some interest. Top of my list is to try and get Oprah interested in my story so if you are reading this article, Oprah, please get in touch :) Part of my job at MEDL Mobile involves me reaching out and helping other people like myself to help promote their apps. This has been amazing. I love to speaking to different people from all around the world. Thank God I have the use of Skype! This whole experience has defiantly changed my life for the better and in time I would love to get into online marketing full-time either working for a company full time or setting up myself.
LINKS • • • •
www.robshoesmith.com www.medlmobile.com http://www.medlmobile.com/index.php?page=viewapp& appId=36 – MORE INFO ON PROBLEM HALVED http://www.youtube.com/watch?v=iAARmOtTI0c – YOUTUBE VIDEO OF ME
04/2010 (12)
47
REVIEW
Flex 3 Component Solutions Build Amazing Interfaces with Flex Components
Authors: Jack Herrington Publisher: friends of ED. ISBN: 978-1-4302-1598-1 Language: English Pages: 418 Pages Website: http://www.friendsofed.com/book.html?isbn=9781430215981
Flex 3 with AIR Exam Aid
Authors: Ali Raza Publisher: Exam Aids. Language: English Pages: 200 Pages Website: http://www.examaids.com/products/Flex-3-with-AIR-ACEExam-Aid-for-Windows.html
If you are thinking to give a try to Adobe Flex, or if you are a beginner in Adobe Flex and wandering around how to do some shiny stuff, or an employee whose boss wants to stick to an old technology for not taking risks about adobe flex, this book is for you. It gives you a chance to not only appreciate the power of Adobe Flex but also to impress your pals and convince your boss to adopt this award winning technology by creating some of the stunning interfaces in an amazingly short time. This book is also a timesaver for intermediate to advanced flex developers to get to know about the available components and then decide where those can be used.This another unique book starts from an introduction of Adobe Flex for a completely new or a beginner flex user and ends up teaching basics of several 3rd party components ranging from useful controls to mind blowing visualizations and anything in between. It covers free, open source and when there are no alternative available, commercial components. Although the intent of this book is to cover integrating components, last two chapters put some light on creating a custom component and accessing data as a bonus. by Ali RAZA ACI, ACE, SCJP Nowadays, it is becoming increasingly important to differentiating yourself from other Flex developers. One way to do this is by becoming an Adobe Certified Expert (ACE). The question is how do you prepare for the official exam? You can have personal tuition or find institutional courses or use the applicationâ&#x20AC;&#x2122;s Help to prepare but latter can be time consuming. Some companies have developed relatively inexpensive exam aids that can speed the process. One such company is Examaids. The company recently released their Adobe Flex 3 with AIR ACE Exam Aid written by Ali Raza. It is an interactive tool. It contains multiple-choice questions and explanatory answers. Itâ&#x20AC;&#x2122;s divided into study and practice mode to help you assimilate the knowledge. In study mode, you can view answers and relevant Help pages for further study. In practice mode, you can sit mock tests in an official test environment. The tests are scored at the end and you can check your answers against the correct answers. All in all, the Flex 3 with AIR ACE Exam Aid is put together very well and is easy to use. As an ACI (Adobe Certified Instructor) myself, I highly recommend this tool. It will give you an idea of your chances for success. It is not a magic bullet. Because it is a self study tool, you will need to think outside the box a little to get all of the benefit. by Steven Peeters Adobe Flex and AIR Certified Instructor Adobe ColdFusion User Group Manager http://www.flexpert.be
48
04/2010 (12)