Download GRC 119 Assignment 6 Create a “Flash Animation” Banner Ad 1

GRC 119
Assignment 6
Create a “Flash Animation” Banner Ad
1. Brainstorm your “Ad Concept” and identify the 5 components
2. Storyboard your ad concept
3. Develop the visual components
4. Develop banner ad web animation in Flash
5. Publishing your Flash banner ad
Assignment Overview:
This week we will use Flash to create a “Banner Ad.” Banner ads are often referred to as
“Web Banners.” Banner ads or Web banners are commonly found on websites and usually
advertise a product, service, organization, or event. Flash offers a lot more flexibility versus
creating an animated Gif created in a program like Photoshop. Flash can create vector
animations which usually create a much smaller file sizes than bitmap based animations.
Flash is more flexible and customizable so it will give you the designer more options in
creating your artistic vision including be able to add audio and video. Before jumping into
Flash and creating your vision you will first need to do some planning. Your ad will need to
advertise a product, service, organization, or event. It will need to contain several key
components, a product (or main topic), a spokesperson, the environment, a logo, and a
tagline. After we identify these components we will create 5 simple storyboard slides to help
visualize our ad. Next, before animating our ad in Flash we first need to create the various
components like any graphics. You should create in PS, Illustrator, Flash etc. Our banner ad
needs to be college and employer friendly, so keep it rated PG please. Within Flash you will
need to provide examples of tweening, audio, bitmap or psd or ai file import. The max file
size for the published swf should be approx 400k. Most free web hosts like freehostia have a
max file size of around 500k. In the real world, you would probably want your swf file to be
under 40K, an ideal file size when targeting millions of people through a website or via
email.
Flash Reviewed:
Flash has been used extensively for web animations since its introduction. Flash also has
multimedia capabilities meaning users can add audio, video, bitmap graphics, vector
graphics, native psd and ai file support, and more. Flash has its own programming language
called ActionScript which enables users to create interactivity, web applications, games,
dynamically driven web content, and more.
Web Banners Explained:
For more info on banner ads or web banners see http://en.wikipedia.org/wiki/Web_banner
Step 1 – Brainstorm your “Ad Concept” and identify the 5 components
•
The first step will be to brainstorm your ad concept and sketch out a simple
storyboard onto paper
•
Our Banner Ad will need to advertise a product, service, organization, or event and
will be approximately 6 seconds long
•
For your ad, identify the following five components
1. the product (or ad topic)
2. the spokesperson
3. the environment
4. the logo
5. the tagline
•
Write down your idea for your advertisement identifying the five components
Product:
___________________________________________________________________________
___________________________________________________________________________
Spokesperson:
___________________________________________________________________________
___________________________________________________________________________
Environment:
___________________________________________________________________________
___________________________________________________________________________
Logo:
___________________________________________________________________________
___________________________________________________________________________
Ad tagline:
___________________________________________________________________________
___________________________________________________________________________
Step 2 – Storyboard your ad concept
•
Once we have written down our ad concept and have identified the 5 components we
will next need to draw out some simple storyboards
•
The purpose of storyboarding is to give us a starting point for what the ad will look
like
•
It also gives us a visualization of what we will be creating. The storyboard helps
visualize what the ad is going to look like.
•
You will need to draw the storyboard onto paper, use the templates on the next page
to help sketch out your ads story. Draw with pencil and paper. You don’t have to
worry about coloring.
•
A simple storyboard visualizes the action and shows the major changes of your story
•
Draw out a minimum of 5 storyboard images
For ideas on storyboarding check out
http://images.google.com/images?hl=en&q=storyboarding&gbv=2
or go to http://images.google.com and type storyboarding
•
Remember we are creating a very simple storyboard so don’t spend hours planning
out our 5-10 second animation
•
Remember our ad is very rectangular, you should use storyboard boxes that are the
same size, approx 728x90 pixels, the examples below have been scaled down to fit on
page
•
Here’s two dif storyboards I found on the web, http://www.fuse-studio.co.uk/?cat=14
•
Your storyboard should contain at least 5 slides but does not have to be as detailed as
the second example
•
Use the sample storyboard templates on the next page, reqs. listed below
1. Draw out a minimum of 5 storyboard slides
2. Storyboard slides represent a 5-10 second animation
3. Size your storyboard 728x90 pixels (very rectangular)
4. Storyboard should contain your ad components you identified in step 1
5. Recommended, first draw in pencil then trace over using a black pen
6. Put some info about the ad campaign at the top of your storyboard
Date: _________________________________
Client: _________________________________
Product: _________________________________
Campaign: _________________________________
•
Post a link on your website under A6 to the 5 components of your ad. You wrote
them down on page 3, step 1. Type them in word or similar program and upload to
your website. Provide a link to this document.
•
Also post a link on your website to the storyboard slides you drew in step 2. If you
drew the slides out on paper you will need to scan your storyboard and create a jpg or
png image to link to.
•
Send an email to the Instructor with the A6 links before continuing onto Step 3.
Step 3 – Develop the visual components
•
Make sure you have emailed the Instructor your A6 links to the first two documents
before continuing
•
Next you need to begin creating the various components in digital form on the
computer
•
These components will most likely be graphics or graphics files
•
Begin by creating the visual components that will be needed for your ad
1. a product
2. a spokesperson
3. the environment
4. a logo
5. a tagline
•
You can use whatever program you are most familiar to create our graphics, the most
popular would be Illustrator, Photoshop, or Flash
•
Flash allows you to import native Illustrator .ai and Photoshop files .psd
•
Flash is often best used to animate and not necessarily the most ideal to create our
artwork
•
Once you have created all the necessary visual components we can move on to the
next step where we will use flash to create our animated flash ad.
Step 4 – Develop banner ad web animation in Flash
You will need to import the various component that will be used in your ad. Import audio,
bitmaps or psd or ai files to use in your flash banner ad. Within Flash you will need to
provide examples of tweening, meaning you must have some animation. The max file size
for the published swf should be 400k. Make sure to use the required dimensions given below.
•
Open up Flash, click on the Fl icon on the dock on the computers in lab
•
Create a new flash document, File>New …>Flash File (Actionscript 2.0)
•
File>Save As> projectnamegoeshere.fla (save into an A6 folder)
•
.fla is the flash project file, it’s an editable flash project
•
On properties bar adjust Size 728px (width) x 90px (height), Background pick the
desired bg color (optional), Adjust frame rate: 12fps
The rest of this step reviews the basics of using Flash
•
Import graphics files File> Import to library, import all assets and graphics
•
You can tween (animate) in between two keyframes by clicking anywhere between
two keyframes and rt+clicking or command+clicking (mac) and selecting Shape
tween for a shape or Classic tween for any symbol. You must have two key
keyframes in order to tween.
•
Use Shape tween for any “Shape” object and use Classic tween for all other objects
•
Any object on stage can be converted to a symbol by first selecting the object and
then Modify>Convert to symbol (f8)
•
Flash has three types of symbols, Graphic symbols, Button symbols, Movie clip
symbols, all symbols have their own timelines
9 Graphic symbols are timeline dependent, when the main timeline stops then
any animation inside the graphic symbols timeline also stops
9 Movie clip symbols are timeline independent, when the main timeline stops
then any animation inside the movie clips timeline will not be affected
9 Button symbols are timeline independent but are used strictly for creating
buttons for adding interactivity to a flash movie (we are not using buttons in
this assignment)
Handy flash shortcuts:
Insert Frames
F5
Adds frames
Insert Key frames
F6
Adds a key frame
Insert Blank Key frames
F7
Adds blank key frame
Convert to symbol
F8
Converts a selected object onstage into
a symbol
•
The Copy Frames option allows you to copy a series of frames including tweens or
animations. Select a range of frames holding down the shift key to select a series of
frames, control click on highlighted frames and select the Copy Frames option. Place
cursor or play head where you want to paste frames and control+click on frame and
select the “Paste Frames” option
•
Reverse frames allows you to select a series of frames reverse them
Modify>Timeline>Reverse Frames (this will reverse the frames)
Adding Audio
•
Import audio files File>Import to library
•
Pick a common audio file like aif, wav, mp3
•
Warning, audio files can be very large in file size, look for a file under 100k if
possible
•
Note, Flash will compress the audio once it is published to a swf file
•
Within your timeline, add a new layer for audio
•
Add a blank keyframe where you want your audio to appear or play
•
Select frame with the blank keyframe
•
Drag sound from library onto stage
•
Press f5 to insert frames so that entire sound (waveform) shows
•
Within the Properties inspector verify that Sync is set to Stream
Using filters
Filters are image compositing effects used to create interesting visual effects. Filters are
used to add special effects like a bevel, blur, glow, drop shadow, and more. Filters can be
applied to text, buttons, and movie clips.
•
Select any text, button, or movie clip instance on stage
•
On the Properties inspector, expand the Filters option and click on the Add filter
button (very bottom left of properties window) and choose Drop Shadow
•
Adjust settings as desired
•
Filters can be adjusted at each keyframe.
•
Filters can also tweened so that any changes between keyframes are animated.
Motion Tween in CS4
•
The following steps explain how to create a Motion Tween in the latest version of
Flash CS4
•
Select the object you want to motion tween on the Stage, cannot be a shape
•
Choose Insert > Motion Tween or Right+click (Pc) or Ctrl+click (Mac) on the
selection or current frame and choose Create Motion Tween from the menu.
•
Note: If the object is not a tweenable object type, or if multiple objects are selected on
the same layer, a dialog box appears allowing you to convert the selection to a movie
clip symbol.
•
Drag either end of the tween in the Timeline to shorten or extend to the desired length
•
To add motion to the tween, place the playhead on a frame within the tween and then
drag the object on the Stage to a new position
•
A motion path appears on the Stage showing the path from the position in the first
frame of the tween span to the new position. Property keyframes are added for X and
Y in the frame containing the playhead. Property keyframes appear as small
diamonds in the tween span.
•
Adjust motion path so object moves in desired direction
•
To specify another position for the object, place the play head in another frame within
the tween span and drag the object on Stage to another position.
•
You can extend the tween by dragging out the edge or adding frames f5
•
The motion path adjusts to include all the positions you specify.
Step 5 - Publishing your flash banner ad
•
Preview swf animation (movie) Control>Test Movie, shortcut is Cmnd+return on mac
(Cntrl+Enter pc)
•
Verify Publish Settings File>Publish Settings, select html and swf options
•
Then publish File>Publish (shift+f12)
•
The entire animation needs to loop, it should automatically, since this is the default
setting for flash.
•
Verify that you have successfully published to your A6 folder, find folder and check
the file size for the swf file, it should be 400k or smaller, many web hosts like
freehostia have a file size limitation of 500k.
•
If the file size is too large you can try to adjust publish settings File>Publish Settings
•
Add a link on your index.html (course management page) to A6, it should link to
A6.html or whatever it was named and upload all required files to web host.
•
Add links to the 2 other required documents, your 5 ad components (typed out in
word) and storyboard (scanned and save as jpg or png)
•
Upload all required files to your webhost
Make sure you have met the major assignment requirements:
9 Animation advertises a product, service, organization, or event
9 Approximately 6-10 seconds long
9 Contains a spokesperson
9 Contains an environment
9 Contains a logo
9 Contains a tagline
9 Dimensions 728px (width) x 90px (height)
9 Contains an example of audio
9 400k max file size
9 Uploaded both html and swf to your website
9 Add links to the 3 required documents on your course management
(index.html)
9 The 3 required docs are:
o Your 5 ad components (typed out in word)
o Storyboard (scanned and saved as jpg or png)
o Published flash ad (.html and .swf)