ActionScript 3.0 ( Program workspace/overview )

1. Thomas Lövgren Flash developer, designer & programmer (HUMlab & Kulturverket) thomas.lovgren@humlab.umu.se Introduction to ActionScript 3.0(Program workspace/overview) “What is Flash?" At first, said it was hard to sum that up in just a few words.Then I thought for a moment and replied that Flash was a "powerful animating and programming tool...”

2. Why learn Flash & programming?(as a Interaction Designer) Flash is the leading tool/technique for creating multimedia, applications, presentations, games on Internet – a platform for developing prototypes, desktop applications and mobile systems Examples of general usage for a designer: Presentations / online portfolio Video applications for design-projects Concept design (with basic interactivity/navigation) Interaction interfaces Prototype development (usability tests) Working in project-teams (communicate with/understand programmers) Physical/tangible computing: Sensors/Phidgets, webcam, Wii-remote etc. and more….

3. Program versions Flash CS3 (March 27, 2007) Brand New Interface, New and Improved Flash Video Importer Improved Skinning of Components, Exporting Motions and Animations, Import Photoshop Files Flash CS4 (October 15, 2008) Object-based animation, Inverse kinematics with the Bones tool, 3D transformation, Motion editor, Motion presets, Metadata (XMP) support, Authoring for Adobe AIR, XFL support, Adobe Kuler panel, H.264 support

4. ActionScript versions • ActionScript 2.0 (Flash 7 MX 2004) • Objectoriented, classes, objects, inheritance, components etc • ActionScript 3.0 (2006) • Faster, cleaner, more powerful, easier to debug, more feature rich, strict and secure • Expands Flash Player API (The Flash Player API is the set of classes, objects, functions, and properties that come built into Flash Player)

5. New features in A3 int and uint data types New display list model New event model E4X (XML) Runtime exceptions Runtime variable typing Sealed classes Method closures Regular expressions Namespaces

6. AS3 Language package/structure The concept of Classes and Objects is an important part in AS3, basically the whole language package is based on various classes with special tasks Flash built-in classes (language package) User defined classes What is a Class? What is an object?

7. Classes & Objects A class is a self-contained description for a set of services and data Example Think of a blueprint for a House If the blueprint is the Class, then the House is the Object From the House Class, we can create as many House Objects we want (with different properties) Every new House Object is a new Instance of the House Class

8. File types & formats Create a New Project File (ActionScript 3) Or... Create a New ActionScript Class File (ActionScript 3) FLA: The Project File (export will generate the .swf file) SWF: The exported program file (embedded in HTML) AS: ActionScript Class File (Built-in or user defined class files) FLV: Flash Video File

9. Flash CS3 Workspace 6 1 2 7 4 8 9 5 • 1. Menu • 2. Tool panel • 3. ActionScript panel • 4. Timeline (main) • 5. Properties/parameters/output • 6. Main toolbar • 7. Align/Info/Transform • 8. Color/swatches • 9. Components • 10. Library • 11. Main stage • 12. Document Properties • 13. Frames/tween • 14. Object on stage Export movie: Ctrl + Enter Colors and Workspace layout can be saved!

10. ActionScript Panel 6 3 5 1 7 4 2 8 • 1. Packages/Script Library • 2. Script/Symbol(s)/quick navigation • 3. Topmenu • 4. Code/Composing section • 5. Script Assist • 6. Right menu • 7. Find and Replace • 8. Help menu

11. General Tips & Recommendations Here is a couple of useful tips, while working with Flash/programming • ActionScript/Syntax structure • Library & Stage elements • Document Properties & Framerate • Save workspace Layout & Colors • Optimize (filesize) • Publish Settings / Publish movie • Project Versions / Version Control • Naming elements • Layers • Frames • Comments • Trace Command • Suffix and Code Hinting • Pseudo-code

12. Naming elements It’s recommended to have an intuitive naming structure for your elements (movieClips, buttons, frames, layers, components etc) Use unique names Keep names as short as possible while retaining clarity Start with a lowercase letter Use mixed case for concatenated words Don't use the same element name with different cases Tip! Practical to organize every project the same way

13. Layers Separate ActionScript layer and Separate layers for each element group (intuitive naming) Layers can be locked Folders for layers

14. Frames Frame names (intuitive naming) Frames for navigation/systems AS methods for jumping between Frames (gotoAndStop(”main”)

15. Comments Line comments and Block comments Make the code more understandable Tip: use comments!

16. Trace command A testing and debugging command for quick feedback Places any relevant text into the Flash Output panel Only available at author-time, and has no use at runtime For example, the trace command could be useful for testing: a loop, function, or a loading process

17. Suffix and code hinting (1/2) By using suffix we get a codehint for that specific object A suffix is written with an underscore character [_] For example, for a MovieClip it looks like: myMovieclip_mc

18. Suffix and code hinting (2/2) A list of some useful suffixes (AS2 and AS3):

19. Pseudo-code Pseudo-code is a structured list for describing tasks by algorithms It allows the designer to focus on the logic of the algorithm, without being distracted by details of language syntax Organize your thoughts, and break the main tasks into smaller ones Useful in all phases (Planning, design, construction, test & documentation) Writing pseudo-code WILL save you time in the end! if credit card number is valid execute transaction else show a generic failure message end if I get up Get in the showerFind something to wearEat Look at tvEat Brush teeth Go to skool

20. Syntax Structure It’s highly recommended to use a good programming/syntax structure (that feels comfortable) The program reads/executes the code from top to bottom Tip! Use the same ”your” syntax structure in every project

21. Library & Stage elements Folders with intuitive naming in library (large projects) Same naming structure for objects on stage can be used

22. Document Properties & Framerate Dimensions and framerate of the movie can be set in the Document Properties panel Framerate (fps) Frames per second (12 fps movie: 12 times a second) The default document setting of 12 fps is often too slow for tween animations, resulting in "jerky" motion SWFs published to the same fps, will run slower on the Mac Flash Player Recommended framerate: 25-31 But of course most computer processors cannot keep up with a frame rate higher than 31 fps

23. Text Fields There are basically three different text field types in Flash Static Text: Animations, common use, standard fonts Input Text: Input-text, forms, passwords, variables Dynamic Text: Dynamic text, HTML-text, selectable/copy text, outputs, non-standard fonts (embed fonts), scrolling text, loading data by using : Textfile XML Database (PHP, ASP)

24. Flash Player Adobe Flash Player, is a free software application (browser plugin) which allows the playing of standalone Adobe Flash (SWF) multimedia files Available for Windows, Linux, Solaris, Mac OS X and various Mobile operating systems • Webbrowsers: Internet Explorer, Mozilla Firefox, Opera, and Safari on selected platforms • Latest version: Adobe Flash Player 10 (version 10.0.32.18) (July 2009) (Critical security updates)

25. Flash and Security Flash Security Document: http://www.adobe.com/devnet/flashplayer/articles/flash_player_9_security.pdf Flash Player security and privacy: http://www.adobe.com/products/flashplayer/security/

26. Information & help • Flash Documentation (Internet) ActionScript Language Reference http://www.adobe.com/support/documentation/en/flash/ http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/index.html http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/ • Flash Help file: Local on computer (if installed) • Flash/ActionScript Webbsites & Forums • Download and study exemples • Blogs • Internet (googling)

27. Links • ActionScript Language Reference http://www.adobe.com/support/documentation/en/flash/ http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/index.html http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/ • Flashkit.com - movies, tutorials, forum etc http://www.flashkit.com/ • Actionscript.org - movies, tutorials, forum etc http://www.actionscript.org/ • Kirupa.com - movies, tutorials, forum etc http://www.kirupa.com/ • Flash Security Document http://www.adobe.com/devnet/flashplayer/articles/flash_player_9_security.pdf • Accessibility http://www.adobe.com/accessibility/products/flash/