Skip to main content
A
ap1023
Participating Frequently
May 14, 2020
Question

Zoom in & out using horizontal slider in Html5 Canvas

  • May 14, 2020
  • 1 reply
  • 2126 views

I have a graphic symbol on stage using 60 animated frames inside. i want to zoom in and out by using slider. can u tell me how to do that

This topic has been closed for replies.

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
May 14, 2020

what do the 60 frames have to with with what you want to do?  is the graphic symbol "scaled" over the 60 frames so you actually want your slider to control which frame is displayed?

A
ap1023Author
Participating Frequently
May 18, 2020

Thanks For the reply, 

 

I didn't scale the current graphics bettween 0 - 60 frames.

 

6o frame animation has been created in symbol A to rotate object (Arrow) 360 degree, I have crated this animation inside graphic symbol (symbol A) by using graphic symbol B, so I can operate this rotation backward and forward by using mouse click ('down') manual rotation or other player functionality which are available on the current player. 

 

Now want to zoom in/out Object (the Arrow) using slider by EnterFrame event 
If slider X position "0" then object (Arrow/Symbol A) will remains its current position. if slider position changes to max X position "500" by dragging slider then it will zoom 20%, if Slider drag X position to "250" then it will zoom 10%.

 

I have my AS3 code below which is working fine but wanted to convert this code in Html5 canvas. But in AS3 I was using movie clip "product" and was created 60 frame animation inside movie clip whereas in Html5 canvas I am using graphic symbol (Symbol A).

 

//var a = product.x / 1000
//var b = product.y / 550
//
//
//Playhead_mc.addEventListener(MouseEvent.MOUSE_DOWN, Slider_Drag);
//
//function Slider_Drag(event: MouseEvent): void {
// Playhead_mc.startDrag(false, new Rectangle(0, 0, line_mc.width, 0)); // line.mc is a silder lenght.
// trace("down");
//}
//
//Playhead_mc.addEventListener(MouseEvent.MOUSE_UP, Slider_stop_Drag)
//
//function Slider_stop_Drag(event: MouseEvent): void {
// Playhead_mc.stopDrag();
// trace("up")
//}
//Playhead_mc.addEventListener(MouseEvent.RELEASE_OUTSIDE, Slider_stop_Drag)
//
//Playhead_mc.addEventListener(Event.ENTER_FRAME, zoomimage)
//
//function zoomimage(evt: Event): void {
// product.scaleX = a + Slider_mc.Playhead_mc.x / 1500;
// product.scaleY = b + Slider_mc.Playhead_mc.x / 1500;

 

 

Thanks in advance.

 

kglad
Community Expert
kgladCommunity Expert
Community Expert
May 18, 2020

you can use:

 

this.Playhead_mc.addEventListener("pressmove",dragF.bind(this));

function dragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

if(p.x>=0&&p.x<=500)
e.currentTarget.x = p.x;

this.product.scaleX = interperpolateF(this.Slider_mc.Playhead_mc.x, 500,.2,250,.1);

this.product.scaleY = this.product.scaleX;

}

}

 

function interpolateF(x,x1,y1,x2,y2){
return y1-(y1-y2)/(x1-x2)*x1;
}

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices