Software Tutorials |
|
Website Templates Types |
|
|
Website Templates Categories |
|
|
Partners |
|
|
Featured Free Templates |
|
|
|
:: Free Website Templates
Do You Like Our Website? Share With Others!
      
Page: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25 Welcome To WebDesignTutorials.net Flash Tutorials Area - Collapsing text button
Start off by starting a new movie: File>New. Then go to Modify>Movie
and change the width and height to whatever your prefference might be.
The one I'm making is Width: 200 Height: 50. Then make a new symbol
(Button) by going Insert>New Symbol and name it Button1 and
behavior as a button. On the white screen, draw what you want the
button to look like, just as I have and make sure you have text in it.
After you have made the graphic in the "Up Frame", right click on "Over" near the top left hand side and chose Insert Keyframe.
Everything should remain the same except there should be a dot inside
the "Over" at the top and your image should be highlighted in blue.
Alright, with your image highlighted, chose Insert>Convert to Symbol.
Name can be called Movie1 and behavior is as a Movie Clip. Right click
on your image, which should now be a movie clip, and choose Edit In Place.
Here is where we will make our animation which will occur when you put
your mouse over the button. (You can click on the left image to see a
larger version:)
What you want to do at this point is to separate the text from the rest of the button. So you select the text and Edit>Cut. Then Press the New Layer button  and press Edit>paste
Name the layer "Text" by double clicking on the left where it says
"Layer 2". Lastly, lock the other layer which contains all the other
graphics besides the text.
Alright, here comes the most tedious part of the tutorial. Select the text and press Modify>Break Apart. All the letters are separate now. You may want to zoom in, but now you must select each text character, press Edit>Cut, start a new layer and Edit>Paste, just like we did ealier in Step 4, but after pasting each letter, you must also press Modify>Group so each letter stands on its own.
Now Add keyframes on all the layers on the 20th, 40th, 60th, 80th and
100th frames. Go to the 20th frame and take each letter, scale it down
using the scale button, and rotate is around as much as you want. Heck,
just go looney with them! Then on the 40th frame, just move the letters
all the way to the right, outside the screen. On the 60th frame, go
looney again as you did in the 20th frame but keep it scaled down.
Don't mess with the 80th or 100th keyframes.
Great, now right click on each keyframe for the letters and choose Create Motion Tween. Set the frame tab so it looks identical to the one on the left. And voila, you're done, not too hard was it? |
Advertisements |
|
| Graphic Software, Flash Templates, Free Stock Photos, Web Templates, Web Design, Corporate Web Design, Royalty Free stock Photo, Affordable Website Design, Submit site, Add Url, Stock Photos, Survey Software, Anti Virus Software, E mail software, Computer Software |
|
