Flash 301: Actionscript Rookie

Delegates should have previously attended the Flash 101 Rookie and Flash 201 HotShot courses or have similar industry experience. They will benefit from knowledge of other web programming languages such as JavaScript, Java, C# etc.

On day 1 you will learn the how to manipulate you visual design using ActionScript, apply filters programmatically and adding mouse interactivity and animation.

On day 2 you will about object oriented coding in ActionScript3 and how this can be used in conjunction with design to produce fast paced and independent workflow.

On the final day you will put all this knowledge into action building a microsite project made up of many separate documents where preloaders and progress are key and loading external content vital to its success.

Day 1 – Introducing Actionscript

Introducing Actionscript

• a brief history of flash
• Actionscript 123
• building a flash file
• exploring the document settings
• adding code on the timeline
• layers, organization and good structure

The Actionscript Syntax

• adding comments
• variables and assigning memory
• data types and assigning values, String, Number, int, uint, Boolean
• complex data types, instantiation an Date
• trace – your best friend in flash development
• breakpoints, debugging and the downloads

Controlling our Visual Design with our Code

• the importance of instance names
• feeling your way in the dark
• strong typing and defining aliases in code
• using getChildByName to access the ‘named’ objects
• casting – giving flash a hint
• modifying a movieclip’s properties, x, y, alpha, scaleX, scaleY, rotation
• saving time (but not effort) with with

All the Worlds a Stage

• the width and height of the stage
  *some useful properties, frameRate, fullScreenWidth, fullScreenHeight, displayState, wmodeGPU

Using the Stage Dimensions

• randomizing properties, x (Math.random() * this.stage.stageWidth) etc
• its no fun with just 1 – the for loop and numChildren
• that’s great, but what if we want 142

Tidying up the Code

• functions to do stuff
• call the functions
• passing an object to a function

If you can do it in Design

• we’ve seen alphas
• what about a tint
• importing extra libraries
• filters such as bevel
• drop shadow and blur
• introducing arrays
• some simple shorthand and more formal instantiation

Adding Mouse Interaction

• asking questions ‘an if and an is’
• the buttonMode property
• adding event listeners (the trickiest of all)
• event handling functions and the game of catch
• back to trace
• event.target

Controlling the Flow

• stopping the movie
• making it start again and designing a button to do it
• changing the mouse pointer
• adding an audible click using the code

Making Interaction More Interactive

• mouse down and mouse up
• enabling drag and drop
• limiting the drag area
• watching out for classic problems
• bringing our item to the top
• adding and removing a drop shadow

Scripted Animation Using the Tween Class

• importing the necessary
• on drop. plummet
• its ok, but where’s gravity gone? – easing to the rescue

Day 2 – An Orientation to Object Oriented Development

Drawing is so passe

• when we draw we create an object, can we do it in code?
• our first class
• extending code to save time and effort
• the constructor function
• shapes and the drawing api
• this is all a bit conceptual, let’s put one on the stage
• making our shape randomly position itself
• applying a gradient fill with code
• applying a tint in a random colour

Perhaps this is a bit Extreme

• Design <→ Develop workflow
• draw in the library, control behaviour in code
• our second class
• public and private instance variables
• reintroducing our randomness
• add many from the stage and see the code take charge

So if we can Inherit Behaviour

• he concept of inheritance
• a simple UML diagram
• sneaking something in the gap
• writing a ‘drag and drop’ movieclip class
• applying this to our class using inheritance
• testing the behaviour

Controlling the Whole Movie

• if we can control each library item, can we control the movie?
• getting the code off the timeline
• the document class – a massive movieclip
• loading and playing an mp3 bed
• controlling the volume of the audio
• event listeners and the id3 meta data in the mp3

Allowing Our Objects to Move

• can we give an object motion?
• instance variables and introducing setters/getters
• waiting until our object is on the stage
• the ‘enter frame’ event
• handling the event in a protected function
• using the Point class to help with the trigonometry
• checking we’re still on the stage
• apply the behaviour to some library items as the ‘base class’

Keeping Track of Each Other

• instance versus class variables
• maintaining a list in a static variable
• iterating through the array on enter frame
• performing a hit test
• handling the collision
• notifying the parent container
• handling this notification

Watching Some Video

• building a simple interface
• toggling the play/pause button
• displaying the flv filename
• allowing our movie to change the filename
• getting the video to work

Watching Ourselves

• using the camera
• taking a snapshot
• bitmaps and bitmapdata
• using the UILoader class to display the snapshot

Day 3 – Working with an Entire Project

Working in a Project

• creating a flash project
• creating and setting our default document
• coming up with a design
• building our scene
• working in layers
• buttons, movieclips and navigation
• splitting out our pages into modules
• loading them in with the UILoader
• adding our document class and working in folders

Building a Preloader

• building a preloader animation
• adding a scene for it
• the bandwidth profiler gives it all away
• ‘export for Actionscript3’ and the compiler settings
• writing the ‘PreloadedDocument’ base class
• implementing the base class with inheritance
• testing the movie and simulating the download

Tracking the Progress

• creating the ‘ProgressDisplay’ movieclip
• discussing the design
• building the components and naming the instances
• adding it in and naming it!
• writing the code to control it
• testing the movie and simulating the download

Building Our Pages as Separate Movies

• working with multiple swfs
• adding the movies to the project publish list
• designing the scenes
• implementing our preloader and progress
• testing the movies individually

Implementing the Navigation

• listening for mouse events
• event.target and the switch statement
• getChildByName and the UILoader
• loading the correct page
• testing the movie and simulating the download

Dynamically Loading Text

• The Home document class
• changing our static text to be dynamic
• getChildByName and setting the text programmatically
• font embedding
• extracting our text into an external file
• adding some html formatting to the text
• loading the text from the file
• tracking the load complete event
• displaying the text in the dynamic text box
• exploring the html formatting
• revisiting our font embedding
• adding scrollable functionality to the text box

Going Even Further

• we want to build a list of products
• building the list in another fla
• implementing the preloader
• using a scroll pane to load the content
• testing the project and simulating the download

Bonus Topic – Loading XML Data

• loading some xml, after all its only text
• breaking it down and grabbing what we want
• looping through and tracing out the data
• homework – try and build the products list dynamically