Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
Like this article? We recommend

Faking Out the Neighbors

In this last section, you'll animate the thing. This won't take long.

  1. Choose View > Guides > Show guides and drag some guides and align them to the four sides of the Stage (see Figure 5). You'll need them to see where the Stage edges are for the rest of the project.

  2. Figure 5Figure 5 Set up some guides to show the edges of the Stage—unless, of course, you're really good at guessing.

  3. On the vector_photo layer in the Timeline, drag vector_photo (obvious enough for you?) from the Library to the Stage and align it to 0 x 0. While you're there, scale it to 310 x 200 using the Properties inspector. (You can always scale bitmaps down in Flash, but you should import them at the largest size you plan to use to avoid graininess from scaling up.)

  4. At Frame 10, insert a keyframe (F6) and move the image one pixel to the left. At Frame 20, insert another keyframe and move the image back into its original spot. These tiny movements will give the illusion of the legendary "shaky-hand syndrome" seen in all handheld video footage.

  5. At Frame 45, insert a keyframe and scale the image up to 387 x 250 and align it to –24 x –41. Hopefully, you can tell from the guides that this will give the illusion of zooming. It should match Figure 6.

  6. Figure 6Figure 6 Zoom zoom.

  7. At Frame 55, insert a keyframe and move the image one pixel down (shaky hands again).

  8. At Frame 65, insert a keyframe and move the image one pixel up and one pixel to the left.

  9. At Frame 80, insert a keyframe and scale the image up to 419 x 270 and then move it to -218 x –70. Here, the illusion is that of zooming a bit more and panning left.

  10. Back at Frame 65, on the original_photo layer, insert a keyframe and drag original_photo from the Library to the Stage. Hide the vector_photo layer by clicking the eye icon in the Timeline and align original_photo to –25 x –42, scaled to 388 x 250 to match the size and location of vector_photo.

  11. At Frame 80 of the original_photo layer, move the image to –218 x –70, scaled to 419 x 270, to match vector_photo at that frame. It should look like Figure 7.

  12. Figure 7Figure 7 The two images here overlap each other. One fades out to reveal the other.

  13. Select Frame 80 on the vector_photo layer again and choose Alpha: 0 in the Properties inspector. In a minute, this will provide the illusion of an illustrated image turning into a photographic image.

  14. At Frame 90, move original_photo around a bit to give it some shaky hands. At Frame 105, move it back, and at Frame 125, move it to –3 x –44. (Remember to add keyframes every time you go to a new frame.)

  15. At frame 140, move it slightly again and then move it one more time at frame 155 and 170 for good measure.

  16. At frame 200, scale the original_photo down to 310 x 200 and move it to 0 x 0. This places it in the position identical to where it started.

  17. Back on frame 170, insert a keyframe and drag another instance of vector_photo to the Stage. Align it to –3 x –44 and scale it to 388 x 250 to match original_photo at the same frame. Then set the alpha to 0.

  18. At frame 200 of the vector_photo layer, set the alpha from vector_photo to 100, which completes the loop.

  19. To put this whole thing into motion, select each keyframe in the Timeline and choose Motion from the Tween menu in the Properties inspector.

  20. Figure 8Figure 8 Ahhh...the magic of (fake) video, brought to you by simple motion tweens.

  21. Save your work and choose File > Publish to create a SWF file of your finished movie. Open up that SWF and check out your new fake video!

  • + Share This
  • 🔖 Save To Your Account