1

Xara Tutorial—Xara Flash

Animation

2

Table of Contents

1 Introduction ................................................................................................................. 4

2 Creating a Flash animation ........................................................................................ 6

2.1 Animation properties ..................................................................................... 13

2.2 Name gallery (Flash related features) .......................................................... 15

2.3 Good habits ..................................................................................................... 17

2.3.1 Using a background layer .................................................................... 17

2.3.2 Other ...................................................................................................... 18

2.4 Animation Tips ................................................................................................ 18

2.5 What Flash doesn’t support .......................................................................... 19

2.5.1 Group transparency .............................................................................. 19

2.5.2 Fill/transparency related issues........................................................... 19

3 Commands ................................................................................................................ 22

3.1 Applied to names ........................................................................................... 22

3.1.1 Rotation ................................................................................................. 22

3.1.2 Acceleration ........................................................................................... 24

3.1.3 Summary of Name commands ........................................................... 26

3.2 Applied to frames ........................................................................................... 26

3.2.1 ;stop ........................................................................................................ 26

3.2.2 ;goto ....................................................................................................... 27

3.3 Applied to objects .......................................................................................... 29

3.3.1 ClickTAG ................................................................................................. 30

3.3.2 _frame (goto) ......................................................................................... 31

3.3.3 _level ....................................................................................................... 33

4 Other features and techniques ............................................................................... 43

3

4.1 Text on a curve ................................................................................................ 43

4.2 Use of bitmaps ................................................................................................ 44

5 Final comments ......................................................................................................... 44

4

1 Introduction

One of the surprise new features in Xara Xtreme Pro version 3.0 was the ability to

generate basic Flash animations. Flash is vector based animation and it is similar to creating

animated gifs; that is, it is the vector equivalent of gif animation. In Xara, the process of

creating Flash animations is to design ‘key’ frames (a key frame is like a snapshot in time of

the animation sequence). Flash algorithms then generate the in-between stages of

animation.

So for example, in your first key frame you may draw a simple object, and you then

duplicate that frame and its contents to generate a frame 2. In that second key frame, you

may, say, move the object to a new position. The exported animation consisting of two

drawn frames will then fully animate the shape moving from its start position in key frame 1

to the end position in key frame 2 without having to manually draw each in-between frame

like would be required in an animated gif. It is typically much faster to create animations in

this way.

Flash however is quite limited in what it can do when it comes to generating these

intermediate steps. Flash primitives are by no means as versatile or advanced as Xara’s

blend tool, nor do they support most of Xara’s advanced features, such as vector feathering

or shadows. There are strict criteria that must be followed for successful ‘tweening’ in the

animation (tweening is the process where the Flash algorithm automatically generates the

in-beTWEEN steps between key frames). You are allowed to do the following for successful

tweening between two key frames:

1. Move: you can change the object position.

2. Scale: you can enlarge or reduce objects in size.

3. Squash or skew: you can squash or skew objects.

5

4. Rotate: you can rotate objects.

5. Transparency: you can adjust the overall (flat) transparency of the object.

6. Colour transform: you can change the (flat) fill colour of objects.

This is all Flash currently supports and if anything other than these primitives is used,

then errors will be generated and the animation won’t be produced. As can be seen, Flash

primitives are limited, but what is lacking is made up for in low file size, higher animation

frame rates, and reduced time to create the animation.

Double click this file to load an example of the Flash primitives into Xara for inspection.

When loaded, press the Preview Flash animation in browser button on the animation

toolbar.

Flash Primitives.xar

Note 1: This .docx document has been written in MS Word 2007 in Print Layout View,

and thus is printable. Furthermore, using the latest features of Xara, all images in the

document were pasted from Xara, and thus are Xara objects; simply double clicking on

them will load them directly back into Xara for easier, interactive inspection.

Note 2: A document tree is available in Word to see the structure of the document and

make navigation easier:

In Word 2003 and below: go to View > Document Map.

In Word 2007: go to View tab > check Document Map checkbox in Show/Hide

palette.

6

Note 3: This document also contains cross-references to key parts of the document. For

example, Ctrl-clicking on text such as ‘Figure 2.1’ will cause the document to jump to the

relevant location. Sections and figures references take advantage of this feature.

2 Creating a Flash animation

To quote from Xara’s help file, the procedure for creating Flash animations is as follows:

1. Draw your first frame and name any objects that you want to animate

2. Create a new key frame, usually done by copying the earlier frame

3. Move and transform the objects as required

4. Preview the results

5. Repeat steps 2 through 4

Making Flash animations in Xara teaches you well how to use the Name gallery—one of

Xara’s less discussed, but powerful features. This is covered in more detail in Section 2.2.

So let’s now generate a simple Flash animation which highlights the basic process. It’s

recommended that you have both the Frame and Name galleries open while creating Flash

animations to make things easier. They can be docked at the right-hand side of the screen

out of the way.

1. Start a new animation document by clicking on the new animation button on the

toolbar (Figure 2.1), or by pressing Ctrl+Shift+N.

2. It’s recommended that animations be drawn on top of a larger object that can be

used as a board or frame to more easily allow you to determine the physical size of

your animation and keep relative alignment of objects between frames. Create this

frame and a basic shape as shown in Figure 2.2.

7

3. Select the star (which will be animated) and then click the Create new names button

on the selector tool infobar (Figure 2.3). Note that we don’t want the background

object to animate and so it’s not given a name.

Figure 2.1. Start a new animation by either pressing the New animation button on the toolbar, or using the keyboard

shortcut Ctrl+Shift+N.

Figure 2.2. Create an object to be used as a background to help determine the physical size of the animation and

relative object positioning. Then create any object and put it within the background frame object.

8

Figure 2.3. Select the yellow star object and press the Create new names button on the Selector tool infobar.

4. Enter an appropriate name in the dialogue box that appears, such as “Star”, and click

Create. The name now appears in the Name gallery as shown in (Figure 2.4), and it

is assigned to the object. The red circle denotes that the selected object(s) (the star

in this case) has that name, and the full circle indicates that the object is the only

object in the document to have that name. This completes the first key frame.

9

Figure 2.4. Enter an appropriate name for the object in the dialogue box that appears, and press Create. The name is

assigned to the object and appears in the Name gallery in the Used names folder.

5. The next key frame now needs to be generated. This example is going to be just a

simple two-frame animation, and so this frame should represent the final look of the

object after it has been animated (making sure all the Flash rules shown in section 1

are followed). Click the copy button in the frame gallery as shown in Figure 2.5. This

copies Frame 1 and makes a new frame called Frame 2. Notice how the red circle

next to the name “Star” is now a half-circle; this is because two objects now share

the same name—the yellow star object on each of the two frames.

10

Figure 2.5. Press the Copy button in the Frame gallery to copy the contents of Frame 1 into a Frame 2, which then

appears in the list of frames. There are now two objects with the used name “Star”, hence the red circle beside the name

in the Name gallery is half filled.

6. Now that the frame has been copied, apply the desired (allowable) transformations

to the star. For example, we will perform all 6 possible Flash primitives: move, scale,

squash/skew, rotate, change colour, change (flat) transparency value (Figure 2.6).

The result will be how the animation will look when completed.

11

Figure 2.6. Transform the shape in the copied frame (Frame 2) to be how it should look at the end of the animation,

using the primitives that Flash supports.

7. The animation is now complete. To preview the animation, press the Preview Flash

animation in browser button on the animation toolbar as shown in Figure 2.7.

Previewing the animation will allow you to check its accuracy, and discover any Flash

errors that may be present. When the preview button is pressed, the screen shown

in Figure 2.8 is shown, providing a lot of information about the animation including

file size.

Note: The time delay shown next to a frame in the Frame gallery is the time it takes to

get from that frame to how things look in the next. This value can be changed in the

Animation properties dialogue (see section 1.1).

Figure 2.7. When the animation is completed, press the Preview Flash animation in browser button on the animation

toolbar to preview the result and fix any Flash errors that may be present.

12

Figure 2.8. The Flash animation preview screen is shown when the Preview Flash animation in browser button is

pressed on the animation toolbar. It displays the animation for inspection, and provides a lot of valuable information, such

as the animation’s file size and physical size amongst other information.

This basic flash animation is embedded below for inspection.

Basic Flash Animation Example.xar

13

2.1 Animation properties

The Animation properties dialogue can be opened by clicking one of the highlighted

buttons shown in Figure 2.9, or by double-clicking a frame in the Frame gallery. The

dialogue is shown in Figure 2.10.

Figure 2.9. Pressing one of the highlighted buttons will open the Animation properties dialogue.

14

Figure 2.10. The animation properties dialogue contains settings to customise the animation, such as frame timing

and Flash version export.

The dialogue box allows you to determine a number of different properties for your

Flash animation, including frame timings, and frame rate. It is mostly self explanatory, but

Xara’s help file covers each option in detail if necessary.

15

2.2 Name gallery (Flash related features)

This section will briefly cover the aspects of the Name gallery which affect Flash

animations—namely the selection circles and how they relate to name assignment. For a

more replete discussion of the Name gallery, see the Name gallery tutorial.

Names that are listed in the Used names folder of the Name gallery will show an

empty circle when no objects with that name are currently selected, as shown in

Figure 2.11.

Figure 2.11. Clear circles next to names in the Used names folder of the Name gallery indicate that no objects

currently selected (if any objects are even selected) have that name.

When all objects with a given name are currently selected, the circle besides that

name in the Used names folder of the Name gallery will be fully filled, as shown in

Figure 2.12.

16

Figure 2.12. When all objects with a given name are currently selected, the circle besides the name in the Used names

folder of the Name gallery becomes full.

When only some of the objects sharing a given name are selected, the circle besides

that name in the Used names folder of the Name gallery will be half filled, as shown

in Figure 2.13.

Figure 2.13. Selecting only a few of the objects sharing the same name results in a half-filled circle besides the name

in the Used names folder of the Name gallery.

17

When a name exists but no objects have it assigned, there is no circle visible at all, as

shown in Figure 2.14.

Figure 2.14. Names that exist but which are not assigned to any objects have no circle visible next to them in the Used

names folder of the Name gallery.

2.3 Good habits

2.3.1 Using a background layer

It’s often more efficient in a single Flash animation that isn’t particularly complicated, to

make a background frame containing all non animating objects that appear on all frames.

This is done by selecting the “B” checkbox in the Frame gallery. The objects remain visible

on all subsequent frames, but are only editable when the background frame is highlighted

in the Frame gallery.

18

Figure 2.15. Selecting “B” in the Frame gallery sets the contents of that frame to be background objects which appear

on all subsequent frames.

2.3.2 Other

Check that objects you wish to animate have been named.

Check the animation frame for errors before copying to create a new frame—

otherwise you could end up copying errors or omissions.

Make sure you give separate names for each animating object or group to avoid

errors.

2.4 Animation Tips

Setting the delay of the final frame in an animation to 0 seconds will result in the

immediate replaying of the animation without any pause at the end.

Objects can be grouped or joined to be treated as a single object for naming

purposes. This prevents the need to name each object in the group separately,

and can save a lot of time.

19

The overlay checkbox in the Frame gallery can be used to allow the previous

frame to remain visible. The file embedded below can be opened in Xara

(double-click) to examine the effect of the overlay feature. Select frame 3 in the

Frame gallery, and toggle the overlay box—the contents of frame 2 will become

visible when checked. When animating, with overlay on, the contents of frame 2

remain visible while frame 3 animates toward frame 4.

Overlay Example Animation.xar

2.5 What Flash doesn’t support

2.5.1 Group transparency

Group transparency will not work in Flash animations—ungroup objects first, apply

transparency and then regroup and reapply name. Alternatively, unselect Make groups be

transparent as a whole on the General tab of the Options dialogue (Ctrl+Shift+O, Figure

2.16) to apply transparency separately to all individual objects in a group at once.

2.5.2 Fill/transparency related issues

The simultaneous use of complex fills and transparency is not supported, for

example: using a linear fill and a linear transparency—you can use only one.

It’s not possible to tween a change in position of handles of complex fills or

transparencies. For example, it’s not possible to have an object colour, linearly,

fade between two colours subtly in frame 1, to more abruptly in frame 2 (see

Figure 2.17).

20

Figure 2.16. On the General tab of the Options dialogue, unselecting Make groups be transparent as a whole ensures

no group transparency is applied (which Flash doesn’t support), and instead, all objects within a group have the

transparency applied to them separately.

21

Figure 2.17. Fill handles cannot tween between frames.

It’s not possible to tween the fill or transparency type between frames, for

example: from linear to circular as demonstrated in Figure 2.18.

Figure 2.18. Fill or transparency type can’t be changed during a tween.

Other more complex fills or transparencies, such as conical etc. are not supported by

Flash.

Xara’s help file provides additional information on restrictions.

22

3 Commands

Commands can be used in Xara Flash to provide additional effects to animations.

Commands can be applied to:

1. object names (section 3.1);

2. the frames objects are on (section 3.2); or

3. on the objects themselves (section 3.3)

3.1 Applied to names

3.1.1 Rotation

Objects rotate arbitrarily as they translate during tweening. However this isn’t always

desirable; the most obvious example is if you want to animate a clock hand—the hands

should rotate about their ends near the centre of the clock instead of the translating centre

of the arm.

When naming an object, putting the text “rotate+:” or “rotate-:” before the object name

will force the object to rotate about the position of the rotation marker placed at design-

time, rather than transforming to the new position. The rotation marker can be viewed by

slowly clicking twice on an object with the selector tool. “+” in the rotate command means

the object will rotate clockwise; “-” means anticlockwise as shown in Figure 3.1. Colons (:)

denote the end of a command code.

23

Figure 3.1. Entering the text “rotate+:” or “rotate-:” before an object name will cause the object to rotate about the

position of the rotation marker (set at design time) instead of translating during the tweening process.

Tip 1: In general when using Xara, relocating the rotation marker will cause the rotation

marker to remain in that position even when other objects are selected. To return to the

default behaviour of the rotation marker being located at the centre of any object selected,

simply deselect all objects. When an object is next selected, the default behaviour will have

returned.

Tip 2: It’s possible to make an object rotate a full 360° revolution in just one frame by

using the rotate command and not manually rotating the object in the document on a

subsequent frame. However, the object will only rotate about its geometric centre. This

might have some uses in certain situations, such as aeroplane propellers, toy spinners,

windmills etc.

24

3.1.2 Acceleration

Objects can be made to accelerate when translating by using special acceleration

commands, similar to the rotation command discussed in section 3.1.1. There are four main

commands: “<:”, “>:”, “<>:”, or “><:” which are typed before the name of an object. The

chevron can be thought as representing the object’s change in speed; for example, the

shape “<” starts off small and gets larger—this is also how the object’s speed will change: it

will start slow and become fast as shown in Figure 3.2. Colons (:) denote the end of a

command code. Note that an object’s speed and acceleration will restart at the start of

each frame the object is designed to animate in.

Figure 3.2. Entering acceleration command text before a name results in the accelerated motion of an object during a

tween between frames. The speed and acceleration of motion begins again with each frame.

Furthermore, the profile of the acceleration can be altered by inserting a number in the

acceleration command. For example: by changing the command “<:” to “<x:” where “x”

represents a number from 0-9 inclusive, the acceleration rate will change. Higher numbers

represent greater accelerations, as illustrated in Figure 3.3. The number 5 represents the

same acceleration profile as no number at all; hence you can either increase or decrease the

acceleration profile.

25

Figure 3.3. The profile (strength) of the acceleration can be changed by typing a number from 0-9 inclusive after the

chevron in the command name. Lower numbers represent more subtle changes in speed, higher numbers represent

harsher changes. No number produces the same acceleration strength as the number 5.

26

3.1.3 Summary of Name commands

Table 3.1 summarises the list of Flash animation commands available as of Xara version

3.2. The commands can be combined together to add their effects; for example: entering

“rotate+<9:” will cause a heavy acceleration while the object rotates clockwise.

Command Description (x denotes acceleration strength; leave blank for a value of 5)

rotate+: Object rotates clockwise about rotation marker

rotate-: Object rotates anticlockwise about rotation marker

<x: Object accelerates (starts slow, ends fast)

>x: Object decelerates (starts fast, ends slow)

<>x: Object accelerates then decelerates (starts slow, goes fast, ends slow)

><x: Object decelerates then accelerates (starts fast, goes slow, ends fast)

Table 3.1. The commands can be used to alter the tweening properties of the animating objects. These commands

can be combined together for additive effects, e.g. accelerated rotation.

3.2 Applied to frames

3.2.1 ;stop

Change the name of a frame to “<frame name>;stop” to have the Flash animation

tween up to the start of that frame. In Figure 3.4, the animation will run up to how things

look in Frame 2, but not tween that frame to Frame 3. This command has uses if you are

planning to animate non-linearly through the frames (also see the goto command in section

3.2.2).

27

Figure 3.4. The stop command can be added to a frame name to prevent that frame from animating, and stop the

animation process. This is useful if the viewer is given options on how the animation should proceed.

3.2.2 ;goto

Change the name of a frame to “<frame name>;goto <desired frame name>” to have the

Flash animation jump to the name of the frame specified once the frame is reached. In

Figure 3.5, the animation will run up to how things look in Frame 2, but not tween that

frame to Frame 3. Instead, the animation will jump (not tween) back to Frame 1 after the

frame delay time. This command us useful if you are planning to animate non-linearly

through the frames (also see the stop command in section 3.2.1).

28

Figure 3.5. The goto command can be added to a frame name to prevent that frame from animating, and instead,

continue animating from the specified frame. This is useful if the viewer is given options on how the animation should

proceed.

Tip: Use the goto command on the first frame to jump to the frame you want to preview

when you are creating long animations. This helps avoid watching an entire animation if

only the end section needs to be looked at for example. In Figure 3.6, the animation begins

by jumping from Frame 1 to Frame 16 (i.e. the contents of Frame 16 in design time) to

watch the last few frames of animation instead of having to watch all frames.

29

Figure 3.6. Sections of animations can be skipped through to save viewing time when designing them by using the

goto command. In this example, the animation will show the first frame, and then jump to Frame 16 and continue to

animate as normal.

3.3 Applied to objects

Objects can be used as buttons in animations and offer the opportunity to navigate to

other parts of an animation, activate different stages of an animation, or even load

additional animations overlaid on the current one. This allows (limited) programming

capabilities in Flash animations, especially when combined with the ;stop command applied

to frame names as discussed in Section 3.2.1, which can pause an animation and wait for a

user response. Commands to objects are applied using the Web Address… dialogue that is

available from the object-right-click context menu.

30

3.3.1 ClickTAG

ClickTAGs allow the tracking of clicks, and are used by advertising networks. Xara Flash

animations support ClickTAGs and can be assigned to objects in animations using the

following procedure.

1. Right-click the object in your animation document that you wish to assign a

clickTAG to and select Web Address… from the context menu (Figure 3.7).

Figure 3.7. Right-click the object you wish to assign a ClickTAG to and select Web Address….

2. In the dialogue box that appears, enter ‘clickTAG’ in the URL box, as shown in

Figure 3.8.

31

Figure 3.8. Enter ‘clickTAG’ in the URL box of the Web Address… dialogue and press the Add button to assign.

3.3.2 _frame (goto)

This command is used to navigate to a different frame in an animation when the user

clicks on a button. To redirect the animation when clicking a button, follow this procedure:

1. Right-click the object that is to be a button and select Web address… as shown in

Figure 3.9.

2. Enter the details shown in Figure 3.10 in the dialogue box that appears: the

name of the frame you wish the animation to begin animating from should be

entered (case sensitively) in the URL text box, and the text “_Frame” should be

entered into the Target frame for URL text box. Pressing Add completes the

assignment.

32

Figure 3.9. Right-click the button object and select Web Address… from the context menu that appears.

Figure 3.10. Enter the (case sensitive) name of the frame you wish to jump to when the button is pressed in the URL

text box, and “_Frame” in the Target frame for URL text box before clicking the Add button.

33

3. When the animation is started, it will stop at Frame 1 (due to the stop command

in the frame name—discussed in section 3.2.1). The button is then able to be

pressed; clicking on it will cause the animation to continue to Frame 2. An

example xar file is embedded below:

Frame Goto Example.xar

3.3.3 _level

The _level command can be used to load other pre-made Flash animations from a core

Flash file. Each animation is played independently of the one it was loaded from, and this

allows a much wider range of effects to be produced in Flash animations. It also allows

more manageability in the creation of complex animations, as each File can be edited and

re-exported separately.

The animations are called using the _level command and, conceptually, are placed on a

“level” that is above or below the level of the Flash file it was called from. Figure 3.11

illustrates this more clearly; the base Flash file (level 0) can be used to display other Flash

files on different levels (in this case, all above level 0).

34

Figure 3.11. Successive Flash files can be called from a base Flash file using the _level command. The other Flash files

are called onto levels above or below the one they were called from, and this level is determined at design time.

Because new Flash files are introduced almost like sheets of transparency, higher levels

cover over lower levels as illustrated in Figure 3.12.

35

Figure 3.12. Higher levels overlay lower levels like sheets of transparency. Objects on upper levels will cover objects

on lower levels.

Note: It is advisable when making Flash files with multiple levels to ensure that each

separate Flash file shares a common background object or frame (either visible or set to no

colour) on which all other objects lie on. In the case of Figure 3.12, this object is the white

background rectangle. This way, all Flash files will remain aligned.

When publicly displaying Flash files that use the _levels feature, all constituent Flash

files must be available to the viewer (e.g. on your web space or their computer).

3.3.3.1 Example of using _Level

This section contains a step-by-step example of the creation of a multi-level Flash file. In

the example, the primary Flash file will have a series of three buttons within a border. Two

of the buttons toggle two different levels (i.e. different pre-made Flash files are

displayed/hidden), and the final button hides them all.

36

1. First, create the level 0, (base) Flash file (Figure 3.13). This could animate and

then wait for a user input, but here, it’s just a static image with buttons to most

simply illustrate the point.

Figure 3.13. Base Flash file containing buttons and a common background object to help align the other Flash files.

2. Next, right-click the first button (‘Show Level 1’) and select Web Address… from

the context menu, and enter the details shown in Figure 3.14. The URL text box

should contain the name of the Flash file that the button will load (including the

“.swf” extension), and the Target frame for URL text box should contain

“_levelX” where “X” represents the level it should be loaded to as discussed in

Figure 3.12. Clicking the Add button assigns these details to the object. There is

no need to close the Web Address… dialogue when repeating the process for the

other buttons—just click on the button image drawn in the Xara document and

37

enter new details. Xara’s use of modeless dialogues here makes this process

more efficient.

Figure 3.14. Right-click the first button design and select Web Address… from the context menu, and enter the details

shown. Don’t close the dialogue every time; simply click each button design and enter new values.

38

This completes the design of the base level Flash file. NOTE: Setting a button

(the right most one here) to load the base Flash file, i.e. this file, on the base

level (level 0), will reload the flash animation when pressed later, and thus turn

off any other flash files opened. This will also restart any animation if your base

Flash file were to be animated.

3. Press the Preview Flash animation in browser button on the animation toolbar to

ensure there are no Flash or tween errors displayed. The preview window

shown in Figure 3.15 should be displayed. For this base level (level 0) flash file,

an html code needs to be generated. In the preview window, click on the View

HTML link.

4. Copy the text presented in the dialogue that appears, as shown in Figure 3.16,

and then paste it into a text editor, such as Notepad. Change the two references

of the temporary swf file name that the swf will be saved as in step 6, that is, in

Figure 3.16, change “xarBA2D.swf” to “Levels Example 0.swf”.

5. Save the text as an .html file instead of a .txt file (any name will do, but you may

wish to give it the same as the xar file, for example: “Levels Example.html”).

6. Back in Xara, export the Flash file using the Export Animation… option from the

file menu, or pressing the export animation button from the animation toolbar.

The filename should be as in step 4: “Levels Example 0.swf”, and should be saved

to the same directory as the html file. (NOTE: All swf and html files generated in

a Flash file using the levels feature must be stored in the same directory.) Save

the xar file with the same name for ease of editing later, for example: “Levels

Example 0.xar”.

39

Figure 3.15. Press the Preview Flash animation in browser button on the animation toolbar to bring up the browser

preview. Click on the HTML link to see code which will be needed in the next step.

40

Figure 3.16. After clicking on the html link, the html code is revealed. Copy this to a text editor, change the

highlighted temporary swf filenames to the name of the animation, e.g. “Levels Example 0.swf”, and save the file as an

.html and not .txt, giving it a similar sensible name, e.g. “Levels Example.html”.

7. Open the html file in a browser (drag and drop) and your animation will be

displayed. Only the “Show no levels” button will work at the moment because

the other Flash files which the buttons will load aren’t yet made; these will be

made in steps 8 onwards.

8. First create the objects required for the level 1 Flash file, as shown in Figure 3.17.

It is recommended that you copy the needed objects from the level 0 xar file to

ensure things are aligned correctly. The level 1 Flash file in this example will be a

41

background object the same size as the level 0 background object (to ensure

correct aligning), and text showing that level 1 is active. The file will not animate

(for simplicity), but could be designed to. A new button will also cover the old

one, and when this button is pressed, it will turn off the Flash file. Remember

that this level 1 Flash file will be on top of the base level 0 Flash file and will thus

cover anything on that level—hence the background frame object is transparent.

Save the xar file with an appropriate name in case edits are needed later, for

example: “Levels Example 1.xar”.

Figure 3.17. This is the content of the level 1 Flash file. All objects in this file will cover over objects on level 0; hence

the background object is transparent. The button object has been copied from the original level 0 file and pasted in place

to ensure exact positioning relative to the background frame.

9. To have the level 1 layer turn off when the “OFF” button is pressed is made easy

by Xara. Simply right click the new button and select Web address… again.

Change the URL field to be a non-existent Flash file name, e.g. “Levels Example

blank.swf” or just “blank.swf” etc., and the target frame for URL should be set to

42

“_levelX” where X here should be the same level of the file it’s on, i.e. “_level1”,

as shown in . Press the Add button to assign the change, and this will now allow

the Flash file to turn off when the button is pressed.

Figure 3.18. To enable an object to turn off the Flash file when clicked, right click on the object and select Web

address…, enter the details shown, and press the Add button.

10. Now that the level 1 Flash file is complete, export it as “Levels Example 1.swf”. If

you refresh the browser that you loaded the html file into, you’ll now see that

the level 1 button works.

11. Simply repeat steps 8–10 to create the second Flash file, and ensure all files are

saved and exported with the correct filenames and into the same directory.

Refreshing the browser should then yield a completed multi-Flash-file Flash

animation with working buttons. Any of the Flash files called from the main,

level 0 one can easily be edited on their own from the original xar file, and re-

exported. This is a powerful way of producing complex animations with effects

that could not be achieved by just using a single Flash file; animations can now

tween independently of each other.

43

4 Other features and techniques

4.1 Text on a curve

Flash supports tweening text on a curve. The curve on which the text is attached can be

altered in the next key frame. To avoid errors, the curve must be set to non-visible (right-

click no color on the color line, or set line thickness to 0). Names must be applied to the text

for the animation to tween; no tweening will occur if applied only to the curve. Figure 4.1

can be loaded into Xara by double-clicking; use it to create a line tween in a Flash animation

to help understand this feature better.

Figure 4.1. Instructions and an example for how to tween text along a curve.

44

4.2 Use of bitmaps

Bitmaps (for example: bitmap copies of objects) can be used to overcome some of the

limitations of Flash. For example, feathering is not supported in Flash, however, if you

make a bitmap copy of your feathered object, then the appearance of feathering can be

retained. The disadvantage of using bitmaps in Flash however is that it increases file size

proportionally to the file size of the bitmaps used.

5 Final comments

While not intended to be a replete Flash authoring program, Xara is capable of

producing Flash animations that satisfy their intended use—relatively simple animated

Flash banners and web graphics. This is not to say that more complex animations aren’t

capable however. With enough experience, some quite complex Flash animations can be

created, and an example is embedded below.

Title Animation.xar

Xhris