so-youNET Advertisments!

Ace-host.Net

Want to advertise here? Email me char@so-you.net click here for details

Simple buttons - Flash MX 2004

I thought I would start off with a simple tutorial first, as flash can get quite complicated.  So I am going to do some simple rollover buttons, I am using flash mx 2004, you may be using an earlier version, most of the things should be the same although earlier versions anti-alias all text.       The graphics above I made quickly in paint shop pro, these will be the only graphics I will need.   1) Open up flash, start a new flash document. Go to File > Import > Import to library... then select the two images above.  Now go to Window > Library if you do not already have the library box open.  Drag 1.gif into the main workspace and zoom in.   2) Right click on your image and click on convert to symbol, call it button and check the button check box.  Then click ok     Now double click on your button, you will see the timeline at the top change so it now says, up, over, down, hit.   3) Click on the frame labelled up, press F6 3 times, this will insert keyframes. {Screen print}  Now click on the keyframe labelled over, then click on your button and in the properties box click swap, choose 2.gif and press ok.  {Screen print}.  Now we want to lock the layer...this is so that you do not change it by accident later on.     If you now go to control > test movie and hover over your button you will see it changes from 1.gif to 2.gif.   4) Ok now return to scene one, click on the text tool... I am going to use the font called silkscreen at font size 8, anti-alias turned off and a slightly darker pink colour than the outline of the button {Screen print}.  Write the name of the button and place the text into the button.   5) Now from the library window, select the button called button (hehe) and drag it underneath your other button you made, now follow step 4, this time putting different text on top.  Do this until you have as many buttons as you need.   6) Click on each button, in the properties toolbox there should be a bit saying <Instance Name> you must give each of your buttons a different name here, for example I have called mine webbut, domainbut, goodiebut, etc {Screen print}   7) Now the buttons work...we just need to define what url they go to, so to do this, select the first button, expand the actions box, put in the following code   on(release){ getURL("http://so-you.net","_blank"); }   replacing so-you.net with the url and _blank with the target of the link (_blank opens in a new window _top opens in the whole page, etc) {Screen print}   8) Now we are going to make the document size the same size as your buttons.  So select everything and in the properties box where it says X and Y, change whatever number they are to 0.  Now go to Modify > Document and click on to match Contents now the page size shouldn't be too big!   9) Your buttons are now done, so now we have to publish them.  Save your flash file first, then go to File > Publish Settings... I usually choose to publish in both flash and html format.  Click on the html tab, and change the window mode to transparent, windowless this preserves the transparency and partial transparency...that's why I love flash so much! and change the quality to low...only because these are pixel buttons and we do not want them to anti-alias...do not do this if you want smooth pictures. Now click publish.   If you go to the directory you saved the flash file, there will be a html file with the same name.  Open this up, view the source and copy the bit starting from <object> and finishing with </object>, eg   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="68" height="109" id="simple" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="simple.swf" /> <param name="quality" value="low" /> <param name="wmode" value="transparent" /> <param name="bgcolor" value="#ffffff" /> <embed src="simple.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="68" height="109" name="simple" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> This is the code to insert your flash file into your page.  I usually put it in a div tag and absolutely position it :)   Keep a look out for the next tutorial which will be for more advanced, animated buttons!.  Here are the buttons I ended up with, cute! :)   © Char.  Please do not copy this tutorial or any others.