Flash/flex learning notes (36): implement a slider control (jimmysilder) by yourself)

First look at the final demonstration:

The slider bar is too widely used: the volume of sound in the MP3 player is controlled, the brightness of the screen during video playback is adjusted, and the font size is adjusted in real time when reading news, interactive Control of object size...

Analysis:

1.The UI part of any slider bar control can be basically divided into two parts: the background slider bar + the slider button

So I divided it into three parts: jimmysilderbar (background bar), jimmysilderbutton (drag button), and jimmysilder (the real sliding control combines the first two). In order to reuse, these three parts are made into the movieclip component and placed in the library. In this way, when you want to change the style or color, as long as you edit the component in the library, all the parts will naturally change.

In addition, in jimmysilderCodeThe jimmysilderbutton instance is named _ mcbtn, And the jimmysilderbar instance is named _ mcbar.

2.Drag Problems

Movieclip has the startdrag/enddrag method, and the startdarg method can also easily set the drag boundary (that is, when dragging, the slider button cannot be dragged outside the background bar), so... this problem has been solved.

3.Attribute/event support

Since it is a slider control, you must be able to get the current position/value, and when you drag (to cause the value to change, it should be able to trigger the processing method defined by the user (otherwise it will become a simple drag-and-drop item, and it will be meaningless if it cannot be associated with other object attributes)

Implementation:

1.To support events, we also define an event subclass:

 





Package Jimmy. event {import flash. events. event; public class valuechangeevent extends event {public static const value_change: String = "value_change"; private VaR _ oldvalue: Number, _ newvalue: Number; Public Function valuechangeevent (eventtype: string, oldvalue: Number, newvalue: Number) {This. _ oldvalue = oldvalue; this. _ newvalue = newvalue; Super (eventtype);} public function get oldvalue (): number {return _ oldvalue;} public function get newvalue (): number {return _ newvalue ;}}}

2. control code implementation:

// Slider control beta 0.001 -- by Yang Guo http://yjmyzz.cnblogs.com/package under the bodhi tree {import flash. display. sprite; import flash. display. movieclip; import flash. events. mouseevent; import flash. UI. mouse; import flash. events. event; import flash. UI. mousecursor; import flash. geom. rectangle; import Jimmy. event. valuechangeevent; public class jimmysilder extends movieclip {private VaR _ btnwidth: uint; // slider width private VaR _ btnheight: uint; // slider height private VaR _ barwidth: uint; // width of the slider background bar private VaR _ barheight: uint; // height of the slider background bar private VaR _ isdragging: Boolean = false; // whether the slider is dragging private VaR _ value: number = 0.0; // the slider value (percentage) Public Function jimmysilder (btnwidth: uint = 10, btnheight: uint = 30, barwidth: uint = 200, barheight: uint = 10, v: Number = 0.5): void {// trace ("jimmysilder's constructor is called. "); this. _ btnwidth = btnwidth; this. _ btnheight = btnheight; this. _ barwidth = barwidth; this. _ barheight = barheight; Init (); this. value = V; this. addeventlistener (event. added_to_stage, addedtostage);} private function addedtostage (E: Event): void {This. stage. addeventlistener (mouseevent. mouse_move, stagemousemovehandler); this. stage. addeventlistener (mouseevent. mouse_up, stagemouseuphandler);} // setter method of attribute value public function set value (V: Number): void {If (v <= 0) {v = 0.0 ;} if (V> = 1) {v = 1.0;} This. _ value = V; this. _ mcbtn. X = _ mcbar. width/(-2) + _ mcbar. width * _ value; // locate the abscissa of mcbtn based on the percentage value of value} // getter method of the attribute value public function get value (): number {return _ value ;} // initialize private function Init (): void {This. _ mcbtn. width = _ btnwidth; this. _ mcbtn. height = _ btnheight; this. _ mcbar. width = _ barwidth; this. _ mcbar. height = _ barheight; this. _ mcbtn. addeventlistener (mouseevent. mouse_over, mcbtnmouseoverhandler); this. _ mcbtn. addeventlistener (mouseevent. mouse_out, mcbtnmouseouthandler); this. _ mcbtn. addeventlistener (mouseevent. mouse_down, mcbtnmousedownhandler); this. _ mcbar. addeventlistener (mouseevent. mouse_down, mcbarmousedownhandler); // trace ("init initialization completed");} // switch the cursor to the hand-shaped private function mcbtnmouseoverhandler (E: mouseevent) {mouse. cursor = mousecursor. hand;} // switch the cursor to the system cursor private function mcbtnmouseouthandler (E: mouseevent) {mouse. cursor = mousecursor. auto;} // start to drag private function mcbtnmousedownhandler (E: mouseevent) {// trace ("start to drag"); _ mcbtn. startdrag (true, new rectangle (_ mcbar. width/(-2), 0, _ mcbar. width, 0); // Note: drag the lock center in the specified area _ isdragging = true;} // stop dragging the private function stagemouseuphandler (E: mouseevent) {// trace ("stop dragging"); _ mcbtn. stopdrag (); _ isdragging = false;} // when moving in its own region, the value of _ value is calculated dynamically. Private function stagemousemovehandler (E: mouseevent) {If (_ isdragging) {raiseevent (); // trace (_ value) ;}// when you click on the background bar, the slider directly jumps to the position private function mcbarmousedownhandler (E: mouseevent) {_ mcbtn. X = mousex; raiseevent () ;}// trigger event private function raiseevent (): void {VaR _ oldvalue: Number = _ value; _ value = (_ mcbtn. X + _ mcbar. width/2)/_ mcbar. width; VaR _ valuechangeevent: valuechangeevent = new valuechangeevent (valuechangeevent. value_change, _ oldvalue, _ value); dispatchevent (_ valuechangeevent); // trigger event }}}

3.Test code:

 





Import Jimmy. event. valuechangeevent; var silder: jimmysilder = new jimmysilder (); silder. width = 200; silder. height = 20; silder. X = stage. stagewidth/2; silder. y = 200; // trace (silder. value); addchild (silder); silder. addeventlistener (valuechangeevent. value_change, valuechangehandler); testobj. scalex = testobj. scaley = silder. value; testobj2.rotation = silder. value * 32355757; function valuechangehandler (E: valuechangeevent) {// trace ("the current slider value is:" + E. newvalue); testobj. scalex = testobj. scaley = E. newvalue; testobj2.rotation = silder. value  ;}

Source File Download: http://cid-2959920b8267aaca.skydrive.live.com/self.aspx/Flash/JimmySilder.rar

Postscript:Some may ask, why don't we simply use the built-in system components, and we have to make the wheel with such great effort? If you try it, you will know that, after using the system components, the SWF file will be around K or 22 K, and according to the method in this article, the same SWF, in the end, it was only 7 kb (about 1/3 simplified). Therefore, if you can write your own code, you can write it by yourself. Unless you cannot write it, you can use system components.