Creating a New Project

Start Gazelle by double clicking on it's JAR file.  If Gazelle does not start, you may not have Java installed on your computer.  There are details here for obtaining a free copy of Java from Sun.

Select File / New from the menu.  You will be presented with a dialog box that wants to know what directory you wish to store your project in.  You must decide this when you start a new project so that Gazelle knows where to store resources (images, sound files and MIDI files) that you may add to your project.  Click Browse and locate a directory that your Gazelle project will reside in.  Type the name of your project into the dialog box and press OK.  An empty project will be created in the directory you chose, as well as two subdirectories named /image  and /sound.  These directories will be used to hold resources you may add to your project.

The screen will have turned white, and a dotted rectangle will appear in the middle of it.  This rectangle represents the 'visible area' of the working area.  While it is possible to position and animate elements outside of this rectangle, only this area is guaranteed to be visible when your finished movie is played by the Gazelle movie player.  You can change the size of this rectangle by selecting Project / Settings from the menu bar.

Should you ever need to see something that may be off screen, press CTRL and click and drag in the main window area while not in edit mode.  This will shift the center of the screen, so you'll be able to see things beyond the ends of the viewing area.

Now let's add something to our project!  Select Create / Text from the menu bar.  This will add a text track to our project.  But there's nothing to see yet!  To create some text, we must first edit the track.  Do this by selecting Project / Edit Track from the menu bar.  This will bring up a dialog box that will allow us to enter text.  Type a short sentence - perhaps "The quick brown fox jumped over the lazy dog.".  As you type, the text on the screen will be updated.  Notice that the text begins at the green dot and wraps whenever it comes to the side containing the yellow dot.  You can change the wrap width of the text by placing your mouse over the yellow dot, pressing the mouse button, and dragging.  Similarly, you can change the point where the text begins by clicking and dragging the green dot.

When you are done, press the 'Done' button.  This will finish your changes to the track and take you out of edit mode.  If you wish to start editing the track again, you can select Project / Edit Track from the menu bar.

Finally, let's save the project.  Select File / Save from the menu bar.  We can now safely exit by selecting File / Exit.  If we had not saved the file before we exited, we would have been asked by Gazelle if we wished to save.
 

Using Tracks

Now let's open our file up again.  Start Gazelle if you closed it, select File / Open, and locate your project.

First, let's go to the menu bar and select Windows / Track Window.  This will bring up a window that lists every track in the project.  Right now there will be only one track in it - the text track we created in the last lesson.  Let's take a look at the parts of the track window.

First, look at the left hand side.  It contains a list of track names, such as Text 0 (the default name of the text track we created) and greyed out entries for the empty slots.  Click on Text 0.  It will now have a pink highlight.  This will indicate that it is the selected track, and will be the track edited if you select Project / Edit Track from the menu.

Let's change the name of this track to something more descriptive.  Right click on Text 0 and select Rename from the menu that appears.  Rename the track to Fox Text Track and press Ok.  The track will now have a new name.

Now look at the numbers across the top of the window.  These are frame numbers, and indicate the track's position in time.  By inserting keyframes at different frame numbers in the track, you allow the track to change over time.  That is, you animate it.

The main part of the window with the gridded squares is a chart of the keyframes.  Where ever a keyframe exists in a track, there is an x.

Let's add some keyframes to this track so we can animate it.  In the gridded part of the window, right click the cell that is in the track Fox Text Track and the column 5.  Select Insert from the popup menu that appears (the only option).  You have now added a new keyframe to this track at position 5, which is an identical copy of the previous frame.  There should be an x in that box now.  Right click on it again.  There will be a new menu this time.  Select Edit from this menu.

Now we're back in edit mode and can change the text.  Delete the last word "dog" from the sentence.  You'll see the change on the screen.  However, our original frame is not lost.  Click back on the first x and you will see the original frame, untouched.  (Doing this will also close the edit window; you will have to open it again by right clicking on an x).

Now go to frame 10 and do this again.  Frame 10 should be a copy of frame 5, with the word "dog" missing.  Now edit frame 10 to remove the word "lazy" as well.  Let's look back at frame 5 to see the change.  However, instead of clicking on the track window this time, let's use the buttons in the row of buttons near the top of the edit window that looks like <.  This button will take us to the previous frame without closing the edit window.  Press it again to go back to frame 0.  Pressing > will take us the other way, one key frame at a time.  Here is a more detailed explanation of this row of buttons.

Keep repeating this process, adding a keyframe every 5 frames and deleting the last word of the sentence.  You'll run into a problem around frame 30 - the window will be too small for you to add the next key.  While you could get around this by resizing the window, there is another way.  Press and hold the  CTRL key while clicking and dragging in the gridded part of the window.  This will allow you to reposition it so that you can access those tracks past the end.  You can get a similar effect by clicking and dragging in the empty grey rectangle in the upper left corner of this window without having to press CTRL.

Keep adding keyframes until no words are left in the sentence.  (Your last frame should be frame 45).  Be sure to save your project!
 

Playing Animation

We now have an animated track.  Let's play it!  Select Windows / Player Window from the menu bar to bring up the movie controls.  The buttons in the player will appear similar to the row of buttons in the editor, but they have different meanings.

First, let's change the length of this movie.  Our track only has 45 frames worth of animation, so let's give our movie a length of 50 frames.  Change the number 300 into 50 in the text box marked Last in the player window and press Enter (you may have to press it twice).  This will change the playing time length of our movie.  Now check Loop so that we'll see the movie repeat on itself once we start it.  Finally, click the button marked > to play our movie.  More on the player controls here.

Our movie is a bit slow.  Let's speed it up by changing the frame rate from 10 to 20.  You'll have to stop the movie by pressing the button marked ||.
 

Going with the Flow

Not only can tracks be modified by having their keys change (not all tracks have keyable data), but they can modify each other as well.  Select Windows / Flow Window from the menu bar.  This will open a window describing relationships between tracks.  At the moment, it will have only one track in it - our text track.

Move the mouse over the text track and watch the grey bar at the top of the flow window.  It will display a message describing what type of track this is, as well as it's name.  Hold the mouse over the two arrows pointing into the top of the track.  These are source arrows, and describe what tracks are allowed to feed information into this track.  For a text track, two options are available - one relationship with a font track, and one with a color track.

Now position the mouse over top of the text track, click and drag.  You can reposition the tracks within the window this way.

Now let's create a new track.  Select Create / Color from the menu bar and follow the dialog boxes to create a new color track.  Set this new color to be a nice red (you can modify the color track later just as you did with the text track).  When you're done, the new color track will appear in both the Track Window and Flow Window.  Click and drag the color track out of the way in the Flow Window and create a font track.  Set the font to be Sans and 24 pixels high.

Position the color and font tracks so that they're horizontally beside each other, and the text track is below them both.  Now click on the 'down' arrow in the bottom of the color track.  It should turn red to indicate it has been selected.  Now click on the source arrow for the text track that indicates it wants a relationship with a color track when you mouse over it.  Click again.  Now the red will disappear and a grey line will appear joining the color and text tracks.  The text in the main window will also have changed color.  Do the same with the font track.

Finally, you'll want to click on the little yellow boxes of the color and font tracks to make them 'invisible'.  This does not turn them off (the blue 'interrupted' box will do that), but instead stops them form being rendered independently.  Ideally, only one yellow box in a project should be left on, and that is the box all the other tracks eventually lead into.  More on flags (the colored boxes) and more techniques for navigating the flow window can be found here.
 

Resource Management

Resources are tricky in that they involve importing something outside of Gazelle into it.  This is particularly a problem if your files or project gets moved, you you need to serve a Gazelle movie from a web page or from inside a JAR file, or something.  For this reason Gazelle makes a backup of all resources it comes across for it's own use.  These resources are placed in the /image and /sound directories that were created when your project was first made.

Let's add an image to our project. Select Windows / Resource Window from the menu bar.  Now press the Load button.  This will bring up a window that will allow you to search your hard drive for the image you want to add.  When you've found it, hit Ok.  A copy of your image will be made in the /image directory.

Now add an image track to your project.  This can be done by selecting Create / Image and following the track creating and editing steps we've covered in the previous tutorials.  You associate the resource image with this track by selecting the resource name from the drop down menu.

Sound and MIDI resources are handled in the same way.  To add some versatility to your Image track, you may want to couple it with a Transform track in the flow window.
 

Splines

Finally a note on what is probably one of the more tricky aspects of Gazelle.  Splines are created when one selects the Spline, Spline Rectangle or Spline Ellipse from the Create menu.  Splines are organic shapes created from points and tangents that can be used to define areas.  In edit mode, these points can be moved and modified to change the properties of the curve they define.  More on splines can be found here.

The difference between Spline Ellipse and just plain Ellipse is that the former is a spline which can be edited like any free form spline while the latter retains it's properties and so has a much different editing method.  A similar distinction exists between Spline Rectangle and Rectangle.  Splines, Ellipses and Rectangles are all Path objects.

Path objects have two main uses.  The first is to act as shapes in their own right.  By combining in a tree with Shape, Color, Pen and Fill tracks, organic shapes can be made.  The other is to act as defining regions for the Clip track.  The clip track uses the path input to define a visible area, and then only renders visual elements that fall within that window.