Zoom in & out using horizontal slider in Html5 Canvas

[ap1023]

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

[kglad]

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?

[ap1023]

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]

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;
}

[ap1023]

Thanks For your reply,

Movieclip "Playhead_mc" Drag works fine but moviclip "product" scaling is not working

[kglad]

interpolateF's not correct.  use:

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

[ap1023]

Not Working sir,

[ap1023]

Modified your code and works perfectly fine. Code I used:

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

function dragF(e) {

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

if (p.x>=720&&p.x<=1220){
e.currentTarget.x = p.x;

this.product.scaleX = this.Playhead_mc.x / 720;
this.product.scaleY = this.Playhead_mc.x / 720;

}

}

But my original request was for Graphics symbol not for movie clip. What if I want to scale Graphic symbol ("Symbol A") instead of movie clip ("Product") which is on stage. Can I scale it with the help of coding? If yes, How?

[kglad]

there's no easy way to use a graphic symbol with code because you can't assign it an instance name.