Flash Assignments 1
FLASH ASSIGNMENT 1 SUBMITTED PROJECT
 |
| FILE IN GIF (NO AUDIO) |
FLASH ASSIGNMENT 1 INSTRUCTIONS
A company has hired you to promote their business online. You will need to create an animated banner ad with audio that will appear on the web to drive customers to their site.
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 Flash5. Publishing your Flash banner ad
3. Develop the visual components
4. Develop banner ad web animation in Flash5. 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 company, 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 10 -15 seconds long.
• For your ad, identify the following components:
1. the product (or ad topic)
2. the company
3. the environment4. the logo5. the tagline
2. the company
3. the environment4. the logo5. the tagline
• Write down your idea for your advertisement identifying the five components
Product: ___________________________________________________________________________
___________________________________________________________________________
Company: ___________________________________________________________________________
___________________________________________________________________________
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 10-15 second animation
• Remember our ad is very rectangular, you should use storyboard boxes that are the same size, approx 728x90 pixels (OR CUSTOM - see instructor), the examples below have been scaled down to fit on page
• Here’s two different storyboards I found on the web, http://www.fuse-studio.co.uk/?cat=14
• Your storyboard should contain at least 5 slides.
• 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 10-15 second animation
3. Size your storyboard 728x90 pixels (OR CUSTOM - see instructor)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
2. Storyboard slides represent a 10-15 second animation
3. Size your storyboard 728x90 pixels (OR CUSTOM - see instructor)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
2014 standard web ad banner sizes
Flash Assignment 1 - 728x90 pixels Storyboard
Date: _________________________________ Client: _________________________________ Product: _________________________________ Campaign: _________________________________
Animation: ________________________________________________________________________________ Audio: ____________________________________________________________________________________
Animation: ________________________________________________________________________________ __________________________________________________________________________________________
Animation: ________________________________________________________________________________ __________________________________________________________________________________________
Animation: ________________________________________________________________________________ __________________________________________________________________________________________
Animation: ________________________________________________________________________________ __________________________________________________________________________________________
Step 3 – Develop the visual components
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
• Begin by creating the visual components that will be needed for your ad
1. a product
2. a company
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.
• 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.
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.
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 FLASH01 folder)
• .fla is the flash project file, it’s an editable flash project
• On properties bar adjust Size: 728px (width) x 90px (height) (OR CUSTOM-see instructor), 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.
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
Graphic symbols are timeline dependent, when the main timeline stops then any animation inside the graphic symbols timeline also stops
Movie clip symbols are timeline independent, when the main timeline stops then any animation inside the movie clips timeline will not be affected
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
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
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
• 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
The following steps explain how to create a Motion Tween in the latest version of Flash • 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 chooseCreate 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 Flash01 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
- Make sure you have met the major assignment requirements:
- Animation advertises a product, service, organization, or event
- Approximately10-15 seconds long
- Contains a company
- Contains an environment
- Contains a logo
- Contains a tagline
- Dimensions 728px (width) x 90px (height), (OR CUSTOM - see instructor)
- Contains an example of audio
- 400k max file size
yourname_FL01 Folder:• yourname_FL01.pdf: Statement of Purpose - 5 ad components + Storyboard(s) in PDF • Published flash ad (yourname_FL01.html and yourname_FL01.swf )
DUE DATES - MONDAY APRIL 14TH - THUMBNAILS
MONDAY - APRIL 21ST - BANNER AD
