Homemade flash slider scroll bar

During this time, I made a project using flash, and used the flash slider scroll bar function. I wanted to use official components, but it was too troublesome and difficult to modify the style, therefore, you have created one to implement similar functions.

[Instance demo]

The code structure is as follows:

MySlider is the main class of slider. It uses setMc (mc: ISlider) to control the input operation interface and video editing. RotateMc and Resize are operation methods. They inherit the ISlider interface. In the future, you only need to create a method class to inherit ISlider.

The updateAfterEvent () class is used to forcibly refresh the screen. Although it may have some impact on the efficiency, it is necessary to improve the user experience. The following example shows the effect of adding updateAfterEvent. The main difference lies in the reaction when the slider is dragged.

[Demo]

[Code description]

This is not completely developed according to the official slider component mode. Instead of sending message events, it uses setMc (mc: ISlider) to load video clips, internally, data is sent to an object that inherits the ISlider interface. The advantage is that the function is customized as needed.

[ISlider]

Common method: updateData: Obtain the slider data of the slider object.

package com.babyzone.slider  {public interface ISlider {function updateData(num:Number):void;}}

[MySlider]

Package com. babyzone. slider {import flash. display. movieClip; import flash. geom. rectangle; import flash. events. *;/* num: the maximum scale value of the scroll bar. The setMiddle method is used, set the slider to the middle of the reset setMc control passed in Islider */public class mySlider extends MovieClip {// slider can be dragged private var drag_area: Rectangle; // The scale of the slider to move private var numBer: Number; // the maximum scale of the slider private var maxNum: Number; // the object to be processed private var iObj: ISlider; // set the coordinate private var relateX: Number; pr referenced by the slider Ivate var relateWidth: Number; public function mySlider (num: Number) {maxNum = num; drag_area = new Rectangle (this. scrollable_area.x, this. scrollable_area.y, this. scrollable_area.width-this. scroller. width, 0); this. scroller. addEventListener (MouseEvent. MOUSE_DOWN, scroller_drag); relateX = drag_area.x; relateWidth = drag_area.width;}/* -------------------------- slider dragging effect ---------------------------- */p Rivate function scroller_drag (e: MouseEvent): void {this. scroller. startDrag (false, drag_area); stage. addEventListener (MouseEvent. MOUSE_UP, up); // when the slider is moved, force the screen stage to be repainted. addEventListener (MouseEvent. MOUSE_MOVE, updateScreen);} private function up (e: MouseEvent): void {this. scroller. stopDrag (); stage. removeEventListener (MouseEvent. MOUSE_UP, up); stage. removeEventListener (MouseEvent. MOUSE_MOVE, updateScreen);} pr Ivate function updateScreen (e: MouseEvent) {// current scale numBer = maxNum * (this. scroller. x-relateX)/drag_area.width; numBer = numBer <-0.8? -0.8: numBer; if (iObj) {deliveData (numBer) ;}} public function reset (): void {this. scroller. x = this. scrollable_area.x; numBer = maxNum * (this. scroller. x-drag_area.x)/relateWidth; deliveData (numBer);} public function setMiddle (): void {this. scroller. x = drag_area.x + (this. scrollable_area.width-this. scroller. width)/2; relateX = this. scroller. x; relateWidth = drag_area.width/2;}/* ---------------------------- move the slider to the end of the slider * // * then set the cursor */public function setMc (MC: ISlider ): void {iObj = mc;} private function deliveData (num: Number): void {iObj. updateData (num );}}}

[RotateMc]

Class that supports rotation and easing.

Package COM. babyzone. slider {/* MC: Specifies the angle of the angle. angle: 1 indicates the speed of a circle. 0-1 */import flash. display. movieclip; import flash. events. event; public class rotatemc extends movieclip implements islider {private var this_mc: movieclip; private var realnum: Number = 0; private var mcspeed: Number; Public Function rotatemc (MC: movieclip, speed: number) {this_mc = MC; mcspeed = speed; this. addeventlistener (event. enter_frame, Setrotate);} public function updatedata (Num: Number): void {realnum = num * 360;} public function setrotate (E: Event ): void {var thisrotation = this_mc.rotation> = 0? This_mc.rotation: this_mc.rotation + 360; this_mc.rotation + = (realnum-thisrotation) * mcspeed ;}}}

[Resize]

Implement extended and reduced classes

Package com. babyzone. slider {import flash. display. movieClip; import flash. events. event;/* mc: reset the size of the component editing speed: easing status: 0-is normal */public class Resize extends MovieClip implements ISlider {private var old_width: Number; // attributes of the original video clip: private var old_height: Number; private var mcSpeed: Number; private var this_mc: MovieClip; private var scale: Number = 1; public function Resize (mc: movieClip, speed: Number) {old_width = mc. width; old_height = mc. height; this_mc = mc; mcSpeed = speed; this. addEventListener (Event. ENTER_FRAME, set_size);} public function updateData (num: Number): void {num ++; scale = num;} private function set_size (e: Event ): void {this_mc.scaleX + = (scale-this_mc.scaleX) * mcSpeed; this_mc.scaleY + = (scale-this_mc.scaleY) * mcSpeed ;}}}

[Call method]

Import com. babyzone. slider. *; // parameter 2 is 3x var mc1: mySlider = new mySlider (1); mc1.x = 100; mc1.y = 20; stage. addChild (mc1); // test expansion and reduction var obj: sampleObj = new sampleObj (); obj. x = 200; obj. y = 160; stage. addChild (obj); var resizeObj: Resize = new Resize (obj, 0.3); mc1.setMc (resizeObj); // test rotating var mc2: mySlider = new mySlider (1 ); mc2.x = 100; mc2.y = 40; stage. addChild (mc2); var resizeObj1: rotateMc = new rotateMc (obj, 0.3); mc2.setMc (resizeObj1 );

Attachment: source code download

 

Homemade flash slider scroll bar

BY

Oak hut

From nation