Advanced Flash Animation Controls

NOTE: This tutorial is aimed at beginners, so you need only a basic understanding of Xara Xtreme.

The Flash animation capabilities of Xara Xtreme Pro, now shared by Xara Xtreme 3.2, are designed to be as simple as possible. Indeed, we believe that Xara Xtreme offers the easiest method of creating custom Flash animations of any graphics software. Xara Xtreme Flash capabilities do not offer advanced features such as scripting or embedded movies or sound. However, it's ideal if you want to create quick and simple Flash animations like the vast majority of Flash banner ads that you see on the web.

In fact, for the slightly more advanced cases, Xara Xtreme animations can control the flow of the animation. You can stop an animation at any point in the animation sequence. Combining this with the ability to jump to any key frame when you click on an object means that Xara Xtreme allows you to create far more flexible animations. For example, you could have an animation that loops continuously, but with a clickable button. You can even link it so that when one element is clicked it moves to a completely separate animation.

Now let's go step-by-step through the process of creating the following example.



As you can see you can click on the 1 or 2 to initiate a different animation.

• Start a new animation by selecting the File > New > Animation.

• Create a new rectangle. Make it exactly 468 by 60 pixels (just enter these values into the Infobar fields once you've created your rectangle).

• Select a line width of none from the drop down so that your rectangle has no additional outline and is in whole pixels.

Tip: In the Selector tool it's a good idea to ensure that the X and Y positions are also whole pixels, so that everything will remain pixel sharp.



• Create the text. In this case 3 separate text objects like this. It's important that these are three separate objects and not a single line of text.



Because we're going to animate all three text objects we need to give them names. This is easy...select each text object in turn and, for each, on the Selector Tool Infobar, click the name tag icon on the right hand end, and just click create to give them a default name. They will be named Text Line, Text Line 2, etc.

Jumping URLs

You can of course give any object a URL, that is, a web address that the browser will be redirected to when the user clicks on the object in your Flash animation. Open the Web Address dialog (Utilities -> Web Address), select the object and enter the URL. But here, instead of redirecting to another web page, we want to jump to another frame in the animation. This is done in exactly the same way, except that instead of entering the web address you just enter the key frame name you want to redirect to. The key thing is that under the Target frame for URL you need to enter _frame, which is what shows that the URL is actually a key frame and not a web page.

In our example, we want to click on the 1 or 2 and jump to different parts of the animation sequence. Although we haven't yet created these frames we want to redirect the 1 to Key Frame 4 and the the 2 to Key Frame 6. So just select the 1, enter the URL of Frame 4 and put _frame into the target field, so that it will look like this:



Now do the same for the 2 text object so that it redirects to Frame 6.

Let's Animate

We're going to animate the third text object (ie the words Select 1 or 2) and make it pulsate. So we need to create a new key frame by clicking the Copy Frame button on the Animation bar. The new frame will look exactly like the last.

Now let's alter the 'Select 1 or 2' text slightly. In our example we've made it slightly larger and colored it like this:



You can preview your animation (click the icon) even though there are only two frames, but you should see your text animate from Key Frame 1 to Key Frame 2 (ignore the warnings that Frame 4 and 6 do not exist yet - this won't stop you from being able to preview your animation).




In order to make it animate back to the start, we just make a copy of the first key frame to be a new third key frame. This couldn't be simpler. Open the Animation Frame Gallery and click on Frame 1 to select it, and then click the Copy button on the Frame Gallery. This will create a new Frame 3 that is identical to Frame 1. Preview this animation and you've got your basic animation loop. Easy!



If we add a fourth key frame the animation would continue from Key Frame 3, as usual, to Key Frame 4. But we want the loop to continue running, Frame 1, 2 3 and back again to the start, 1, 2, 3 and not go to the fourth frame. So this is where we introduce the Goto feature.

Goto

To redirect the animation from any key frame to any other, you just add a Goto command onto the frame name. So we want to add ; Goto Frame 1 (semi colon) on the name of Frame 3. To do this, open the Frame Gallery and double click on Frame 3. This opens the Animation Properties dialog, and you can edit the frame name to be Frame 3; Goto Frame 1 and Apply.



We'll now do the new animation sequence for when the 1 character is clicked. We already made the URL of the 1 jump to Frame 4, so we have to create Frame 4 now. Perhaps the easiest way to do this is to copy Frame 1 to use as a start. So Select Frame 1 in the Frame Gallery and click the Copy button on the Frame Gallery. This will create a new fourth frame (which will actually be named 3, because the existing Frame 3 has been renamed to Frame 3; Goto Frame 1). We need to name this frame to be Frame 4 which we do the same way as before, just double click on the frame in the Frame Gallery and enter the name Frame 4.

For the animation we will just move the 1 across the frame. To do this, with our new Frame 4 we'll delete all objects except the 1 (and the background). This will be the start of the new animation sequence.



Now we'll create a new Key Frame 5. Copy the new Frame 4 (select it in the Frame Gallery and click the Copy button) to create a new Frame 5. And then just move the 1 across to the other side of the frame like this:



You can preview your work so far, as before. Ignore the warnings. And you can now click on the 1 to show it jumping to Frame 4 and animating the 1 across the screen. So this now shows the URL frame jumping working.

Once the 1 has moved across the screen, we'll jump right back to the start of the whole animation. You should now understand how to do this, by using the Goto command as described above (rename this frame, by double clicking the frame in the Frame Gallery, to have a ;goto Frame 1 on the end of the name. So it should now have the full name Frame 5;goto Frame 1).

Let's finish this example by creating the new animation sequence for the 2.

We'll create a new start frame for the 2 sequence, based on Frame 1 again. So select Frame 1 in the Frame Gallery and click the Copy button. This will create a sixth frame (you'll have to rename it to be Frame 6, as above). Delete everything on it, except the 2, so it looks like this:



Now create a Frame 7 by copying Frame 6 and moving the text as you require for this animation e.g. so it's like this:



And there you have it, the completed animation.



Download the animation XAR file

(In case you're wondering - we've not added a goto Frame 1 onto the last Frame 7 because this happens automatically anyway - the last frame always cycles back to the start frame).

What we have demonstrated is a continually repeating animation going through Frames 1, 2, 3, 1, 2, 3 etc by using the Goto command at the end of Key Frames 3 and 5. And secondly by using the URL redirect we've made it so that clicking on the 1 or 2 objects redirect to completely separate animation sequences.

Summary

It's easy to redirect the flow of your animation in one of two ways:

- To jump to any key frame from another key frame, just append ; goto Frame x on the end of the key frame name (semi-colon separator)

- To jump to any key frame when the viewer clicks an object, use the URL mechanism apply a URL consisting of the frame name in the URL field and _frame in the target field.

- Although not mentioned here, you can stop an animation sequence by simply adding stop to a frame name.

© 2007 Xara Group Ltd