Flash 201: HotShot

Adobe Authorised Courses

Take your Flash Designer skills to the next level and certify as an Adobe Certified Associate in Flash

Designers are often faced with the same Flash problems, this course is aimed at helping designers to structure their designs well in Flash and to integrate with ActionScript3 code written by development team members. The course breaks down into 2 distinct sections, the first looks at advanced design and animation techniques exploring some of the latest features of Flash and design best practice, the second looks at the design <→ develop workflow in Flash and ActionScript3 through a series of workshop examples where design is structure to work in harmony with development.

You will also practice and take the Flash Adobe Certified Associate (ACA) exam at the end of the class. Get recognised for your new skills. Get Certified.

This course is aimed at graphic designers who have a firm understanding of the basics of Flash design having attended our Flash 101 – Rookie course or through similar industry experience and who want to take their Flash skills up to the next level working more heavily with interactive content and development workflow.

Course Description

Delegates should have attended the Flash 101 – Rookie course or have a similar level of industry experience before considering attending this course.

You will learn how to
*use the motion editor for animation,
*blend modes and reflections in Flash,
*the basics of frame by frame and character animation,
*3D in Flash.

These skills will then be built upon to explore microsite design and best practice and architecture. The course is then rounded off with a workshop session where delegates solve common flash design dilemmas such as clickTags, preloaders and progress bars, photo galleries, presentations, carousels, mp3 players, e-books and 3D product visualisation.

You will also prepare for and take the Adobe Certified Associate Exam (ACA) in Flash

Day 1 – 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 and flv vs. xfl
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 2 – 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 3 – 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 Actionscript3’
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 and 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 Carousel Items movieclip and ‘export for Actionscript3’ and use the frames to determine the order
link our carousel to the developer’s code
testing the movie

An MP3 Player

building our individual components, play/pause, volume control, volume display, mute control, song title preview, player background and frequency analyser
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
arrows, zoom in, zoom out, page number display, e-book logo, footer bar, background, e-book dummy, individual pages and e-book pages collection
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