Slider Component

Slider Component

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add Pre-Built Slider Component to Your Flash File

 

 

Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.

Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a Slider Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, CheckBox Component, ColorPicker Component, ComboBox Component, DataGrid Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

Slider Component with instance name slider01_mc

Movie Symbol with instance name box01_mc

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Four

Double-click the Slider Component icon to a add a Slider to the center of the stage. The Slider and it's assets are also added to the Library.

Step Five

With the Slider selected open the Properties panel and change it's x and y settings to 100 and 100.

Step Six

With the Slider still selected, open the Component Inspector (Window > Component Inspector).

Step Seven

Click the area to the right of the word maximum and change the value to 1, then press Enter.

Step Eight

Click the area to the right of the word snapInterval and change the value to .1, then press Enter.

Step Nine

Click the area to the right of the word tickInterval and change the value to .1, then press Enter.

Step Ten

With the Slider still selected, open the Properties panel and assign it an instance name of slider01_mc.

Step Eleven

With the first frame of the Content layer selected, draw a 100 (w) by 100 (h) rectangle below the Slider with the Rectangle tool.

Step Twelve

Select the rectangle and press F8 to convert it to a Movie Symbol.

Step Thirteen

With the rectangle still selected, open the Properties panel and assign it an instance name of box01_mc.

Step Fourteen

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Fifteen

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.Slider;

import fl.events.SliderEvent;

var slider02_mc:Slider=new Slider();

var box02_mc:Shape=new Shape();

slider02_mc.maximum=1;

slider02_mc.snapInterval=.1;

slider02_mc.tickInterval=.1;

slider02_mc.x=310;

slider02_mc.y=100;

addChild(slider02_mc);

box02_mc.graphics.beginFill(0x444444);

box02_mc.graphics.drawRoundRect(10,15,50,50,4);

box02_mc.graphics.endFill();

box02_mc.width=100;

box02_mc.height=100;

box02_mc.x=280;

box02_mc.y=95;

addChild(box02_mc);

slider01_mc.addEventListener(SliderEvent.THUMB_DRAG, onDrag01);

function onDrag01(e:SliderEvent):void{

box01_mc.alpha=e.target.value;

}

slider02_mc.addEventListener(SliderEvent.THUMB_DRAG, onDrag02);

function onDrag02(e:SliderEvent):void{

box02_mc.alpha=e.target.value;

}

Step Sixteen

Click the Auto Format button to format the code

Step Seventeen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two Silders and rectangles appear on the stage. As you drag each Slider, the corresponding rectangle's alpha value is adjusted.

Dissecting the Code

The first two lines of the code at Step Fifteen import the code necessary to talk to the Slider class and SliderEvent class. Line three establishes a new Slider variable named slider02_mc. This is the second Slider that we are adding to the stage with ActionScript.

Line four adds a new Shape variable named box02_mc.

Lines five through ten set the new slider maximum, snapInterval, tickInterval and location. The slider02_mc is also added to the stage.

The next block of code defines the new rectangle shape, then sets it's size and location. The rectangle is then added to the stage.

The final pieces of code add event listeners to the sliders and connect the slider position to the corresponding rectangle's alpha value.

More Component Options

In this example we showed how to change the Slider maximum, snapInterval and tickInterval. You can use this same method to change the other Slider values shown in the Component Inspector (i.e., direction, enabled, liveDragging, minimum, value and visible).

 

Lynda.com career skills