GRC 119 Assignment 6 Create a Flash Animation Banner Ad

Transcription

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

2 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 . 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

3 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:

4 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 or go to 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

5 Here s two dif storyboards I found on the web, 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

6 Date: Client: Product: Campaign:

7 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 to the Instructor with the A6 links before continuing onto Step 3. Step 3 Develop the visual components Make sure you have ed 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.

8 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 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

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

10 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

11 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

12 Make sure you have met the major assignment requirements: Animation advertises a product, service, organization, or event Approximately 6-10 seconds long Contains a spokesperson Contains an environment Contains a logo Contains a tagline Dimensions 728px (width) x 90px (height) Contains an example of audio 400k max file size Uploaded both html and swf to your website Add links to the 3 required documents on your course management (index.html) 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)