June 10, 2001

Simple Interactions with the Navigation Panel
Creating a simple Flash game

In FreeHand 10, a new tool was introduced called the Navigation Panel. From here, you can not only create links to URLs, but you can also add simple Flash actions to make your project interactive or to make animations play.

There are also a few improvements in exporting your art to Flash that make it easier than ever to make your layouts work for you.

In the following tutorial, I'll be demonstrating how to use some of these actions in creating a very simple game all done from within FreeHand using multiple pages and layer based animation.

Version: 10

 
 


Creating Background Elements

First, we'll be creating some objects that I want to be seen throughout the entire Flash movie. New in FreeHand 10, is the ability to place any objects on Background layers, and those objects will be present on every frame of your animation or presentation.

Above are some various object I've created that I want to be seen through the entire movie. This includes the title of the game, a shape on the bottom as well as a copyright notice. Also seen, are some instructions on how to play the game.

I used a font called Kroeger that is supposed to look very pixelated. This helps make it look more like a simple video game. You can find the font here: http://www.miniml.com

 

Next I add two button graphics. One to start a new game and one that will trigger an animation event called jump. I will go over what actions to add to these buttons later.

Once placed, select all the objects and click on the Background Layer to move them there.

Note: If you are viewing your document under Flash Anti-alias mode, you will not see the objects fade out like you would under the Preview view mode. This is normal.

 

With the Page tool, I select the page and hold the Option (Alt) key as I drag it down. This will make an exact copy of the first page with all the objects. This will make it easier to place objects for some of the animations coming later.

 

On the second page, I removed all the objects except one of the buttons and the Instructions.

I renamed the button to say Stop which I'll apply a new action to later.

 

Since I want the Instructions to disappear when the game is started, I draw a rectangle over the area where the instructions appear. Then I fill it with White and set the Stroke to None.

There, now I have the pages setup for the movie to play including all the buttons and other objects I want to use. Now it's time to create some simple animations to make this game more enjoyable.


Creating the Animations

In a new document I setup the frames of a jumping motorcycle animation I want to use like shown above.

Motorcycle art provided by James E. Talmage.

 

For every frame I create, I place it on a corresponding layer so that they are sequential starting from the bottom to the top. It's a good idea to name these layers something so you can remember them later.

You may see that there are duplicate frames of the animation. This is used to make it look like the motorcycle is "hanging" in the air for a little bit longer.

Now before I move this art to the game document, it's a good idea to test it out to make sure it looks OK.

 

First I want to align all the images so that the animation will look like the motorcycle is jumping in place. To do this, I select all the images and use the Align palette to align everything to the Left.

 

Now I make sure that my movie settings are correct for testing. Under the Control menu, I choose Movie Settings.

Here I choose Layers as the Animation type and turn on the Autoplay option.

 

To test the movie, just go back under the Control menu and choose Test Movie.

As you can see above, the animation is just perfect for the game and ready to be moved.

Before you I move the objects, I go into the Preferences and turn on the option Remember Layer Info if it isn't turned on already. I then select all the motorcycle drawings and Copy them.

 

Back in the game document, I Paste the motorcycle images on page 1. While they are selected, I position them and scale them as necessary to fit better.

 

On page 2, I'll be creating a new animation. I start with two composite paths. One is some little bits of landscape and the other is a large rock shape. I create these on the Foreground layer.

These objects will be animated to give the illusion that the motorcycle is actually moving.

 

I select both objects and move them off the page to the right. Then I Clone them and move them all the way to the left of the page as shown above.

 

Starting with the landscape part, I select the original and clone then Blend them together using about 25 steps.

I repeat this for the rock shape. There should now be two blends across page 2 like shown above.

 

While both blends are selected, go under the Xtras -> Animate menu and choose Release to Layers.

In this dialog, choose the Sequence option, turn off Use existing layers as well as the Reverse direction option.

25 new layers will be created that now have all the frames of the blends that were created.

Now let's test this animation to see if it was created correctly.

 

Under the Control menu, choose Movie Settings. From here, choose the animation to only export page 2 to 2. Make sure that the Animation type is set for Layers as well, then hit OK.

 

Now, select Test Movie under the Control menu.

If all went correctly, the animation should be playing from right to left as shown above.

If it's going in the wrong direction, then undo the Release to Layers step. Then when you do that step again, turn on the option Reverse Direction.

Excellent work! Now let's add some actions to those buttons to bring it this simple game together.


Adding the Actions

The first action we are going to add is to the New Game button. Select the button and bring up the Navigation panel under the View menu -> Panels -> Navigation.

From here, we can name the button and add the action we need to make this game work.

The action we'll be using is the Load Movie action. This action is only available when there is more than one page in a document. Depending on how you setup a document for the final animation, this will determine if a page should be considered a Movie or just a page. When we export this final game, we'll only be setting it up to animate layers. Because of this, the second page will be ignored. So to bring up the second page of the document and make those layers animate, we use the Load Movie action to load page 2 and play it. This loads page 2 right over the top of page 1 and starts playing any layer animations that may be there.

So set the Action to Load Movie using the on (press) Event. In the Parameters, choose Page 2. For these buttons, we'll be keeping the Link area set to None. There is no OK button here, so any changes you make to the actions are instant.

 

Now we want to setup the Jump button to play that motorcycle animation when pressed.

Select the Jump button graphic and set the Action to Play with the on (press) Event.

This action tells this page to play it's layers as an animation, which happen to be those motorcycle layers we created earlier. This action only effects the page that it is sitting on.

 

Since this game will export with the layers animating, if you were to test this page, the motorcycle will just start jumping without you even pressing the button.

To make the movie stop at a certain frame, you use the Stop action with the frame action Event.

So select the first frame of the motorcycle jump animation that should be on the jump1 layer. In the Navigation panel, choose the Stop Action using the frame action Event. With this action, the movie will automatically stop on that frame every time it's played, instead of continuously looping.

 

Finally we select the Stop button on page 2. This button will be used to stop the game and return us to the original state of the game.

Select the button and choose the Unload Movie Action with the on (press) Event.

The Unload Movie action will unload page 2 from the game until the Start Game button is pressed again.

OK... ready to test this game to see how it all works?

 

Under the Control menu, choose Movie Settings.

Here I make sure that Layers is set as the Animation type and that Autoplay is turned on. Also make sure that All pages are set for the export.

 

Now, select Test Movie under the Control menu.

Now play around with the buttons! WOW isn't that great?!

HA HA HA... yes the first thing you'll notice is that the motorcycle can go right through those rocks... well unfortunately FreeHand doesn't have a "collision detection" action so this would be pretty impossible to build in a game like this. I just wanted to demonstrate how you can use these actions to create simple user interactions that can even trigger animation effects from one page to another.

You can also see how some of the things you created relate to one another such as using that white rectangle to cover the instructions and how that Stop button overlaps the New Game button but only the top button works.

When you export this movie as SWF files, it will automatically export both pages as separate SWF files. If you launch the first SWF, it will know how to load the second movie fine as long as you don't rename the files.

I hope that this tutorial has given you an idea on how to use some of those actions that appear in the Navigation panel. There are other things in there too that you may want to play around with such as the Dragging action and the Printing action which could be very useful to print another page of a document.

If you have any questions or other great ideas to show how to use the Navigation panel actions, please send them in!