Plazmic

• Company
• Products
• Support
• Downloads
• Community

Composer Quick Start

Creating a new document

1. From the Start menu, launch Composer.
   
2. When Composer starts, the Document Creator dialog appears.
   
   
3. From the Template drop-down list, select BlackBerry 7200 Series. Click the Create button.
   

Using the Toolbox

The Toolbox contains all of your drawing tools. Here you’ll find tools such as: Arrow - used to select objects in your scene Rectangle - used to draw rectangles of any shape and dimension Zoom - used to zoom the view of the canvas in or out Pencil - stroke color Paint bucket - fill color Simulator - for viewing content in a device-simulated environment

Drawing a rectangle

1. From the Toolbox, select the Rectangle Tool.
   
2. In the document window, click and drag to create a rectangle that covers the entire canvas. Drawing outside of the canvas is OK.
   
   

   

   

3. From the Toolbox, select the Arrow Tool and click anywhere inside the rectangle you’ve just created. This selects the rectangle.
   

Changing the rectangle’s color

On the Inspector panel, select the Fill Tab. From the drop down list, select Color. Adjust the RGB sliders to the follows values: Red = 17 Green = 0 Blue = 107 The color of the rectangle changes in the document window.

Importing an Image

1. From the File menu, choose Import.
   
2. Navigate to the directory where the plazmicLogo.gif image was saved and, select it.
   

The imported image appears in the center of the canvas.

Drawing another rectangle

1. Now draw a second rectangle that starts at the bottom of the canvas and extends to just below the imported image.
   
2. On the Inspector panel, select the Fill Tab of this new rectangle.
   
3. From the drop down menu, select Color.
   
4. Adjust the sliders to the follows values:
   
   
   • Red = 245
     
   • Green = 121
     
   • Blue = 22
     

Animating an object

The Animation panel displays all of the objects in a scene and the objects associated with each layer.

Let’s look at the information in the Animation panel:

• The Document section lists the total number of frames in the scene.
  
• The Timing section lists:
  
  • the current frame of the animation that is highlighted by the vertical blue bar
    
  • the Frames Per Second of the animation
    
  • the time of the animation, in seconds, at the selected frame, highlighted by the vertical blue bar.
    

1. In the Total parameter, type 20.
   This changes the number of frames in the scene by 20.
   

   

2. From the Toolbox, select the Arrow Tool and drag the orange rectangle down to below the bottom of the canvas, as shown below.
   

   

3. In the Animation panel click on frame number 10.
   

   

4. Press the Shift key and click and drag the orange rectangle up to the bottom of the imported image.
   
   The Shift key locks the movement of an object to vertical (or horizontal) only when being dragged.
   

   

5. On the Animation panel, you can press the Play button to see the rectangle animate along the animation path you’ve just created.
   

Adding more complex animation

The Animation panel displays all of the objects in a scene and the objects associated with each layer.

1. In the Animation panel, select frame 1.
   
2. From the Toolbox, select the Arrow tool and move the imported image to the top-left corner of the canvas.
   



3. In the Animation panel, select frame 10.
   
4. Click and drag the imported image downwards, towards the center of the canvas.
   Do this without holding down the Shift key.
   



5. In the Animation panel, select frame 20.
   
6. Click and drag the imported image to the top-right corner of the canvas.
   
   



7. On the Animation panel, expand the view for the imported image by clicking on the arrow sign to the left of plazmicLogo.gif object.
   
   



8. From the parameters listed under plazmicLogo.gif, click on the arrow beside the Translation parameter. It should be the only parameter in the list that has an arrow beside it. The arrow beside a parameter indicates that the parameter has animation associated with it.
   
   This launches the Tweening Wizard.
   
   Notice in the top left panel of the Tweening Wizard the first 10 frames of the animation are highlighted in red, and are separate from the second 10 frames of the animation.
   
   This is the section of animation between the first and second key frames.
   



9. From the Motion drop-down list, select Accelerating.
   
10. From the Path drop-down list, select Curving.
    
11. Adjust the Curve value to 0.5.
    



You will see that the plazmicLogo.gif object’s key frames in the Canvas have changed to match the key frames in the Tweening Wizard.



12. Select the second 10 frames of the animation by clicking anywhere in the top right quadrant area of the Tweening Wizard. They should become highlighted in red.
    

13. From the Motion drop-down list, select Accelerating, and adjust the Acceleration value to -2.
    
14. From the Path drop-down list, select Curving. Make sure the Curve value is set to 0.5.
    



15. Click OK.
    

Previewing your scene

Now you can view your scene in the simulated device environment by clicking the Simulator icon. This launches the BlackBerry Media Engine Simulator.

Some issues to consider:

Consider going back and asking the user to make changes to the animation after simulating and then simulating again to see their changes. Change the parameters of the rectangles at specific times in the animation, and press the simulator icon to see the changes take effect. For example, at frame 10, change the color of the orange rectangle to simulate the effect of being hit by the logo.