Flash Flash ActionScriptActionScript

Thomas Lövgren – Flash developerHUMlab & Kulturverketthomas.lovgren@humlab.umu.se

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...”

Course structure ActionScript Lectures w. 37-38ActionScript Lectures w. 37-38 Project w. 39 – 40Project w. 39 – 40

Lectures – introducing conceptsLectures – introducing concepts Exercises – following lectures Exercises – following lectures Discussions – following lectures & exercisesDiscussions – following lectures & exercises

• Course literature: Internet & Flash documentation etcCourse literature: Internet & Flash documentation etc• Flash video - tutorials (in Swedish)Flash video - tutorials (in Swedish)

http://www2.tfe.umu.se/systemteknik/webbteknik/flash/content.html

Why learn Flash & programming?(as a designer)

Flash is the Flash is the leadingleading tool/technique for creating tool/technique for creating multimedia, presentations, games on Internet – and a multimedia, presentations, games on Internet – and a platform for developing prototypes, desktop platform for developing prototypes, desktop applications and mobile systemsapplications and mobile systems

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 Prototype development (usability tests)Prototype development (usability tests) Working in project-teams (communicate with/understand Working in project-teams (communicate with/understand

programmers)programmers) Wii Remote control (WiiFlash), sensors, webcam etc. Wii Remote control (WiiFlash), sensors, webcam etc. and more….and more….

Script overwiewScript overwiew

ActionScript 2.0 (Flash 7 MX 2004)ActionScript 2.0 (Flash 7 MX 2004)Objectoriented, objects, classes, inheritance, Objectoriented, objects, classes, inheritance,

components etc. components etc.

ActionScript 3.0 (2006)ActionScript 3.0 (2006)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

Faster, cleaner, more powerful, easier to debug, Faster, cleaner, more powerful, easier to debug, and more feature rich.and more feature rich.

Program workspaceProgram workspace

ActionScript PanelActionScript Panel1.1. Add a new item to the script windowAdd a new item to the script window

2.2. Find codeFind code

3.3. Find and replace Find and replace

4.4. Insert target path browserInsert target path browser

5.5. Check syntaxCheck syntax

6.6. Auto-format code (you can change formatting preferences from the Auto-format code (you can change formatting preferences from the Options menu)Options menu)

7.7. Show code hint (when at a relevant point)Show code hint (when at a relevant point)

8.8. Options menu (useful in configuring code hinting, code colors etc.)Options menu (useful in configuring code hinting, code colors etc.)

9.9. View options (line numbers, word wrap, Esc shortcut keys)View options (line numbers, word wrap, Esc shortcut keys)

10.10. Debug options Debug options

11.11. ActionScript referenceActionScript reference

12.12. Pin active script within Actions PanelPin active script within Actions Panel

13.13. Actions toolboxActions toolbox

14.14. Script navigatorScript navigator

15.15. Script pane Script pane

General & tip (1/2)General & tip (1/2) Quick export of flash movie ”ctrl + Enter”Quick export of flash movie ”ctrl + Enter” Check syntax: or with ”ctrl + t”Check syntax: or with ”ctrl + t” Use suffix (_mc, _txt, _btn…)Use suffix (_mc, _txt, _btn…)

Suffix give ’Codehints’Suffix give ’Codehints’ Separate layer for ActionScript – easier to locate Separate layer for ActionScript – easier to locate

code!code! Name your layersName your layers Layers can be lockedLayers can be locked Use folders in the library for better structureUse folders in the library for better structure Save your work often!Save your work often!

trace(”message”)trace(”message”) Print message in the output windowPrint message in the output window

Comment!Comment! // – a single row// – a single row /* … */ – piece/* … */ – piece

Use frames instead of scenes (ev. scene for Use frames instead of scenes (ev. scene for ”preloader”)”preloader”)

Colors and Workspace settings could be savedColors and Workspace settings could be saved Publish settings: Export, Flash player version Publish settings: Export, Flash player version Simulate downloading: Export: View/Simulate Simulate downloading: Export: View/Simulate

DownloadDownload Framerate: fps, frames per second Framerate: fps, frames per second

General & tip (1/2)General & tip (1/2)

Information & helpInformation & help• Flash documentation (Internet) Flash documentation (Internet) ActionScript Language ReferenceActionScript Language Reference http://www.adobe.com/support/documentation/en/

flash/

• Flash ’Help file’: Local on computer (if installed)Flash ’Help file’: Local on computer (if installed)• Webbsites: Flashkit.com, actionscript.org etcWebbsites: Flashkit.com, actionscript.org etc• Forum: Flashkit.com, Flash-db.comForum: Flashkit.com, Flash-db.com• Download and study exemples Download and study exemples • BlogsBlogs• Internet (googlingInternet (googling))

LinksLinks• ActionScript Language ReferenceActionScript Language Reference

http://www.adobe.com/support/documentation/en/flash/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/

• AccessibilityAccessibilityhttp://www.adobe.com/accessibility/products/flash/http://www.adobe.com/accessibility/products/flash/

• SoundSoundhttp://www.kennybellew.com/tutorial/index.html#index.htmlhttp://www.kennybellew.com/tutorial/index.html#index.html

• VideoVideohttp://www.adobe.com/devnet/flash/articles/video_guide.htmlhttp://www.adobe.com/devnet/flash/articles/video_guide.html

• Components (external)Components (external)http://www.flashcomponents.net/http://www.flashcomponents.net/