Macromedia Flash MX         A Brief Tutorial for   “Programming Usable Interfaces”              Andrew Ko
Versions      • Macromedia Flash MX        • Not Flash MX 2004 (the newer version)        • Not any older version      • N...
A Beginner’s Book      • Foundation Macromedia Flash MX        • Kris Besley      • Comes highly recommended on Amazon    ...
VB.NET vs. Flash MX      • VB is great for form-based applications        • Flash is great for time-based applications    ...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
Drawing             What is Flash?Palettes                                  Timeline                                    St...
The Stage• Contains the objects, images,  drawings, buttons, etc.• Where drawings are created,  modified, deleted, etc.• T...
The Stage   • Modify the stage size, background color, frames       per second, ruler units, etc. by going to:       • Mod...
Vector Graphics           All shapes in Flash are made out of           points, lines, and curves. Even this one:Intro • T...
Vector Graphics • Because shapes are made out of points, Flash   • Snaps objects’ edges together   • Snaps objects’ points...
Freeform Lines and Shapes         Pencil                    Your freeform stroke                    is turned into a      ...
Lines, Ovals, and Rectangles    Line          Ovals and rectangles          Options                    For rectangles, the...
Paths of Lines and Curves           Pen         Click once to make a         straight line in the path.         Click and ...
Brush Strokes            Brush            Like brushes in other            applications, has a radius            and shape...
Erasing Parts of Shapes            Eraser            Like erasers in other            applications, has a            radiu...
The Timeline      • A view of all of the frames and layers in          your movie      • Of course, most Flash-based media...
Frames                                   Frame 1 is                            currently selected                   This m...
Frames • Use the insert menu to insert and remove frames. • We’ll insert 11 framesIntro • The Stage • Vector Graphics • Ti...
Frames                                                 The hollow whiteThe black dot      The grey frames 2-12 have the re...
Frames                                                         Frame 1, a keyframe, has                                   ...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
Frames                                                      If we want to change what                                     ...
Frames Now, the first 12 frames                            The 13th frame has a red have a black oval.                    ...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
Layers• Just like Illustrator and other  applications, Flash supports  layers of content.• The layers are part of the time...
Layers                                                             Here I’ve renamed                                      ...
Layers                                                              Then I added an                                       ...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
Symbols    • Symbols are tricky.    • Symbols can also be thought of as a class.      • A single Button class ➔ many Butto...
Types of  Symbols• Graphic  • Operate in sync with the main movie’s timeline.    Used for images or reusable animations.• ...
Types of  Symbols• Buttons  • Special kind of Movie Clip symbol that responds    to clicks, rollovers and other actions.  ...
Making a Symbol                                                         You can make a new,                               ...
The Library                                                          Now, the eye appears in                              ...
An Instance of a SymbolNow, the left eye is an instance                 After erasing the right eye, weof the AnimatedEye ...
Naming Instances                                                     Its important to name an                             ...
Editing a Symbol                  To edit a symbol, double-click                  on the symbol in the library            ...
Editing a Symbol Let’s make the eyes blink                       Then we make a keyframe, and every 1/12th of a second.   ...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
ActionScript   • Let’s make the eyes look at the mouse using      ActionScript, the Flash scripting language.   • ActionSc...
ActionScript      • ActionScript code is associated with frames,          Movie Clips, and Buttons.      • Just before a f...
The Action Window                                                     There are two editing modes                         ...
The Action WindowThe code shown in the Actions window depends on thecurrent selection in the Flash environment.           ...
The Action WindowThe code shown in the Actions window depends on thecurrent selection in the Flash environment.           ...
Following the MouseTo make the eyes follow themouse cursor, we will put eventhandling code “in” each eye.The Actions windo...
Following the Mouse                                  This event handler will be called                                  wh...
Following the Mouse                                                                  _x and _y refer                      ...
Following the Mouse       This defines                 atan2()       degrees.                     takes the x             ...
Following the Mouse   This sets the                                                        This -5 corrects   rotation of ...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
We’ll edit the symbol bydouble-clicking on it in thelibrary...Go to the blink frame ofthe eye animation...Open the Actionw...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
Create a “blinking”variable that’s true whenRudolph is blinking....Then remember theold rotation so wecan restore it after...
In the first frame, we’ll                                                             restore the old rotation            ...
Then, we’ll avoid rotating the eye if its in the middle of blinking.Intro • The Stage • Vector Graphics • Timelines • Laye...
Finally, we’ll copy the                                                               code from the left eye              ...
Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
Buttons• Buttons are a special  type of Symbol, which  have frames for each  of their states.• Let’s make Rudolph’s  nose ...
Buttons                                                          A Button has four frames,                                ...
Up                                                        The nose’s up frame will                                        ...
Over                                                       To make the nose’s over                                        ...
Down                                                       To make the nose’s                                             ...
Hit                                                       By default, the clickable                                       ...
Button EventsTo make an event forthe button, select theNoseButton instanceon the stage, andopen the Actionswindow.Use on(e...
Button EventsWhen pressed, theeyes will gotoframe 12 (theblinking frame) andstop playing.When the nosebutton is released,t...
Button EventsIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
Button Events                                                              We’ll remove the                               ...
Button EventsIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
Upcoming SlideShare
Loading in...5
×

Flash tutorial

502

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
502
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
70
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • I know people are still working with VB, but today we’re going to switch gears and start talking about Flash. How many consider themselves intermediate or greater with Flash? Everybody that didn’t raise their hand, turn and look at whose hands are raised. These are the people to talk to if you need help and we aren’t available. Feel free to ask questions during the talk, and I’ll do my best to answer them.
  • The Mac version on campus seems to be having some problems, but its being worked on. Both platforms are basically the same, and you should be able to use the same files on both platforms.
  • In other words, Flash is a bit more complex than VB, and as a result, a bit more difficult to learn
  • Show Flash!
  • We’ll go through each of these pieces, and their related terminology one at a time.
  • When you draw something, Flash tries turns it into a big shape made out of lots of points and curves
  • Even though we call them Flash movies, they aren’t really movies, since they’re interactive. We’ll ignore LAYERS and focus on FRAMES
  • In Flash, every “Movie” is made up by simply moving through a series of frames. This creates the illusion of motion. In this image, Frame 1 is currently selected on the Timeline. The 12.0 FPS means that each Frame on this timeline is displayed for 1/12th of a second, before displaying the next frame. Buttons might start animating a series of frames or go to a new sequence of frames.
  • - You can insert 11 manually - You can right click the 12th frame and select insert frames. This fills in 11 frames - You can drag the first frame to the 12th to make the frames, but you can’t undo it.
  • The Black Dot is a KEYFRAME A KEYFRAME defines the content If its a white dot, it means its an empty keyframe. Let’s look at an example.
  • All Flash movies loop by default. So let’s take a look at this movie.
  • Let’s look at an EXAMPLE
  • Who HASN’T heard of layers?
  • If you stop the main timeline, you stop the Graphic symbols on the timeline. If you stop the main timeline, the Movie Clips keep on going.
  • Notice that when we changed the symbol, both eyes changed.
  • Notice that the flash blinks 1 frame out of sync with the eyes, because there are 13 frames on the main timeline, but 12 frames on the eye symbol’s timeline.
  • Explain last point.
  • This is VERY important
  • You don’t have to declare variables.
  • (5) Left Eye Follows Notice that the left eye blinks crooked when the eye is rotated. Anybody have any ideas on how to fix this?
  • WE’RE MAKING A BIG ASSUMPTION! We’re assuming that this frame’s code will be executed after any mouse events are handled. If this isn’t true, then the eye will be rotated when it blinks
  • (6) Blink Corrected So that sort of worked, but aftif the mouse is moving while Rudolph is blinking, it still rotates. That’s because the eye is blinking before the mouse move event is being handled. So the Any solutions?
  • Notice, you can access variables declared in other frames.
  • You can even access variables declared in other movie clips.
  • To finish this, we’ll copy the code for the left eye to the right eye. Could we have made a symbol that just shared this code? No. The code that you put on a movie clip, like these eyes, is for that particular movie clip. In fact, if we selected the left eye and tried to convert it into a new symbol, it would erase the code in the left eye without even telling us.
  • (7) Fully corrected eyes
  • (8) Nose Button But we can’t click on the nose sometimes. Does anybody know why? Because the red nose in the 13th frame is NOT an instance of a symbol. We only converted the black nose to a symbol. The red nose in the 13th frame doesn’t have the code that the first 12 frames have for handling our button clicks.
  • (
  • Flash tutorial

    1. 1. Macromedia Flash MX A Brief Tutorial for “Programming Usable Interfaces” Andrew Ko
    2. 2. Versions • Macromedia Flash MX • Not Flash MX 2004 (the newer version) • Not any older version • No site license • PC version: Wean clusters, Cyert Hall • Mac version: Hunt Library, Cyert HallIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    3. 3. A Beginner’s Book • Foundation Macromedia Flash MX • Kris Besley • Comes highly recommended on Amazon • ~$10 paperback on Amazon and Half.com • Not a reference, but a very detailed introduction for people unfamiliar with FlashIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    4. 4. VB.NET vs. Flash MX • VB is great for form-based applications • Flash is great for time-based applications • Both VB and Flash are event-based.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    5. 5. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    6. 6. Drawing What is Flash?Palettes Timeline Stage Vector Graphics ActionScript And lots and lots of terminology...Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    7. 7. The Stage• Contains the objects, images, drawings, buttons, etc.• Where drawings are created, modified, deleted, etc.• Things can go outside the stage, but they are clipped when the movie is played. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    8. 8. The Stage • Modify the stage size, background color, frames per second, ruler units, etc. by going to: • Modify ➔ Document...Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    9. 9. Vector Graphics All shapes in Flash are made out of points, lines, and curves. Even this one:Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    10. 10. Vector Graphics • Because shapes are made out of points, Flash • Snaps objects’ edges together • Snaps objects’ points to each other • All shapes have an outline and fill color, a line pattern, and a stroke thickness • These can be changed in the property windowIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    11. 11. Freeform Lines and Shapes Pencil Your freeform stroke is turned into a modifiable shape. Options that allow you to straighten, smooth, or “ink” (no modification)Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    12. 12. Lines, Ovals, and Rectangles Line Ovals and rectangles Options For rectangles, the “radius” of the cornerIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    13. 13. Paths of Lines and Curves Pen Click once to make a straight line in the path. Click and drag to make a curve. Pay close attention to Click on a previously made the changes in the point to close the shape. cursor with this tool.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    14. 14. Brush Strokes Brush Like brushes in other applications, has a radius and shape. The options also allow for filling behind, selection, inside...Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    15. 15. Erasing Parts of Shapes Eraser Like erasers in other applications, has a radius and shape. The options also allow for erasing fills, lines, and other things.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    16. 16. The Timeline • A view of all of the frames and layers in your movie • Of course, most Flash-based media is interactive, so its not exactly a movie.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    17. 17. Frames Frame 1 is currently selected This movie shows 12 This is a frame frames per secondIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    18. 18. Frames • Use the insert menu to insert and remove frames. • We’ll insert 11 framesIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    19. 19. Frames The hollow whiteThe black dot The grey frames 2-12 have the rectangle meansmeans that frame 1 same content as the frame 1, that it is the end ofis a keyframe the keyframe the span of frames. A keyframes defines the content of all frames following it, up until the next keyframe. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    20. 20. Frames Frame 1, a keyframe, has a black oval on the stage. All of the grey frames following it have the same black oval as frame 1. The last frame that with the black oval is frame 12, represented by the white rectangle. This movie will show this black oval for 12 frames (1 second) and then loop.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    21. 21. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    22. 22. Frames If we want to change what the 13th frame displays, we “insert a keyframe” Inserting actually just changes the selected frame to a keyframe. This copies the previous keyframe’s contents. We can then change the contents of the new keyframe.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    23. 23. Frames Now, the first 12 frames The 13th frame has a red have a black oval. oval of the same size.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    24. 24. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    25. 25. Layers• Just like Illustrator and other applications, Flash supports layers of content.• The layers are part of the timeline.• Layers can be locked, hidden, and organized in folders.• Layers determine the order in which content is displayed for each frame. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    26. 26. Layers Here I’ve renamed Layer 1 to Nose and added a layer called Face Then I drew a brown rectangle on the Face layer.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    27. 27. Layers Then I added an Eyes layer, and drew the eyes and mouth. Then I drew a the eyes and the mouthIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    28. 28. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    29. 29. Symbols • Symbols are tricky. • Symbols can also be thought of as a class. • A single Button class ➔ many Button instances • Symbols = Separate Timeline + Stage + Layers • So they can also be thought of as movies inside of movies.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    30. 30. Types of Symbols• Graphic • Operate in sync with the main movie’s timeline. Used for images or reusable animations.• Movie Clip • Movie inside a movie. On their own time, not necessarily in sync with the main timeline. • Good for interactive things and sounds. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    31. 31. Types of Symbols• Buttons • Special kind of Movie Clip symbol that responds to clicks, rollovers and other actions. • You define the graphics for each of the various button states, and then assign particular actions to an instance of a button. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    32. 32. Making a Symbol You can make a new, blank symbol by going to Insert→ Insert Symbol... Here, we have selected the eye (by locking the nose and face layers and dragging a box around the eye), so the menu says Convert to Symbol instead.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    33. 33. The Library Now, the eye appears in the Library as a new symbol. The library contains all of this Flash document’s symbols.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    34. 34. An Instance of a SymbolNow, the left eye is an instance After erasing the right eye, weof the AnimatedEye symbol can drag a new instance of the AnimatedEye symbol from the library for the right eye. Now we have two instances of the animated eye symbol, each with their own positions, but sharing the symbol’s timeline, layers, etc.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    35. 35. Naming Instances Its important to name an instance if you want to refer to it in code. We name the left eye leftEye by selecting the left eye and changing the instance name in the property window. We do the same for the right eye.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    36. 36. Editing a Symbol To edit a symbol, double-click on the symbol in the library (either the name or image).Notice that the timeline, layers,and stage are now specific tothe AnimatedEye symbol.Our view is now inside themain scene. You can returnto it by clicking here.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    37. 37. Editing a Symbol Let’s make the eyes blink Then we make a keyframe, and every 1/12th of a second. change the eye so that it is blinking. If we right-click on the 12th frame in the eye’s timeline and select insert frame, it inserts frames in between.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    38. 38. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    39. 39. ActionScript • Let’s make the eyes look at the mouse using ActionScript, the Flash scripting language. • ActionScript is event-based, like VB.NET, and has two main types of events: • Button events (pressed, released, rollOver...) • MovieClip events (load, enterFrame, mouseMove...) • Each has its own syntax.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    40. 40. ActionScript • ActionScript code is associated with frames, Movie Clips, and Buttons. • Just before a frame is displayed, its code is executed. • The frames following a keyframe share the same code as the keyframe. The keyframe’s code is executed just before it is displayed.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    41. 41. The Action Window There are two editing modes In expert mode, you type, and can use the Intellisense like pop-up to see the available methods. In normal mode, you drag and drop “Actions” from the area in the left.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    42. 42. The Action WindowThe code shown in the Actions window depends on thecurrent selection in the Flash environment. Individual frames can have ActionScript. This is represented by the ‘a’ in the frame. All frames that follow a keyframe share the same ActionScript code. To help you find your code, make a layer in the timeline that is reserved for code only. Then you only have to search in that one layer.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    43. 43. The Action WindowThe code shown in the Actions window depends on thecurrent selection in the Flash environment. Movie clips can also have code, but it can only be movie clip event handlers. Notice that the movie clip’s code appears when the movie clip is selected.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    44. 44. Following the MouseTo make the eyes follow themouse cursor, we will put eventhandling code “in” each eye.The Actions window for the lefteye instance doesn’t have anycode yet.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    45. 45. Following the Mouse This event handler will be called when the mouse moves.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    46. 46. Following the Mouse _x and _y refer to the x and y position of the left eye, based on These two lines the main stage’s define two coordinate variables _root._xmouse refers to system. xDelta and the current x position of the yDelta. mouse, based on the main stage’s coordinate system.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    47. 47. Following the Mouse This defines atan2() degrees. takes the x and y deltas This math and returns converts the the degrees radians to in radians. degrees.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    48. 48. Following the Mouse This sets the This -5 corrects rotation of the for my sloppy left eye to the drawing. value of degrees.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    49. 49. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    50. 50. We’ll edit the symbol bydouble-clicking on it in thelibrary...Go to the blink frame ofthe eye animation...Open the Actionwindow for the frame......and set the rotation ofthe eye to 0 for thatframe.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    51. 51. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    52. 52. Create a “blinking”variable that’s true whenRudolph is blinking....Then remember theold rotation so wecan restore it afterblinking.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    53. 53. In the first frame, we’ll restore the old rotation value.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    54. 54. Then, we’ll avoid rotating the eye if its in the middle of blinking.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    55. 55. Finally, we’ll copy the code from the left eye to the right eye.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    56. 56. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    57. 57. Buttons• Buttons are a special type of Symbol, which have frames for each of their states.• Let’s make Rudolph’s nose a button by converting it to a symbol. Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    58. 58. Buttons A Button has four frames, each defining its appearance and behavior in different states. Up is when the button is not pressed, or released. Over is when the button is hovered over. Down is when the button is pressed. Hit defines the clickable area of the button.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    59. 59. Up The nose’s up frame will be just as it is.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    60. 60. Over To make the nose’s over frame, insert a keyframe. I’ve filled the nose with brown. If we don’t make a keyframe, this changes the up frame to brown as well.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    61. 61. Down To make the nose’s down frame, insert a keyframe. I’ve filled the nose with red.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    62. 62. Hit By default, the clickable area is defined by the oval on the screen.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    63. 63. Button EventsTo make an event forthe button, select theNoseButton instanceon the stage, andopen the Actionswindow.Use on(event) torespond to press,release, rollOver,etc.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    64. 64. Button EventsWhen pressed, theeyes will gotoframe 12 (theblinking frame) andstop playing.When the nosebutton is released,the eyes will go toframe 1 and startplaying.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    65. 65. Button EventsIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    66. 66. Button Events We’ll remove the keyframe with the red nose, so the nose button is clickable for the whole movie.Intro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    67. 67. Button EventsIntro • The Stage • Vector Graphics • Timelines • Layers • Symbols • ActionScript • Buttons
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×