Click on any phrase to play the video from that point.
[male speaker] Hello. Welcome to Interaction Design 101, a series of videos to help designers begin to learn the skills necessary for interaction design. My name is Keith Gilbert. I'm an independent Adobe Certified Instructor. Today I'll be showing you how to create a very simple banner ad in Adobe Flash Professional CS5. Let's begin by looking at the finished ad so you have an idea where we're headed today. Go ahead and open the Banner_ad.html file. The file will open in a browser and begin to loop repeatedly. As you can see, the add consists of 2 main images, corn and then berries. The screen with the corn image contains some animated text, and the berries screen has a button that can be clicked for more info. Since this finished file is not deployed on a web server but instead resides on your local hard drive, the button doesn't function at this time. Let's close the browser and launch Adobe Flash Professional CS5. If you're new to Flash, the first thing you might notice is that the Flash interface is very similar to other components in the Creative Suite such as Photoshop, Illustrator, and InDesign. You can open, close, and rearrange panels however you'd like. You can then save your panel arrangement as a workspace. For this tutorial we'll use the Essentials workspace. So choose Essentials in the application bar. You can also customize keyboard shortcuts by choosing Keyboard Shortcuts in the Flash menu on the Mac or in the Edit menu on the Windows version. You will find that this shared interface with the other Creative Suite components reduces the learning curve for Flash Professional. Effective banner ads must be small and carefully designed to consume minimal processor power. Remember, you might not know where the ad will be used. It might end up on a page with several other animated ads. In that case, you don't want any single ad to hog all the processing power of the user's computer. Flash Professional allows you to create animation and interaction that is optimized for small file size and low bandwidth. While you can create ads of any size in Flash Professional, today we're going to create an ad using the standard leaderboard ad size. Choose File, New, and then choose Templates then Advertising, then choose the 728x90 pixel leaderboard format and click the OK button. Flash Professional displays the leaderboard ad at actual size on the Flash stage. Another factor that impacts file size and performance is the frame rate. This is how many frames or images display per second. Too few and the animation will look herky-jerky. Too many and the file will be larger than necessary. 15 frames per second is a good compromise often used for web banner ads. It's best to set this at the beginning of each project. The frame rate is set in the Properties panel. Change the frame rate, FPS, to a value of 15. We could use the various tools in Flash to import, crop, and position images and create original artwork and text, but we don't have to. The beauty of working in Flash Professional is that you can leverage what you already know about Photoshop, Illustrator, and even InDesign to create artwork in those programs and then bring the artwork into Flash Professional to add animation and interaction. Today we're going to start with some artwork created in Photoshop. So open the Banner_ad.psd file. If you examine the Photoshop Layers panel, you'll see that the artwork contains 2 layer groups: 1, Corn, and 2, Berries. Each layer group contains various text and images. Note especially that the layers are well organized and clearly named. This will be a big help in Flash in a moment. Let's close the Banner_ad.psd file without saving it. Next we're going to import our Photoshop artwork into Flash Professional. To do this, choose File, Import, Import to Stage. Choose Banner_ad.psd and click Open. The PSD Import Options dialog appears. This dialog controls precisely how each layer in the Photoshop document should import into Flash. You choose a layer on the left and then choose options for that layer on the right. We want to choose the More Info Button layer and import that layer as a flattened bitmap image with lossless compression to precisely preserve its appearance. Next select each of the text layers and choose to import those layers as vector outlines to minimize the file size. Now we're ready to click the OK button. Note that the Photoshop artwork appears on the Flash stage, and each layer in the PSD file appears as a layer in Flash Professional. In the remainder of this tutorial, we'll be using the Flash Professional timeline to animate the Photoshop artwork that we've imported. The layers in the timeline function much like layers in Photoshop. The first thing we're going to do is to delete layer 1. This is an extra layer and not needed. So click on layer 1 and then click on the trash can at the bottom of the Layers panel. Next we want to hide all the layers except for the layer named Corn. To hide a layer, just click in the eyeball column next to the layer name. Across the top of the timeline you'll see frame numbers. Remember, we are using a frame rate of 15 frames per second, so the number 30 on the timeline represents 2 seconds, 60 represents 4 seconds, and so on. We want to insert a new frame at 70 on the timeline on the corn layer, so click in the 70 column on the corn layer to select the frame, then right click or Control click if you have a 1-button mouse and choose Insert Frame. This will cause the image of the corn to appear for 70 frames. After the corn image appears for 70 frames, we want the berry image to appear. In fact, we want all the frames in the 2 Berries folder to appear. To do this, show all the layers in the 2 Berries folder, then carefully select frame 1 of each of the layers in the 2 Berries folder. Do this by clicking on one of the frames, and then hold down the Command key on the Mac or the Control key on Windows and click on the rest of the frames. Grab one of the frames and drag it to the right to frame 71. The other 4 frames you have selected should move with it. Next go over to frame 120. Note that every 5th frame is shaded with light gray to make this easier to see. Command or Control click the same 5 layers on frame 120 to select them. Then right click on one of the layers and choose Insert Frame. To see what you've accomplished so far, grab the playhead, the little red box at the top of the timeline, and move it from left to right. You should see the corn image appear by itself for a while, and then the corn will disappear and the berries layer should appear. Moving the playhead across the timeline like this manually is called scrubbing the playhead. You can scrub both forward and backwards in time. Now we're going to animate the text that we want to appear on the image of the corn. We want to be able to use ruler guides to help us with positioning this, so choose Rulers from the View menu to display rulers on your screen. Next show the Eat Local layer and click on frame 1 of this layer. Drag a vertical ruler from the left edge of the screen to the center of the Eat Local text frame. This will serve to mark where we want the text to end up. Then with the Selection tool drag the Eat Local text frame to the left off of the stage. To animate the movement of the Eat Local text frame, we're going to use a motion preset. These are an easy way to add animation to objects in Flash Professional. Display the Motion Presets panel and then in the panel open the Default Presets folder and click on the fly-in left preset and then click the Apply button. The animation preset is automatically applied to the text frame, but the frame doesn't end up in the right spot. You'll see that a motion path has been created. Grab the right end of the motion path and drag it to the vertical guide that you created earlier. Scrub the playhead to preview the animation you just created. Motion presets make this type of animation really easy. To fine-tune this, we want to extend the animation so that it takes 45 frames for the text to arrive at its destination. So grab the right side of the last frame of the animation and stretch the animation to frame 45. To keep the text from disappearing when it's done being animated, we need to insert frames at the end. Click on frame 70 of the Eat Local layer and then right click and choose Insert Frame. Let's scrub the playhead to see what we've done. Very nice. Now we just need to repeat this process to animate the Eat Healthy text. So show the Eat Healthy layer and click on frame 1 of that layer. Drag this frame to 32 on the timeline so that the Eat Healthy text begins its animation later than the Eat Local text. Next, drag a vertical ruler from the left edge of the screen to the center of the Eat Healthy text frame. This will mark where we want the text to end up. Then with the Selection tool drag the Eat Healthy text frame to the left off the stage. In the Motion Presets panel click on the fly-in left preset and then click the Apply button. Grab the right end of the motion path and drag it to the vertical guide that you created earlier. Grab the right side of the last frame of the animation and stretch the animation to frame 59. To keep the text from disappearing when it's done being animated, we need to insert frames at the end. Click on frame 70 of the Eat Healthy layer and then right click and choose Insert Frame. Let's scrub the playhead again to see what we've done. Looking really good. Our final task is to make the More Info graphic object into an active button. To begin, select frame 71 of the More Info Button layer. You should see the More Info graphic object appear selected on the screen. In Flash Professional if you're going to add animation or interaction to an object, the object has to be converted to a symbol first. This was done for us automatically when we applied the motion presets to the text earlier in this tutorial. But in order to make this graphic object a button, we need to turn it into a symbol. So right click on the More Info graphic object and choose Convert to Symbol. Name the symbol More Info Button, choose Button for the type, and click OK. To make this button interactive requires ActionScript programming, but you don't need to be a programmer. The Code Snippets panel simplifies adding ActionScript code. Display the Code Snippets panel, then open the Actions folder and double click on the Click to Go to Web Page snippet. A dialog box appears that informs you that the button will be assigned an instance name. Just click the OK button. Flash automatically creates a new Actions layer and creates ActionScript code on frame 71 of that layer that makes the button clickable. The Actions panel appears on your screen to display the ActionScript that's been added. If you read the comments, the light gray text, you'll see that we need to replace the URL with the actual URL that you want to use. We'll just leave it at adobe.com for now. Go ahead and close the Actions panel. To finish the project, we just need to save and export the file. Choose File, Save, and name the file farmers_market_ad.fla. FLA files are editable Flash files that can be opened and edited in Flash. To export the file for use on a web page, choose File, Publish Settings. Choose a location for the Flash.swf or SWF file that will be created as well as the HTML file. A SWF file is a final compiled version of the project ready to be placed on a web page. SWF files can't be edited in Flash later. The HTML file is just created for your convenience. Click the Publish button, and the SWF and HTML files will be exported. Let's quit Flash. Locate the HTML and SWF files that you just exported and double click on the HTML file. Your browser will launch, and a SWF file should play and loop repeatedly. Just a reminder: The button won't function until you actually put the SWF file on a web server. That's it. You've created a simple banner ad using Flash Professional and Adobe Photoshop. My hope is that this will pique your interest in Flash Professional and make you want to learn more about interaction design.
