You might have noticed in either the Pictures Around The World or Europe section of this site that the navigation menu is a rather neat set of movie-clip buttons made in flash. People have been asking me if I could put up a tutorial as to how they were made so here it is! I use a mac though so anyone on another operating system trying to follow this tutorial may find that the layout of Flash differs somewhat from the pictures below. If so then that is unfortunate but hopefully the differences are not too great.
Movie clip buttons differ from regular buttons in really only one way; regular buttons are made up of just four frames; called up, over, down and hit, each one corresponding to a mouse event - movie clip buttons can have as many frames as we want. Mouse events are added in the form of Actionscript. This gives us the very nice added versatility of creating animations that are activated with a particular mouse event.
Movie clip buttons can be a great addition to your site so long as they have a meaningful place there. There’s no point uploading them onto every single page just for their own sake - they only complement a site, they won’t turn it onto an overnight success. Once you’ve found a legitimate reason for including them on your site, you need to learn how to make them. For this tutorial I used Adobe Illustrator and Flash CS3 - Illustrator is simply to vectorise a raster image so if you can do that in Flash or some other application then you won’t be needing it… a word or warning though - this tutorial has turned out to be quite long and has a lot of steps to follow so be prepared…
For my button in Pictures Around The World I first needed a map of the world. I found a suitable one by searching google images, here it is below. (Note that throughout this tutorial I use a small source image to create the vector image for bandwidth reasons, you could easily download a higher resolution one if you want to have finer detail or maybe country borders in the vectorised map)
We will use this map as a template to trace over and create as many buttons as we wish. We may want to zoom into this image a bit to trace each continent accurately so we’re going to vectorise the image using Illustrator. Open up the image above (or any other image of the world if you like, but it has to be a .png, as Illustrator doesn’t seem to allow the vectorisation of .jpgs as far as I can tell). Once the image is open you’ll see a “Live Trace” button above it. Click this and the image probably disappears - that’s OK, the threshold setting is just too low. Set it at 255 to reveal the new vector image - some countries such as Ireland and Britain look a bit rough so drop the threshold down to about 238 is give a more true to life view of the world. Beside “Threshold” there is the “Min Area” button - this controls the detail of the image, set this to zero pixels to reveal extra features such as the 5 Great Lakes in North America, which are hidden at higher minimum areas . Once we’re happy we can save the file as a .ai and open Flash for importing.
In Flash open a new file (I select a Flash File: Actionscript 2.0) and set the dimensions to those of our image (for the map above it’s 481×214). Go to File ->; Import ->; Import to library, import the saved .ai file, leave the import settings at their defaults and hit OK. We now have our vectorised map of the world on the Flash stage. Position it onto the stage canvas and rename the layer it’s on to “background”. We’re going to turn Africa into a movie-clip button now so create a new layer called Africa and zoom in about 400%. On the Africa layer, and with the Pencil Tool, trace around the coastline - we’ve changed the pencil colour here to grey so we can see the trace as we make it. If need be, the pencil strike thickness can be changed in the properties box (Window - Properties - Properties). Fill the tracing with any colour using the bucket fill tool. Things should look like the image below so far. Notice that the Africa tracing is on the “africa” layer.
Next, convert “Africa” to a movie-clip symbol by selecting everything on the Africa layer (which should be just Africa and any surrounding islands that we included) and going to Modify -> Convert To Symbol; select movie-clip as the type and called the button “africa_mc”. Everything on the Africa layer should now be grouped together as a movie-clip symbol. Open the properties palette and, with the movie-clip symbol selected on the stage, type in “africa_btn” into the text-box under “Movie Clip” - we’ll need this name later on. Double clicking on the tracing on the “africa” layer will bring us inside the symbol - we see that is has its own timeline within the main timeline, and it’s this new timeline we are going to work with. First we need to create four new layers; name them “labels”, “actions”, “stroke” and “background” (Insert -> Timeline ->; Layer), “stroke” can be renamed from the default “Layer1″. We’ll now work on each layer one at a time.
Since we only want the background colour to change, we’ll put the it into it’s own layer - the “background” layer surprisingly enough! Select all the background by shift-clicking the mainland and Madagascar. To move it from the stroke layer to the background layer without changing its position relative to the stroke, cut it using CTRL-X or CMD-X, switch to the background layer and paste it using CRTL-SHIFT-V (windows) or CMD-SHIFT-V (mac). If SHIFT isn’t held down the background will probably be pasted in the wrong place. Now we want to put some frames in the timeline so animations can be added; click on frame 33 in each layer and insert blank frames (Insert -> Timeline -> Frame). The number of frames is arbitrary - it all depends on how long we want the animations to run so feel free to change this number. In the “labels” layer, add a blank keyframe at frames 1, 10 and 24 (again change these numbers if the urge is too great). In the properties palette (Window -> Properties -> Properties), name frames 1, 10 and 24 “_off”, “_on” and “_remove”. These names are analogous to those of a regular button - “off” refers to the state when the mouse is not over the button, “on” refers to when it is over the button, and “remove” refers to when the mouse is pulled away from the button. We want an animation to occur at each state. Our stage should now look like below:
On to the “background” layer: the background layer should contain the fill colour of the button; Africa in this case. Since we want to apply animations to the fill at the “_on” and “_remove” states, we need to make it a movie-clip of its own. So we will have a movie-clip inside a movie-clip! Highlight all the fill and convert it to a movie-clip symbol in the same way as before - name it “africa_bg_mc”. If we don’t convert the fill to a movie-clip it will just be considered a static shape and animations won’t work. On frame ten and nineteen of the background layer, insert two keyframes and with the properties palette open, click on the new movie-clip in the stage. The properties palette should look something like this:
On the keyframe in frame nineteen, change the colour setting from “none” to “tint” and choose whatever colour and percentage is most suitable. Here we’ll choose 100% and a blue colour. Create a motion tween between frames ten and nineteen (right-click between the frames and choose Create Motion Tween). The colour of the fill should now transition from yellowish to blue between frames ten and nineteen - this is what will happen when we move our mouse over the button once we are finished. We need now to create a similar animation for when we move the mouse away from the button. Insert a keyframe on frames 24 and 33. In the properties palette, remove the tint from the button on frame 33 (change colour back to “none”) and create another motion tween between 24 and 33. Our stage should now look like this:
We’re nearly finished! Some actions are needed in the actions layer. By default, flash movies play automatically but we don’t want our movie-clip button playing by itself - it’s supposed to be only activated by the mouse hovering over it! Open the Actions palette (Window -> Actions) and in the first frame of the “Action” layer, write stop(); into the actions palette. Make sure you’ve clicked on the frame, not the movie-clip symbol when writing stop(); into the Actions palette. Add another stop(); action to frame nineteen, since we want the movie to stop playing once the animation triggered on a mouse over event is finished. The final step now is to add some actionscript to actually tell our flash button what the labels “_off”, “_on” and “_remove” mean. Click out of the movie-clip and back into the main timeline by clicking on “Scene 1″, just below the timelines. Create a new layer and name it “africa_actions”. Click on the first frame in the “africa_actions” layer (there should be a blank keyframe there already) and copy the following text into the actions palette:
this.africa_btn.onRollOut = function() {
africa_btn.gotoAndPlay(”_over”);
}
this.africa_btn.onRelease = function() {
getURL(”http://www.projectvisual.net”);
}
Now to explain the code above a little: this.africa_btn refers to surprisingly enough, the movie-clip button we named africa_btn earlier on. onRollOver refers to the state when the mouse is over the button referred to by “this.”, which in our case is “africa_btn”. The function that this.africa_btn.onRollOver is tied to is africa_btn.gotoAndPlay(”_on”). This tells the button to go to and play from the frame with the name “_on” within the movie-clip with the name “africa_btn”. The other two parts of the code have similar explanations. So, all things having gone well we should have a working movie-clip button of Africa. It can now be exported as a .swf file - although we may have to temporarily delete the original image of the world so that just the Africa button is exported - we don’t want to have the original image in our finished movie! If you have any questions on the above - maybe something isn’t clear - feel free to leave a comment!
Subscribe to the RSS Feed