This course is aimed at designers and developers who are new to Flash and want to get to grips with the user interface and learn the basics of animation and interactivity.

To gain the most from this class, students should:

• Be familiar with Windows or Mac OS X
• Be familiar with the web and its terminology

Course materials are provided. This includes pen, note pad and a training manual as well as lunch and refreshments. Our goal is to make sure your class meets your objectives, not ours. Therefore, all of our outlines are treated as guides to help steer the workshop. We may change or alter course topics to best suit the classroom situation. A certificate will be given on completion of the course and you may also have the opportunity to sit for an accredited exam. Courses may also be customized to fit your exact requirements.

Day 1 – Introducing Flash

Introducing Flash CS4

• launching flash
• resetting the workspace
• exploring the welcome screen
• the flash files explained
• creating our first flash file
• the panels
• modifying the movie properties
• saving the file

Getting to Grips with Drawing

• strokes
• fills
• solving classic problems

Shape Interaction

• working in a single layer causes its problems
• accidental fill on fill
• but this can be useful
• stroke – fill interactions

Working in Layers

• building new layers
• locking previous layers to prevent modification
• hiding and showing layers
• outline view as an alternative to visibility
• adding shadows to our design

Spelling it out

• the text tool
• checking the properties before you type
• adding our text
• back to black
• changing the properties
• discussing the anti-alias options
• working with large blocks of text
• an example of text orientation
• breaking apart text and applying a stroke

Enhancing the Design with Images

• a simple import to stage
• let’s take a look at workflow
• a workflow for transparent content
• working with “vector” artwork

Being Symbolic ?

• the concept
• convert to symbol
• compare and discuss the symbol types
• look at color effects
• look at filters
• reuse is the key
• blend modes

Using the Mask

• importing an image
• creating a new layer
• using the grid fill deco tool
• turning it into a mask
• locking layers and preview

Tweening Time

• steps to happiness
• tweening different properties
• putting it into practise – let’s build a banner
• the magic staircase
• animating images
• “cache as bitmap”
• exploring easing and breaking up a tween

Publishing your Movie

• a quick look at publish settings
• publishing the movie
• reviewing the output

Day 2 – Getting all interactive

Back to Banners

• banner advert sizes
• let’s build a banner to brush up our skills
• alphas, movement, scale, blur
• placing backgrounds and borders on our banner
• “advertisement” text
• “transparent” corners
• creating movieclips in retrospect
• masking revisited
• using a mask in an animation
• how to add a simple link

The Building Blocks of a Simple Microsite

• building a button o
• duplicating symbols
• bringing the buttons together
• using a movieclip for the background
• sketching out the design

Building our first page

• the home page

Building the other pages

• Using scenes to separate our “pages”
• getting the content in the same place
• duplicating the title symbol and then swapping it out
• swapping out the image
• modifying the layout
• naming our scenes
• modifying behaviour with a sprinkling of script
• adding some code to make the buttons work
• sneaking in a simple preloader
• adding labels to our frames as “anchors”
• changing our publish settings to enable the anchors
• reviewing the movie and fixing any problems

Publishing the Microsite

• Publish settings and the flash player version
• Reviewing our result

Day 3 – Pushing Our Movies Further

Banner adverts

• dimensions and file sizes
• working our graphics before use
• the kuler extension
• motion tweening with the motion editor and easing
• duplicating motion to a second symbol
• motion presets
• mask layers and movieclips in retrospect

Introducing Interaction

• movieclips as buttons
• using this to create popups
• blend modes and reflections
• instance names
• scaling symbols and 9-slice view
• the scroll pane and scrolling content

Frame by Frame Animation

• illustrator as a tool
• the import process
• drawn and scanned content
• import an image series
• tracing bitmaps and optimizing curves

Character Animation and the Bones Tool
importing from illustrator and movieclips
using the bones tool
building a basic animation

Working in 3D

• first, the limitations
• using perspective to produce a different design
• gradient styles
• bitmap fills
• blend modes to darken into the distance
• movement in 3D and the motion editor
• rotation in 3D and the classic problem of completion
• publish settings and GPU acceleration

Working with XFL

• After Effects to Flash workflow
• Indesign to Flash using xfl

Getting it All Online

• using a swf in a dreamweaver page
• window modes and overlapping divs
• the code produced by flash and how to use it

Day 4 – Building Better Microsites

The Flash Project

• creating a project
• separating content into separate swfs
• the UILoader component
• backgrounds and 9-slice scaling
• libraries and runtime sharing

Building Navigation

• movieclips as buttons
• frame labels
• audio on our buttons and runtime sharing
• grouping buttons as a navigation bar
• filters revisited
• instance names
• accessibility on our buttons
• applying a document class to intercept interaction

The Home Page

• static text and anti-aliasing
• importing an image for use
• converting to a movieclip to apply a filter
• introducing dynamic text
• fixing the size and making it scrollable
• adding the all important scroll bar
• making our text and images accessible
• considering localisation of content

The About Page

• working in the library
• producing more interesting content
• don’t forget accessibility and localisation
• using the scroll pane to make it scroll

The Products Page

• building another swf
• creating each “item” as a movieclip
• using the UILoader to load images at runtime
• the download preview

The Contact Page

• using scenes for navigation
• building a more interesting navigation bar with images
• applying a class to our buttons
• duplicating the scenes
• applying a document class to resolve navigation
• importing images
• making the map more exciting with a component
• building a form to collect information
• the importance of instance names

Publishing and Previewing Our Microsite

• reviewing the publish settings
• publishing the movie
• viewing in the browser

Day 5 –
The Design <→ Develop Workflow

The Key is in the Name

• planning and communication
• the initial design prototype and the first development meeting
• symbol names and types
• instance names
• “export for actionscript” and eloquent structure

Banner Advert ClickTags

• the theory of banner advert providers
• an insight into the html
• applying a document class to our banner
• viewing the example online

A Preloader

• movie structure
• “export for actionscript”
• looking at the bandwidth profiler
• adding a preloader scene
• changing the compiler settings
• using the deco tool to produce a preloader animation
• linking to our document class
• testing the movie and simulating the download

A ProgressBar

• the progress bar plan
• working in layers
• instance names and registration points
• masks can make things look great!
• clever looping animation
• using and naming our progress bar
• linking to the class definition
• testing the movie and simulating the download

A Photo Gallery

• the prototype sketch
• preparing our photos using batch processing
• writing an xml file
• building our flash movie
• creating dummy movieclips
• dynamic text and embedding fonts
• adding backgrounds and borders
• linking in our document class
• testing the movie and simulating the download

A Presentation

• working with scenes
• adding some animation
• playing it through
• it would be nice to have some control
• applying our code from the developer
• exploring the functionality

A Simple Tabbed View

• building our tabs
• building our pages
• naming the instances
• linking the pages and tabs to the base class
• enabling the component definitions
• viewing the component inspector
• setting the parameters
• testing the movie

A 3D Carousel

• building each item as a movieclip
• building a popup as a named instance
• creating a dummy movieclip to determine width, height and position
• applying a background gradient
• compile items into a CarouselItems movieclip and “export for actionscript”
• link our carousel to the developer’s code
• testing the movie

An MP3 Player

• building our individual components
• bringing them together and naming the instances
• linking our MP3Player to the developer’s code
• enabling the component definition
• drag and drop the component into the design
• use the component inspector to set the mp3 filename

An e-Book

• building our individual components
• bringing them together and naming the instances
• linking the document to our developer’s code
• testing the movie and exploring the functionality

A 3D Loader for Product Visualisation

• building a dummy placeholder
• linking to the developer’s code
• enabling the component definition
• adding the component to the movie
• setting the 3d filename in the component inspector
• testing the movie and exploring the functionality

Flash Adobe Certified Associate Exam

• Preparation
• Exam
• Pass or fail?