Xara Tutorial Xara Flash Animation

Similar documents
Xara Tutorial Xara Bitmap Tracer

Flash Tutorial Part I

How to create a Flash banner advert in DrawPlus X2

TUTORIAL 4 Building a Navigation Bar with Fireworks

Using MindManager 14

Action settings and interactivity

m ac romed ia Fl a s h Curriculum Guide

About the HealthStream Learning Center

Task Card #2 SMART Board: Notebook

Creating Hyperlinks & Buttons InDesign CS6

Using Microsoft Word. Working With Objects

DWGSee Professional User Guide

Dreamweaver and Fireworks MX Integration Brian Hogan

Click on various options: Publications by Wizard Publications by Design Blank Publication

LESSON 7: IMPORTING AND VECTORIZING A BITMAP IMAGE

Lesson 7 - Creating Animation II

Introduction To Microsoft Office PowerPoint Bob Booth July 2008 AP-PPT5

Flash MX 2004 Animation Lesson

Introduction to Smart Board. Table of Contents. Connection Basics 3. Using the Board (Basics) 4. The Floating Tools Toolbar 5-6

Sharing a Screen, Documents or Whiteboard in Cisco Unified MeetingPlace

AutoDWG DWGSee DWG Viewer. DWGSee User Guide

Fireworks CS4 Tutorial Part 1: Intro

Microsoft PowerPoint 2010

How To Write A Cq5 Authoring Manual On An Ubuntu Cq (Windows) (Windows 5) (Mac) (Apple) (Amd) (Powerbook) (Html) (Web) (Font

Hypercosm. Studio.

Microsoft PowerPoint 2011

Smart Board Notebook Software A guide for new Smart Board users

Flash MX Image Animation

Umbraco Content Management System (CMS) User Guide

Florence School District #1

Creating Custom Crystal Reports Tutorial

Microsoft Migrating to PowerPoint 2010 from PowerPoint 2003

Microsoft Expression Web Quickstart Guide

A Step-by-Step Guide to Setting Up clicktag Tracking in Flash Banner Ads

Table of Contents. I. Banner Design Studio Overview II. Banner Creation Methods III. User Interface... 8

Welcome to CorelDRAW, a comprehensive vector-based drawing and graphic-design program for the graphics professional.

Overview of the Adobe Flash Professional CS6 workspace

Working With Animation: Introduction to Flash

SMART BOARD USER GUIDE FOR PC TABLE OF CONTENTS I. BEFORE YOU USE THE SMART BOARD. What is it?

Manual English KOI Desktop App 2.0.x

Using Excel for Business Analysis: A Guide to Financial Modelling Fundamentals

SMART Board Menu. Full Reference Guide

Contents. Launching FrontPage Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...

Creating a Flash.swf animation

Revision history: New comments added to: m)! Universal Driver

PowerPoint 2007: Basics Learning Guide

Create a GAME PERFORMANCE Portfolio with Microsoft Word

TxDMV RTS Training Guide for Working with Cognos Reports

Microsoft PowerPoint 2008

Introduction to Microsoft Excel 2007/2010

SMART Board Training Outline Trainer: Basel Badran

Introduction to MS WINDOWS XP

SolidWorks Tutorial 3 MAGNETIC BLOCK

Animator V2 for DAZ Studio. Reference Manual

Creating Web Pages with Microsoft FrontPage

Figure 3.5: Exporting SWF Files

3D Viewer. user's manual _2

Bitrix Site Manager 4.1. User Guide

Plotting: Customizing the Graph

Introduction to OpenOffice Writer 2.0 Jessica Kubik Information Technology Lab School of Information University of Texas at Austin Fall 2005

HOW TO USE THIS GUIDE

Fireworks 3 Animation and Rollovers

S M A R T D R A W U S E R G U I D E : F u n d a m e n t a l s f o r N e w U s e r s

Using Flow Control with the HEAD Recorder

ADMINISTRATORS GUIDE EPISUITE 6

Hello. What s inside? Ready to build a website?

PowerPoint 2013 Basics for Windows Training Objective

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

Quick Start Guide. Microsoft Publisher 2013 looks different from previous versions, so we created this guide to help you minimize the learning curve.

RHYTHMYX USER MANUAL EDITING WEB PAGES

Toad for Data Analysts, Tips n Tricks

Linear Referencing Tutorial

SMART Notebook 10 User s Guide. Linux Operating Systems

Smoothboard 2.0 Updates. Software Version: 2.0 Document Version: 1.0

Communicate: In Print

CATIA Basic Concepts TABLE OF CONTENTS

Chapter 12 Creating Web Pages

Baseball Playbook Manual

Chapter 1. Creating Sketches in. the Sketch Mode-I. Evaluation chapter. Logon to for more details. Learning Objectives

Working with SmartArt

Microsoft Word Quick Reference Guide. Union Institute & University

Microsoft PowerPoint 2010 Handout

So you want to create an a Friend action

Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint

Microsoft Publisher 2010 What s New!

After Effects CS4. Getting Started. Getting Started. Essential Training Introduction

Word basics. Before you begin. What you'll learn. Requirements. Estimated time to complete:

How to create and personalize a PDF portfolio

SiteBuilder 2.1 Manual

Embroidery Fonts Plus ( EFP ) Tutorial Guide Version

PowerPoint 2007 Basics Website:

Publisher 2010 Cheat Sheet

Hello. What s inside? Ready to build a website?

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)

3. Add and delete a cover page...7 Add a cover page... 7 Delete a cover page... 7

Chapter 4: Website Basics

GOOGLE DOCS APPLICATION WORK WITH GOOGLE DOCUMENTS

BIGPOND ONLINE STORAGE USER GUIDE Issue August 2005

Transcription:

Xara Tutorial Xara Flash Animation 1

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 2

4.1 Text on a curve... 43 4.2 Use of bitmaps... 44 5 Final comments... 44 3

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). animation. Flash algorithms then generate the in-between stages of 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. 4

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

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

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

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

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

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

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

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 12

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

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

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

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

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

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

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

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

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

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 designtime, 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. 22

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

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

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

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+: rotate-: <x: >x: <>x: ><x: Object rotates clockwise about rotation marker Object rotates anticlockwise about rotation marker Object accelerates (starts slow, ends fast) Object decelerates (starts fast, ends slow) Object accelerates then decelerates (starts slow, goes fast, ends slow) 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). 26

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

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

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

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

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

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

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

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

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

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 36

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

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

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

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 40

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 41

_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 reexported. 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. 42

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 (rightclick 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. 43

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 44