Quite often, a client has established a brand and developed logos or images to be used in an advertisement. By and large, client art cannot be altered in any way. For Flash, it's important that the client art be delivered to you in vector format. Vectors are generally very light and they redraw cleanly at any resolution. The client art for this ada final logo and a processor chipwas created in Adobe Illustrator (see figure 03:22).

Figure 03:22.


Although Flash can import and use Illustrator files directly, I often find it useful to open up the files in FreeHand (you can use Illustrator too) and clean them up a bit, first. It's not unusual to find numerous unnecessary layers and/or polygons used in the construction of the image that can be removed without altering the look. The more of this you can uncover and delete, the lighter the object will be and the better it will animate. You have to figure that the computer has to redraw everything, so if your object has 20 layers of extraneous junk, the computer will still have to redraw that stuff, which translates to a slower redraw/heavier file. Always think lean and mean. File clean-ups are a time-consuming , tedious process, but one that's well worth the effort. (I actually get pleasure from itbut that's a subject better left to me and my therapist.)

In this case, the processor chip art was particularly problematic . Not only were there many layers of extraneous stuff, but the chip itself was approximately 350 pixels wide by 160 high. Remember that our stage is only 200 x 200, so there's no way that the chip could be seen completely without being heavily reduced in scale. Reducing it to that small a size meant I would lose the chip's brand and model name they would be too small to see clearly. (Not to mention the chip looked pretty bad at that small a size.) To maintain the spot's focus and keep the brand as visible as possible, I decided to present close-up views of sections of the chip throughout the ad. To keep the look dynamic and somewhat unpredictable, I varied the angles of the artwork, carefully choosing my views so that one of the brands was always clearly visible, without being cropped in any way.

  1. Insert a new Library item by choosing Insert > Create New Symbol and naming it chip or something similar.

  2. In the symbol editing mode, import the client art (select File > Import or use the keyboard shortcut Ctrl-R / Cmd-R).

  3. Align to the center of the page by using Modify > Align.

  4. Return to the movie editing mode (select Edit > Edit Movie or use the keyboard shortcut Ctrl-E / Cmd-E).

  5. In the chip layer, create a new keyframe at frame 28.

  6. Drag an instance of the chip symbol onto the stage.

    I use the Scale and Rotate tool (Modify > Transform > Scale and Rotate) to position the chip at a size and angle that displays the company's brand and the product name, as shown in figure 03:23.

    Figure 03:23.


    But, I am confronted with a problem. The chip is lost in the black background. No problem; I'll just change the background color . This will kill a couple of birds with one stone because it will add punch to this section of the spot and provide visual distraction that helps me cut to the chip. It's sort of like thinking more like a film editor for a moment rather than an animator .

  7. On the bg layer, create a new keyframe (use the shortcut F6), also on frame 28.

  8. Select the keyframe and choose Modify > Instance.

  9. From the Color Effect tab, choose Tint from the drop-down list.

  10. Select a bright green color from the pop-up menu and change the Tint Amount to 100%. Click OK when you're done.

    This works pretty well, so well, in fact, that I decided to reinforce rhythmic consistency by changing the background color when the text is introduced as well.

  11. On the bg layer, create a new keyframe (use the shortcut F6) on frame 13 and tint it light gray.

    Notice how this improved the flow of the spot. We are "cutting" between three scenes: the speaker, the text, and the chip.

    Continuing with the chip animation

  12. In the chip layer, create a keyframe (use the shortcut F6) in frame 31.

  13. With that keyframe selected, choose Modify > Instance or use the keyboard shortcut Ctrl-I / Cmd-I and set the Alpha to 60.

  14. Create another keyframe, in the chip layer, at frame 33.

  15. With that keyframe selected, scale and rotate the chip almost 90 degrees and scale it up so that the product name is big and clear, as shown in figure 03:24.

    Figure 03:24.


  16. Create another keyframe in the chip layer, at frame 36, and choose Modify > Instance to lower the Alpha setting to 60.

  17. Add blank keyframes at frames 32 and 37 by pressing the F7 key. Your Timeline should resemble the one in figure 03:25.

    Figure 03:25.


This is what I mean by faking tweens. By setting up a rhythmic series of views of the chip, I am able to convey "fast," while not stressing the CPU and always reinforcing the client brand. Not only that, but I am able to creatively reuse one element (the chip) over a good amount of the spot, reducing my need for other elements and, thus, lightening my file size. Again, I worked hard to find the possibilities within the limitations.

Flash Web Design The Art Of Motion Graphics
Flash Web Design oder: the art of motion graphics
ISBN: 3827256623
EAN: 2147483647
Year: 2005
Pages: 192 © 2008-2017.
If you may any questions please contact us: