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
2. Tool panel
3. ActionScript panel
4. Timeline (main)
5. Properties/parameters/output
Export movie: Ctrl + Enter
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
Colors and Workspace layout can be saved!
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
General Tips &
Recommendations

Here is a couple of useful tips, while working with
Flash/programming
•
•
•
•
•
•
•
Naming elements
Layers
Frames
Comments
Trace Command
Suffix and Code Hinting
Pseudo-code
•
•
•
•
•
•
•
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

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
else
show a generic failure message
end if
I get up
Get in the shower
Find something to wear
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/