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.
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.
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.
