Contents

• Introduction
• Requirements
• Creating the SVG menu
• Using the menu in Netbeans
• Appendix

Introduction

The following tutorial introduces the user to a general work flow for creating SVG Menus with Ikivo Animator.  These menus can then be imported into the Netbeans IDE, for use with JSR-226 applications.  The menu that will be created is a simple design that shows the complete process for creating and using the menu.  The user is expected to have some familiarity with the feature set of Ikivo Animator and Netbeans IDE.  If the user wishes to view the general work flow of Ikivo Animator, a tutorial is available with the program.  (See: CityMapTutorial.pdf)

Requirements

• Ikivo Animator 2.2
• Netbeans IDE 6.0
• SVG Sample Files
  

Creating the SVG Menu

The goal of this tutorial is to create a menu where the icons of the menu will animate when an icon receives focus from the user.  If the user puts focus on an icon, it will increase in scale, move to the center of screen and an outline of the icon will remain.  When the user removes focus from the icon it will return to the outline, and scale back to its original size.

1. Launch Ikivo Animator and create a New animation via the File Menu.  For this tutorial we will be creating an animated SVG Menu for the Sony Ericsson W950.  Select this phone from the drop down menu and click OK. A new document will be created with the appropriate dimensions for the phone.

   ---

2. This tutorial comes with two sample menu icons, camera.svg and note.svg.  We will need to insert these menu icons into our newly created document.  In the Object Browser, click on the folder button to change the directory.  Select the directory where the sample menu icons are located.  When this directory is selected both menu icons should be visible in the Object Browser and it should look like the screen shot below.
   
   

   ---

3. Drag the camera.svg file into the workspace and drop the camera icon in the lower left corner of the white rectangle, representing the visible area of the phone.  Now drag and drop the music.svg file into the lower right portion of the right rectangle.  When you are finished it should look something like the screen shot below.  If you wish to position the icons more accurately, use the Transform Palette or the keyboard to nudge the icons up, down, left, or right.
   
   . 

   ---

4. First we need to create a copy of the icon, we will use this copy to create the outline of the original icon.   Select the camera element in the timeline, copy that element , and paste it.  A second copy of that element will appear, it will be named "camera_1".  Rename the "camera_1" element to "camera_outline".  This will help to keep the two elements separate. By default the icon has a gray fill color and a stroke color of none.  We will need to change this so that the fill color is "none" and the stroke color is gray.  Un-trap the "camera_outline" element and select the graphics_2 element.   We will also want to save the fill color so that it can be used for the stroke color.  Create a swatch of the fill color and change the fill color to "None".  Select the stroke color in the Color Palette and click on the swatch that was just created.  The outline for the camera icon is now complete. 

   
   
   

5. Now it is time to create the focus-in animation for the camera menu item.  In order for the menu to work correctly in the Netbeans IDE, the menu item must be named in a specific way. Rename the camera element to "menuItem_0".  We will now use the Make button functionality to auto-generate out focus-in, focus-out and activate timelines.  After checking that Animation mode is active, right click on the menuItem_0 element and select "Make Button".  Three new timelines are created, each of these timelines represents a different set  of animations that are triggered by the user when accessing this menu item.
   
   

   ---

    
6. The next step is creating the focus-in animation.  Select the menuItem_0_focusin tab and create position and scale keypoints at time 0.  When "menuItem_0" receives the focus of the user, the menu item will scale up and move it to the center of the screen.  The animation itself will only last 0.4 seconds, so change the time slider to 0.4 seconds. (00:00:40)  In the Transform Palette, change the point of reference to the center of the element.  Change the X value to 120 and the Y value to 160.  The Camera will now be centered in the middle of the screen. Change the scale values, check that the scale aspect ratio is locked and change the percentage 150%.  To make the animations move quickly at the beginning and then slowly move into the final state pacing will need to be applied.  This will make the animation appear more fluid.  Select the first keypoint of the position animation.  In the Pacing Palette select "Ease Out".  Do the same operation for the Scale keypoint.
   
   
   

   ---

7. We will now create the focus-out animation.  Copy both position and scale  from menuItem_0, then switch to the menuItem_0_focusout timeline.  Paste the animations at 0.4 seconds.  Select and cut the scale and position keypoints at 0.4 seconds,  select the remaining keypoints at 0.8 seconds and move them to 0.0 seconds.  Paste the keypoints that were just cut at 0.4 seconds.  Finally set the pacing of these animations to "Ease Out", just as was done in creating the focus-in animations.  This will complete the focus out animations. 

   ---

8. Use the Proview to check the focus-in and focus-out animations.  If the Proview is not visible, press F5 to make it visible.  Press play and use the "Tab" key to switch focus on and off the menu item.  The camera icon should scale up when it has focus and then scale down when focus is removed.
   

   ---

9. Follow the same steps as before but this time apply them to the music menu item.  The only difference is that the note should be renamed to "menuItem_1", instead of "menuItem_0". When this is complete the user should have a completely animated menu that moves, scales up and returns to the correct position, depending on the focus of the user.
   
   

1. We will now create a small midlet in Netbeans to demonstrate the use of the menu.  Launch the Netbeans IDE and Create a new Project.  Under Categories select "Mobility" and then "MIDP Application", then press Next.  Un-check the "Create Hello MIDlet" option and press Next.  On the next page change the "Emulator Platform" drop down to "Sun Java Wireless Toolkit 2.5.2 for CLDC then click on Finish.
   
   

   

   ---

2. Activate the "Files" tab, expand your projects folder, and right click on the src folder.  From the context menu select "New" and then "Visual Midlet."  Click Finish when the "New File" dialog pops up.
   
   
   

   ---

3. Switch programs to Ikivo Animator and save the menu file, to the "src" of the project that was just created.  When saving the file, make sure and select SVG 1.1.
   
   

   ---

4. The menu svg file will now appear in the "src" directory in your Netbeans project.  From the Palette window, select the SVG Menu component and drag it to the flow view.  If the Palette window is not visible, it can be activated by going to the "Window" menu item and selecting "Palette".  Drag the menu svg file from the "src" directory directly on to the menu component. This will associate the menu with this component.  Finally connect the "Mobile Device" component to the svgmenu component and run the application.  (F6)  Your svg menu should now function correctly.  
   
   
   
   
   

   ---

• Copy -- To copy an element, that element must be selected.  An element can be selected by clicking in the stage or in the treeview. 
• Un-trap -- In order to modify the children of an element, it must be un-trapped.  This is accomplished by  clicking on the round lock button to the right of the element name. 
• Swatches -- The Color Palette has a place to save the active color so the user may use that color again.  These colors may be gradients or solid colors.  By clicking on an empty swatch box in the swatch grid, that color will be saved.  A swatch may be deleted by right-clicking on that swatch and selecting delete.
• Make button -- The Animator has the ability to turn any element into a "button".  This button is created by creating three different timelines.  Each timeline represents a specific animation for this button.  The timelines represent focus-in, focus-out and activate.  This allows the user to easily create a button that reacts to user interaction. 
• Animation Mode -- The Animator currently has two modes of operation.  Please see the Animator Help for more information on these modes.  
• Timeline Tabs -- Each tab in the timeline represents a different set of animations.  These animations can be triggered by user events, other timelines and time.  Please see the Animator Help for more information on multiple timelines. 
• Keypoints -- A keypoint represents a change of value for that element.  A keypoint may be created, moved, cut, pasted, or deleted.  Creating a keypoint can be done using the Object menu, or right clicking in the timeline.  Please the the Animator Help for more information.
• Timeslider -- The timeslider represents the current time in the document.  It can be changed by clicking in the timeline. 
• Point of Reference -- The Transform Palette has a small grid at the top of the Palette.  This grid can be used to get the coordinates of an element based on the grid.  For example, if the center of the grid is selected, the position fields  (X,Y) will display the center coordinate of the element selected.  This is useful for precise positioning of an element.
• Aspect Ratio Locking -- When changing the scale or size of an element.  The aspect ration can remain locked so the element scales and sizes smoothly, simply clicking on the lock button turns this on and off.  
• Pacing Palette -- The Pacing Palette is used to determine how quickly an animation interpolates between two values.  This allows the user to change the speed of the animation, which can make an animation look considerably better.