Arrays 7. Animation 8. Organising your Code 9. Writing Class Files Flash and the Web.
How to use ActionScript with Animate
ActionScript lets you add interactivity to a movie. ActionScript provides elements, such as actions, operators, and objects, that you put together in scripts that tell your movie what to do; You set up your movie so that events, such as button clicks and key presses, trigger these scripts. When you click an item once, its description appears at the upper right of the panel. When you double-click an item, it adds the item to the Actions panel Script pane.
Script Assist also lets you find and replace text, and view script line numbers. Select the content layer in the Timeline.
Flash 5 interactivity and scripting
This layer contains a movie clip with the instance name Bottle. Click the padlock icon at the top of the Timeline to unlock all of the layers. Double-click the Stage to open the movie clip in document-editing mode. Notice the Timeline contains an FLV file, or Flash video file, that's been imported into the movie clip. Click and drag the playhead over the Timeline to preview the video. Click the Scene 1 link in the edit bar to return to the main Stage. Notice the animation begins as soon as the movie starts. You'll add a button the user has to click to see the animation. Close the Movie window.
A simple button has already been created, called startButton. Drag an instance of the symbol onto the Stage, and position it in the bottom right corner. Now you need to give the button an instance name so that it can be called out in ActionScript.
Choose the Property inspector and type startButton for the Instance Name. You're ready to write the ActionScript. Don't worry; you're not actually going to be writing code. That's where the Script Assist feature comes in… Go to the Timeline and lock the Content layer. Select the first keyframe in the Actions layer. Examine the Actions panel.
The left pane is referred to as the Actions toolbox, and contains all the class libraries. You navigate through each library to access the individual classes, and their associated methods and properties. You can add them to your ActionScript by dragging them into the code pane. The Actions toolbox is designed to work with the Script Assist feature. You'll use these two features together to build the ActionScript for this movie. Click the Script Assist button. The first thing you want to add is code to stop the animation the movie clip named Bottle from playing automatically when the movie starts.
Knowing that the animation is a movie clip is important when you're determining and finding the class in the Actions toolbox. Script Assist assumes some basic knowledge of ActionScript for you to be able to create these scripts. In this case, you need to know that movie clips reside in the flash. Double-click flash. Several methods are listed, including a method called stop. Double-click stop to insert the stop command into the panel. Remember, the movie clip you want to stop is called Bottle. For Object, type bottle.
You've just written your first piece of ActionScript code. The next thing you need to do is set the Mouse Down event for the button, a transition event that calls another line of code when the button is clicked. Once that event is triggered, the movie will start. To set mouse events in ActionScript 3. Find this method in the flash. Navigate down to the Methods list and double- click addEventListener. The addEventListener is automatically added to the Actions panel. Several different input fields open in the Script Assist pane to let you set up the addEventListener method. For Object, type startButton.
This is the object that listens for the Mouse Down event.
- Create and publish HTML5 Canvas documents in Animate?
- Stay ahead with the world's most comprehensive technology and business learning platform..
- Flash button tutorial.
- Tutorial Flash Interactivity;
- The new HTML5 Canvas document-type.
Next, you'll specify the kind of event that the listener listens for using the Type input field. To find a mouse event, go to the Actions toolbox and navigate down to flash.
Select the Actions panel to re-open Script Assist, and insert your pointer in the Type text box. For each frame, different drawings may be defined but some, e. Look at the various frames. The four mandatory frames for button symbols including the ones you may create are:. Various kinds of buttons have various layers usually between three and five depending on the complexity of the drawings. These layers contains just drawing for these four button frames.
The Flash engine will then select the appropriate frame for display according to user action mouse over, mouse down, etc. Beginners just should use built-in buttons. There is no need to change anything in the keyframes or the layers except the label.
Choose your region
However, you later can change any drawings in any way you like. A button can be made of any sort of graphics you like even pictures as you shall learn below and you even may add animation with embedded movie clips.
You can attach behaviors in various ways to buttons but there is no difference between built-in buttons and the ones you can create yourself. The most obvious one is to jump to a different frame in the main timeline after the user clicks on a button. The goal is make a flash animation that stops at frame one when the file loads. The user then will see a button on which he can click.
The animation should restart in frame 2 after the user clicked. We have to give the launch button not the symbol in the library but the thing we got on stage a name. Once you drag a library item to the stage you produce an instance of the symbol. In order to find this instance, Flash needs to know it by name. Make sure that the name is doesn't have any blanks or special symbols inside actually Flash will complain if you define an illegal name.
In order to make Flash buttons interactive, we will have to write some code. This code must be defined for the same frame s as the button but we usually use a different layer. This will just stop the execution of the main timeline "movie". Flash will only display the contents of the first frame all layers and then wait. We cannot really explain event driven programming here see the ActionScript 3 event handling tutorial , but the principle is the following: For each object that can react to user actions you have to define what will happen when the user does something, e.
Of course you can reuse this code for a similar problem, i. All you need to do is this:. Tip: If your code is getting bigger, un-dock the Actions Frame panel and pin it down. Hit F9 to to hide it again. We now have an "Enter" button in the first frame of the animation. As soon as the user will click on it, the animation will move to frame 2 and play the rest. Of course, this means that you have to put something in frame 2 and beyond that users can look at.
You can build little flash "web" sites with buttons with what you just learned. The principle is simple:. You may not have heard of "named frames" so far, but they are quite practical and using named frames is good development policy. If you use names for frames, you later can move them around. Also it is easier to remember names. The script then should look something like this. I think I made it as simple as possible for non-programmers. The purpose of this application is again to explain buttons and some Action Script, not to make the perfect slide show tool. To create a slideshow, we will first import the pictures and adjust the stage.
This way we we can get a feel for the size of buttons needed. Then we draw the buttons. Finally we will make it interactive. So now you should have something like 2 button symbols in the library and an named instance of each on the stage. As you will see, the button will change color when you move the mouse over it. Do the same with the other button. This is ActionScript code that will stop the animation right after frame one is loaded. Only by clicking the buttons can the user then go forward or backward.
The forward function has some "if-then-else" logic inside. Let's look at its "if-then-else" statement. Meaning : When the user clicks on the forward button, the Flash engine will check if the current frame is the last frame then move to frame 1 else just move to the next frame. Meaning : If we are on the first frame then go to last frame, else go to the previous frame. In order to use this slide-show code for your own slide show you do not need to understand it. Tip: If this doesn't work, make sure that your Publish settings say ActionScript 3.
It won't work with ActionScript 2. Also make sure that your button instances are named and that these names correspond to the ones you use in the script. It doesn't matter how you name the button symbols , we talk about button instances here! This slide show was fairly simple. Now you maybe would like to use fancier buttons. See Animated buttons below. You can make image maps from bitmaps too. If you like the idea of crazy buttons, you really can use all your graphics and animation skills. Buttons can include any kind of graphics, including embedded movie clips.
In order to use animations within button symbol frames, you simply create an embedded movie clip see Flash motion tweening tutorial or Flash embedded movie clip tutorial and then put it in one of the "up", "over" or "down" frames of the button symbol. First, create a layer in the timeline called "Script" or "Action". Use frames in this layer to script behaviors. You can extend the scope of a script by hitting F5 in the timeline same principle as for backgrounds.