Tutorial: Slider components and using one event handler for multiple events

Here is a description of a [very] simple example using the slider component. I had a problem along the way and explaining it may be helpful to you.

Create a MovieClip symbol in the Library and bring it to the Stage. My symbol was a circle: use the drawing tool that draws rectangles or ovals and hold the shift key down to create a circle. I named the instance mycircle.

In the Actions panel, write the following two lines:

var origwidth=mycircle.width;

var origheight=mycircle.height;

These are used in the code that resets the dimensions of the circle.

Flash Components provide many standard devices for the user interface. One of these is the Slider. Another is Button, which I have used in many other applications. You get these components by clicking on Window/Components and dragging the one you want to the Stage. This also places material in the Library: the Slider symbol itself, for example, and a folder called Component Assets.

[NOTE: this is not relevant for this example, but if you want to create components entirely by ActionScript, you still need to get the material in the Library. You do this by dragging the symbol from the Components panel to the Library, or bringing it to the Stage and then erasing it.]

Give the instance on Stage a name in the usual way using the Properties panel. Click on Window/Properties to make it visible if it is not. I moved two Slider symbol instances to the Stage and named one scrollh and one scrollw. I will use the first to control the height of mycircle, the MovieClip instance I have placed on the Stage and the second to control thewidth of mycircle.

The components each come with a set of parameters. When the component is selected on the Stage, open Window/Component Inspector. You can use the Component Inspector to change various things about the instance of the component.

The direction specifies the orientation of the slider. I have changed the scrollh direction to be vertical. I left the direction of the other slide to be the default horizontal. I changed the maximum in both cases to be 200 (the default is 10) and I set the value, namely the initial value, of each to be 100. The settings for these parameters would depend on how you intend to use the Slider value. For this example, my code will adjust the width or height to 0 to 200% of the original settings.

The next task is to set up the event handling. This was where I had problems. My first idea was to use the MouseEvent.CLICK as the event. This does work in the following example:

scrollw.addEventListener(MouseEvent.CLICK, react);

function react (ev) {

mycircle.width = origwidth * (scroll.value/100);

}

The problem is that I want to do something more than this and it is in the more complicated example that I ran into problems. I decided I wanted to have the react function be the handler for both sliders. I wanted code to determine which slider triggered the event. ActionScript provides information on the object that triggers the event in the ev parameter. Specifically, my code can use the expression ev.target.name to distinguish between the different objects that may have triggered the event. It turns out that the object wasn't quite the one I wanted. Try the following:

scrollw.addEventListener(MouseEvent.CLICK, react);

function react (ev) {

trace("you clicked on "+ev.target.name);

}

The trace command is used to get information displayed in the OUTPUT panel. This may be underneath the panel running the application, so you may need to close or move panels to examine it. When I did this, the message in the OUTPUT panel was

you clicked on instance9

What is instance9??? It probably is a different number for you. It turns out that it is the Button part of the Slider object. I could record this information, determine the name for the other slider and write my code accordingly, but I decided to try something different. What I did was do the research in the ActionScript description of the Slider component and determine that the appropriate event was SliderEvent.CHANGE. I needed to include the command

import fl.events.*

to get access to the Class definitions to get to use this event using the shorthand SliderEvent.CHANGE. Now the target.name is the one I want!

The last thing I did was to include a button that makes the mycircle disappear or re-appear. This type of device is called a toggle or flag. I use (the code uses) the built-in label parameter to determine the action.

To review: the application has these objects on Stage: one MovieClip of your own design, two Slider components and 1 Button component.

  1. Insert/New Symbol Movie Clip. Draw a circle. Bring an instance to the Stage and name it mycircle.
  2. Use Window/Components User Interface Slider and move two sliders to the Stage. Name one scrollh and one scrollw.
  3. Selecting scrollh: click on Window/Component Inspector and change direction to vertical, maximum to 200 and value to 100.
  4. Selecting scrollw: click on Window/Component Inspector and change maximum to 200 and value to 100.
  5. Use Window/Components User Interface Button and move an instance to the Stage. Name the instance mybutton. Use Window/Component Inspector and change the Label to Remove.

Making sure no object is selected, use Window/Actions to get the Actions panel.

import fl.events.*; / needed to refer to the Slider event
scrollw.addEventListener(SliderEvent.CHANGE,react); / set up event handling
scrollh.addEventListener(SliderEvent.CHANGE,react); / "
mybutton.addEventListener(MouseEvent.CLICK,react); / "
var origwidth=mycircle.width; / store original width
var origheight=mycircle.height; / …. and height
function react(ev:Event) { / event handler for all 3 events
switch (ev.target.name) { / uses the ev.target.name value to make determination of which object
case "scrollw" : / slider for width
mycircle.width=origwidth*scrollw.value/100; / reset width
break; / exit switch
case "scrollh" : / slider for height
mycircle.height=origheight*scrollh.value/100; / reset height
break; / exit switch
case "mybutton" : / button
if (mybutton.label=="Remove") { / Check the status: is it remove or not
mycircle.visible=false; / make mycircle disappear
mybutton.label="Restore"; / change button label
} else {
mycircle.visible=true; / make mycircle re-appear
mybutton.label="Remove"; / change button label
} / end else clause
} / end switch statement
} / end function