Learnit Training

9. Interactivity

9.1 Interactivity

An interactive Flash animation is an animation that responds in any way to a certain action of a user (the one who is watching the animation). This includes a button that, when pressed, stops the animation or allows it to go to a certain frame, but also, for example, a complete game of programmed Flash offers various possibilities to add interactivity. In the simplest case, it can be a form that the user fills out and sends to the web server at the push of a button. With the help of the built-in programming language ActionScript, it is even possible to create games.
Interactivity therefore means that the user can influence the 'behaviour' of the Flash animation. Flash must therefore respond to certain input, called user input, from the person viewing the animation.

9.2 buttons

9.2.1 Introduction Buttons

The simplest way to add interactivity is by using a button. A button has many similarities to a movie clip, with the main difference being that a button normally hears a piece of code that causes Flash to do something when the button is clicked. For example, you might create a button that stops the Flash movie, or makes a particular movie clip visible or invisible. A button, unlike a movie clip, has only four frames. These are used to make the button look different when a user moves the mouse over the button or presses it.

9.2.2 Use an existing button

Inserting a button in a Flash animation is really easy. Like a movie clip, a button is always an instance of a (button) symbol from the library. With the Library window open you can simply drag a button symbol to the place where you want to have an instance of the relevant button. You can also use a pre-programmed button from the common-Library buttons.
Once the button is inserted, Flash still needs to know what is to happen at the time the button is pressed. We do this by adding a piece of code to the button in the ActionScript programming language. In the button's Object code window you can view and edit that piece of code. You have to add this code yourself and if you have just created a new button there will be no code. The basis of adding ActionScript code is addressed in the next section.

The library window with the column child

9.2.3 Create a New button symbol

Before you can insert a button, you must first have a symbol of the button you want to use. This can of course be a button from an existing library, but more often this will be a symbol that you created yourself first. To design a new button you must first add a new button-symbol to your library. You can then open and edit this symbol in almost the same way as a movie clip is edited.

9.2.3.1 the up, over and down frame

A button, other than a movie clip, consists of four frames, each with a specific function. Using these four frames it is possible to create special effects, such as a button that seems to be really pressed. In The first three frames, the Upframe, the Overframe and the down frame, the button is drawn as it will look normal, if the user moves the mouse over the button and when the user actually presses the button.
A button, like a movie clip, can consist of several layers. Often, many layers in all three button designs (frames) will be the same. For layers that are the same in multiple frames (for example, in the up and Overframe), create a keyframe once (in this case in the Upframe), and for subsequent frames (in this case only the Overframe), create an ordinary frame.
If a layer in a given frame is different from the preceding frame, you create a new keyframe for that state.

9.2.3.2 the Hitframe

A special function is reserved for the hitframe. The hitframe will never be shown while playing the movie. The hitframe gives you the possibility to tell Flash which area of the button is ' sensitive '. In other words, what area of the button can be clicked. This can be useful, among other features, when you create a button with shadow and you don't want the shadow to be clickable. The area in which the hitframe is drawn will become sensitive to the mouse. Often the hitframe will consist of, for example, a single square, which covers the sensitive area of the bud. You can also put the complete button in this frame and only give those layers no hitframe that may not be sensitive (for example, think of a layer that contains the shadow).

9.3 Basic ActionScript

To create interactivity in the animation, it is necessary for Flash to know how to respond to user input. For example, once you have created a button, Flash will tell you what to do at the moment the button is pressed. This ' tell ' happens in the ActionScript programming language developed specifically for Flash. People who have already worked with JavaScript will find many similarities between the two languages. They are both derived from the ' ECMA Script standard '.
With ActionScripting is in Flash almost everything possible. With enough programming it is even possible to make a game in Flash. In the next chapter, we'll delve deeper into the background of ActionScript. This section contains a simple introduction to ActionScript, so you'll soon be able to add simple functionality to a button, for example.

9.3.1 Introduction ActionScript

In The simplest case, you want Flash to do one thing (for example, to hide an image) when a button is pressed. In such a case, you tell Flash in the ActionScript language that it has to link two things together, namely the event (event) that the button is pressed, to the action (action) to hide an image. It is important to remember what these two concepts mean. An event causes a specific actionscript to be started. This can be a push of a button, but also for example starting the movie or stopping a movie clip.
An action is a command that is given to Flash from an ActionScript. This can be anything: change the mouse pointer, hide or display an image or movie clip, "Flush" to a specific frame, and so on.
Typically, an actionscript is associated with a particular event and contains one or more actions.

9.3.2 Events

9.3.2.1 a pressed button and other button events

If you record a button in your movie, you usually want something to happen when printed. If you want to add an action to the actions that are performed when the button is pressed, first open the ' Object Actions ' window of the button. In the left half of the window (as a kind of memory aid) you can find a drop-down list of all the commands you could give. We are mainly talking about the right half of the window, where the code is associated with the button. If no code has yet been added to the button, the right half will still be completely empty. To add an action, press the + button on the top left. The basic-Actions submenu lists the most frequently used actions.
If you click on one of these actions, you will see the corresponding code appear in the right pane. For example, if you inserted the play action (which starts the movie), the following will appear:
on (release) {	play ();
}
The word on is always used to indicate an event of a button. Next, the event is in parentheses (i.e. the release event, which occurs when the button is released). There, between two curly braces all the actions that are performed at this event, in this case only the action play. If there are multiple actions between the braces, they are executed from top to bottom. If you want to add a new line (such as an action or an event), select the line above which the line should appear and choose from the menu with the appropriate command.
Flash is er nu automatisch van uitgegaan dat je gebruik wilde maken van het release-event, maar er zijn meer mogelijkheden. Door in het code-veld (het rechter gedeelte van het scherm) op de regel 'on (release) {' te drukken, komen de opties die bij die regel horen tevoorschijn onder in het venster. In dit geval zie je een lijstje van acht events die allemaal te maken hebben met het gedrag van de muis met betrekking tot de button:
Press Mouse button is pressed above the button
Release mouse button Is released above the button (after it is first pressed above the button)
Release outside mouse button Is released outside the button (after it is first pressed above the button)
Key Press Some button is pressed on the keyboard
Roll Over The mouse moves from outside the button on the button
Roll Out The mouse moves from the button outside the button
Drag Over With the mouse button, which is pressed above the button, still pushes the mouse from outside the button over the button
Drag Out The mouse button is pressed above the button and the mouse moves now, with the button still pressed to the outside the button.

9.3.2.2 mouse over a movieclip move and other clip events

In addition to buttons, movie clips can also cause events. For these events, the code ' on ' is not used, but the code ' onClipEvent '. If you want to write code in ActionScript that is executed when such a MovieClip event ' takes place ', you must first open the Action window of the MovieClip. You can do this by right-clicking on the MovieClip and choosing for actions.


In this window, press the plus in the upper left corner and in the Actions submenu choose the onClipEvent command. At the bottom of the screen you can now choose from a nine events (by default the event load is selected). A clip event works in the same way as a button event. The actions to be performed are placed among each other between the braces.
In parentheses behind the code word onClipEvent comes to what event it is. The possible events are:
Load The MovieClip appears in the timeline of the Flash Movie
Unload Occurs in the first frame that the MovieClip is no longer on the timeline
Enter Frame Runs every time a frame is played
Mousemove The mouse moves
Mousedown The left mouse button is pressed
Mouseup The left mouse button is released
Keydown A button is pressed
Keyup A button is released
Data New information has been received via the loadVariable or loadMovie action.

9.3.2.3 in a Frame

The events we have dealt with so far were always connected to a certain object (a button or a movieclip). It is also possible to connect a piece of code to a specific frame. The code is then executed when the frame is reached.
To connect code to a frame, it is easiest to double-click on a particular layer (often people create a special layer for the ActionScript Code) on the timeline on that frame. If it is right, the Frame Actions window now appears, which looks the same as the actions window object. For code added to a frame, there is no such thing as an on action, all the code that you enter in the Frame Actions window will be executed as soon as the frame in question is reached. If you have added code to a specific frame, you will see that on the timeline because a small letter a appears on the frame.

The letter A on the frame

9.3.3 Actions

Actions are the words by which you explain to Flash what to do when a particular event occurs. You add an action in the Action window (menu: Window-> actions). From there you have two possibilities: either you choose the action from the Add menu (the plus button on the top left of the screen), or you drag an action from one of the ' booklets ' in the left half of the screen to the code (right half). If you look around a bit in the left half of the screen you will see that there are a lot of possible actions. We will only deal with a few of them in this chapter. In the ActionScript chapter, we'll go into a little more detail on the possibilities with the different actions.

9.3.3.1 Start/Stop the movie

To stop the entire movie, you can insert the stop action in the ActionScript. For example, if you want to create a button that stop the movie, you first have to go to the Code window of the corresponding button. Then press the + button on the top left of the screen. In The Basic Actions submenu, click Stop Now. The code window will now put the stop action. If you are in the Object-Actions window of the button, Flash will put this action between braces behind the on (release) event. This means that this action is performed when the user has pressed the button. In the same way, you can also insert the play action. The play-action will make sure that a once-stopped movie is started again.

9.3.3.2 to a specific frame or scene.

Sometimes you want a certain piece of a movie to be skipped or a certain piece is repeated repeatedly. This can be achieved by using the gotoAndPlay action. You can also add this action by pressing the plus upper left in the object-actions or frame-actions window first and then selecting the go to action from the Basic Actions submenu. In The Code box is now the action gotoAndPlay appeared and at the bottom of the screen there are several options to indicate. First of all you can choose the scene. With current scene you stay in the current scene. By choosing next scene and previous scene you go to the previous or next scene respectively. In this list you can also choose the name of a particular scene.
The combination of the type and frame options determines which frame is going to be used. When type is the frame number option, you can specify the number of the frame you want to jump to behind frame. If you have given the frames names (labels) (this can be in the panel frame, what you open by going to the Panel menu and clicking on Frame in the window, you can also choose Frame label in the drop-down menu type, so that when frames are labeled a frame can choose from. By selecting for expression you can include a piece of ActionScript code to choose the frame, but that takes too far to handle.
The next frame and previous frame options move to the next and previous frames, respectively.
In addition to the three drop-down menus (scene, type and frame), there is also a box that you can select, namely go to and play. If you turn this box off, the movie will skip to the frame you specified, but will not play the movie. To do this, you could use the play command from the previous section again. P-Inte9

9.3.3.3 open a specific webpage or send a mail

To have the browser open a certain Internet page or to send an email, use the getURL command. You can also add this action by pressing the plus upper left in the object-actions or frame-actions window first and then selecting the action get URL from the Basic Actions submenu. At the bottom of the screen you can now set the options (parameters) for this action. First of all, you can specify behind the URL the address of the site you want to open (the address always starts with http://).
The window option determines which screen will load the new page. You can choose from four options:
_self The page is loaded at the place where the movie is currently playing
_blank A new browser window is loaded and the page loads
_parent The page loads in the frame (HTML frame, has nothing to do with Flash frames) that is above the frame of the page where the Flash movie plays
_top The full Active browser window is filled with the new page (leaving all HTML frames)
The two you'll probably use the most are _self and _blank. As long as you don't use frames, _parent and _top are exactly the same as _self.
The variables option has to do with sending forms and will be discussed later. If you don't use a Web form, you can simply leave it on don't send.
It is also possible to have the browser download a file, for example, by simply specifying the HTTP address or FTP address (so novice with ftp://) of that file behind URL.
If you want an email to be sent, type behind URL no http://but start with mailto: which then immediately comes the email address of the person who needs to be emailed. If this action is executed, a blank email will be opened with the address already filled in. Useful if you want to create a ' mail me ' button...

9.4 Forms

9.4.1 What is a Web form?

Often you can enter information on a website and then send it at the touch of a button. A page where you can give information in different text boxes (sometimes also with checkboxes), which can then be sent, is called form, or Web form.
In itself it is relatively easy to put a form in an Internet page. The Web page will allow the user to see a form that he can then send. The user's Internet browser then sends the data to the page's Internet server. If you want to build a website with forms, you'll have to make sure that the Internet server can handle the information he gets from the Web-browser (for example, he will have to save the information). We will not go into the way the server deals with a form, which differs from server to server, and it also carries far too much for this course. In this section we will discuss the methods to process a Web form in your Flash movie too.

9.4.2 text Box

A text box is an area on an Internet page or in your Flash movie where a user can fill in text. You can create such an area by using the Text tool to draw a rectangle and then in the text-Options Panel (menu: Window-> Panels-> text options) instead of selecting ' Static Text ' for ' Input Text '. In This panel you can also set what type of text box it becomes: one-line (single-line), with multiple lines (multiple line) or as a password, so that asterisks appear instead of typed characters (password). If text is typed in the box, the text is stored in a so-called variable (more about variables in the ActionScript chapter). The name of this variable can also be specified in the text-options panel.
The information in the Textvak is typed can be sent directly to an Internet server, but you can also use the typed text from ActionScript code and use it to influence the course of the movie, for example.

9.4.3 Send a form

Sending a form is done with the action getURL, which we have used before. This action will be added to the code by clicking on the plus upper left the screen and selecting getURL from the Actions submenu. Behind the URL you now enter the HTTP address where the information should be sent to. In The Variables box, choose one of the two options: GET or POST. Which you have to choose here is on the site to which the variables should be sent; Usually, Get is used when it comes to a small number of variables and Post when it comes to a larger number.
One of the possibilities is to send variables to a search page, so that the results of a search appear on the screen. For example, if you want to give your Flash movie the ability to search with Yahoo, you can draw a text box, which you set as input text and whose variable name you type only the letter P (this variable recognizes the site of Yahoo as the variable that the search and text). Then you place a button on the stage, with words like ' search ' or something like that and you add a getURL command in the Actions window of this button. As URL you now give the following address: http://search.yahoo.com/bin/search. At variables, choose Send using GET.
If the user now enters a word to search in the text field and then presses the button, a Search results window from Yahoo will appear.
This can be with many search engines, like for example with AltaVista (only the variable p than Q should be called), with as HTTP address http://www.altavista.com/q for worldwide search and http://nl.altavista.com/q for search within the Netherlands.