| |
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!
|
|