Showing posts with label Flash Tutorial. Show all posts
Showing posts with label Flash Tutorial. Show all posts

Monday, 20 February 2012

Flash Buttons

INTRODUCTION

he only object type in Flash, that can detect mouse events is the Button object.
This means that there is only one way to make buttons with Flash: Creating a button object.
This may sound a bit too simplified, but many are confused by the techniques behind the more sophisticated buttons, that we will cover later in this tutorial.
Creating a button that changes upon mouseover-events is extremely simple. All you really have to do is to tell Flash how you want the button to look 1) in normal state, 2) when the mouse moves over the button and 3) when the user clicks the button.
Once you've learned this 3-step technique you can create buttons in seconds.
However, the buttons you create this way are: simple (that's why they're so easy to make anyway).
If you want to create really fancy buttons you should use a slightly different technique based on movie clips.

The Three Different Object Types

Flash handles three types of objects:
  • Graphics
  • Buttons
  • Movieclips
Graphics objects
You probably already noticed that when you edit Graphics objects you have the entire timeline available for it. This means that Graphics objects aren't limited to static elements. You can easily create looping animations - simply by creating Graphic objects that uses more than one frame in the timeline.
Button objects
Buttons are different from this. When you create a Button object you only have four frames in the timeline.
One is for drawing the button in normal state.
Another is for drawing the button when a mouse-over is detected.
The third is for drawing the button as you want it to look when the user clicks the button.
The last frame is used to specify which area you want mouse events to react to. That is: you can create a button that only reacts to mouse-events on certain areas of the drawing, - like the center of the button for example.
Movie clip objects
The final object-type: Movieclips, is similar to Graphics objects - on the surface.
In both cases you can create entire animations that can be dragged onto your main movie. But while animations made as Graphics objects simply loops over and over you can control the Movieclips completely.
THE TRICK BEHIND FANCY FLASH BUTTONS
You can create more fancy buttons based on very simple programming. (You do not have to be a programmer to learn to do this!).
Actions added to frames give complete access to controlling movie-clips. This means that you can use "Play", "Stop", and "Goto Frame" commands on a movie-clip, that is triggered when a certain mouse event is detected on a button.
Now - if the button is invisible and placed on top of the movie clip it will work as if the movie-clip itself was able to detect mouse events.

Flash Tweenings

INTRODUCTION

The term "Tweening" is derived from "in between". Sometimes you want to add an effect that is graduated over several frames. For example, moving a car from the left side of the movie to the right side. Instead of moving the car a little bit on each frame, you can simply:
  • position the car on the first frame,
  • then insert a keyframe where the car should stop
  • and finally tell Flash to tween between the two key-frames.
Tweening simply means going from one keyframe to another while taking small steps for each of the ordinary frames in between

Motion Guide Tween

Do the following to make a Motion Guide Tweening.
1. To insert 30 frames in your movie with the mouse:
Click frame 30 in layer 1 on the timeline - then press F5.
Timeline
2. Now you need to find the element you want to tween.
( It can be any element you like ) .
Choose Libraries > Graphics in the menu.
Library - Graphics opens.
Find Bird and with the mouse, drag it into the canvas.
Library->Graphics
Use the scale tool in the toolbox, to resize the bird as you like.
(If your version of Flash does not contain "bird", then just use any other symbol).
3. Now enter a keyframe in frame 30. To do this, first click
frame 30 in layer one on the timeline. Then press F6.
Timeline
4. Next, double click the keyframe in frame 1.
A frame Properties Box pops up.
Choose "Tweening", and in the Tweening drop-down menu choose "Motion".
Frame Properties
Click OK
5. Right click on Layer 1.
A pop-up menu appears.
Choose Add Motion Guide.
Add Motion Guide
Flash now inserts a new layer on top of layer 1,
with the Motion Guide icon to the left of the layer's name.
Timeline
This new layer is called a motion guide layer.
Motion guide layers are used to draw lines that you want an animated symbol to follow.
6. Click on the Motion Guide Layer to make sure it is the active layer.
(Click on the layer name, where it says "Guide: Layer 1").
Choose pencil Pen in the toolbox. (Or press P on the keyboard)
Make sure pencil mode is set to "Smooth".
Pencil Mode
With the pencil draw the line you want the bird to fly along.
For example like this:
Motion Guide Example
(Hint: Do not make complex patterns until you're familiar with the technique).
7. Now adjust the frame pointer so it points to frame 1.
Timeline
Make sure the Snap button Snap is activated (or choose
View > Snap in the menu, to activate snapping).
8. With the mouse, place the bird so that its center is at the beginning of your motion guide.
(The center is indicated by a small + when selected).
A black circle appears when the bird is attached to the motion guide.
It can sometimes be hard to get the symbol to snap to the guide. Eventually it will though :o)
Try zooming in or out if you just can't get the bird to snap to the guide.
Release the mouse button when the bird is snapped to the guide.
Frame 1: Bird Motion Guide
Now adjust the frame pointer so that it points at frame 30. Repeat the process
placing the bird at the end of the motion guide.
Frame 30: Bird Motion Guide
Congrats! You have just created .... (drumrolls)...... a Motion Guide Tweening!
The bird will now follow the motion guide when you play the movie.
Press Ctrl+Enter to test your movie.
Orient to path direction.
If say, your motion guide was a circle, you would have the bird fly in a thrilling loop.
However it would look kind of odd, since the bird would only follow the circle, but not
actually point the nose in the direction of the circle.
During the entire loop the bird would have its head pointing to the right :o)
Eventually the bird would fly backwards. Quite a thrill maybe... but .. not too realistic :o)
If you want the bird to actually follow the circle, not only in movement, but also in direction,
you should double click the keyframe in frame 1 on layer 1.
This will reopen the frame properties box.
Choose the "tweening" option.
Select the "Orient to path direction" option, and click ok.


CONCLUSION:

You now have the basic skills of a Flash master. But remember: You don't create great Flash animations by bombarding your users with each and every one of these skills all at once. Stellar Flash animations come from the elegant implementation of the right features. Many of the movies at Animation Express use only the most basic Flash techniques to showcase exceptional content. In fact, additional buttons and complex actions would only spoil many of these works. When sophisticated interactivity is indicated, go ahead and utilize every feature in your arsenal, but make sure you do so with a light touch. This is something that comes only with practice. So get to work! There are a lot of excellent Flash resources. Here a few of my favorites: Colin Moock's Flash Page Flash Central Macromedia's Flash Support and Developer's Center Also, there's a an active and useful mailing list called Flasher-L that you'll find highly valuable.
Flash Tutorial - this tutorial covers the basic conceptsvof flash and animation and how to make a Flash movie. Would be a great tutorial for the beginning level.

Adobe Flash Shortcut Keys

List of shortcut keys

Shortcut Command How useful(?)
Ctrl-B Modify : Break Apart +       –
F7 Modify > Timeline : Convert to Blank Keyframes +       –
F6 Modify > Timeline : Convert to Keyframes +       –
F8 Modify : Convert to Symbol +       –
Ctrl-Alt- C Edit > Timeline : Copy Frames +       –
Ctrl-Alt- X Edit > Timeline : Cut Frames +       –
Ctrl-Alt-G View > Grid : Edit Grid +       –
Ctrl-Alt-Shft- G View > Guides : Edit Guides +       –
Ctrl-/ (slash) View > Snapping : Edit Snapping +       –
Ctrl-E Edit : Edit Symbols +       –
Ctrl-Alt-B Control : Enable Simple Buttons +       –
Ctrl-Alt-F Control : Enable Simple Frame Actions +       –
F5 Insert > Timeline : Frame (Add) +       –
Ctrl- ; (semicolon) View > Guides : Guides (Show/Hide) +       –
F4 Window : Hide/Show (A ll Open Panels) +       –
Ctrl-R File > Import : Import to Stage +       –
Ctrl-L , F11 Window : Library Panel (Show/Hide) +       –
Ctrl-Alt-L Modify > Arrange : Lock (Group ) +       –
Ctrl-Alt-; (semicolon) View > Guides : Lock Guides +       –
Ctrl-Alt-M Control : Mute Sounds +       –
Ctrl-F8 Insert : New Symbol +       –
Ctrl-Shft-0 File > Import : Open External Library +       –
Ctrl-Alt-Shft-0 View > Previe w Mode : Outlines (View As) +       –
Ctrl-V Edit : Paste in Center (Clipboard Contents) +       –
Ctrl-Alt- V Edit > Timeline : Paste Frames +       –
Ctrl-Shft- V Edit : Paste in Plac e (Clipboard Cont ents) +       –
Enter Control : Play (Movie) +       –
F12 File > Publish Preview : Publish Preview (Default) +       –
Ctrl-Shft-F12 File : Publish Settings +       –
Shft-F5 Edit > Timeline : Remove Frames +       –
Ctrl-Shft-Z Modify > Transform : Remove Transform +       –
Ctrl-Alt-R Control : Rewind (Movie) +       –
Ctrl-Alt-S Modify > Transform Select All : Scale and Rotate +       –
Ctrl-Alt-A Edit > Timeline : Frames +       –
Ctrl-Shft-' (apostrophe) View > Snapping : Snap to Grid +       –
Ctrl-Shft-; (semicolon) View > Snapping : Snap to Guides +       –
Ctrl-Shft-/ (slash View > Snapping : Snap to Objects +       –
, (comma) Control : Step Backward One Frame +       –
. (period) Control : Step Forward One Frame +       –
Ctrl-Enter Control : Test Movie +       –
Ctrl-Alt-T Window : Timeline (Show/Hide) +       –
Ctrl-Alt-Shft-L Modify > Arrange : Unlock All (locked groups)

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More