city map tutorial

8/7/2019 City Map Tutorial

1/26

2005, Ikivo AB

Ikivo Animator v1.1 General Workflow Tutorial 1

Ikivo Animator 1.1

General Workflow

Tutorial


2/26

2005, Ikivo AB


Contents

Introduction . . . . . . . . . . . . . . . . . . . . . 3About These Lessons . . . . . . . . . . . . . . . . . 3About SVG . . . . . . . . . . . . . . . . . . . . . 4Before You Begin . . . . . . . . . . . . . . . . . . . 4Creating a New Document . . . . . . . . . . . . . . . . 7

The Workspace . . . . . . . . . . . . . . . . . . . 7Stage Window . . . . . . . . . . . . . . . . . . . . 8Object Browser . . . . . . . . . . . . . . . . . . . 8Timeline Window . . . . . . . . . . . . . . . . . . . 8Color Palette . . . . . . . . . . . . . . . . . . . . 8Transform Palette . . . . . . . . . . . . . . . . . . . 8History Palette . . . . . . . . . . . . . . . . . . . . 8Inserting Content into Your Animation . . . . . . . . . . . . 8Using the Object Browser . . . . . . . . . . . . . . . . 8SVG Animation Basics . . . . . . . . . . . . . . . . 10Inheritance . . . . . . . . . . . . . . . . . . . . 10Animating Transformations . . . . . . . . . . . . . . . 12Scale Animations . . . . . . . . . . . . . . . . . . 12

The Transform Palette . . . . . . . . . . . . . . . . 13The History Palette . . . . . . . . . . . . . . . . . 14Motion Path Animations . . . . . . . . . . . . . . . . 14Grouping Objects to Animate . . . . . . . . . . . . . . 17Animating Color . . . . . . . . . . . . . . . . . . 18Previewing Animations . . . . . . . . . . . . . . . . 19Wrapping Up . . . . . . . . . . . . . . . . . . . 21Additional Resources. . . . . . . . . . . . . . . . . 23Appendix A: Tips and Tricks . . . . . . . . . . . . . . 24


3/26

2005, Ikivo AB


Introduction

About These Lessons

The following tutorials introduce new users to a general workflow for usingIkivos (formerly known as ZOOMON Mobile Solutions AB) Ikivo Animator tocreate animated mobile content. Although all of the features described here

may be used to create a variety of animations (from entertaining cartoons andanimated e-cards, to business graphics and application interfaces), this particularset of lessons walks the user through the creation of a simple location-basedservices-type map animation.

The basic animation features discussed in these lessons include:

visibility (show/hide animations)

fills and strokes (color tweening)

motion paths

rotation

scale

For more information on these and other features, refer to the programs HelpMenu, and consult the list of resources provided at the end of these lessons. TheAppendix, for reasons of brevity, contains helpful tips and tricks relevant to this

particular release that could not be included in the general workflow outlined inthe lessons.


4/26

2005, Ikivo AB


About SVG

Scalable Vector Graphics (SVG) was first introduced in 1999 through theauspices of the World Wide Web Consortium (W3C). A working group composedof leading graphics industry vendors developed the SVG 1.0 Specification.SVG is a text-based graphics language based on XML, and incorporates otherstandards such as Cascading Style Sheets (CSS), the Document Object Model

(DOM), and Synchronous Multimedia Integration Language (SMIL).

In 2001, a subset of SVG called SVG Mobile, was adopted by the mobile industryas the basis for an industry-wide graphics platform. Mobile software companieslike Ikivo (formerly known as ZOOMON Mobile Solutions AB) provide handsetmanufacturers with SVG viewing technology enabling services and content suchas MMS, business and information graphics, and application interfaces. SVGTiny (SVGT) is the smallest subset of SVG, designed to deliver rich graphics overnarrow bandwidths.

Before You Begin

Before creating an animation, here are a few things to consider and rememberabout the workflow:

Try to storyboard your animation as much as possible

Plan scene sequence, timing, etc.

Economize on animations and objects

Reuse objects whenever possible (apply transformations to reposition

between scenes, adjust colors, etc.)

Apply animations to groups of objects instead of to individual objects.

Adobe Illustrator CS SVG tips

SVG IDs

Be sure to set the Units and Display Performance preference forIdentify Objects By to XML ID so that Adobe Illustrator enforcesthe proper rules for XML object names (go to Preferences in theEdit menu).

Object IDs in Ikivo Animator are consistent with names set in the LayerPalette in Adobe Illustrator. Use layers to organize your illustration andto apply logical and useful names to your objects

The root SVG ID is not set in Adobe Illustrator. SVG files generatedby Adobe Illustrator will always be given the ID Group when insertedinto Ikivo Animator. However, renaming the root SVG object is simple todo in Ikivo Animator.

Remember that SVG is text-basedso the fewer animation and graphic

objects (including groups), thesmaller the text file.


5/26

2005, Ikivo AB


Fonts

Ikivo Animator does not support the Adobe Illustrator embedded fontformat for SVG files. If a particular font face is desired, convert thestyled text to outlines before inserting the artwork into Ikivo Animator.

Also note that the only font-face supported in Ikivo Animator is a

sans-serif font. Using Verdana or a similar sans-serif font in AdobeIllustrator will approximate the appearance of text objects in IkivoAnimator.

Gradients

Ikivo Animator supports the proposed SVG Tiny 1.2 features forgradients. Although Animator supports the animation of gradientproperties, do not use these features if your targeted platform onlysupports SVG Tiny 1.1.

Filter effects

SVG Filter Effects are not supported in SVG Tiny 1.1. Non-SVG filtereffects are rendered and converted to bitmaps in SVG created byAdobe Illustrator. If these bitmaps are embedded in the SVG file, theywill be preserved in Ikivo Animator.

Transparencies

Ikivo Animator supports the proposed SVG Tiny 1.2 features fortransparency. Although Animator supports the animation of opacity(transparency) properties, do not use these features if your targetedplatform only supports SVG Tiny 1.1.

Using bitmaps

Bitmaps should be embedded, and not linked.

Ikivo Animator will insert SVG illustrations containing linked bitmaps.However, because the support and file systems of different devices maybe different, embedding bitmaps in your static SVG is recommended.

Ikivo Animator embeds all bitmapped content, regardless of how theyare included in the original SVG.

Scripting (SVG Interactivity, Variables)

SVG Tiny 1.1 does not support scripting. Any scripting in the SVG filecreated with the SVG Interactivity Palette, or the Variables Palette (fordynamic substitution) will be removed when inserted into Ikivo Animator.

Artwork dimensions

Although SVG is scalable, if you are going to work with any bitmapgraphics, you should work within the targeted dimensions. This is toensure that the bitmaps are optimized in both graphic quality and filesize for your target device.

Font support on devices may differso be sure to research the targeplatform as much as possible. At thevery least, you can always converthe text to outlines.


6/26

2005, Ikivo AB


Consider what, if any, post-animation development will be necessary.

Ikivo Animator generated content is viable for mobile use, but,depending on the targeted service, may require embedding in XHTMLor SMIL (MMS). Use Adobe GoLive CS to publish your animation withthese and other standards.


7/26

2005, Ikivo AB


Creating a New Document

dothis Launch Ikivo Animator and create a New animation via the File Menu. For this

tutorial, we will be creating an animated map for the Sony Ericsson K700. SelectSony Ericsson K700 from the Profiles dropdown. The Width and Height fieldsare set automatically for the Canvas Size.

The Workspace

The Ikivo Animator workspace is designed to enable fast and easy mobilecontent animation through an intuitive interface.

Colour Palette

Pacing Palette

Transform Palette

History PaletteTimeline

Object Browser

Stage

Although well be creating ananimation customized for the K700display, remember that SVG isscalable, so that the same contencan be resized to other deviceresolutions including the desktop.


8/26

2005, Ikivo AB


Stage Window

The Stage Window contains the canvas area and displays the current frame ofan animation as set in the Timeline.

Object Browser

The Object Browser lets you browse to a directory and preview SVG contentfor animation. This content can then be inserted into an animation, edited (byan external vector graphics editor), or deleted. New static content can also becreated here by launching an external editor.

Timeline Window

The Timeline Window contains both the Treeview and Timeline panes. TheTreeview provides a navigable interface for viewing the object tree and animationattributes. The Timeline displays the linear timelines for creating and editing

animations. The Timeline uses a time-interval animation interface whereanimations are timed at exactly 10 frames a second.

Color Palette

The Color Palette includes controls for editing fill and stroke properties suchas color, opacity, and gradients. This palette also contains an expandablecustomizable swatch palette.

Transform Palette

The Transform Palette enables numerical value entry for position, rotation, andscale attributes for objects.

Pacing Palette

The Pacing Palette provides a means for setting acceleration curves to anytweened animation.

History Palette

The History Palette provides a list of navigable actions as they are performedduring a working session. Use this palette to review actions, and undo and redosteps during a session.

It should be noted that unlike a videoor SWF format animation, SVG istime-based and not frame-based

The advantage to being time-basedis that animations will play moreaccurately at the times and durationsspecified, and performance scalesaccording to the platform.


9/26

2005, Ikivo AB


Inserting Content into Your Animation

Using the Object Browser

The Object Browser can be considered as a content management window. Morethan a file browser, the Object Browser enables the content creator to edit,create, and delete static content as well as preview SVG artwork for animation.

(Static content cannot be edited or created by Ikivo Animator. For more oncreating static content from vector graphics editors like Adobe Illustrator, seethe Ikivo Animator Help Menu)

dothis Click the Browse button to open a file browser, and then locate the directory

in which you chose to install the application (on the Mac, click Show Favoritesfirst to access the Browse button). The default directory on Windows is C:\Program Files\Ikivo\Ikivo Animator. In that directory, find the StaticContent\CityMap directory (on the Mac, browse to your Documents folder and lookin Ikivo Animator Samples/StaticContent/CityMap). The selected directoryscontents are displayed in the Object Browser preview window. Hovering the

cursor over the available files displays a tooltip showing object ID, width, height,and file size information.

dothis Select downtown_map.svg and click the Insert button to bring a copy of this

object into your layout. Because the artwork has already been sized for thisparticular application, we wont need the Scale to fit option (the object shouldbe inserted at its original size).

If the inserted content is not SVG Tiny compliant (the mobile subset of the SVGSpecification), an alert dialog appears, and Ikivo Animator automatically filtersout non-compliant elements and attributes.

Adobe Illustrator versions beforethe newest, CS2, include metadatafor cross-product workflows withother Adobe applications inthe Creative Suite. Because thiscontent is not necessary for mobileapplications in SVG Tiny, Ikivo

Animator filters this metadata out. Asa result, you will find that file sizes ocontent generated by Ikivo Animatoare generally much smaller thanthat shown in the Object Browsetooltips.


10/26

2005, Ikivo AB


SVG Animation Basics

Although it is very simple to begin animating content with Ikivo Animator rightaway, there are a couple of concepts to note that will enable you to optimize yourworkflows as well as your animations.

Inheritance

SVG animations, as well as other properties and attributes, are inherited fromparents (groups) to their children (objects in the group). This means that ananimation on a group will, as expected, apply to the enclosed children. Keep thisin mind when animating multiple objects with the same animation. Depending onthe structure of the illustration, you may be able to combine these objects into asingle group, and animate the parent instead of each child.

The Treeview in the Timeline includes 2 columns of icons for each objectwithin the outermost SVG object. These indicator buttons display the status of

an objects animation layers and trapping. Use the Animation Layers indicatorbutton to show and hide an objects animation layers. Because every object canbe animated, the Treeview can quickly become difficult to view and navigate ifevery objects animatable properties are always in view. The Animation Layersindicator button lets you collapse the animation layers on objects not beingedited in order to clean up the work area. At the top of the Treeview is theHide All Animation button which lets you close all animation layers at once.

The Trapping indicator button, similarly, indicates the trapping status of an objectas well as controls the state of an objects trapping. Trapping is similar to, butdifferent from locking an object. A trapped object is selectable and animatable

(as opposed to locked), but its children, or the objects within the group object,are not accessible. Trapping allows you to edit and animate groups withoutdisturbing child objects. All content, when first opened or inserted into IkivoAnimator, is trapped by default. This is to ensure that no unwanted editing isperformed by accident. However, there may be times that you might want toaccess and manipulate every object in the illustration. For these situations (seeAnimating Color later in this document), there is the Untrap All button at thetop of the Treeview.

It should be noted that althoughIkivo Animator allows transformation

animations on the outermost SVGobject, the Adobe SVG Viewerdoesnot support this feature. For cross-platform consistency, if you wanto perform such a transformationanimation, group all of the contenin your animation, and then applya transformation animation to thisgroup.


11/26

2005, Ikivo AB


Animating Visibility

dothis The downtown map will be the main part of our animation, but lets start with

an introduction title screen. The intention is to display the title screen for a fewseconds and then show the main animation featuring the map illustration. Selecttitle_screen.svg in the Object Browser and click the Insert button to place the

new object in the animation.

Notice that when we inserted the title_screen.svg object into the layout, theobject appeared in the Stage Window, apparently replacing the map image. Themap image still exists, but because both objects are the same size and occupythe same position on the canvas, the more recently placed title screen objectoverlays the map image.

Looking at the Treeview on the left-hand side of the Timeline confirms thisstacking order of objects. As in the Layer Palette in Adobe Illustrator, objectshigher up in the stacking order appear to be on top of those below.

By default, an inserted objects animatable attributes are hidden in the TimelineWindow. To reveal the animation layers corresponding to each animatableattribute, click the Show Animations button next to the name of the object youwant to animate. In this example, we will begin by adding an animation to theoutermost group or layer of the title_screen.svg object.

dothis Click the Show Animations button next to the outermost group of the inserted

title screen (called title_screen.svg). Notice that this object already has a

visibility animation, as indicated by the reddish gray animation bar in the Timeline.


12/26

2005, Ikivo AB


Every object that is inserted will show a visibility animation (otherwise the objectwould not be visible). Position the cursor over the animation bar at 3 seconds,and right-click. Select Make invisible from the context menu. A keypoint isinserted and the visibility animation now ends at 3 seconds. By sliding theTimeline Marker back and forth across the end of the animation, we can previewhow the title screen becomes hidden at 3 seconds, revealing the map illustrationdirectly beneath it.

Animating Transformations

Now that we have the full map in view, well apply some transformationanimations to zoom in and pan around it.

Ikivo Animators transformation animations include position animations (withmotion paths), rotation, and scale animations. As with the preceding visibilityanimation, transformation animations are also created with keypoints set in theTimeline.

Scale Animations

dothis Begin by displaying the animation layers on the outermost downtown_map.svg

object. First, add a keypoint in the scale animation layer at 5 seconds. Do thisby selecting Add Keypoint: Scale from the Object Menu, or by right-clicking inthe scale animation layer at the desired point and selecting Add keypoint fromthe context menu. The object now retains its scale value until the animationreaches this point. Move the timeline marker to 6 seconds, and scale the mapto approximately three times its current size by dragging one of the objects

selection box corners outward. The selection corners that enable scaling are,initially, each corner except the upper right-hand corner. By holding the shift keywhile dragging, we can constrain the width and height proportions while scaling.

Holding the cursor over each cornereveals how you can transform theobject.


13/26

2005, Ikivo AB


As we scale the map in the Stage Window, notice that a keypoint is inserted inthe scale animation layer at the current frame in the Timeline. Also, an animationbar shows that this scale animation will tween from the previous value to thenew value.

The Transform Palette

Animating objects by manually transforming them in the Stage Window is fine,but if precision is required, the Transform Palette can be an important tool.

The Transform Palette enables the user to get position coordinates as well aswidth and height values of the selected object. Given these values, we can thenprecisely control where an object moves to, how it rotates, and how it scales. Try

The three lower right fields foRotation degrees and Scale width

and height percentages are additiveinput fields. Use these input fieldsto perform rotation and scaletransformations.

Because visibility animations func-

tion differently from other attributeanimations, the animation bars arestyled differently (reddish gray asopposed to red) in order to distinguishthem. Visibility animations only have2 values (visible and hidden), andthe presence of an animation bameans that the object is visible. Inthis sense, the visibility animationbar is a state indicator for the objec(the presence of the animation bashows that the object is visible).

A tweened animation interpolatesthe in-between values of an ani-mation over time.


14/26

2005, Ikivo AB


entering some values to experiment with the various transform values. (Dontworry about messing up the animation well see how to fix things easily in amoment).

The History Palette

Now, lets redo the original scale animation using the Transform Palette instead

of by dragging the objects selection box corner. With Ikivo Animator, undoingand redoing our work is easy because of the easily accessible History Palette.

dothis In the History Palette, step through the actions you have performed during this

session by clicking the Undo and Redo buttons at the bottom of the palette, orby using the up and down arrow keys on your keyboard. You can also jump toany action by simply clicking the step in the list.

For now, go back to the first Add Scale step which is where the first scaleanimation keypoint was entered. In the Transform Palette, click the Lock

Proportions button next to scale percentage fields and enter 300 in either thewidth or height fields. Now the map illustration scales precisely 300% over a 1second interval.

Motion Path Animations

The completed example of this animation shows an animated marker travelingalong a route from a hotel to a theater. This is an example of a motion pathanimation.

dothis Insert the object called marker_arrow.svg from the Object Browser. We want

this marker to be visible no earlier than at 7 seconds the point at which the

The Lock Proportions button lockspairs of values to ensure proportionascaling

Note that the History Palette ishidden by default when workingat the minimum 1024x768 screensize


15/26

2005, Ikivo AB


map has zoomed in from the previous animation. Because the marker objectis the last item inserted into the layout, it appears at the top of the Timelinestreeview. Reveal the animation layers and right-click on the Visibility animationlayer at 0 seconds, and select Make invisible from the context menu. Now, goto 7 seconds, and right-click to select Make visible from the context menu.

Now, zoom in on the Stage view by clicking the magnifier buttons, or by selecting

400% from the drop-down list. Use the zoom and window scroll bars to controlthe view of the Canvas area, so that moving and placing objects is easier to do.Position the marker at the corner of Stockton and 4th Streets. Select the rotationhandle (diamond shaped handle at the upper right hand corner of the selectionbox), and rotate the marker to face south-east down 4th Street towards MissionStreet. This will be the beginning of the motion path. Now, advance the TimelineMarker to 8 seconds. Drag the marker arrow to the corner of 4 th and Missionwhile holding the Shift key. (Holding the Shift key while moving an objectconstrains the motion path to a straight line.) Now, rotate the marker arrow toface south-west to travel down Mission Street. Advance the Timeline Marker to9 seconds, and again, shift-drag the marker down Mission Street to the front ofthe theater building (rose colored building), and rotate the marker arrow again toenter the building. Finally, advance the Timeline Marker to 9.5 seconds and carry

out one final position animation on the marker arrow to move it into the middleof the theater.

Animations are tweened by default in Ikivo Animator, because most of thetime, this will be the desired behavior. However, in this case, we want the markerarrow to rotate only at the corner of 4th and Mission Streets (the arrow shouldstay oriented towards south-east until the corner, and then should rotate tosouth-west). To remove the default tweening, right-click on the first rotationkeypoint and select Tween to next to disable tweening. Do the same for thekeypoint at 8 seconds.


16/26

2005, Ikivo AB


dothis Sliding the Timeline Marker along the top of the Timeline Window gives us an

idea of how an animation is working, but it is more revealing to play back theanimation using the Playback controls at the top of the Treeview pane. Movethe Timeline Marker to the beginning and press the play button. (You may wantto zoom out first to get a better view by clicking the zoom out magnifying glassat the bottom of the Stage Window, or by selecting Zoom Out from the ViewMenu.)

dothis Notice that the control point in the motion path at the corner of 4th and Mission

corresponds to the keypoint at 8 seconds. Selecting and dragging this keypointin the position animation layer changes the pacing along the motion path. As theanimation is at the moment, the time to travel from the hotel to the corner of theblock is the same as the time from the corner to the theater. To make the pacingappear more even (so that we dont appear to be sprinting down the street to thetheater), move the keypoint to 7.8 seconds. Now, the marker arrow travels morequickly at the beginning, and has more time to travel the longer distance afterthe corner. To complete the effect, move the keypoint on the rotation animationlayer to the same frame as the position animation keypoint.

The previous animation demonstrated how to create a motion path withconstraints in timing and path shape. However, motion paths do not have to beconstrained to straight lines. Ikivo Animator makes it very easy to draw any kindof path in just a few steps. Editing a motion path is as easy as moving controlpoints, handles and inserting and deleting points.

dothis Add a playful animation over the map by inserting the balloons.svg object into

the animation from the Object Browser. Hide the balloons until 7.5 seconds bymaking them invisible at 0 seconds and then making them visible at 7.5 seconds

(we will make the balloon animation overlap the end of the marker arrowanimation). Add a position animation keypoint at 7.5 seconds, and then, advancethe Time Marker to 17 seconds. Grab the balloons and drag them around thecanvas area, creating a motion path that simulates a breeze pushing the balloonsaround.


17/26

2005, Ikivo AB


The resulting motion path has red and white control points. The white pointsat the ends of this motion path are Timed Control Points which correspondto keypoints in the position animation layer. The red points are Path ControlPoints, which are points along the path that define the shape of the motion path.

Selecting a control point reveals its curve handles which define the direction andamount of curve on the corresponding path segment.

Grouping Objects to Animate

The placement of an animation within objects and within groups of objects isimportant for both optimizing the performance (economizing on the number ofanimations applied for a particular effect) and for creating specific animationeffects.

We can animate the marker arrows journey from the hotel to the theater furtherby adding an animation to the map itself. For example, by applying a positionanimation, the map may appear to pan while the marker arrow moves, keepingthe marker in the center of the screen. Since the marker is animated relative to astatic map background (actually it is animated relative to the Stage, or viewbox),animating the map alone would make the markers animation appear to be outof sync with the map.

By grouping the marker arrow and the map, we can apply an overalltransformation to both objects by animating the group. Of course, we couldachieve the same effect by animating each object separately, but the result

would be more complex, more difficult to manage, and would increase file sizeunnecessarily.

dothis Because we inserted the title_screen.svg object between the downtown_map.

svg and marker_arrow.svg, we need to move the title_screen.svg up in theTreeview to make sure we dont mix up the stacking order. Remember that thetitle_screen.svg hides the map from the beginning of the animation (the firstvisibility animation that we performed), and so it must stay on top of the map.

The stacking order (z-order) ofobjects can also be changed bysimply selecting and dragging themup and down in the Treeview.

The Time Marker must be withinthe position animation bar of theanimated object in order to view theobjects motion path


18/26

2005, Ikivo AB


Right-click on the title_screen.svg object in the Treeview and select Sendbackward from the context menu.

Now, we can select the marker arrow and the map in the Timeline Treeview byclicking the marker arrow object. Hold down the Control key and click the mapobject. Right-click and select Group in the context menu. Give this group amore meaningful name (than Group) such as arrow_and_map. Were ready to

animate this group now.

Show the animation layers on this new group, and insert keypoints for positionand rotation at 6 seconds. Advance the Timeline Marker to the points wherethe marker arrow turns at the corners of its route to the theater (7, 7.8, and 9seconds) and add some rotation and position animations to animate the markerarrow and keep the marker more or less in the center of the screen. Continuethe rotation animation out to the end of the balloon animation (17 seconds).

Animating Color

Although SVG Tiny 1.1 does not support object transparencies, we can simulatetransparencies by fading objects into their background colors. A nice effectin this particular animation would be to animate the colors of the marker arrowobject so that it appears to fade into the theater building after it has reached theend of its motion path animation.

In order to animate the marker arrows colors to match the color of the theaterbuilding that its on top of, we need to determine what the fill color is on thetheater building.

dothis Set the Timeline Marker to 10 seconds so that we have a clear view of what we

want to animate. Now, we can either click through the Tree view until we find thetheater building object (which in this case, is well labeled as one of the theaterobjects in the bldg_theaters group), and find the object we want that way. Or,we can click the Untrap All button at the top of the Treeview Trap column sothat we have access to all objects. Then simply, click on the object in the StageWindow until it appears to be selected. The selection system in Ikivo AnimatorsStage Window allows the user to select any untrapped object by drilling downinto a selection. For example, by clicking on the theater object once, we selectthe outermost group containing the marker arrow and the map (the group we

created previously). Clicking again, moves the selection to the downtown_map.svg object. Continuing on, we eventually end up with the object called theater2.Notice that the selection box on the object has turned from green to blue.The green selection box means that the object is an untrapped, and therefore,animatable group. The blue selection box means that the object is a leafelement, or the lowest unit of the group.

With the theater building now selected, we can determine the fill color by lookingat the Fill/Stroke Palette. Select the Fill Color Indicator to make certain that theFill/Stroke Palette is inspecting the fill and not the stroke color.

Ikivo Animator supports both transparency and gradients which areproposed features of the SVG Tiny1.2 profile. However, if the platform

you are developing for supportonly SVG Tiny 1.1, you shouldnot be using any transparenciesor gradients in your artwork(let alone try to animate them)

Although simply animating topacity of an object would bemuch simpler, in this example, weanimate the fill and stroke colors tosimulate a transparency animationin order to ensure SVG Tiny 1.1compliance.

The names you give objects inIkivo Animator translate into XMLIDs in the SVG, and so they musfollow certain conventions. XML

names must be unique in the file(two objects cannot have the samename), must begin with a letter, anunderscore (_) or a colon (:), andcannot contain spaces.


19/26

2005, Ikivo AB


Color Channel BoxesFill Color Indicator

Stroke Color Indicator

Define Gradient Vector Tool

Opacity Channel Slider

Gradient Preview

Gradient Type Dropdown

Color Palette Options

Add Gradient Stop

Remove Gradient Stop

Color Channel Sliders

Gradient Stop

Gradient Stop-Offs

Gradient Rotation Angle

Color Picker

Color Swatches

Collapse/Expand Swatches

Opacity Channel Box

The fill color appears to be the Web Hexidecimal color #FF6666. Take note ofthis color by creating a custom swatch. Click the Expand swatch palette button

at the bottom of the palette to reveal the Color Picker and Color Swatches.

To create a custom swatch, simply move the cursor to an empty swatch space atthe bottom of the palette, and when the cursor turns into the paint bucket, clickto fill the swatch with the selected color.

Now, select the marker arrow arrow object and show its animation layers. Addkeypoints to both the fill and stroke animation layers at 10 seconds. Advancethe Timeline Marker to 11 seconds and click the custom swatch color we justmade. Notice that a fill color animation is created that tweens the fill color of themarker arrow to the theaters fill color. Click the stroke color indicator in the Fill/

Stroke Palette in order to select the stroke color. Now click the swatch again toanimate the stroke of the marker arrow to the same reddish color.


20/26

2005, Ikivo AB


Previewing Animations

For previewing purposes, Ikivo Animator includes the Ikivo SVG Player whichis available on a variety of mobile handsets today. Through a combination ofthe actual viewer software and handset specifications, the user can accuratelypreview an animations performance on a target device.

Profile

Device specifications:color depth, display

resolution, avg. framesper second, etc.

Ikivo Animator

Accurate emulation of acommercially available

target platform

Ikivo SVG Player

Preview usingthe Ikivo

SVG Player

+

do

this Open the Preview Window by selecting Preview Window from the View Menu.Since we began this project by setting the target profile to the Sony EricssonK700, the window shows an image of the handset and the animation inside ofthe handsets window. Press the Play button in the Preview Windows playbackcontrols to watch the animation.

dothis The Preview Window confirms both performance and usability of our content.

Depending on the Preview option selected in the Preview Window options buttondrop-down, the display is at actual resolution, or at a Scaled approximation ofthe actual handset size.

When the Preview Window is playingan animation, all other windows andpalettes are inactive. You must pausethe animation in order to return tothe editing mode.


21/26

2005, Ikivo AB


The default setting is the Scaled approximation mode. In this view, we discoverthat it was a good idea to zoom in on the map because text labels on streetswere too small at the beginning. During the animation, as the view zooms in, thetext becomes legible.

dothis Select Pixel preview from the options button drop-down, to preview the

animation at the actual resolution of the target device. That is, the 176x220animation area is displayed as 176 pixels by 220 pixels on your monitor screen.

We can also preview the same content on different devices since it is likely the

content will play on more than one platform. Previewing the content on differentsettings can be helpful if we anticipate that the content will be used on a widerange of devices. Select other profiles via the drop-down list.

Wrapping Up

Now that we have confirmed that the animation will perform as intended, werejust about ready to save our SVG animation.

dothis As mentioned before, SVG is a text-based format, and so, like HTML, adding

metadata to our file will make it easy to search and index. Open the DocumentSettings dialog from the File Menu.

See Appendix A: Tips and Tricks

for infomation on the Open in DirectPreview feature.


22/26

2005, Ikivo AB


dothis Add a useful Title and Description to the animation file. For example, m.guide

downtown map can be the title, and animated route from Mission Hotel toTheater may be a good description.

dothis Now, we can save our animation. Open the Save dialog from the File Menu.

The Save dialog offers a couple of options for saving our SVG file. The Save astype drop-down provides the option of uncompressed and compressed SVGformats. Unless the file will require editing in a text editor at a later stage, theSVGT Compressed Files setting is preferred. Ikivo Animator compresses theSVG file using standard GZIP compression, and adds the .svgz suffix. Typically,compressed SVG files will reduce file size by 50-90%. Most of the time, you willsee higher compression ratios on larger files.

The Encoding option lets you set the text encoding for the file. If the animationincludes text objects with double-byte characters that fall out of the range ofUTF-8 encoding (for instance, some asian language characters or unusual

symbols), use the UTF-16 encoding option.

Compression and encoding suppormay vary between devices.


23/26

2005, Ikivo AB


Additional Resources

Ikivo AB

http://www.ikivo.com

http://www.ikivo.com/animator

Adobe Systems, Inc.

http://www.adobe.com/illustrator

http://www.adobe.com/svg

http://www.adobe.com/golive

World Wide Web Consortium (W3C): SVG Specification and News

http://www.w3.org/Graphics/SVG

http://www.w3.org/TR/SVGMobile

3rd Generation Partnership Project (3GPP)

http://www.3gpp.org


24/26

2005, Ikivo AB


Appendix A: Tips and Tricks

01: Grouping

Because animations can be applied to groups (to the group element itselfinstead of to the individual objects within a group), if a group is un-grouped,animations that had been applied to that group will be lost.

Similarly, if a new object is inserted into a previously animated group, the groupanimations will apply to the newly inserted content as well.

02: Embed raster content in AI SVG (no direct raster import)

Although Ikivo Animator can only insert SVG content into an animation, JPEGs,GIFs and PNGs can easily be converted to the insertable SVG format byusing Adobe Illustrator CS. Simply Place the raster image into a new AdobeIllustrator document, and Save the file as SVG. As SVG, Ikivo Animator willrecognize the content as insertable into an animation document.

03: Background color

SVG 1.1 and the SVG 1.1 Mobile profiles do not support a background colorattribute for an illustration or animation. However, its easy to create a re-usablebackground color object for use with Ikivo Animator with Adobe Illustrator CS.Use Adobe Illustrator CS to create a rectangle object (the exact size or colorof the rectangle wont matter). Save the simple image as an SVG file, and thenbring it into Ikivo Animator. Move this object to the bottom of the Tree View tomake it the background object. Scale the object to fit the canvas, and then applya fill color animation on the leaf element rectangle (the smallest, lowest object inthe Tree) to change the color of the rectangle to the desired background color.

04: Pasting animations over existing animations (cut first and then paste

over)

To paste an animation over an existing animation, you must clear the existinganimation first. That is, first select the animation you want to copy and selectCopy from the Edit Menu, or Copy animation from the context menu. Now findthe animation you want to replace, select it, and select Delete from the EditMenu or Delete animation from the context menu. Find the first frame fromwhich you want the replacement animation to begin from and select Paste fromthe Edit Menu or Paste animation from the context menu.Note that only animations of the same attribute (fill color, position, scale, etc.)can be copied and pasted. For example, a fill color animation cannot be pasted

into a scale animation layer.

05: Applying the same animation to multiple objects

Although you can select multiple objects in the Treeview and in the StageWindow (Control + click), you cannot apply a single animation to multiple objectsin this manner. There are 2 alternate methods of applying the same animation tomultiple objects. The first, and often more ideal, method is to group the objectsfirst, and then apply the animation to the grouped object. The second method,if grouping is not possible (objects need to be separated hierarchically in such


25/26

2005, Ikivo AB


a way that makes grouping impossible), is to apply the animation to one object,and then copy and paste the animation to the corresponding animation layers ofthe other objects.

06: Adding interactivity through hyperlinks

You can add and edit hyperlinks on any object (except the outermost SVG

object) in the Timeline Treeview. Right-click on an object to display the contextmenu, and select Add hyperlink. A dialog appears where you can either browseto a file to create a relative link, or you can enter the URL directly.[Note that interactivity with the SVG file is dependent upon the implementationof the SVG player in a particular device.]

07: Previewing interactivity with the Preview Window

You can preview interactivity by running your animation in the Preview Window.Select any of the default device views (Generic, High-end, Low-end, and Mid-range), and begin playback of your animation.

08: Creating mouseover and mouseout effects with Ikivo Animator andAdobe GoLive CS

Mouseover and mouseout effects on interactive content can be created in acombined Ikivo Ikivo Animator and Adobe GoLive CS workflow. First, createthe animation effects that you want in Ikivo Animator (for a simple example, letssay you are animating the fill color of a rectangular button called Button01).On mouseover, we want the animation to change the fill color from blue to red,so we create a fill color animation that begins at 0 seconds and ends at 0.5seconds. On mouseout, we want the reverse animation, so we create another

animation beginning at 1 second and ending at 1.5 seconds. Now save theSVG file, and open it in Adobe GoLive. Search the file in the Outline Editorview for the id Button01 . Nested within this element, you will see 2 elements. These are the animations that you created in IkivoAnimator. Open the attributes list on the first element byclicking on the + symbol to the right of th element name. Change the value forthe begin attribute from 0 to mouseover. Click on the value for the restartattribute, and select always from the list of possible values. Similarly, open theattributes list on the second animation element, and change the begin value tomouseout, and again, the restart value to always.[Note that this release of Ikivo Animator does not support event values foranimation timing (as on a begin time); so these animations cannot be editedfurther in Ikivo Animator. However, the animations can still be previewed for

quality and performance checking. See the next Tip.]

09: Using Direct Preview

Use the Direct Preview feature to preview SVGT content without loading thecontent into Ikivo Animator. Select Open in Direct Preview... from the Filemenu, and enter or browse to the file you would l ike to preview. Direct Previewenables content developers to directly and easily preview content. Use DirectPreview to preview quality and performance on the Ikivo SVG Tiny Player of


26/26


content developed outside of Ikivo Animator. This is especially useful for contentmodified in Adobe GoLive CS. [See previous Tip]

10: Inserting and removing time

If you need to insert or remove time in your animation, simply move the TimeMarker to the point in the animation you want to edit, and select Insert Time or

Remove Time from either the Edit Menu, or the context menu (right-click in theTimeline Time Marker area).

11: Dis-associating Ikivo Animator from the SVG and SVGZ filetypes

During the install process for Ikivo Animator, you have the option to set IkivoAnimator as your default application which will open files with the extension.svg and .svgz. If you decide that you want to change the default application(for example, to Internet Explorer), you can simply right-click on any .svg file inyour Windows system, and select Properties from the context menu. Click theChange... button next to the Opens with: Ikivo Animator line and select theapplication you want to associate the filetype with. Check the Always use this

program to open these files check box if you want the association to persist. Dothe same for a .svgz file as well.

12: Always remove first before re-installing

If you need to re-install Ikivo Animator (for example, with a version upgrade), itsa good idea to remove the previously installed version first before installing thenew version. When running the installer, select Remove Ikivo Animator from theIkivo Animator Setup Wizard welcome window. Then, run the installer again toinstall Ikivo Animator.