» Index

The Outsider's Featured Tutorials are selected from a variety of sources including the best tutorials from the impressive archive on The Xara Xone (created by Gary Priester), Guest Tutorials submitted by Xara enthusiasts and new material created by Xara.

Creating a Flash Animation

In this month's tutorial we're going to create this simple but very effective Flash animation based on the Xara logo.

The starting point is this vector graphic:

download the file

As it stands, it's unsuitable for creating a vector Flash file because it uses too many effects such as feathering, graduated transparency, etc. not supported in Flash. So, in order to create our animation we need to convert the graphic to an alpha channel (semi-transparent) bitmap, which we will then color.

Luckily Flash is great at supporting colored bitmaps, and this color transform is one of the core animation types supported. This means that only one copy of the bitmap is stored in the Flash file and the color animation is applied to that, making the resultant Flash file really small.

To create a Flash animation of this file:
  • Resize it as required for the final Flash animation
  • Edit the named ‘Base’ color and give it a mid-grey color, (it has already been done in this example). We’re going to be re-coloring the bitmap in the Flash file, not the vector version.

  • Select the Xara part and create an alpha-channel bitmap of the shape (this is as easy as typing Ctrl+Shift+C, and then pressing Create when the dialog appears).

    This will create a version of our logo as shown here:

    You can drag it around over objects to show its semi-transparent nature. (You can re-color this bitmap just by clicking on a color. Bring up the color editor and you can see it’s easy to create any colored version of the bitmap you like. This is the principle used in the Flash animation.)
  • Create a new animation document (File -> New -> Animation). Copy the background rectangle to the document (this has simple graduated color fill on it).
  • Copy the alpha bitmap to be on top of the background rectangle. This is your start key frame.
  • Select the Xara logo bitmap and click the Create new names button and give the bitmap a name. Remember that only named objects can animate. There is no need to name the background as that will remain static throughout the animation.
  • Color the logo using the color editor to your desired start color, I've chosen red.

  • Create a second key-frame, by clicking the Copy Frame button on the animation bar.

    Now re-color the logo again.

  • Repeat these last 2 steps as often as required, creating new key frames with different colored logos. (This whole process takes just 2 clicks for each new key frame)
  • You can see what your animation will look like by clicking the ‘Preview Flash in Browser’ button in the Animation Bar.

  • You will probably want to adjust the animation time. I’ve set it to 2 seconds per key frame. Do this by selecting the Animation Properties dialog:

    and selecting the Animation Loop and Speed tab.

So now you should have your own smooth and remarkably compact Flash animation. My example takes just 11Kbytes.

download my animation

The same principle can be used to create a colored animation based on any bitmap or photo.

© 2007 Xara Group Ltd