1. Home
  2. Computing & Technology
  3. Animation

Deconstructing the Paint Application IX: Brush Size and Opacity Sliders

By , About.com Guide

4 of 6

We need to set up each slider so that it can be dragged, track where it is and turn that into a value between 0 and 100, and have it move when a value is entered manually:
onClipEvent(load){
_root.base.sliderxstart=getProperty(sliderpointsize,_x);
_root.base.sliderxend=_root.base.sliderxstart+50;
_root.base.sliderypos=getProperty(sliderpointsize,_y);
}
on (press,dragOver){
this.startDrag();
}
on(release,dragOut,releaseOutside) {
this.stopDrag();
bshsize=getProperty(_root.base.sliderpointsize,_x);
distance=bshsize - _root.base.sliderxstart;
sizeit=distance*2;
_root.base.bsize=Math.ceil(sizeit);
}
onClipEvent(keyDown){
recal=_root.base.bsize/2;
repos=Math.ceil(recal);
adjust=_root.base.sliderxstart+repos;
_root.base.sliderpointsize._x=adjust;
}
I’m not going to break this down line by line, but to summarize: this gets the x position of the pointer on the stage on load, assigns it to a variable, assigns another variable equal to that value plus 50 (because my slider is 50 pixels long), then gets the y (vertical) position of the pointer and assigns that to a variable.

Then it uses startDrag and stopDrag to set the conditions under which the slider will move. When the parameters for stopDrag are met then the new x position is obtained, and the brush size is calculated as the difference between the starting and ending x positions multiplied by two, rounded to the nearest integer using Math.ceil, and assigned it to the variable for the input text box so that it reflects the current brush size as chosen by the slider.

The slider can also be moved by keyboard input from the user; when a key is pressed, Flash will check the value of the input text for the size and do a reverse of the previous calculation to move the slider to the corresponding x position.

Explore Animation
About.com Special Features

The Best Web Trends of the Decade

A look back at the best innovations, ideas and technologies over the last 10 years, More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Animation
  4. Flash Animation Tutorials
  5. Deconstructing the Paint Application IX: Brush Size and Opacity Sliders

©2009 About.com, a part of The New York Times Company.

All rights reserved.