Handout for CS160 Discussion Session A 50 Minutes Walkthrough for Adobe Flash/Flex 1 A 50 Minutes Walkthrough for Adobe Flash/Flex Jingtao Wang, [email protected] Disclaimer This document is written by Jingtao Wang for the CS160 class at UC Berkeley in fall 2008. This document focuses on several products from Adobe because most students indicated their personal preferences on such technologies during an in‐class survey conducted in September 2008. This document and the corresponding discussion session should not be interpreted as an endorsement to related Adobe products by the class instructor or the TA. Neither the instructor nor the TA has any direct or indirect financial relationships with Adobe. The instructor and the TA encourage students in CS160 to choose whatever environments that most group members are comfortable with for their group projects. What’s the difference between Adobe Flash and Adobe Flex? Due to the popularity of YouTube and embedded advertisement banners, you have no doubt seen Adobe Flash animations on the Internet, and have some idea of what they can do. You may have also heard the buzzword RIA (Rich Internet Application) in recent years. Flash and Flex are tools for creating web based animations and RIAs; competing tools/environments include AJAX/DHTML, SilverLight, JavaFx and Java Applet. There are two products fr om Adobe that can generate Flash animations/RIAs: Adobe Flash (the most recent version is CS 3, a.k.a. version 9.x), and Adobe Flex (the most recent version is 3.x). Both products can generate .swf files that can be embedded in web pages and played by Adobe Flash Player plugins in a web browser. Adobe Flas h is a story‐board style environment that is more designer friendly – a major portion of functions can be completed by designers via drag and drops over an editing stage and a timeline. Programmers can also add ActionScript code in a code editing window when necessary. Adobe Flex Builder is an IDE style environment that is more programmer/code fr iendly. Adobe Flex Builder doesn’t have the interactive story board function provided by Adobe Flash, but it has a better code editor/debugger based on Eclipse, and a better UI library for building RIA applications. Adobe Flash and Adobe Flex can complement each other – the ActionScript code can be shared in both Flash and Flex projects if environment specific libraries are not used, modules created in Flash can be imported/accessed in Flex and vice versa. Why Flash/Flex? In the con text of serious games, you get the following advantages if you choose Flash/Flex (when compared with ‘vanilla’ programming environments such as C/C++, Java). 1. Built‐in support for bitmap images, vector graphics, audio and video. 2. Built‐in support for commonly used game functions such interactive sprite animation/clipping, tile scrolling and hit detection. Handout for CS160 Discussion Session A 50 Minutes Walkthrough for Adobe Flash/Flex 2 3. Easy to deploy and cross platform – the Flash player supports all major OSes (Windows, Mac OS, Linux, FreeBSD and Solaris) and browsers (IE, Firefox, Opera, Safari and Chrome). If you create a Flash Player 7.0 compatible game, you can eve n play it on Nintendo Wii, SONY PSP and many cell phones. Some interesting websites that use and demonstrate capabilities of Adobe Flash/Flex • Youtube.com • The StreetView function in Google Maps • The stock price visualizer in Yahoo Finance and Google Finance • SlideRocket.com – a Flex‐based Presentation creation/sharing RIA • Buzzword.com – a Flex‐based word processing RIA • Blist.com – a Flex‐based spreadsheet RIA • Photoshop Express – http://www.photoshop.com/express • Last.fm http://Last.fm • Pandora Radio http://www.pandora.com Notes for Adobe Flash CS3 1. Source files include .fla and .as. You can embed ActionScript code snippet directly in .fla files, but the TA s trongly encourages you to put any ActionScript code snippet longer than 15 lines into a separate .as file and then import the .as file from the .fla file. The target file is in .swf format. 2. There are two different flavors of ActionScript in use nowadays – 2.0 and 3.0. ActionScript 2.0 is accompanied with Flash 7.0. The syntax of ActionScript 2.0 is similar to JavaScript and is not fully object oriented. If you want to create an application that can run on SONY PSP, Nintendo Wii or some cell phones, you need to use ActionScript 2.0 at this time. ActionScript 3.0 is accompanied with Flash 9.0 (CS3) and Adobe Flex and it’s a fully object oriented language. ActionScript 3.0 is significantly easier to learn and use than ActionScript 2.0; The performance of ActionScript 3.0 runtime is claimed to be 2‐5 times faster than ActionScript 2.0, so ActionScript 3.0 is always a better choice if you do not have to run your application on game consoles and cell phones. 3. Key frames are stages/story‐boards that users can manipulate or add interactive elements. Normal frames in Flash are automatically managed by the Flash environment. Key frames can be used to host different states of an application/game. Handout for CS160 Discussion Session A 50 Minutes Walkthrough for Adobe Flash/Flex 3 4. Storyboard‐generated animation in Flash is layer based, not element/component based. If a user needs to move two on‐screen elements in different directions at the same time, put them in different layers. Layering is a powerful method to organize on‐screen elements, if you are using Flash to create your games, it’s not uncommon to have more than 15 user created layers. You are very likely to use the “mask layer” feature if you are creating a game. 5. Flyout menus on the Tool panel can be accessed by press and hold the left mouse button. 6. Both JSON and XML can be used to exchange data with a server (this technique also applies to Adobe Flex). 7. If you are using ActionScript 2.0, most likely your in game sprite will be a sub‐class of the MovieClip class. If you are using
View Full Document
Unlocking...