DDM - Design for Digital Media
Class 11 - Flash Animatic for Storyboards
Class: presentation of Storyboards, view engaging sites that use Flash, discussion & activity
Flash - what's it for?
Examples of Flash Art, Design & Games
Here are some of my favourite Flash sites:
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:
Lab: Flash exercise - intro to timeline and key-frames for animatic development Project work, Flash exercise - simple button navigation for animatic
4pm - attend a talk by guest speakers from Cake Industries in room 16.16
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).
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.
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.
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:
Other Things to Remember
You should be continuing to work on the following Assessment Tasks:
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.