ActionScript 3.0 (Program workspace/overview)

1
ActionScript 3.0(Program workspace/overview)
Introduction to
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/navigatio
  n)
• 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

• Its 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

• Its 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/securit
  y/

26
Information help

• Flash Documentation (Internet)
• ActionScript Language Reference
• http//www.adobe.com/support/documentation/en/flas
  h/
• http//help.adobe.com/en_US/ActionScript/3.0_Progr
  ammingAS3_Flex/index.html
• http//livedocs.adobe.com/flash/9.0/ActionScriptLa
  ngRefV3/
• 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/fla
  sh/
• http//help.adobe.com/en_US/ActionScript/3.0_Prog
  rammingAS3_Flex/index.html
• http//livedocs.adobe.com/flash/9.0/ActionScriptL
  angRefV3/
• 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
  /