Can someone help me with a convert a scrollbar in actionscript 3.0 to html5 canvas with javascript. Starting with
How do I code this from actionscript 3.0 to html5 canvas (javascript). this is class file in .as that I want for .js you see this:
// CLASS file as actionscript 3.0
package {
//
import flash.display.*;
import flash.events.*;
import flash.geom.Rectangle;
import fl.transitions.Tween;
import fl.transitions.easing.*;
//import ph.graphic.RectScuare;
//-----------------------------------------------
public class Zscrolla extends Sprite {
//
private var holder :MovieClip;
private var clip :MovieClip;
//var clipMask :MovieClip;
private var dragger :MovieClip;
private var slider :MovieClip;
private var bgAlpha :Number;
private var bgColor :uint;
private var hg :uint;
private var scrolled :uint;
private var friction :uint;
private var currentY :int;
private var draggerHg :uint;
private var draggerColor :uint;
private var sliderColor :uint;
private var fade :Tween;
private var fadeAmount :Number;
private var wheel :Boolean;
//------------------------------------------------------------------------
public function Zscrolla(_clip:MovieClip, _hg:uint, _friction:uint = 5, _wheel:Boolean = false):void {
//
clip = _clip;
hg = _hg;
friction = _friction;
wheel = _wheel;
//
if (clip.height > hg) {
//
trace(clip.height);
trace(hg);
createHolder();
createMask();
createSrollBar();
addListeners();
}
}
//---------------------------------------------------------------------------
public function set scrollWheel(b:Boolean):void {
//
wheel = b;
addListeners();
}
//
public function set handCursor(h:Boolean):void {
//
dragger.buttonMode = h;
trace(dragger.buttonMode);
}
//---------------------------------------------------------------------------
public function scrollBarProperties():void {
//
draggerHg = dragger.height;
//
createSrollBar();
addListeners();
trace(draggerHg);
}
//---------------------------------------------------------------------------
private function createHolder():void {
//
holder = new MovieClip();
holder.x = clip.x;
holder.y = clip.y;
clip.x = clip.y = 0;
addChild(clip);
addChild(holder);
}
//---------------------------------------------------------------------------
private function createMask():void {
//
var clipMask:MovieClip = new mmask();
clip.mask = clipMask;
addChild(clipMask);
}
//---------------------------------------------------------------------------
private function createSrollBar():void {
//
//
slider = new trackk();
dragger = new sliderr();
slider.x = 900;
dragger.x = 877;
//trace(dragger.height);
addChild(slider);
addChild(dragger);
}
//--------------------------------------------------------------------------
private function dragOn(e:Event):void {
//
dragger.startDrag(false, new Rectangle(dragger.x, 0, 0, slider.height - dragger.height));
trace(dragger.startDrag);
trace(dragger.x);
dragOnOutSide();
}
private function dragOff(e:Event):void {
//
dragger.stage.removeEventListener(MouseEvent.MOUSE_UP, dragOff);
dragger.stopDrag();
}
private function dragOnOutSide():void {
//
dragger.stage.addEventListener(MouseEvent.MOUSE_UP, dragOff);
}
//---------------------------------------------------------------------------
private function fadeIn(e:Event):void {
//
e.type == "rollOver" ? fadeAmount = 0.5 : fadeAmount = 1;
fade = new Tween(e.target, "alpha", Strong.easeOut, e.target.alpha, fadeAmount, 0.5, true);
}
//---------------------------------------------------------------------------
private function easeIn(e:Event):void {
//
friction > 5 ? friction = 5 : null;
//
scrolled = dragger.y / (slider.height - dragger.height) * 10;
currentY = -(clip.height - slider.height) * scrolled / 9;
clip.y += (currentY - clip.y) / friction;
}
//---------------------------------------------------------------------------
private function aplyScrollWheel(e:MouseEvent):void {
//
dragger.y += e.delta * -4;
//
if (dragger.y < 0) {
//
dragger.y = 0;
} else if (dragger.y > (slider.height - dragger.height)) {
//
dragger.y = slider.height - dragger.height;
}
}
//--------------------------------------------------------------------------
private function addListeners():void {
//
dragger.addEventListener(MouseEvent.ROLL_OVER, fadeIn);
dragger.addEventListener(MouseEvent.ROLL_OUT, fadeIn);
dragger.addEventListener(MouseEvent.MOUSE_DOWN, dragOn);
dragger.addEventListener(MouseEvent.MOUSE_UP, dragOff);
dragger.addEventListener(Event.ENTER_FRAME, easeIn);
//
if (wheel == true) {
clip.addEventListener(MouseEvent.MOUSE_WHEEL, aplyScrollWheel);
}
}
//-------------------------------------------------------------------------
}// class
}// package
I use this instance name of the objects in fla animate.
content = innehåll / album1_mc = linking
contentMask = mask / mmask = linking
slider = button / sliderr = linking
track = line / trackk = linking
I know I use class file javascript like this for example:
class Circle {
constructor(x, y, name)
}
This the codes:
And I use this as mask:
var content = this.content1;
var mask_shape = new createjs.Shape();
mask_shape.graphics.beginFill("#ff0000").drawRect(82,163,250,5);
mask_shape.visible = false; // hiding the maskshape
content.mask = mask_shape;
In actionscript 3.0 in the fla file are on the frame for instance in movieclip.
import Zscrolla;
//-----------------------------------------------
var textoClip:album1_mc = new album1_mc;
var eScroll:Zscrolla = new Zscrolla(textoClip, 200);
//eScroll.scrollBarProperties();
//eScroll.backGround(0xFFFFFF, 0.5);
eScroll.scrollWheel = true;
eScroll.handCursor = true;
eScroll.x = eScroll.y = 0;
addChild(eScroll);
How do I do it in html5 canvas (javascript) and I don't need all that.
AdChoices