Graphics and Start Screen

AssetsStart Flash, and create a new Flash document from the File menu. Keep the stage settings to their default settings of 550x400px, increase the frame rate to 30fps, background white.

Now, the first thing we need to do is create some movieclips for our game graphics. For now we will keep things simple, with just one frame per movieclip, because we don't need animations (yet). Select insert -> new symbol and create our 5 symbols as movieclips, don't forget to check Export for actionscript and Export in first frame. Name the clips as balloon_blue_mc, balloon_red_mc, balloon_yellow_mc, otto_mc and trampoline_mc.

I've drawn some basic graphics which you can use as a base you can download to save some time.


Creating layersIt's a good idea to keep your actionscript on a separate layer, that way it's easier for you to find. So, let's create a new layer, and change it's name to Actions by right-clicking on it and updating the name in the properties sheet, and rename the other layer to Screen, this is where we will place any author-time graphics and buttons. Let's create our intro screen right now, and put a Start button on it. Select the first frame in the timeline for the Screen layer, then use the Flash drawing tools to make a nice screen. Don't forget to change the frame label (in the properties sheet) to start or something similar. You will always want to give every frame a frame label, so get into the habit early on. These are used to control the playhead in flash using the gotoAndPlay() command. As this command can also take a frame number as a parameter, it's easy to forget about frame labels and just use the frame number...bad idea! This is a house built on sand. If you ever need to insert a new frame this means you'll have to go through all your code and change the frame numbers.

Start screenWe want to create a start button on this screen, so select Insert -> new Symbol and create a button called start_btn (don't forget to check the Export for actionscript box). Use the Text drawing tools to write the word START in your favourite font into the button clip, then drag the button onto the stage where you want it. Change the instance name to startButton. Each movieclip or button you create can have it's own instance, which means you can re-use it over and over. When you are done you should have a screen looking a bit like this one.

If you run the movie right now (ctrl-return), you'll discover that when the cursor hovers over the start button, it changes into a hand icon. You can click the button all you like, nothing happens. Of course we need to tell Flash what to do when we click the button, so we need to write an event handler. An event handler is simply a function that is called when some kind of event is triggered. This might be when a file has been loaded (this is how pre-loaders work) or in our case, when the user clicks the button.

Now select the first frame on the Actions layer, and add the following code (you may have to switch off the Script Assist before you can do this)


startButton.onRelease = function() {

So what's this all about? The stop() command tells the playhead to wait at this frame (without a stop command the playhead will move onto the next frame), then we define our event handler, notice the name of the function is the same as the instance name when you dragged the button onto the stage. Download tutorial-1.fla

Next: Get things moving...


( categories: )