You are viewing our Forum Archives. To view or take place in current topics click here.
How to make an working animated flash button[Easy]
Posted:
How to make an working animated flash button[Easy] Posted:
Status: Offline
Joined: Mar 24, 200915Year Member
Posts: 1,840
Reputation Power: 78
Status: Offline
Joined: Mar 24, 200915Year Member
Posts: 1,840
Reputation Power: 78
Ok today im going to show you how to make a press-able button using adobe photoshop and adobe flash, Im using CS5, but its pretty similar in all versions under CS5.
So you can make something like this
Ill get started
So you can make something like this
Ill get started
first youll need to open up a new photoshop file , and use the sizes in the photo below
(200Px Width-100Px Height) background doesnt have to be transparent, i have just auto set my photoshop to be transparent.
[ Register or Signin to view external links. ]
Secondly you need to select the rounded rectangle (thats the shape i will use in this tutorial but you can use any shape really, the rounded rectangle is found by right clicking the highlighted button below
[ Register or Signin to view external links. ]
And make sure you use these settings in the top bar below file, edit,image etc
[ Register or Signin to view external links. ]
Then what you want to do is make your shape, once your happy with the shape, change the layer name to Button.
Now open your blending options in photoshop and choose the colour you desire, then apply a matchin stroke at the size of 1 Px
[ Register or Signin to view external links. ]
then select bevel and emboss and make sure to use the settings ive used below (you can change it to how you like and mess about with it to how you like)
[ Register or Signin to view external links. ]
Now thats your outward facing button
[ Register or Signin to view external links. ]
Now what you want to do is duplicate this layer, then go back in to blending options.
Then pick a contrasting colour or something that goes well with the colour you chose.
Then go back in to bevel emboss and change the direction setting from up to down
[ Register or Signin to view external links. ]
This is how it should look after
[ Register or Signin to view external links. ]
Now save the photoshop file and open flash and start a actionscript 3.0 document in flash
click file>Import>Import to library
which should look like this if done correctly
[ Register or Signin to view external links. ]
this will then bring the files in to the library on the right (spoiled as its a big screenshot)
[spoil] [ Register or Signin to view external links. ]
(200Px Width-100Px Height) background doesnt have to be transparent, i have just auto set my photoshop to be transparent.
[ Register or Signin to view external links. ]
Secondly you need to select the rounded rectangle (thats the shape i will use in this tutorial but you can use any shape really, the rounded rectangle is found by right clicking the highlighted button below
[ Register or Signin to view external links. ]
And make sure you use these settings in the top bar below file, edit,image etc
[ Register or Signin to view external links. ]
Then what you want to do is make your shape, once your happy with the shape, change the layer name to Button.
Now open your blending options in photoshop and choose the colour you desire, then apply a matchin stroke at the size of 1 Px
[ Register or Signin to view external links. ]
then select bevel and emboss and make sure to use the settings ive used below (you can change it to how you like and mess about with it to how you like)
[ Register or Signin to view external links. ]
Now thats your outward facing button
[ Register or Signin to view external links. ]
Now what you want to do is duplicate this layer, then go back in to blending options.
Then pick a contrasting colour or something that goes well with the colour you chose.
Then go back in to bevel emboss and change the direction setting from up to down
[ Register or Signin to view external links. ]
This is how it should look after
[ Register or Signin to view external links. ]
Now save the photoshop file and open flash and start a actionscript 3.0 document in flash
click file>Import>Import to library
which should look like this if done correctly
[ Register or Signin to view external links. ]
this will then bring the files in to the library on the right (spoiled as its a big screenshot)
[spoil] [ Register or Signin to view external links. ]
Now drag button in to the center of the work area and right click on it and go to convert to symbol [ Register or Signin to view external links. ]
Now change it from movie clip to button
[ Register or Signin to view external links. ]
And then click ok, now double click on the button, and it will open in an animation window and at the bottom will say up over down hit, now we are only interested in up and hit, so right click on over and insert keyframe, and next to it where it says down, right click insert blank keyframe
[ Register or Signin to view external links. ]
one you have done this to the three frames click scene one, in the right hand corner of the workspace [ Register or Signin to view external links. ]
and then drag your button pressed layer from the library directly on top of the button layer in frame 3 which is down
[ Register or Signin to view external links. ]
now make sure that the pressed layer completely covers the button so you cant see it unlike in my above screenshot which is to low
now once you have done that hit Ctrl+Enter and you can now click on your button
anyway thanks for reading, and if you want to give it a shot an need more in depth help just pm me
Now change it from movie clip to button
[ Register or Signin to view external links. ]
And then click ok, now double click on the button, and it will open in an animation window and at the bottom will say up over down hit, now we are only interested in up and hit, so right click on over and insert keyframe, and next to it where it says down, right click insert blank keyframe
[ Register or Signin to view external links. ]
one you have done this to the three frames click scene one, in the right hand corner of the workspace [ Register or Signin to view external links. ]
and then drag your button pressed layer from the library directly on top of the button layer in frame 3 which is down
[ Register or Signin to view external links. ]
now make sure that the pressed layer completely covers the button so you cant see it unlike in my above screenshot which is to low
now once you have done that hit Ctrl+Enter and you can now click on your button
anyway thanks for reading, and if you want to give it a shot an need more in depth help just pm me
#2. Posted:
Status: Offline
Joined: Mar 25, 201014Year Member
Posts: 1,205
Reputation Power: 48
Status: Offline
Joined: Mar 25, 201014Year Member
Posts: 1,205
Reputation Power: 48
nice tut man i will thank topic
- 0useful
- 0not useful
#3. Posted:
Status: Offline
Joined: Mar 24, 200915Year Member
Posts: 1,840
Reputation Power: 78
Status: Offline
Joined: Mar 24, 200915Year Member
Posts: 1,840
Reputation Power: 78
Liamboi2k10 wrote nice tut man i will thank topicthanks man took a while to make
- 0useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.