Supporting movies:

Part 1 | Part 2 | Part 3 | Part 4

Building web ads in Flash

Before you begin

Before you begin, you need:

  1. Flash MX or better
  2. A Mac or PC capable of running Flash MX or better
  3. Ad Dimensions
  4. Maximum File Size
  5. Click-through URL
  6. Earliest supported Flash player version to target (these techniques will work in Flash 6 or better)

Start in photoshop

  1. Make sure the designer builds the file in Photoshop, using layers for everything. Have the designer build a storyboard featuring depicions of sequences, summed up with a "keyframe". This storyboard can be built in a layout program like indesign or quark and be accompanied by descriptions of the transactions.
  2. Always export pngs. Png is a lossless compression, universal image format. Exporting in png will ensure the best image quality in the flash file.
  3. When possible, avoid using transparency in pngs. It potentially increases the file size by 25%.
  4. Export frames from the photoshop file to serve as reference in the flash file.
  5. Flatten and crop the photoshop file as close as possible around images. Don't worry about text; you'll typeset that in Flash. Flattening will apply/render any layer effects, and cropping will rather than exporting the whole image. This will reduce file size. After exporting key images, undo the crop and the flatten so you don't lose your original file.
  6. Note:if images are photos, use the above procedure. If they are graphics, they must be exported from Illustrator as swf files.
  7. All these files should go into a folder called "support" in your work folder. When you're done, create another folder called "flash" in your work folder.

Work in Flash

  1. Open Flash. Flash will either start you off with an "Untitled Document", "Untitled-1", or show a blank slate. Create a new file.
  2. Unlike Photoshop, Flash does not let you specify key characteristics of new documents. Instead, you must go to Modify>Document to adjust the file. You can change the settings whenever you want, but make sure the frame rate is at least 28. This will ensure a smooth animation on faster computers, which most folks have these days. Tip: When selecting background color for the animation, use the pointer to select the background color from a placed graphic in you movie. This way, your background-color will be exacly the same as the one imported from photoshop.
  3. Create layers by clicking the add layer button. Create a layer for each animated sequence. Name the layers, from top to bottom:
    • actions: This layer will hold all the actionscript needed on the main level of the animation.
    • preloader: This layer will ensure that the entire animation is completely downloaded to the users' computers before it begins to play, hus avoiding skipping or stalling.
    • button: This layer will hold the button that people click on when they see the ad.
    • [sequences]: Create one of these layers for each animation sequence defined in the designer's storyboard.
    • [references]: These layers will hold screenshots of each segment of the animation. This is critical for placement of animating elements, especially type.
  4. Insert a key frame on frame two for each of the layers. Tip: you can highlight frame 2 for all the layers by shift-clicking the top frame and the bottom frame.
  5. Click on frame one of the acions layer. Bring up the actions palette (Window>Actions). Type in this code: 
    stop();
this.onEnterFrame = function() {
 	if (getBytesLoaded() == getBytesTotal()) {
    delete this.onEnterFrame;
    nextFrame();
  }
}
  6. Click on frame two of the a layer.Bring up the actions pallette. Type in this code: 
    stop();
  7. Create the button, using the getURL() function in the Object Actions panel to write the tracking code, as follows:
    1. Select the button layer with the Selection tool.
    2. Draw a rectangle that is the size of the entire ad.
    3. Convert the rectangle into a "Button" symbol.
    4. Make the rectangle transparent: Effect panel > Alpha >0%
    5. In the Object Actions panel, associate the following action to the transparent rectangle: 
      on (release) {
		getURL (_level0.clickTag, "_blank");
		}
  8. Import to Stage (apple/cmd r) a reference png from the support folder. Place it on the reference layer(s). Do this for each frame in your storyboard.
  9. Create a new movie clip for each sequence by clicking on frame 2 of the sequence and importing the graphic you exported for that sequence. Once it's on the stage, position it where it should go, using your reference as a guide. When you're happy, click on it with the black arrow and select Modify>Convert to Symbol. Make sure it is a movie clip. Call it sequence1_movie. In the proerties inspector, and this is VERY important, name the Symbol sequence1.
  10. Click on the symbol and select Edit>Edit in Place. Tip:Being able to quickly edit in place is a huge time saver. Set up shift-command-e as a keyboard shortcut to edit in place.
  11. In the timeline of the new sequence, name the layer graphics. Click on the graphic, select Modify>Convert to Symbol, and name it sequence1_graphic. Create a new layer called actions. Tip: Always make sure you have an actions layer on every symbol you create.)
  12. If this is the first sequence, leave the actionscript empty on the first frame. If not, put a stop(); action on the frame.
  13. Shift-click and then Option-drag both frames once to the right, creating a copy of the frames. Do this again, but this time drag 28 frames to the right, or some proportion of that. Remember, 28 frames a second is what we specified at the beginning. If you drag 14 frames, can you guess how long the sequence will run?
  14. On the actions layer, select the final frame. Make sure it is a keyframe. Make sure it has a stop(); action. In addition, add the code:
    _root.sequence2.play();
  15. Use tweening, easing, etc. to animate the sequence. For example, Drag the image on frame 2 off the stage. Select frame 2 in the graphics timeline. In the properties inspector, choose Tween>Motion. Make sure the final frame of the animation is positioned where the reference image indicates.
  16. When finished with the animation, go back to frame 1, click on the image in the graphics layer, and delete it.
  17. If you want other sequences to begin before the current sequence ends, just insert a keyframe earlier in the timeline and insert the above code. Just make sure there is no stop(); action until the very last frame.
  18. Go back to the root (Scene 1) and continue working until all sequences are complete. To test your movie a any time, hit apple-return. Note that you'll need to delete the reference layer; otherwise it will appear in the animation.

Publishing

  1. Select File>Publish Settings. Make sure Flash and Html are checked. Under the Flash tab, make sure you have the version specified by the client selected. If not, use Flash 6. For JPEG quality, you'll have to play around until a balance between quality and file size is acheived. I usually use 80.
  2. Select File>Publish. To test out your Flash, open the resulting html file in a browser. Tip: You may want to change the background color of the html page. Open the html page in Dreamweaver or a text editor, look for the code <body bgcolor="#ffffff"> and change the bgcolor.
  3. Take a screenshot of the last frame of the animation. Open the screenshot up in Photoshop and crop accordingly. Save for web as gif or jpeg, and include in the flash folder as "static.gif" or "static.jpg".
  4. When finished, zip the flash folder which should now contain an fla, swf, gif/jpg, and html file. Email to appropriate contact.