A Quick Tour Flashing Triangle

Getting Started

This guide will create a movie with a circle that will move across the screen.

Start a new movie by pressing 'New' on the toolbar or in the 'File' menu.

New New

A new layer is added to the timeline. The red line on the timeline is at 0 and shows that the editor is showing frame zero. The script layer can be ignored for now, it is used to add advanced functionality.

Getting Started 1

Getting Started 2

The library and the editor are empty. The properties of the movie are displayed such as the width and height and the background color.

Getting Started 3

Try changing the 'Back Color' to yellow. Click the button next to the 'Back Color' property and choose yellow from the Color dialog.


Getting Started ColorPicker

The background color of the movie will now be yellow.

Getting Started 4

Getting Started 5

Other properties can be changed in this way.

Add a circle to the library by clicking 'Circle' from the toolbar or the 'Library' menu.

Getting Started 6

A blue circle is added to the library and its properties are displayed. Change the 'Border Type' to 'Solid' and the 'Border Color' to green.

Getting Started 7

Now that a circle is in the library it can be added to the layer in the timeline for animation. Drag the circle from the library to the editor or click the button next to the circle in the library and choose 'Add To Timeline'. If you need to edit the properties of the circle again click 'Edit' from the same menu.

Getting Started 8

The circle is added to the layer and a new frame of animation is automatically added at frame 0. It is represented by a dot.

Getting Started 9

The circle’s new frame is selected, it can be moved around in the editor and its properties can be edited.

Getting Started 10

Drag the circle in the editor to the left of the movie.

Getting Started 11

Now to add the next frame and animate the circle, right click or double click in the circle’s timeline at twenty frames to create a new key frame, again represented by a dot.

Frame Add Frame

Getting Started 12

The line between the two key frames shows that there is a transition between them. A dotted line shows that there is no transition. Without a transition there will be no animation and the first key frame will simply show until the next key frame.

The red line in the timeline is now at twenty and show’s that the editor is displaying frame twenty. This frame is now selected instead of frame zero. The editor and the properties show frame twenty.

Drag the circle in the editor to the right at frame twenty.

Getting Started 13

Single clicking at different frames in the timeframe will show the automatic animation frames. If you single click at frame ten the circle should be in the middle.
To see the animation, click 'Play' on the toolbar or from the 'Movie' menu.

Play Play

Getting Started 14

The blue circle will animate from frame zero on the left to frame twenty on the right.
Save the movie by clicking 'Save' on the toolbar or from the 'File' menu.

Save Save

If you wish, you can export the movie to HTML by clicking 'Export' on the toolbar and following the export dialog. The exported HTML page should look something like this.

Export Export

Getting Started 15

Getting Started 16

Click the link to view the movie without the test page.

Getting Started 17

A Quick Tour Flashing Triangle