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

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

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.

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.

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

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

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

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.

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

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

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

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.

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