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...”
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….
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
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)
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
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?
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
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
Flash CS3 Workspace
6
1
2 7
4
8
9
5
1. Menu 6. Main toolbar 11. Main stage
2. Tool panel 7. Align/Info/Transform 12. Document Properties
3. ActionScript panel 8. Color/swatches 13. Frames/tween
4. Timeline (main) 9. Components 14. Object on stage
5. Properties/parameters/output 10. Library
Export movie: Ctrl + Enter Colors and Workspace layout can be saved!
ActionScript Panel 6
3
5
1
7
4
2
8
1. Packages/Script Library 6. Right menu
2. Script/Symbol(s)/quick navigation 7. Find and Replace
3. Topmenu 8. Help menu
4. Code/Composing section
5. Script Assist
General Tips &
Recommendations
Here is a couple of useful tips, while working with
Flash/programming
• Naming elements • ActionScript/Syntax structure
• Layers • Library & Stage elements
• Frames • Document Properties & Framerate
• Comments • Save workspace Layout & Colors
• Trace Command • Optimize (filesize)
• Suffix and Code Hinting • Publish Settings / Publish movie
• Pseudo-code • Project Versions / Version Control
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
Layers
Separate ActionScript layer and
Separate layers for each element group (intuitive naming)
Layers can be locked
Folders for layers
Frames
Frame names (intuitive naming)
Frames for navigation/systems
AS methods for jumping between Frames (gotoAndStop(”main”)
Comments
Line comments and Block comments
Make the code more understandable
Tip: use comments!
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
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
Suffix and code hinting (2/2)
A list of some useful suffixes (AS2 and AS3):
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 I get up
else Get in the shower
show a generic failure message Find something to wear
end if Eat
Look at tv
Eat
Brush teeth
Go to skool
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
Library & Stage elements
Folders with intuitive naming in library
(large projects)
Same naming structure for objects on stage
can be used
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
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)
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)
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/
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)
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/