Wednesday, 18 June 2008

Basic buttons

This flash tutorial will teach you how to create basic buttons. A button contains four states: up, over, down and hit. These states are how the buttons behaves when the mouse is moved over or is clicked on.

Creating a basic button

Step 1

Open a new Flash document.
Select the rectangle tool (R) and drag a rectangle shape on the stage. You could use the oval tool if you wish.



Using the selection tool select your rectangle and convert your rectangle into a symbol by selecting F8. Select an appropriate name, check button and click ok.


Step 2

Double click on your button and you should notice the timeline changes. There are now 4 frames:



Up -The appearance of the button when the movie loads up.
Over - The appearance of the button when the mouse is over.
Down – The appearance of the button when it is clicked.
Hit – This state determines where the hotspot of the button will be active. This state is important for buttons which just contain text.


Step 3

Select the over state and insert a new key frame by pressing F6. You can now change the colour of your button, if you wish. This will be the colour when your mouse passes over the button.



Now repeat this for the down and hit state, inserting a new key frame and adjusting the colour of the rectangle.


Step 4

Double click anywhere on the stage and to return to the main timeline.
Test your movie clip Ctrl + enter. Move your mouse over and click you button and you should notice the colours changing.



You should now have a basic button.

5 comments:

fc2008 18 October 2009 at 08:54  

thanks, this was useful for me

nagas 5 January 2010 at 04:47  

thanks it is very useful 4 me

littlepans 23 February 2010 at 13:47  

Is there a way to make the button stay in its down state once pressed, Wait a few seconds, and then move on to a new scene?
Im making a sniper game, and i made the enemy a button. Once pressed, i want Flash to show how he dies (Head fallen off) for 2 or 3 seconds, and then move to a new scene.

Littlepans

(Im using AS3)

iliketo 14 March 2010 at 04:57  

@Littlepans

You will need to use a movie clip instead of a button.

Sai Gollapudi 16 December 2010 at 10:02  

(first time user) Initially when I tried drawing an oval and converted it into a symbol, the oval disappeared from stage. As the oval was not visibl, I could not double click it as you had suggested. I had to try out the steps several times and by accident I got to a situation where I had the button visible to double click. Don't know what makes the button disappear. Once the button was visible I could do the color change as you had suggested - and that worked. Although HIT was not clear to me. How to activate it on test environment? All in all, it was a good tutorial and I appreciate you putting it out there. Thanx. SaiGo

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP