Click here to load reader

ActionScript 3.0 ( Program workspace/overview )

  • View
    41

  • Download
    0

Embed Size (px)

DESCRIPTION

Thomas Lövgren Flash developer, designer & programmer (HUMlab & Kulturverket) [email protected] 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 - PowerPoint PPT Presentation

Text of ActionScript 3.0 ( Program workspace/overview )

  • ActionScript 3.0(Program workspace/overview)

    Thomas LvgrenFlash developer, designer & programmer (HUMlab & Kulturverket)[email protected] 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 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 portfolioVideo applications for design-projectsConcept design (with basic interactivity/navigation)Interaction interfacesPrototype development (usability tests)Working in project-teams (communicate with/understand programmers)Physical/tangible computing: Sensors/Phidgets, webcam, Wii-remote etc.and more.

  • Program versionsFlash CS3 (March 27, 2007)Brand New Interface, New and Improved Flash Video ImporterImproved 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 versionsActionScript 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 A3int and uint data typesNew display list model New event modelE4X (XML)Runtime exceptions Runtime variable typingSealed classes Method closuresRegular expressions Namespaces

  • AS3 Language package/structureThe concept of Classes and Objects is an important part in AS3, basically the whole language package is based on various classes with special tasksFlash built-in classes (language package)User defined classes

    What is a Class? What is an object?

  • Classes & ObjectsA class is a self-contained description for a set of services and data ExampleThink of a blueprint for a HouseIf 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 & formatsCreate 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 FileOr...

  • Flash CS3 WorkspaceExport movie: Ctrl + EnterColors and Workspace layout can be 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

    12457896

  • ActionScript Panel1. Packages/Script Library2. Script/Symbol(s)/quick navigation3. Topmenu4. Code/Composing section5. Script Assist

    6. Right menu7. Find and Replace8. Help menu

    12345678

  • General Tips & RecommendationsHere 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

  • Naming elementsIts recommended to have an intuitive naming structure for your elements (movieClips, buttons, frames, layers, components etc)Use unique namesKeep names as short as possible while retaining clarityStart with a lowercase letterUse mixed case for concatenated wordsDon't use the same element name with different cases

    Tip! Practical to organize every project the same way

  • LayersSeparate ActionScript layer and Separate layers for each element group (intuitive naming)Layers can be lockedFolders for layers

  • FramesFrame names (intuitive naming)Frames for navigation/systemsAS methods for jumping between Frames (gotoAndStop(main)

  • CommentsLine comments and Block commentsMake the code more understandableTip: use comments!

  • Trace commandA testing and debugging command for quick feedbackPlaces any relevant text into the Flash Output panel Only available at author-time, and has no use at runtimeFor 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 objectA 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-codePseudo-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 syntaxOrganize 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 messageend if

    I get up Get in the shower Find something to wear Eat Look at tv Eat Brush teeth Go to skool

  • Syntax Structure Its highly recommended to use a good programming/syntax structure (that feels comfortable)The program reads/executes the code from top to bottomTip! Use the same your syntax structure in every project

  • Library & Stage elementsFolders with intuitive naming in library (large projects)Same naming structure for objects on stage can be used

  • Document Properties & FramerateDimensions and framerate of the movie can be set in the Document Properties panelFramerate (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" motionSWFs published to the same fps, will run slower on the Mac Flash PlayerRecommended framerate: 25-31 But of course most computer processors cannot keep up with a frame rate higher than 31 fps

  • Text FieldsThere are basically three different text field types in Flash

    Static Text: Animations, common use, standard fontsInput Text: Input-text, forms, passwords, variablesDynamic Text: Dynamic text, HTML-text, selectable/copy text, outputs, non-standard fonts (embed fonts), scrolling text, loading data by using :TextfileXMLDatabase (PHP, ASP)

  • Flash Player Adobe Flash Player, is a free software application (browser plugin) which allows the playing of standalone Adobe Flash (SWF) multimedia filesAvailable 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 & helpFlash 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.htmlhttp://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/

    Flash Help file: Local on computer (if installed)Flash/ActionScript Webbsites & ForumsDownload and study exemples BlogsInternet (googling)

  • LinksActionScript Language Referencehttp://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/

    Flashkit.com - movies, tutorials, forum etchttp://www.flashkit.com/

    Actionscript.org - movies, tutorials, forum etchttp://www.actionscript.org/

    Kirupa.com - movies, tutorials, forum etchttp://www.kirupa.com/

    Flash Security Documenthttp://www.adobe.com/devnet/flashplayer/articles/flash_player_9_security.pdf

    Accessibilityhttp://www.adobe.com/accessibility/products/flash/

    *Tid: ca 1,5 timme 10 talet exempelhttp://www.wiiflash.org/http://blogs.zdnet.com/Stewart/?p=336http://en.wikipedia.org/wiki/Adobe_Creative_Suite (release)http://www.adobe.com/products/flash/features/?view=topnewhttp://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS9F717870-8AED-438d-B324-44ACCE6871E8a.html*Project Versions / Version Control (CVS, SVN, TortoiseCVS)

    *http://en.wikipedia.org/wiki/Pseudocodehttp://www.unf.edu/~broggio/cop2221/2221pseu.htmhttp://minich.com/education/wyo/stylesheets/pseudocode.htmhttp://users.csc.calpoly.edu/~jdalbey/SWE/why_pdl.htmlhttp://cnx.org/content/m18649/latest/http://mrpatty.blogspot.com/2009/01/algorithms-and-pseudocode.htmlFrameratehttp://www.communitymx.com/content/article.cfm?page=2&cid=C1379http://en.wikipedia.org/wiki/Flash_Playerhttp://en.wikipedia.org/wiki/Adobe_Creative_SuiteFlash Player se

Search related