• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Scrollbar

Participant ,
Dec 14, 2023 Dec 14, 2023

Copy link to clipboard

Copied

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.

TOPICS
Code , How to

Views

35

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation