Flash and Flex Magazine 01/2009 by Irek Pogroszewski

Editor’s Note Dear FFD Readers,

am really happy to begin the 2009 New Year with you - with the new challenges, new projects, new expectations and new features in Flash and Flex. As we start a brand new year here at FFD Magazine, we have been really lucky to have the chance to give you a bundle of very useful and interesting articles covering many important points in the Flash and Flex Developer’s Community. The first question I asked the FFD Beta testers was about the main theme that we should highlight on the cover and this gave me the feeling of great joy and confidence that this issue will be a great success. The vast majority of them expressed interest in the new features in Flash CS4, but none of the ideas will be ignored. That means that we hit the nail on the head. In the last issues, we have presented a hand-picked collection of greatly selected articles and tutorials. Now it is time for a fresh portion of healthy Flash and Flex learning material. Take a look at the main article in this issue about Flash CS4 New Features. Once you hear about all of the new features included, I don’t think there will be a doubt in your mind about the value of the upgrade. Before you are ready to start Flex-ing take a look into what Adobe Flex is. It is one of the leading technologies for RIA’s and how you can make simple applications with and without the Flex Builder – page 18. Are you a fan of Nintendo Wii? Flash games? Take a gander at page 64, and you will find a tutorial on how to develop Flash Games for the Nintendo Wii. I hope you find the articles in this issue worth while and engaging. As the new FFD magazine’s Editor-in-Chief, I am proud to have been a part of an incredibly successful publication and the community we can create together. This position has always been educational, though challenging, exciting, yet equally as demanding as it is rewarding. Ultimately, the stellar final product, and the supportive feedback we receive from you, the reader, provide the greatest rewards for me and the other members of our Editorial Board. I hope the magazine continues to evolve and reach your community. If you have ideas about topics you would like to see us cover in 2009, or if you have opinions about anything we are doing, please let us know. You can always write to us at editors@ffdmag.com. In the end, we want to continue working to make FFD Magazine more relevant to you—but we can only do this if you tell us what it is that you want to see. Your opinions are what we will use to help us determine what topics to focus on in the coming year. Special Thanks to the Beta testers and Proofreaders who helped us with this special issue, without whom there would not be FFD magazine.

Ewa Samulska ewa.samulska@ffdmag.com

Printed in Poland by: PlusMedia

Editor in Chief: Ewa Dudzic ewa.dudzic@ffdmag.com Executive Editor: Ewa Samulska ewa.samulska@ffdmag.com DTP Team: Ireneusz Pogroszewski ireneusz.pogroszewski@software.com.pl Przemysław Banasiewicz przemyslaw.banasiewicz@software.com.pl Art Director: Agnieszka Marchocka agnieszka.marchocka@software.com.pl CD: Rafał Kwaśny rafal.kwasny@gmail.com Senior Consultant/Publisher: Paweł Marciniak pawel@software.com.pl Production Director: Marta Kurpiewska marta.kurpiewska@software.com.pl Marketing Director: Ewa Dudzic ewa.dudzic@software.com.pl Subscription: customer_service@software.com.pl Publisher: Software Wydawnictwo Sp.z.o.o 02-682 Warszawa, ul. Bokserska 1 Poland Worldwide Publishing

Business addres: Software Media LLC 1521 Concord Pike, Suite 301 Brandywine Executive Center Wilmington, DE 19803 USA Tel: 1 917 338 3631 Tel: 1 866 225 5956 www.ffdmag.com

Software Media LLC 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

01/2009 (3)

Distributed in the USA by: Source Interlink Fulfillment Division, 27500 Riverview Centre Boulevard, Suite 400, Bonita Springs, FL 34134 Phone: 239-949-4450. Whilst every effort has been made to ensure the high quality of the magazine, the editors make no warranty, express or implied, concerning the results of content usage. All trade marks presented in the magazine were used only for informative purposes. All rights to trade marks presented in the magazine are reserved by the companies which own them.

To create graphs and diagrams we used company.

program by

CD included to the magazine were tested with AntiVirenKit by G DATA Software Sp. z o.o The editors use automatic DTP system Mathematical formulas created by Design Science MathType™

ATTENTION!

Selling current or past issues of this magazine for prices that are different than printed on the cover is – without permission of the publisher – 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.

Contents SPECIAL REPORT 06 Flash CS4 New Features

LEE BRIMELOW The article touches upon the new features of CS4.

08 CD Contents

48 Flex Application Accessing Microsoft Analysis Services to Retrive OLAP Cube Data ERIC KO In this article Eric shows you how to connect Flex to an OLAP cube.

54 Contextual Awareness- Parsing the Stack Trace

TOOLS

CHRISTOPHER W.ALLENPOOLE You will learn from this article how to parse the stack trace from an error message and how to create contextual awareness in a program.

12 What to expect with Flash 10’s “Astro”

SERVER-SIDE INTERACTION

KEVIN MARTIN

14 SpicyNodes – New Technology for Better Navigation in the Information Sea

58 Weather Flash Plus

PAUL GRITSAY

CLIFFORD ECLIPSE WILSON This tutorial will walk you through programming Weather Flash Plus in ActionScript 3.0.

FOR BEGINNERS

SOUND AND ANIMATION

16 Introducing the XMLLoader

60 XML- based Photo Gallery & Slideshow

CLEMENTE GOMEZ Clemente Gomez gives the short class on using XMLLoader Class.

CHETANKUMAR AKARTE In this article Chetankumar Akarte will teach you how to create an XML-based photo gallery and slideshow.

ACTIONSCRIPT DEVELOPMENT 18 Will you Flex? BERNARD PINEDA Bernard defines the most important new Adobe Flex’s features.

22 Getting Started with Google Maps in Flash JASSA AMIRLANG In this article Jassa Amir Lang will teach you basic steps needed to get started with GoogleMaps in the Flash IDE..

28 Visualizing GeoSpatial Data using Vector Maps JEANMARC WIELAND AND SANDRA ENGENE With this tutorial you will explore new methods for creating maps and visualizing the world.

32 Socialbloom. A look at Flex Data Driven Application

64 How to Develop Flash Games for the Nintendo Wii BILL VOLPE With this article you will get the excellent opportunity to develop your own Flash games for the Nintendo Wii.

COLUMN 70 Adobe Genesis: AIR Refreshes The Desktop CHRIS CHARLTON

CASE STUDY 72 Lex Framework Takes e-publishing to the Next Level 74 KING BEE Animation

WALT SCHLENDER In this tutorial you will learn data driven applications and some of the cool Flex visual effects.

76 OMNIS DATA

40 In bed with Flash and HTML: Embedding Flash content with SWFObject 2

78 Interview with Justin Everett- Church

ARAN RHEE In this article Aran Rhee will teach you how to embed Adobe Flash content using SWFObject 2.

44 Increasing Flash and Flex Search Engine Optimization

INTERVIEWS FFD TEAM

BOOKS REVIEW 80 Reviews of two amazing books

R.JAN MACDONALD AND JASON MCCOSKERY From this article you will learn to working solution for Flash SEO using SWFAddress and PHP.

01/2009 (3)

Product Review

Flash CS4 New Features by Lee Brimelow Sometimes when new versions of software get released there is a debate about whether or not they are worth the price to upgrade. Once you hear about all of the new features included in Flash CS4, I don’t think there will be a doubt in your mind about the value of the upgrade.

nce you have read the article, be sure to watch the accompanying video tutorial that is included on the CD in which I use some of the new Flash CS4 features in a real-world example. In the past, releases of the Flash authoring tool have been cyclical with regard to the audiences they target. Flash MX 2004 was aimed clearly at developers with its focus on integrating ActionScript 2.0 into the environment. Flash 8 saw many designer improvements including the addition of bitmap filters and video alpha channels. Keeping up the cycle, developers were the primary focus of Flash CS3 with the integration of the new ActionScript 3.0 language. Now Flash CS4 is upon us with a plethora of new features aimed squarely at the designer crowd. Ok enough chitchat; let’s get right to the new features. The user interface has been significantly revamped in Flash CS4. Many of the changes reflect things that are consistent across all the products in the suite. This includes things like the panel layouts and the new custom window chrome. Upon first opening the tool, the first thing you will notice is that nothing is where it usually is. The timeline is located across the bottom of the screen and the properties panel is now positioned to the right of the stage in a new vertical layout. Like previous versions of Flash, the user interface is full customizable and allows you to save your favorite layouts as workspaces. Like all CS4 products, the workspaces can be accessed by a new menu located on the top right of the application. Flash CS4 also comes with a range of workspaces right out of the box for people who want to focus on things like development, design, and animation.

New Timeline and Animation Model This is definitely the biggest new feature and is the one you will notice right off the bat. 6

For years Flash users have been asking for an object-based, auto-keyframing animation system similar to the one found in tools like After Effects. Well I’m happy to report that Adobe has finally listened. Gone are the days of having to add and remove keyframes manually on the timeline. In the new model you simply create a motion tween on a MovieClip and then keyframes will automatically be created for any property that you modify. Another huge benefit of the new system is that each property of your MovieClip is animated independently of each other allowing you to create some very complex animations very easily. In earlier versions of Flash it was extremely difficult to speed up or slow down a timeline animation that had a considerable amount of keyframes in it. In Flash CS4 it is as simple as grabbing the end of the motion tween in the timeline and adjusting it accordingly. All of the keyframes will automatically be adjusted for you. This is an amazing timesaver! Speaking of things that were typically hard to do in Flash, one would have to be moving or resizing an entire animation on the timeline. It required selecting multiple frames and took the steadiness of a surgeon’s hand in order to accomplish what you wanted. In Flash CS4 you can simply get the free transform tool and then move or scale the entire animation itself without affecting the size of the actual MovieClip the animation is targeting.

Motion Editor With the release of Flash 8, we had a primitive easing curve editor that we could use to adjust the timing of our animations. This was a very basic tool and it didn’t allow you to save the resulting easing curves when you were done. The new motion editor in Flash CS4 represents a huge step forward, bringing Flash on par with more professional animation tools like After Effects. You can adjust the easing

curves for every property independently of one another allowing you to easily create complex animations. Included with the editor are a host of popular easing types like bouncing and springing. You can also create your own easing curves very easily for those who want a more custom animation effect. What makes things even more exciting is that each animation property can have its own unique easing type. So you can apply a bounce to the X property and a spring to the Y property.

Motion Presets Let’s say you spend hours fiddling with the Motion Editor to achieve a stunning animation effect. It sure would be nice if you could save all of that work in case you wanted the same type of effect later on. This is where the Motion Presets panel comes in. This new panel allows you to save your own custom animation presets and also comes stocked with some common animation effects right out of the box. The included presets range from being cheesy to somewhat useful. The real power of the presets panel is in creating your own and building a library of your most-used effects. These can also be easily shared with the community if you are feeling generous. Thanks to the new native 3D support in Flash Player 10, there are now tools for manipulating MovieClips in 3D space directly inside of Flash. It’s important to note that this is not meant to be a replacement for the popular community-based 3D projects like Papervision3D, Away3D, and Sandy. These new 3D features are for doing simple “postcards in space” animations similar to what is possible in After Effects. If you are looking for the ability to apply shaders and lights or to import 3D models, you will still want to look to one of the aforementioned community projects. 01/2009 (3)

Flash CS4

There are two new tools available in Flash CS4 for working in 3D. The 3D rotation tool allows you to rotate MovieClips on the X, Y, and Z axis. Any rotations you do can be fully animated on the timeline just like any other properties. The 3D translation tool allows you to move a MovieClip along the X, Y, or Z axis. All of the 3D properties can also be adjust using sliders in the Properties panel if you’d prefer. Another cool thing is that MovieClips that are positioned in 3D space are automatically anti-aliased for you so that they look just as good in 3D as they do in 2D. The MovieClips also remain fully interactive so that you can still respond to mouse events even when the clips are set in 3D space.

Inverse Kinematics (IK) This exciting new feature is aimed clearly at those doing character animation in Flash. Inverse kinematics refers to the ability to build a skeleton structure on a character or object, which enables you to easily create joint-based animations. There are two new tools in Flash CS4 which make doing IK

animation a snap. The bones tool allows you to actually draw the bones that make up a full skeleton or armature. When you start creating bones, Flash will turn the current layer into an armature layer, which is a new layer type in Flash CS4. This layer type has some special properties dealing specifically with inverse kinematics. Here you can choose whether or not you want to animate the IK structure at authortime or runtime. If you choose runtime, Flash will automatically write the ActionScript code needed to make the object fully interactive at runtime. There is a new ActionScript 3.0 package that allows advanced developers to manipulate armatures at runtime. The bind tool is slightly more advanced and allows you to assign a particular bone to manipulate a specific vertex of the object. If you have experience with 3D animation tools like Maya or 3D Studio Max then these things will be very familiar to you. The new IK features are not just limited to MovieClips. You can actual draw a bones structure through a raw graphic shape allowing you to do some crazy shape tweening.

It’s going to be very interesting what the Flash community does with this feature.

New Project Panel One of the things that I honestly have never used in the Flash authoring tool is the project panel. This panel has always lacked the advanced features needed by developers to effectively manage their projects. Due to this lack of features, community member Grant Skinner created a more advanced panel called gProject that aimed to fill the gap left by the native project panel. Instead of spending precious development time building a new panel from scratch, Adobe instead decided to buy gProject and use it as the basis of the new panel. The new panel was actually built using Flex and takes advantage of the Flash JSAPI. Features include the ability to generate class files directly from the panel as well as setting up custom file paths for source folders and the Flex SDK.

Better Integration with Flex This is one area that the community has been very vocal about. Flash and Flex have never really worked smoothly together. One problem dealt with the fact that the SWC formats supported by each tool were not compatible with each other. This has been fixed in Flash CS4 so you can now include an ActionScriptonly SWC file created in Flex Builder into your FLA-based projects. Another feature of Flash CS4 that aids the integration with Flex is the ability to include metadata.

Native AIR Integration For a while now, Flash developers have been able to leverage their skills to build desktop applications using Adobe AIR. There was a free extension for Flash CS3 made available on the Adobe Labs site that allowed developers to take full advantage of the authoring environment to build applications. In Flash CS4 no such extension is needed as the AIR support is built natively into the tool. The AIR settings window can now be launched right from the properties panel once your publish settings have been changed to target AIR rather than the standard Flash Player. Believe it or not, the features I have talked about in this article are only some of the new things included in this release. I can’t recall there ever being a more feature-packed version of Flash. This may definitely lead to some sleepless nights for you so make sure you get plenty of rest now in preparation.

Figure 1. New Features

01/2009 (3)

LEE BRIMELOW 7

ActionScript Developement

Will You Flex? by Bernard Pineda Adobe launches Flex 4. But before you are ready to start Flex-ing, let’s take a look into what Adobe Flex is, why it is one of the leading technologies for RIA’s and how we can make simple applications with and without the Flex Builder. What you will learn...

What you should know...

• • • •

• Basic notions of conventional web applications • Basic web programming • ActionScript knowledge is useful but not compulsory for this article

What RIA's are What Adobe Flex is Basic Flex coding What's new in Flex 4

Level of difficulty

n order to view what’s new in Adobe Flex 4, we shall first define what Adobe Flex is. Adobe Flex is a different approach to web application development. It is used to build the front-end (visual layout) of web applications, and thus is separate from the programming of the back-end (db and data-driven functionality, etc). Flex applications are called RIA’s (Rich Internet Applications) because, besides having all the functionality of a web application, they have several desktop-like behaviors that enrich their usability. It runs using the Flash Player 9 as a virtual machine similar to the JVM (Java Virtual Machine) and can interact with Flash animations, images, and even html. It uses ActionScript 3 to do all the necessary programming and interaction with the user inside the application. Instead of using keyframes in a timeline (as Flash does), applications made in Flex use an XML-based language called MXML to create components and thus make the GUI (Graphic User Interface). Every tag and/or component inside the interface is actually an ActionScript class, and the developer can access the methods, properties and events that correspond to that class. If I was to give Flex a slang name, it would be Flash for Programmers. Whenever a non-Flash developer starts an approach towards Flash, they 18

can easily adapt to the use of ActionScript, and even appreciate the vast number of classes that Flash has now built in. But the problem they always (or almost always) run into is the use of the timeline. It’s difficult for a programmer to grasp what the timeline really is and how to benefit from its use. And that’s where Flex comes to the rescue. With Flex, you don’t have to worry about the timeline to program an interface. If you use the Flex Builder – which we will soon describe – you just drag and drop components into the canvas, save, and your application is ready to be deployed. For simple effects, you can take advantage of the builtin animations Flex has, to give an interface a more interactive look-and-feel. With just a few lines of code you can make a simple click on a button look animated. Of course, these animations are quite simple compared with a complex, customized animation that you could accomplish with Flash. Since they (both Flash and Flex) use ActionScript, you can accomplish practically the same things in Flash as in Flex. But while making animations and nice layouts are easier and faster with Flash, applications and interaction with data is so much easier with Flex. Comparing Flex and Flash is like trying to compare an SUV with a small car. The first is not better than the latter. They were just simply made for different purposes, but in the end, they will both take you to the same place. Flex has some competition in the making of RIA’s. To name a few: AJAX, Microsoft’s SilverLight, etc. The main (though not the only)

advantage that Flex has over these is that Flex will run on any web navigator that has Flash Player 9 installed (be it Internet Explorer, Firefox, Safari, etc.) on any Operating System (be it Windows, Mac or Linux). As of now, the biggest competitor is SilverLight, because of the similarities in usability and functionality with Flex. The advantage that SilverLight could have over Flex is that it’s practically married to .NET’s backend technologies (C #.NET, Visual Basic.NET, Java.NET, etc) and the support and integration with these technologies and programming tools (Visual Studio, Blend) is practically native. Flex is able to communicate with data-driven applications and databases through the use of back-end languages such as PHP, Java (through Java Server Pages and Servlets), ASP.NET, ColdFusion, Ruby, Python, etc. This connection is made with Web Services and/or Http Services. Remote Objects can also be used and make the programming so much simpler because we just need to call the remote objects, and depending on the configuration, we can have access to the methods and attributes of the remote objects. Remote Objects can facilitate the connectivity between the RIA’s and the server-side applications. To view an example of these type of platforms, refer to WebOrb. In addition to that, Flex is currently being used to create applications that use different API’s (i.e. Google’s APIs, OpenSocial, FaceBook, Hi5, etc.). So what are the advantages of RIA applications made in Flex over traditional web applications?

Figure 1. Flex builder splash

01/2009 (3)

Flex

For starters, the output of an application in Flex is a SWF (Shockwave Flash File), which pretty much behaves like any other Flash animation. You load it once, and don’t have to worry about loading it again and again once the application is running. Whereas in traditional web applications you have to load each page, in RIA’s you load every part of the application once you load the SWF with a web browser. The concept of pages inside a web application disappear. So let’s say, for example, that a “traditional” web application has an image on the top part that is 75 KB in size, and this image must be shown in every single page of the application. The application has 15 different pages. If a user was to go through every single page once, you would have downloaded the image 15 times, which would make a 1,125 KB from just one image! What if the user was using the application all day long, reloading the pages over and over? What if instead of one image, the application had 5 images? You can get a rough idea where I’m going with this. With a Flex application, an image is loaded only once into memory, and every time you want to display it, Flex simply gets it from memory, and shows it instead of downloading it again. Let’s say your Flex application is 1,000 KB in size, plus 75 KB from embedding the image inside the application. Even though at first you’d be downloading a bit more than one MB, that’s all you’d be downloading if you used the application all day. You can imagine how much bandwidth you could save. Editor’s Note: Although browser cache may minimize multiple downloads of the same image, the point remains valid: Flex saves bandwidth. Another advantage of a Flex application over traditional web applications is that it is more user friendly, since in Flex you can emulate certain desktop behaviors (such as drag-n-drop, working off-line, etc.) and your interface could be even more intuitive, depending on the GUI. The only downside of this is that you have to download/upgrade the Flash Player on the client’s computer, though nowadays practically every computer has the Flash Player already installed. One more advantage that I find important to review is that you are able to divide the user interface from the programming (using the MVC pattern). In other words, there can be changes made within the back-end of the application, without affecting the user interface as much, and vice versa. You can divide the work the designers do from the work the programmers do, so they don’t have to affect each other’s work. Another interesting addition to the Flex SDK is the launching of Adobe AIR. Code named Apollo, AIR let’s us take applications made in Flex, Flash, or JavaScript (pretty much AJAX), and turn them into desktop applications. The AIR SDK comes with several libraries so we can 01/2009 (3)

interact with the Operating System and the File System. We will make some simple applications on AIR on future articles.

Helpful Tools One of the most helpful tools for Flex development is the Flex Builder (Figure 1). You can get it as a stand-alone application or as an Eclipse Plug-in. Flex Builder is very helpful in the building of a Flex application because it automatically does a lot of tasks that otherwise we would have to manually do ourselves. Depending on the configuration, it can compile the application every time we save our work. It also gives us an idea of how the application is going to look before we compile it and run it (Figure 2). Flex Builder has different views for the programmer. In the figure shown, we have the Source View activated. We can see all the code that the Flex Builder has automatically generated for us. As we can see, we have our

MXML tags, along with the root node which is the Application node and its attributes. Once we start typing mxml code, the Code Hint can help us by suggesting input from several options (very much like the IntelliSense in Visual Studio) (Figure 3). This, along with automatic code generation, is very useful and can make our coding much faster and easier (Figure 4). The Design View gives us a pretty precise idea of how the application will look running. It also gives us the advantage of saving time by dragging components into the canvas instead of coding them. Let’s do a small example so we can grasp how easy it is to develop with the Flex Builder: On the Source View, we are going to type the following code (Listing 1). On line 5 through line 13, we embed a script with some simple code to show an alert (pretty much like an alert in JavaScript). We imported the Alert library, and created a void function called showAlert. Inside the function we called the static class Alert and its method show to display the alert. When we dragged the button into the canvas, the Flex Builder added the code on line 14. To this we add the last part where it says click=”{showAlert()}”. With this, we are telling the Flash Player that when a user clicks on the button, the ActionScript code inside the braces will be executed, in this case the function showAlert (Figure 5).

Figure 2. Flex builder src view

Figure 3. Flex Builder’s Code Hint

Figure 4. Flex builder design view

Figure 5. Sample app location

Figure 6. Sample app running

Figure 7. Sample app notepad

Figure 8. Sample app command line 1

ActionScript Developement Once we save this, the Flex Builder will automatically compile the code, and pack into a nice little SWF. It will also generate an html and the JavaScript to load the SWF into it. Let’s double-click on the SWF to see the small application running. Once the application is running and we click on the button, we get the alert. One of the functionalities of this alert is that it blurs everything else and you can’t click or interact with the rest of the application until you click on the buttons of the Alert. This can be helpful whenever you need to acknowledge certain actions from the user. In a future article we will discuss different kinds of alerts. This modified version of the universally known Hello World program gives us an idea of how simple it is to code in Flex with the use of Flex Builder. Unfortunately, the Flex Builder is not free (except for Educational use). You can check the price tag on the Flex Builder at http://www.adobe.com/products/flex/features/ flex_builder/. Fortunately, for those of us who don’t have a boss who will readily buy a Flex Builder license for us, there is another option. The Adobe Flex SDK (Software Development Kit) comes with a command line compiler (mxmlc.exe); all we have to do is execute it along with the name of our mxml file, and it will do the rest. Let’s try a small example to understand all this (Figure 6). The first thing we need to do is find the mxmlc.exe. I found it in: C:\Program Files\Adobe\ Flex Builder 3 Plug-in\sdks\3.0.0\bin, but beware that the location could be different for you, since the one I found on my computer is the one that comes with the Eclipse Plug-in. Also you can have different versions of the compiler since you’ll have one for Flex 2, another for Flex 3, Listing 1. Building a simple app with an Alert

and yet another one for Flex 4. Once we have the version of the compiler that we want to use, we create our source file. We can use notepad, vi, or any other editor we like. For this example I used Notepad (Figure 7). Let’s copy the code from the previous example, paste it on an empty Notepad and save it as C:\Documents and Settings\ber\My Documents\Flex\command_line_test.mxml. Let’s open a command line box in order to compile it see (Figure 8). Since we know where the mxmlc.exe is, let’s just type its location, along with the compiler’s name, and the name of the source file. C:\Program Files\Adobe\Flex Builder 3

Plug-in\sdks\3.0.0\bin\mxmlc.exe command_line_test.mxml see (Figure 9).

With this, the compiler should have generated a SWF file. Just double click it and the outcome will be the same as the previous example see (Figure 10). The Flex Builder does the same thing as we just did, but it does it in a transparent way, since it already has the locations of the compiler and the source file. One disadvantage of using the Flex Builder is that it consumes a lot of memory since it has to run on Java. One disadvantage of not using the Flex Builder is that every time you make a change on the source code, you’ll have to compile it

Figure 9. Sample app command line 2

1. <?xml version="1.0" encoding="utf2. <mx:Application

8"?>

3. xmlns:mx="http://www.adobe.com/ 4.

2006/mxml"

layout="absolute">

5. <mx:Script> 6. 7.

<![CDATA[

private function

{

11.

}

10.

12.

Figure 10. Command line text

import mx.controls.Alert;

]]>

showAlert():void

Alert.show("You

clicked!");

13. </mx:Script>

14. <mx:Button x="50" y="69"

label="Button"

click="{showAlert()}"/ >

15. </mx:Application>

Figure 11. Flex builder new project

and reload it to view the changes you made. Personally, I prefer using the Flex Builder because of the ease of use, but if it ever stopped working, it’s good to know you have other options so you don’t stay stranded. Now that we know we don’t depend on any tool to make Flex applications (except for the SDK), let’s also make a small application in which we shall see how to make a simple animation for an image. We shall create a new flex project on the Flex Builder (File>New>Flex Project), and we shall name it Simple Animation see (Figure 11). As you can see in the image above, we could make this application an AIR application, but we’ll do that on a future article. Once we click the Finish button, the Flex Builder automatically creates a main.mxml file, which is the main application and in which we will type (or paste) the following code (Listing 2). Now, let’s explain what we’re doing. We added a button to the canvas, and an image. The button will have the label Show Image and will execute the ActionScript function showImage(). The image will be embedded into the SWF, with the advantage that the image is part of the code itself, and the disadvantage that the SWF will be larger in size. The image is initially not visible. For that we have the void function showImage() on line 8, which takes the id of the image, and calls the attribute visible and changes its value to true. On line 15 we start defining the effect that we are going to apply to the image. In this case, we are going to use a Fade effect. For other available effects, refer to Flex Effects. We also have a showEffect attribute (line 30) on the image, which takes the id of the effect that it’s going to be used when the component is made visible. We could also use the hideEffect attribute and add it as a Fade out effect so if the image was to be hidden, it would also do it with the same effect that it was shown with (Fade out). After saving it, we view the SWF and we will see that when we click on the button, the image starts fading in, until the image is totally visible. So, as I mentioned before, with just a few lines of code, we animated an image. We can apply this type of animation to other Flex components, such as Canvas, TabNavigator, ViewStack, etc. It’s just a matter of playing around with the components and the effects. Now that we have a general idea of what Flex is, we can focus on what’s new, the new version of Flex, code named Gumbo. The main improvement in Flex 4 is GUI design. According to Adobe’s Ely Greenfield, the general purpose of the new SDK will be to give the designer complete control of the lookand-feel of a Flex application. Flex 4 will have, among other things, a new namespace MXML 2009 that will provide some enhancements, a new file format for vector graphics in xml, a new architecture for components and skinning, and improvements to existing features such as states, effects, transitions and layouts. 01/2009 (3)

Flex

Applications made in Flex 3 will be supported, and the current component model (called Halo) will integrate with the new functionality. Some of the improvements that will reflect directly on the developer’s productivity are the improved compiler and CSS improvements such as multiple styleNames, descendent, child, and id selectors. Integration with the Flash Player 10 deserves some attention since the player is going to have a lot of brand new text features and a new video component. Let’s take a look at a list of features for Flex 4. FXG (Graphic Interchange Format) Contains high-level graphic and text primitives that can be used to create, group, transform, and visually modify basic vector and bitmap shapes. Skinning and Skinnable Components Skin creation without having to write any ActionScript code. Listing 2. Animating an image 1. <?xml version="1.0" encoding="utf8"?>

2. <mx:Application

3. xmlns:mx="http://www.adobe.com/ 4. 5.

layout="absolute"

backgroundGradientColors="[#FFFFFF , #FFFFFF]">

6. <mx:Script> 7. 8.

<![CDATA[

private function

{

10. 11. 12.

2006/mxml"

]]>

showImage():void

img_example.visible= true;

}

Enchanced States Syntax Improves experienced-oriented features such as states, effects and layout.

TextArea Component A SkinnableComponent that allows the user to enter and edit multiple lines of rich text.

Group Containter The Group class is used in Container, ListBase and individual components, providing a single consistent mechanism for all layout in an application.

ScrollBar Component An improved scroll bar component.

Items Component and Selector ItemsComponent is the base class for all skinnable components that have content. For example, Panel is a subclass of ItemsComponent that has a border, header, and footer. This is a pure model class that does not make any assumptions about the presentation or behavior of the items. Selector is a subclass of ItemsComponent that is the base class for any skinnable component that supports selection. List, TabBar, ComboBox, and RadioButtonGroup are all subclasses of Selector. Selector is also a pure model class. Application Component Gumbo's Application (flex.core.Application) is an ItemsComponent designed to be the top-level container for new Gumbo applications. The new class was needed so Application can hold graphic elements directly. Text Primitives FTE, or Flash Text Engine is the foundation of future text functionality in the Flash Player 10. Gumbo will have three text primitives: TextBox, TextGraphic, and TextView. TextInput Component A SkinnableComponent that allows the user to enter and edit a single line of single-styled text.

13. </mx:Script> 14. 15.

<mx:Fade

Partial sources:

17.

duration="1000"

•

16. 18. 19.

id="fadeIn"

alphaFrom="0.0"

alphaTo="1.0"/>

20. <mx:Button 21.

x="10"

23.

label="Show Image"

22. 24.

y="10"

click="{showImage()}"/>

25. <mx:Image 26.

id="img_example"

28.

x="0"

27. 29. 30.

y="40"

source="@Embed('fx.png')" showEffect="fadeIn"

31.

• • •

•

visible="false"/>

32. </mx:Application>

01/2009 (3)

•

Jacobs, Sas, De Weggheleire, Koen, Foundation Flex For Developers, Apress company, 2008. Tapper, Jeff, et.al., Adobe Flex 2: Training from the Source, Adobe Press, 2006 http://cksachdev.blogspot.com/2008/ 07/what-new-in-f le x- 4 - code-namegumbo.html http://flexorg.wip3.adobe.com/gumbo/ gumboplan.htm http://livedocs.adobe.com/flex/201/ html/wwhelp/wwhimpl/common/html/ wwhelp.htm?context=LiveDocs_Book_ Parts&file=behaviors_068_05.html http://www.mikechambers.com/blog/ 2008/08/27/everything-there-is-to-knowabout-flex-4-gumbo/ http://www.adobe.com/devnet/flex/

Range Class The Range class provides basic functionality for bounded values with maximum, minimum, and restricting the value to an increment. Track Base Class The TrackBase class subclasses Range and introduces the concepts of a thumb and a track for the thumb to move along. It also provides the basic functions to map values to positions in subclasses. Slider Component The Slider class is the base class for Slider controls. Slider provides basic functionality for Slider controls such as liveDragging, keyboard handling and track click handling. Spinner Component Spinner controls a value through its two buttons, incrementButton and decrementButton. These buttons use stepSize to increment or decrement the values. Numeric Stepper Component NumericStepper is a Spinner that has a TextInput companion. MXML 2009 Flex 4 will come with a new namespace. Users will be able to mix components on the same document. The old one (2006) will still be usable. Along with these improvements and key features, Flex 4 will also have automation support for Flex in AIR. The final release of Flex 4 is scheduled for the second half of 2009. Another important project that is parallel to the Gumbo release, but is not intrinsically related is the initiative to build a lightweight/ scalable framework for Flex RIA’s that would run on smart and mobile devices. The first version of this framework is scheduled for some time in 2010.

BERNARDO PINEDA Bernardo Pineda is a free-lance IT Consultant/ Developer at activ.com.mx. He is specialized in back-end programming (PHP, Java, .NET) and taking a plunge at front-end technologies (Flex, SilverLight). He is currently majoring in Computer Engineering. In his spare time he programs for fun, plays guitar and tennis, and skates. He loves John Grisham novels.

BILL VOLPE Level of difficulty

Bill Volpe is a Mobile Web Marketing Manager in New York City. He spends half of his time in front of his PC and the other half of time in front of mobile devices. In his spare time Bill enjoys developing applications for mobile, playing Texas Hold’em, and hiking the Hudson Valley. You can contact Bill directly via email: (b.volpe@gmail.com).

How to Develop Flash Games for the Nintendo Wii by Bill Volpe

Flash games, good. Nintendo Wii, good. And what happens when you put two good things together? Well, in this case, you get an excellent opportunity to develop your own Flash games for the Nintendo Wii.

t all starts with the Wiimote. The Wiimote gives Nintendo a distinct leg up over its competitors when it comes to surfing the Internet. Via Opera Powered internet browser on the Wii, users have the opportunity to access email, websites, and most importantly utilize the built in Flash Player. Since the Wiimote acts as a typical mouse when navigating websites, it also acts as a mouse within Flash applications. Therefore you can manipulate Flash games by using the Wiimote in place of your typical computer 64

mouse. So how do I create a Flash game and play it on my Wii, you ask? Well, it’s actually quite simple. Once your game is uploaded to the web you can access via Wii Browser. Simply navigate to the appropriate URL that you uploaded your game, or navigate to http://www.wiicade.com if you are utilizing Wiicade’s web server. Enjoy, and please feel free to send me a link to any cool games that you may develop!

01/2009 (3)

Nintendo Wii

Downloading the Opera Browser Download the Opera Browser from the Wii Shop Channel. Yes, I know it costs 500 Wii Points, but

02 Downloading Adobe Flash CS3 You will need a copy of Adobe Flash CS3 (or any version capable of ActionScript 2.0 or higher) in order to create Flash files. You can download a free 30 day trial of Flash CS3 from Softpedia: http:// www.softpedia.com/get/Internet/WEB-Design/ Flash/Adobe-Flash.shtml. In addition Adobe has just released a trial version of Adobe Flash CS4 which can be found here http:// www.adobe.com/go/tryflash.

Creating a New Document Open up Flash CS3, and create a new Flash Document with the following settings: Set the height to 800px, set the width to 500px. Frame rate 12fps. 01/2009 (3)

Books review

Foundation Flash CS4 for Designers

Authors: Tom Green, David Stiller Language: English Paperback: 650 Pages ISBN-10: 1-4302-1093-1 ISBN-13: 978-1-4302-1093-1 Website: www.friendsofed.com Publisher: Apress company

f you’re a Flash designer looking for a solid overview of Flash CS4, this book is for you. Through the use of solid and practical exercises, you will soon master the fundamentals of this latest edition of the Adobe Flash authoring tool. Using a series of carefully developed tutorials, you will be led from basic Flash CS4 techniques to the point where you can create animations, MP3 players, and customized Flash video players in no time. Each chapter focuses on a major aspect of Flash, and then lets you take the reins in a „Your Turn” exercise to create something amazing with what you’ve learned. This book focuses on the core skill set you need to feel at home with Flash CS4, and also introduces you to some of the biggest names in today’s Flash community through interviews and actual “How To” examples, so you can learn from the masters. You will start by studying the Flash CS4 interface, and while you’re at it, you’ll be guided toward mastery of the fundamentals, such as movieclips, text, and graphics, which will lead you into some of the more fascinating aspects of Flash, including audio, video, animation, and 3D transformations. By the time you finish, you will have created an MP3 player and a Flash video player, been introduced to the basics of ActionScript 3.0, learned how to combine Flash with XML,

styled Flash text with CSS, created animated scenes, and worked your way through a host of additional projects. All of these exercises are designed to give you the knowledge necessary to master Flash CS4 from the ground up. If you’re already a seasoned Flash designer, this book will get you up to speed with the latest version in relatively short order. This book covers all of the new Flash CS4 features, such as the new animation and 3D tools, the new Adobe Media Encoder, and a pair of the coolest new additions to the Tools panel: a Spray Brush tool and a Deco tool. In this book, you’ll learn: • How to create effective animations using the new Motion Editor and animation tools • How to use the new 3D features to animate objects in 3D space • Best-practice tips and techniques from some of the top Flash practitioners on the planet • How to create captioned video and full-screen video, and deploy HD video using Flash • Techniques for using the Flash UI components as well as XML documents to create stunning,interactive presentations

01/2009 (3)