ActionScript 3.0ActionScript 3.0((Program workspace/overviewProgram workspace/overview))
Thomas LövgrenFlash developer, designer & programmer (HUMlab & Kulturverket)[email protected]
Introduction toIntroduction 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...”
Why learn Flash & programming?(as a Interaction Designer)
Flash is the Flash is the leadingleading tool/technique for creating multimedia, tool/technique for creating multimedia, applications, presentations, games on Internet – a platform applications, presentations, games on Internet – a platform for developing prototypes, desktop applications and mobile for developing prototypes, desktop applications and mobile systemssystems
Examples of general usage for a designer:Examples of general usage for a designer: Presentations / online portfolioPresentations / online portfolio Video applications for design-projectsVideo applications for design-projects Concept design (with basic interactivity/navigation)Concept design (with basic interactivity/navigation) Interaction interfacesInteraction interfaces Prototype development (usability tests)Prototype development (usability tests) Working in project-teams (communicate with/understand programmers)Working in project-teams (communicate with/understand programmers) Physical/tangible computing: Sensors/Phidgets, webcam, Wii-remote etc.Physical/tangible computing: Sensors/Phidgets, webcam, Wii-remote etc. and more….and more….
Program versionsProgram versions Flash CS3 (March 27, 2007)Flash CS3 (March 27, 2007)
Brand New Interface, Brand New Interface, New and Improved Flash New and Improved Flash Video ImporterVideo ImporterImproved Skinning of Components, Exporting Improved Skinning of Components, Exporting Motions and Animations, Import Photoshop FilesMotions and Animations, Import Photoshop Files
Flash CS4 (October 15, 2008)Flash CS4 (October 15, 2008) Object-based animation, Inverse kinematics with the Object-based animation, Inverse kinematics with the
Bones tool,Bones tool,3D transformation, Motion editor, Motion presets, 3D transformation, Motion editor, Motion presets, Metadata (XMP) support, Authoring for Adobe AIR, Metadata (XMP) support, Authoring for Adobe AIR, XFL support, Adobe Kuler panel, H.264 supportXFL support, Adobe Kuler panel, H.264 support
ActionScript versionsActionScript versions ActionScript 2.0 (Flash 7 MX 2004)ActionScript 2.0 (Flash 7 MX 2004)
Objectoriented, classes, objects, inheritance, Objectoriented, classes, objects, inheritance, components etccomponents etc
ActionScript 3.0 (2006)ActionScript 3.0 (2006) Faster, cleaner, more powerful, easier to debug, Faster, cleaner, more powerful, easier to debug,
more feature rich, strict and secure more feature rich, strict and secure Expands Flash Player API (The Flash Player API is Expands Flash Player API (The Flash Player API is
the set of classes, objects, functions, and the set of classes, objects, functions, and properties that come built into Flash Playerproperties that come built into Flash Player) )
New features in A3New features in A3 int and uint data typesint and uint data types New display list model New display list model New event modelNew event model E4X (XML)E4X (XML) Runtime exceptions Runtime exceptions Runtime variable typingRuntime variable typing Sealed classes Sealed classes Method closuresMethod closures Regular expressions Regular expressions Namespaces Namespaces
AS3 Language AS3 Language package/structurepackage/structure
The concept of Classes and Objects is an The concept of Classes and Objects is an important part in AS3, basically the whole important part in AS3, basically the whole language package language package is based on various classes with is based on various classes with special tasksspecial tasks Flash built-in classes (Flash built-in classes (language package)language package) User defined classesUser defined classes
What is a Class? What is an object?What is a Class? What is an object?
Classes & ObjectsClasses & Objects A class is a self-contained description for a set of A class is a self-contained description for a set of
services and dataservices and data ExampleExample
Think of a blueprint for a HouseThink of a blueprint for a House If the blueprint is the If the blueprint is the Class, Class, then the House is the then the House is the
Object Object From the House Class, we can create as many From the House Class, we can create as many
House Objects we want (with different properties)House Objects we want (with different properties) Every new House Object is a Every new House Object is a new Instancenew Instance of the of the
House ClassHouse Class
File types & formatsFile types & formats
Create a New Project File (ActionScript 3)
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
Or...
Flash CS3 WorkspaceFlash CS3 Workspace
Export movie: Ctrl + EnterExport movie: Ctrl + Enter Colors and Workspace layout can be Colors and Workspace layout can be saved!saved!
1. Menu2. Tool panel3. ActionScript panel4. Timeline (main)5. Properties/parameters/output
6. Main toolbar7. Align/Info/Transform8. Color/swatches9. Components10. Library
11. Main stage12. Document Properties13. Frames/tween14. Object on stage
124
5
7
8
9
6
ActionScript PanelActionScript Panel
1. Packages/Script Library2. Script/Symbol(s)/quick navigation3. Topmenu4. Code/Composing section5. Script Assist
6. Right menu7. Find and Replace8. Help menu
1
2
3
4
5
6
7
8
General Tips & General Tips & RecommendationsRecommendations
Here is a couple of useful tips, while working with Here is a couple of useful tips, while working with Flash/programmingFlash/programming
• ActionScript/Syntax ActionScript/Syntax structurestructure• Library & Stage elementsLibrary & Stage elements• Document Properties & Document Properties & FramerateFramerate• Save workspace Layout & Save workspace Layout & ColorsColors• Optimize (filesize)Optimize (filesize)• Publish Settings / Publish Publish Settings / Publish moviemovie• Project Versions / Version Project Versions / Version Control Control
• Naming elementsNaming elements• LayersLayers• FramesFrames• CommentsComments• Trace CommandTrace Command• Suffix and Code Suffix and Code HintingHinting• Pseudo-codePseudo-code
Naming elementsNaming elements It’s recommended to have an intuitive It’s recommended to have an intuitive naming naming
structure structure for your elements (movieClips, buttons, for your elements (movieClips, buttons, frames, layers, components etc)frames, layers, components etc) Use unique namesUse unique names Keep names as short as possible while retaining clarityKeep names as short as possible while retaining clarity Start with a lowercase letterStart with a lowercase letter Use mixed case for concatenated wordsUse mixed case for concatenated words Don't use the same element name with different casesDon't use the same element name with different cases
TipTip! Practical to ! Practical to organize organize every project the same wayevery project the same way
LayersLayers Separate ActionScript layer and Separate ActionScript layer and Separate layers for each Separate layers for each element group element group (intuitive (intuitive
naming)naming) Layers can be lockedLayers can be locked Folders for layersFolders for layers
FramesFrames Frame names (intuitive naming)Frame names (intuitive naming) Frames for navigation/systemsFrames for navigation/systems AS methods for AS methods for jumpingjumping between Frames between Frames
(gotoAndStop(”main”)(gotoAndStop(”main”)
CommentsComments Line comments and Block commentsLine comments and Block comments Make the code more understandableMake the code more understandable TipTip: use comments!: use comments!
Trace commandTrace command A testing and debugging command for quick A testing and debugging command for quick
feedbackfeedback Places any relevant text into the Flash Places any relevant text into the Flash Output panel Output panel Only available at author-time, and has no use at Only available at author-time, and has no use at
runtimeruntime For example, the trace command could be useful for For example, the trace command could be useful for
testing: a loop, function, or a loading processtesting: a loop, function, or a loading process
Suffix and code hinting Suffix and code hinting (1/2)(1/2)
By using suffix we get a codehint for that specific By using suffix we get a codehint for that specific objectobject
A suffix is written with an underscore character [_]A suffix is written with an underscore character [_] For example, for a MovieClip it looks like: For example, for a MovieClip it looks like:
myMovieclip_mcmyMovieclip_mc
Suffix and code hinting Suffix and code hinting (2/2)(2/2)
A list of some useful suffixes (AS2 and AS3):A list of some useful suffixes (AS2 and AS3):
Pseudo-codePseudo-code Pseudo-code is a Pseudo-code is a structured liststructured list for describing tasks by for describing tasks by
algorithms algorithms It allows the designer to focus on the logic of the algorithm, It allows the designer to focus on the logic of the algorithm,
without being distracted by details of language syntaxwithout being distracted by details of language syntax Organize your thoughts, and break the main tasks into Organize your thoughts, and break the main tasks into
smaller ones smaller ones Useful in all phases (Planning, design, construction, test & Useful in all phases (Planning, design, construction, test &
documentation)documentation) Writing pseudo-code WILL save you time in the end!Writing pseudo-code WILL save you time in the end!
if credit card number is validif credit card number is valid execute transaction execute transaction elseelse show a generic failure messageshow a generic failure messageend ifend if
I get up I get up Get in the showerGet in the showerFind something to wearFind something to wearEat Eat Look at tvLook at tvEat Eat Brush teeth Brush teeth Go to skool Go to skool
Syntax StructureSyntax Structure It’s highly recommended to use a good It’s highly recommended to use a good
programming/syntax structure (that feels programming/syntax structure (that feels comfortable)comfortable)
The program reads/executes the code from top to The program reads/executes the code from top to bottombottom
TipTip! Use the same ”your” syntax structure in every ! Use the same ”your” syntax structure in every projectproject
Library & Stage elementsLibrary & Stage elements Folders with Folders with intuitive namingintuitive naming in library in library
(large projects)(large projects) Same Same naming structure naming structure for objects on stage for objects on stage
can be usedcan be used
Document Properties & Document Properties & FramerateFramerate
Dimensions and Dimensions and framerateframerate of the movie can be set in the of the movie can be set in the Document Properties Document Properties panelpanel Framerate (fps) Frames per second (12 fps movie: 12 times a Framerate (fps) Frames per second (12 fps movie: 12 times a
second)second) The default document setting of 12 fps is often too slow for The default document setting of 12 fps is often too slow for
tween animations, resulting in "jerky" motiontween animations, resulting in "jerky" motion SWFs published to the same fps, will SWFs published to the same fps, will
run slower on the Mac Flash Playerrun slower on the Mac Flash Player Recommended framerate: 25-31 Recommended framerate: 25-31 But of course most computer processors But of course most computer processors
cannot keep up with a frame rate higher cannot keep up with a frame rate higher than 31 fpsthan 31 fps
Text FieldsText Fields There are basically three different There are basically three different text field text field types in types in
FlashFlash
• Static TextStatic Text: Animations, common use, standard fonts: Animations, common use, standard fonts• Input TextInput Text: Input-text, forms, passwords, variables: Input-text, forms, passwords, variables• Dynamic TextDynamic Text: Dynamic text, HTML-text, selectable/copy : Dynamic text, HTML-text, selectable/copy
text, outputs, non-standard fonts (embed fonts), scrolling text, outputs, non-standard fonts (embed fonts), scrolling text, loading data by using :text, loading data by using : TextfileTextfile XMLXML Database (PHP, ASP)Database (PHP, ASP)
Flash Player Flash Player Adobe Flash Player, is a free software application Adobe Flash Player, is a free software application
(browser plugin) which allows the playing of (browser plugin) which allows the playing of standalone Adobe Flash (SWF) multimedia filesstandalone Adobe Flash (SWF) multimedia files
Available for Windows, Linux, Solaris, Mac OS X Available for Windows, Linux, Solaris, Mac OS X and various and various Mobile operating systemsMobile operating systems
Webbrowsers: Internet Webbrowsers: Internet Explorer, Mozilla Firefox, Explorer, Mozilla Firefox, Opera, and Safari on Opera, and Safari on selected platformsselected platforms
Latest version: Adobe Latest version: Adobe Flash Player 10 (version Flash Player 10 (version 10.0.32.18) (July 2009) 10.0.32.18) (July 2009) (Critical security updates)(Critical security updates)
Flash and Security Flash and Security
Flash Security Document:Flash Security Document:
http://www.adobe.com/devnet/flashplayer/articles/flash_player_9_security.pdf
Flash Player security and privacy:Flash Player security and privacy:http://www.adobe.com/products/flashplayer/security/
Information & helpInformation & help• Flash Documentation (Internet) Flash Documentation (Internet) ActionScript Language ReferenceActionScript Language Reference http://www.adobe.com/support/documentation/en/flash/http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/index.htmlhttp://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/
• Flash Flash Help fileHelp file: Local on computer (if installed): Local on computer (if installed)• Flash/ActionScript Webbsites & ForumsFlash/ActionScript Webbsites & Forums• Download and study exemples Download and study exemples • BlogsBlogs• Internet (googling)Internet (googling)
LinksLinks• ActionScript Language ReferenceActionScript Language Reference
http://www.adobe.com/support/documentation/en/flash/http://www.adobe.com/support/documentation/en/flash/http://help.adobe.com/en_US/ActionScript/http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3_Flex/index.html3.0_ProgrammingAS3_Flex/index.htmlhttp://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/
• Flashkit.com - movies, tutorials, forum etcFlashkit.com - movies, tutorials, forum etchttp://www.flashkit.com/http://www.flashkit.com/
• Actionscript.org - movies, tutorials, forum etcActionscript.org - movies, tutorials, forum etchttp://www.actionscript.org/http://www.actionscript.org/
• Kirupa.com Kirupa.com - movies, tutorials, forum etc- movies, tutorials, forum etchttp://www.kirupa.com/http://www.kirupa.com/
• Flash Security DocumentFlash Security Documenthttp://www.adobe.com/devnet/flashplayer/articles/http://www.adobe.com/devnet/flashplayer/articles/flash_player_9_security.pdfflash_player_9_security.pdf
• AccessibilityAccessibilityhttp://www.adobe.com/accessibility/products/flash/http://www.adobe.com/accessibility/products/flash/
Recommended
