DDM - Design for Digital Media
Diploma of Creative Industries (WDCI)

Teacher Name - lisa.cianci@vu.edu.au
Class Website - http://lisacianci.vucreativeindustries.com/2012/DDM

(login to the website: username = student; password = student)

Class 11 - Flash Animatic for Storyboards

Class: presentation of Storyboards, view engaging sites that use Flash, discussion & activity

Flash - what's it for?

Some say that Flash is on it's way out with new functionality in the HTML5 standard. This may be true for some aspects of web design such as simple linear animation and interactive web page interfaces, but it will be a long time before HTML5/CSS/JavaScript can emulate all the functionality that Flash has to offer. Flash is also popular for games and video deployment on the web.

Examples of Flash Art, Design & Games

Here are some of my favourite Flash sites:




kizi (flash games)

sushi cat 2

gskinner - gallery incomplet


insert silence


What are some of yours?


Online Articles on Skeuomorphism

Provide your URLs for Skeuomorphism articles, we will look at them and discuss how Skeuomorphism applies to design for digital media, following on from last week.


Introduction to Assessment Task 3 - Image gallery website project

Review the next assessment task - you don't have to start working on it yet, but you might want to start researching good image gallery sites that work for desktop / smartphone or both interface types.


Assessment Tasks to review:

  • Check Storyboard trailer Concept and rough sketches, and any work on the images thus far
  • feedback on Blogs thus far

Lab:  Flash exercise - intro to timeline and key-frames for animatic development Project work, Flash exercise - simple button navigation for animatic

Guest Speakers

4pm - attend a talk by guest speakers from Cake Industries in room 16.16



Class Exercise

Using the Flash file provided, import your JPG or PNG image files into the Flash Library, and then place them on Keyframes in the Timeline so they can be seen on the Stage.

Manipulate keyframes and the FPS (Frames per Second) property to test the speed of play back, and investigate how the Navigation buttons work with ActionScript code Functions in the Flash file. Try Publishing a SWF file to test your Animatic.

1. Open the provided Flash file Template01.fla in Flash (this is a CS4 version file but it will open ion CS5 also).

flash interface

2. Explore the Flash interface. Note the location of the Stage, Properties panel, Library panel, Actions panel and Toolbar panel. Note the Flash file Properties - how big the Stage size is (width and height in pixels) and also the speed of the Flash file playback (Frames Per Second - FPS). You can manipulate these if you want a different dimensions or speed. And the background colour of the whole file - you can change this to suit your colour scheme, or use a background image.

3. Before you import images to Flash, check your image file types and sizes. It is best to use JPG or PNG format, but you can also import Photoshop PSD files directly into Flash. I prefer to keep my Photoshop file as a working file and save out PNG or JPG images for Flash - it's much simpler. The main reason for doing this is because if I want to change something in the Photoshop file, or use it to generate multiple images for Flash, then I'm not changing the flat PNG or JPG files that Flash is linked to.

For today's exercise you don't need finished storyboards, just use any images you can grab. I will make some sample images available, or just get some off the Internet.

Working with imagery in Flash is always a balance of image quality versus small image size. An animation with lots of high quality PNG-224 images will make a very large Flash file that will play slowly compared to compressed JPG files. If you only have a few files, as with your animatics, you should be OK to use PNG-24 (which has the advantage of having transparency which the JPG format does not have).

4. Once your images are ready, you can go the the File menu in Flash and choose Import to Library. you will be able to choose multiple files that will import into the Flash application, and then be accessible in the Flash Library panel.

5. Experiment with dragging your images to the Keyframes in the Timeline. I have created this template with the timeline structure already in place, so all you should need to do is drag and drop. Depending on your Flash skills, you might want to customise this file to suit your requirements, but if you don't know Flash, you can just work with what's already there without any prior knowledge of Flash animation.

Flash can be tricky at first - especially understanding how the Timeline and Stage are related. You need to click on the Keyframe that you want in the Timeline to make sure you're in the right place, but then you drag the image from the Library to the Stage. It might take a bit of practice to get this right, but don't worry if you mess it up. You can always undo (CTRL-Z for Win, CMD-Z for Mac) or just ditch the whole file and start again.

Make sure you save your work as you go so if you really mess something up and crash the application, you can open up the last saved version of your file.

6. To test your Flash Movie, use the shortcut keys (CTRL-ENTER for Win, CMD-ENTER for Mac).When you test a Flash file, it generates the SWF file which is the "Published" Flash file that you put on the web. You should see a SWF window open with your Flash file and it should be fully interactive, and playing at the FPS speed. Navigation should be working in the SWF. Close the window to keep editing the FLA file, and test again when you're ready.

7. You can also go to the File menu and choose Publish, or Publish settings to change the settings or properties of the Flash file before publishing the final SWF. Make sure you save the FLA file as this is your working file. You can always generate another SWF file at any time, but not without the FLA master file.


Outcomes by the end of class:

Understanding of how to place images in Flash on Keyframes, and work with the Stage, Timeline, Properties Panel & Library Panel. Today's exercise should provide the skills needed to get all your storyboard images into the Flash file ready for submission by the end of next week's class.

With remaining time, work on Storyboard images for Assessment Task 2


Reading/viewing for next week:

Find some examples of excellent design online using Flash before next week's class. Write a paragraph about your favourite Flash site & why it is a good example - you can use your blog for the text and the URL links to Flash sites. I will make a list of these online resources for my DDM website.


Other Things to Remember

You should be continuing to work on the following Assessment Tasks:

AT2 - Storyboard Trailer;

AT1 - Blog (Keep adding entries to your blog)

Please see me in class if you are having any issues with assessment tasks. There will be time to work on these in class - think of the Lab session from 4-7pm as time to work on assessment tasks as well as class exercises, then you can ask me for help.