GRC 188 Banner Ad Creating a Web Banner Ad using Flash

Transcription

1 GRC 188 Banner Ad Creating a Web Banner Ad using Flash 1. Brainstorm your Ad Concept and identify the 5 components 2. Storyboard your ad concept 3. Develop the visual graphic components 4. Getting started in Flash 5. Adding Audio, Filters, and ActionScript 6. Publishing your Flash banner ad 1

2 Assignment Overview: This week we will use Flash to create a themed Banner Ad about Recycling. 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 that 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. However since Flash does not work on mobile devices there are new options for publishing to more open standards that play on all devices. New alternatives to Flash are Adobe Edge and Google Web Designer. You can use any of these programs to complete this assignment, however, these instructions basically cover how to use Flash. Before jumping into Flash and creating your Ad you will first need to do some important planning. Your ad will need to advertise something related to Recycling. It will likely 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 a min 5 simple storyboard slides to help visualize the animation in our ad. Then, before animating our ad in Flash we will need to create the various components such as any nec graphics. You should create graphics 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 ideally be approx 500k. In the real world, you would probably want your swf file to be under 100K, 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 2

3 Assignment Requirements: 3 required deliverables ü Your 5 ad components (typed out, save as rtf, word, or pdf) ü Storyboard (scanned and saved as pdf, jpg, or png) ü Published flash ad (.html and.swf) Components (must be identified and typed out) 1. Identify a product, service, organization, or event related to Recycling 2. Identify a spokesperson 3. Identify an environment 4. Identify a logo 5. Identify a tagline Storyboard Draw out your storyboard using boxes that are rectangular, sized approx 728x90 pixels and contain a min of 5 slides or boxes that visually show what will happen in the ad Flash Required Flash SWF Dimensions 728px (width) x 90px (height) Approximately 6-10 seconds long (approx frames long) Contains an example of filters and audio Contains an example of Actionscript and a button Approx. 500k max file size 3

4 Step 1 Brainstorm your Recycling Ad Concept and identify the 5 components The first step will be to brainstorm your Recycling ad concept Our Banner Ad will need to advertise a product, service, organization, or event related to Recycling and will be approximately 10 seconds long Your ad must contain the following five components 1. the product (topic, what is being advertised related o recycling) 2. the spokesperson 3. the environment (or setting of ad) 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 Type out the 5 components for your themed Banner Ad inside a word document This step is required and will be turned in. Required, post a link on your website to the typed document which identifies the 5 components of your ad. For example see template on next page For help completing this step submit your typed concept via to your Instructor for feedback 4

5 Identify the 5 Components for your Ad (type out in word and saved as a pdf) Product: Spokesperson: Environment: Logo: Tagline: 5

6 Step 2 Storyboard your ad concept Once we have typed out the 5 components for your Recycling ad we will need to draw out some simple storyboards. The purpose of storyboards or storyboarding is to give us a starting point for what our ad will look like visually, it really helps to visualize the ad. For a complete definition of a storyboard check out: The storyboard gives us an important visualization of what we will be creating. Storyboard also helps the designer visualize what the ad is going to look like before it is actually created. You will need to draw the storyboard onto paper, use the templates on the next page to help sketch out your ads story, animation, progression or action. 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. Required 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, use the storyboard boxes that are the same size, approx 728x90 pixels, the examples shown have been scaled down to fit on page. An additional storyboard example is shown on the next page. 6

7 The above example was found at, Next, we will begin drawing out your storyboard; please use the template on the next page. Your storyboard must contain at least 5 slides. Storyboard does not have to be colorized. You can use arrows to identify movement of an object. Storyboard Requirements: 1. Draw out a minimum of 5 storyboard slides. 2. Storyboard slides represent an approx 6-10 second animation. 3. Size your storyboard 728x90 pixels (very rectangular). 4. Storyboard will contain the 5 ad components you identified in step First draw in pencil. 6. Put a title for the ad somewhere at the top of your storyboard. 7. You will be required to turn in the storyboard so you will need to digitize it. 8. Make sure you go over storyboard with a black pen and scan and then adjust resolution within Photoshop to 72dpi before posting on your website. 9. Recommended that you use the sample storyboard template on the next page. 7

8 Date: Client: Product: Campaign: 8

9 Once you have finished your storyboard it is highly recommended you show your idea to others and your Instructor to see if they understand your ad concept! Storyboard must visualize the story or purpose of the ad. If you drew the storyboard slides out on paper with pencil you must go over them with a black pen before scanning!! Make sure to scan your storyboard, adjust resolution to 72 dpi and created a.pdf,.jpg or.png image If possible please send an to the Instructor with the files (Steps 1 and 2) before continuing onto Step 3 in order to get feedback on your ad concept. Step 3 Develop the visual graphic components Next, you need to begin creating or gathering the various graphical components for your ad in digital form on the computer. These components will most likely be graphic files. Begin by creating or gathering the visual components that will be needed for your ad. Remember what you identified in step 1, and remember these need to be included in the ad and these should also have been drawn in your storyboards. ü Your product ü The spokesperson ü The environment ü The logo ü The tagline You can use whatever program you are most familiar to create the various graphics. The most popular programs to use would be Illustrator, Photoshop, or Flash. Note: Flash allows you to import native Illustrator.ai and Photoshop.psd files. Note: Flash is often best used to animate and not necessarily the most ideal program to create our graphics or artwork. 9

10 Once you have created all the necessary visual graphical components we can move on to the next step where we will use flash to create our animated flash banner ad. Step 4 Getting started in Flash You will first need to set up the Flash project and then import the various component that will be used in your ad. Import graphics, bitmaps or psd or ai files to use in your flash banner ad. The max file size for the final published swf should be 500k. Make sure to use the required dimensions and meet the requirements given below. You could alternatively use Adobe Edge and Google Web Designer to complete this assignment but the following instructions detail how to complete the requirements using Flash. 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 a new folder within 188 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 Import needed components or graphics to the Library Import files File>Import to library. Once files have been imported to your Library you simply drag them from the library to the stage. Make sure you are on the desired layer and frame of your timeline before dragging to the stage. 10

11 Step 5 Adding Tweening, Audio, Filters, ActionScript, and buttons Within Flash you must provide examples of tweening (animation), audio, filters, and adding interactivity with ActionScript. In your ad you should somewhere provide examples of Animation or Tweening, audio, and filters. Required, add an example of tweening The following reviews how to create a basic motion tween in Flash. Select the object you want to motion tween on the Stage. 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 prompting you to convert the selection to a movie clip symbol, if prompted click yes. 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 play head 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. 11

12 Required, add an example of audio The following reviews how to add audio in Flash. Import an audio file File>Import to library Pick a common audio file like aif, wav, mp3 Optional, find a loop or sfx file at the following website Warning, audio files can be very large in file size, look for a file under 1000k if possible. Note, Flash will compress the audio to an mp3 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. Required, add an example of a filter effect The following reviews how to add filters in Flash. 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 at very bottom), select desired filter like Blur, 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. 12

13 Required, Controlling the playhead using Actionscript ActionScript is used to control the playhead in a flash movie. ActionScript can be associated with a button instance, a movie clip instance, or added to a blank keyframe in the Timeline to create a frame action. Actionscript cannot be associated with an instance of a graphic symbol. By default, Flash will play a swf movie and continue to loop unless we add a stop action First, add a new layer in the Timeline and name actions. Add ActionScript in the timeline to stop playhead at the end of your movie, this is called a frame action. Select desired frame like frame 120. You can end your movie in whatever frame you want. Add a blank keyframes f7 (some mac computers require fn+f7 or use f6). Within Actions panel type the following. stop(); Control>Test Movie Movie plays and then stops on frame 120 or wherever your stop action appears. Required, adding more Interactivity using Actionscript with a button Next we will add a button to control interactivity. Insert>New Symbol Select the Button option and name your button template (or any name you want). Try drawing a circle, pick the stroke and fill colors on the Properties inspector. Select shape using the selection tool, verify that the property inspector displays the object as a Shape. If necessary delete object and recreate as a shape, turning off Object Drawing mode on the bottom of the toolbar. Double click on shape in order to select both stroke and fill. Move shape to desired starting location. 13

14 Keyframe currently shows for up state. Add keyframes (f6) to the other states, over, down, hit states. Hit state represents the active area or the hot zone for the button, when the mouse cursor. enters the hit defined area it will activate the over state. Modify the fill for the over and down states. Don t add any text to the button. Click on scene 1 to return to project timeline. Create a new layer name buttons. Add button instance to stage, position to desired location. Drag keyframe of button to desired frame where you want button to first appear. Add a new layer, name button text, move layer above button layer. Add text for any buttons using the text tool. Make sure you have added your button to the stage, should be on its own layer. If you decided to add a button you will need to add some ActionScript to add interactivity. Type an instance name like play_button on the properties inspector under instance name field. Locate the first frame where your button appears. Put the Actionscript for your buttons in frame 1 of the actions layer. Open the Actions panel, Window>Actions Copy and paste the play script shown on the next page into the actions panel btn_instancename.addeventlistener(mouseevent.click, functionname); function functionname (e:mouseevent):void { play(); } In the above script modify instance name (required) and function name (recommended) Change btn_instancename to the instance name used for your button, in the above example I used play_button 14

15 Note: If you are having problems editing your Actionscript within Flash then first paste script into a text editor like Notepad or TextEdit. Modify script as instructed and then copy and paste the edited script back into the Actions panel within Flash. Preview movie Control>Test Movie (Cntrl+Enter) Verify that your button replays your movie, if your movie gets an error then you will need to fix the error before being able to test your button. Step 6 - 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). If the file size is too large you can try to adjust publish settings File>Publish Settings Make sure to also have copies of the 2 other required documents: 5 ad components (typed out in word and saved as.pdf, jpg or png) storyboard (scanned and save as pdf, jpg or png) Save all files into a banner ad folder that contains your last name please. 15

16 Make sure you have met the assignment requirements: The 3 required documents 1. Your 5 ad components (typed out in word or similar program) 2. Storyboard (scanned and saved as jpg or png) 3. Published flash ad (.html and.swf) You web banner ad produced in Flash must contain the following: ü Ad advertises a product, service, organization, or event ü Approximately 6-10 seconds long (approx 120 frames 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 filters ü Contains an example of Actionscript including a stop frame action and a button ü Ideally 500k max file size 16