GRC 119 Assignment 7 Create a Flash Animation Banner Ad

Transcription

1 GRC 119 Assignment 7 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 create 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 for your Ad 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. 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 . Web Banners Explained: For more info on banner ads or web banners see

3 Assignment Requirements: 5 ad components identified and typed out Storyboard drawn with boxes that are rectangular, sized approx 728x90 pixels Advertises a product, service, organization, or event Contains a spokesperson Contains an environment Contains a logo Contains a tagline SWF Dimensions 728px (width) x 90px (height) Approximately 6-10 seconds long Contains an example of audio Contains an example of hyperlinked text Contains an example of filters 400k max file size Uploaded both html and swf to your website Add links to all the required documents for A7 on your course management page(index.html) The 3 required docs are: Your 5 ad components (typed out, save as rtf, word, or pdf) Storyboard (scanned and saved as jpg or png) Published flash ad (.html and.swf)

4 Step 1 Brainstorm your Ad Concept and identify the 5 components The first step will be to brainstorm your ad concept Our Banner Ad will need to advertise a product, service, organization, or event and will be approximately 10 seconds long Your ad must have the following five components 1. the product (ad topic) 2. the spokesperson 3. the environment (or setting) 4. the logo 5. the tagline (catchy phrase associated with product, often a slogan) Identify the details for your advertisement, must identify the five components (You are required to type these out and turn in, see next page for template)

5 Product: Spokesperson: Environment: Logo: Tagline:

6 Step 2 Storyboard your ad concept Once we have written down the 5 components for your ad we will next need to draw out some simple storyboards The purpose of storyboarding is to give us a starting point for what our ad will ultimately look like For definition check out A storyboard gives us a visualization of what we will be creating, helps visualize what the ad is going to look like before it is created. 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 examples of storyboarding check out Remember we are creating a simple storyboard, 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 Two dif storyboard examples are show on the next page

7 Above examples, Next, begin drawing out your storyboard Your storyboard must contain at least 5 slides Use the sample storyboard templates on the next page, Requirements 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 5 ad components you identified in step 1 5. First draw in pencil then trace over using a black pen or colorize 6. Put the info about the ad somewhere at the top of your storyboard

8 Date: Client: Product: Campaign:

9 Once finished show storyboard to others to see if they understand the ad. It must visualize the story or purpose of the ad. Post a link on your website (under A7 links) to the typed document which details the 5 components of your ad. Make sure you have scanned your storyboard and created a jpg or png image to link to. Post a link on your website to the storyboard, min 5 slides. If you drew the slides out on paper with pencil you must go over them with a black pen. Send an to the Instructor with the A7 links before continuing onto Step 3. Step 3 Develop the visual components Next, you need to begin creating or gathering the various components in digital form on the computer These components will most likely be graphics or graphics files Begin by creating/gathering the visual components that will be needed for your ad 1. Your product 2. The spokesperson 3. The environment 4. The logo 5. The tagline You can use whatever program you are most familiar to create our graphics, the most popular would be Illustrator, Photoshop, or Flash Note: 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

10 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. In addition the are several requirements you must fulfill, audio, filters, hyperlinks, etc. 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 3.0) File>Save As> projectnamegoeshere.fla (save into an A7 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 Required, provide example of adding Audio Import audio files File>Import to library Pick a common audio file like aif, wav, mp3 Recommended, find a loop file, check out 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

11 Within the Properties inspector verify that Sync is set to Stream Required, provide example of 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, select the filter tab and click on the Add Filter button (paper icon), select desired filter like Glow or Drop Shadow You can apply multiple filters to a keyframe if desired. Adjust settings as desired Filters can be uniquely adjusted at each keyframe. Filters can also tweened so that any changes between keyframes are animated. Required, provide example of adding a hyperlink to an external website In this example we want to create a hyperlink within flash using the text tool and the property inspector Select the text tool and create a new layer Type a short sentence that you want to add a hyperlink to one or possibly some of the words Select the words you want to make linkable to a website Highlight the words and then within the Property Inspector type the URL or web address in the link text box For Target select _blank if you want this link to open in a new window (blank), not selecting _blank would open URL in the same window as our flash movie Control>Test Movie

12 Draw a line underneath the linkable text (URL s) to follow the standard web convention look, most URL s on the Web are underlined or should be underlined, if it is not underlined the viewer will not expect it to be a hyperlink 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 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 selected object into a symbol

13 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) 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.

14 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 A7 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 A7, it should link to A7.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 Check links to make sure they are working

15 Make sure you have met the 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 Contains an example of hyperlinked text Contains an example of filters 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)