The Triangle

When trying to explain how to build a Flash movie, it is always easiest to build from the bottom-up. So in this tute we'll first look at the triangular slider object.

First create a new movie, name it control:triangle. On its stage place your triangle button called button:zoomer and setup the timeline like this:

Place button:zoomer on the first two frames and the following actions on frame 1 to initialise and control the minimum and maximum for this controller:

Comment: ------------------------------------
Comment: min/max for this controller
Comment: ------------------------------------
Set Variable: "min" = 0
Set Variable: "max" = 4
Set Property ("", X Position) = (((/:delay-min)/(max-min))*200)

The Triangle (con't)
Frame 2 locks the ability of the drag to the "x" position and more importantly to a maximum of "200":
Comment: Slider is drag locked to 0,0,0,200 - this means that at 100% of the slider you are at a real location of 200. Which is why 200 plays a prominent role in all these calculations.
Set Variable: "X" = GetProperty ( "", _x)
Set Variable: "/:delay" = ((X/200)*(max-min))+min
Comment: "..:delay" is the variable text box that shows us what "/:delay" is set to.
Set Variable: "..:delay" = Int(/:delay)
Frame 3 does not contain button:zoomer but simply loops back to frame 2 and plays it. That it for the triangle button. Your timeline should resemble the picture below at this point

The Slider
Building the slider is a lot simplier than it looks, it made up of two frames - one for the inactive drop down box and the other for the active drop down box (the slider is in use). To begin with create the following layers:
Commands 
Close button 
Slider line 
Fly out 
Arrow button 
Art
The Command layer contains two frames with actions. The first frames actions are:
Set Variable: "delay" = Int(/:delay)
Stop
The second frame only contains a 
stop
action. If you refer to the example .fla file at the end of this tutorial, you will see what the other layers contain and exactly how they are layed out. Pay particular attention to the flyout and arrow button layers. flyout contains the triangle movie that we create before and the arrow button layer contains the drop down box the user initially sees. In this layer is also contains button:flyout, the button that activates and closes the drop down box: 
. 
The Slider (con't)
In frame 1 the following actions have been added so when it is clicked the slider bar opens:
On (Press)
 Go to and Play (2)
End On
In frame 2 the opposite occurs, when it is clicked the following code closes the slider bar.
On (Press)
 Go to and Play (1)
End On
Finally, particular attention to the close button layer, it also allows you to click outside the slider bar to close it so only the drop down box is visible again. The button itself is placed on second frame (when the slider bar is in use) and has the following actions attached:
On (Release)
 Go to and Stop (1)
End On
The Slider (con't)
Note: You will be able to see how the few simple technique explain above can significantly increase the interactivity and user friendliness of your movies. 
At the end of this your control:slider movie should look like this:

The Main Timeline



This consists of one frame in one layer, slider. The movie slider:control is dragged onto the stage and the following actions are included:
Comment: Make sure you set this to a valid number. It has to be between "min" and "max".
Set Variable: "/:delay" = 3
The purpose of this to define the variable that the slider will be adjusting. 'min' and 'max' which are located in the slider object are where you preset your minimum and maximum values for the slider. In this example I used "0" and "200". You want the slider to adjust '/:delay' between the values of 'min' and 'max'.
The slider that appears has a width of "200". This was done for the simplicity of understanding the math. You might also want to replace all occurences of "200" with another variable that you set before you get started... maybe call it 'length', which represents the length of the slider's drag limit. But to keep things simple for this demonstration I have left that up to you. Our slider starts sliding at "0" and has a limit of "200".
Finishing It Off
When you start dragging the slider, Flash is continually checking the 'X' value of the slider with the use of a loop.('X' is between 0 and 200). For example, if you have a 'min' of 0 and 'max' of 4, and 'X' was at 150....what would be the value of your slider?
Well.... 150 is 75% of 200. (X/200=0.75)
And since 'max' - 'min' is 4.... we have 5 possible values for the slider. (Including zero)
0.75 * 4 (or, 75% of 4) is.... 3. Thus the value of your slider would be 3


That's all the slider does. It figures out the percentage of the way across the slider bar it is, and multiplies that by the amount of possible values. (The last thing it also does is compensates for ranges that do not begin at zero.)
To understand it a little better, try changing the values of 'min' and 'max' and then running this again. Click on the first frame of the slider device layer and edit the drop down box on the stage that is highlighted. Click on frame 2 and edit the triangle slider. The variables, 'min' and 'max' are in frame 1.
Good luck and happy flashing!
» Level Advanced

Added: : 2000-05-25 
Rating: 6.25 Votes: 40 
Hits: 6472 
» Author
Flashjunkie is a self-professed obsessive addict of life. Due to the highly artistic nature required of an Art Director for an Ad agency, he took up Flash to add some math to his diet. 
» Download
Download the files used in this tutorial. 
Download (100 kb) 

discuss this topic to forum