Creating an interactive graphic

Before using this lesson, you should be acquainted with the timeline, frames, keyframes, drawing shapes, modifying objects, symbols, and symbol instances.

This lesson will cover two types of interaction. The simpler type of interaction is state change on mouseover or click. The second type of interaction is state change on dragging and dropping (or dragging and releasing).

Creating an interaction requires at least one scriptable object (movie clip or button) and ActionScript that targets the object. Button objects have some built-in interactions—automatic state changes for mouseover and mousedown events. You can create more powerful and complex interactions using movie clips or movie clips in combination with buttons. Try out the various interactions in the example below.

Download the sample file: interaction.zip (12 KB).

In the example ActionScript below, you will see lines marked with "//" and highlighted. These lines are comments, which explain the purpose of the preceding line of script.

To create a simple toggle interaction:

Create a scriptable object with two states.
1. Double-click in the current layer name and rename the layer "toggle."
2. Insert a new symbol. F8 or Insert > New Symbol. Give it a name (e.g., Toggle clip) and make sure its Type is Movie clip.
3. Draw an "off" state.
4. Click the new layer button to insert a new layer and name it "labels."
5. Click on the first frame in the labels layer and label it "off."
6. Open the Actions panel. F9 or Window > Actions.
7. Insert a stop(); action in the first keyframe.
8. Shift-click in the timeline for both layers and insert a blank keyframe.
9. Label the "labels" empty keyframe "on."
10. Insert a stop(); action in the "on" keyframe.
11. Draw an "on" state in the empty keyframe.
12. Return to the main timeline by clicking Scene 1.
13. Drag a new instance of your movie clip onto the Stage.
14. Name the instance (e.g., toggle_mc).

Script the movie clip instance to toggle on mouseover.

Insert a new layer and name it "actions."

Type the following script in the Actions panel.

toggle_mc.onRollOver = function() {
// "toggle_mc" is the name of movie clip instance. "onRollOver" is the event handler
	toggle_mc.gotoAndStop("on");
	// tells toggle_mc to change to the "on" frame
}
         
toggle_mc.onRollOut = function() {
   	toggle_mc.gotoAndStop("off");
	// tells toggle_mc to change to the "off" frame
}

Test your movie to see the interaction. Ctrl/Cmd-Enter or Control > Test Movie.

Create a new movie clip to toggle on click.
1. Insert a new layer and name it "toggle2."
2. Drag out a new instance of Toggle clip and call it "toggle2_mc."
3. Create a variable to "hold" the current state of the movie clip.
  Because you want a single event to trigger two different actions, depending on the object's current state, you must create a variable to hold the current state, and use a conditional statement to distinguish between the two states.
  tog2state = "off";
4. Script the movie clip on mouse release.
```
toggle2_mc.onRelease = function() {
	if (tog2state == "off") {
	// if the current state is "off"
		toggle2_mc.gotoAndStop("on");
		// show the "on" frame
		tog2state = "on";
		// set the variable to reflect the current state
	} else {
	// otherwise,
		toggle2_mc.gotoAndStop("off");
		// show the "off" frame
		tog2state = "off";
		// set the variable to reflect the current state
	}
}
```

To create a drag-and-release incremental interaction:

Create a color bar movie clip.
1. Draw a long, narrow rectangle. Adjust the width to be exactly 400 pixels.
2. Convert it to a movie clip and name it "Color Bar." Modify > Convert to Symbol or F8.
3. Name the instance bar_mc.
Create a slider bar movie clip.
1. Draw a short, narrow rectangle, slightly taller than the Color Bar.
2. Convert it to a movie clip and name it "Slider."
3. Name the instance slider_mc.
Align the movie clips on the left edges and vertically centered.
Create a dynamic text box. Name the instance counter_txt.
Select all three objects and convert to a movie clip. Be sure that the registration point is placed in the top left corner (coordinates 0, 0).

Script these objects. The following script will change the percentage displayed in the dynamic text box as the slider is dragged back and forth.

var perc_str = "0%";
// create a variable that will hold the text to be displayed
slider_mc.onPress = function() {
// when you press and hold on the slider movie clip
	startDrag(this, false, 0, 0, 400, 0);
	// start dragging the slider movie clip ("this")
	// do not lock it to the center of the mouse position ("false")
	// constrain the slider's movements to the coordinates left 0, top 0, right 400, bottom 0
}
slider_mc.onRelease = function() {
// when you release the slider movie clip
	stopDrag();
	// stop dragging the slider movie clip
}
var mouseListener = new Object();
// create a listener object (listener objects "listen" to events such as a mouse or key press)
mouseListener.onMouseDown = function() {
// when the mouse button is pressed
	this.isDragging = true;
	// set a variable to let the mouse listener know that it is dragging
}
mouseListener.onMouseUp = function() {
	this.isDragging = false;
}
mouseListener.onMouseMove = function() {
// when the mouse is moved
	if (this.isDragging) {
	// if the mouse is dragging
		var perc_num = slider_mc._x / 4;
		// set the percentage number to the x-coordinate of the slider, divided by 4 
		// (since the slider can move up to 400 pixels)
		perc_str = perc_num + "%";
		// put the percent symbol after the percentage number
		counter_txt.text = perc_str;
		// display the percentage text in the dynamic text box
	}
}
Mouse.addListener(mouseListener);
// add the listener object to the Mouse class
counter_txt.text = perc_str;
//display the initial percentage string in the dynamic text box

To create a drag-and-drop toggle interaction:

Draw a shape to drag. Convert it to symbol. Name it "Target." Name the instance target_mc.
Drag out a new instance of Toggle clip. Name the instance dropper_mc.

Script the objects.

dropper_mc.onPress = function() {
// when you press and hold on the dropper movie clip
	startDrag(dropper_mc);
	// start dragging it	
}
dropper_mc.onRelease = function() {
// when you release the dropper movie clip
	stopDrag();
	// stop dragging it	
	if (eval(this._droptarget) == target_mc) {
	// if it is dropped on the target,	
		dropper_mc.gotoAndStop("on");
		// toggle the dropper to "on"	
	} else {
	// otherwise,	
		dropper_mc.gotoAndStop("off");
		// toggle the dropper to "off"	
	}
}

HTML and Flash for Instructional Designers

Technical Instruction for R541 Students