Highlighted

Zoom in & out using horizontal slider in Html5 Canvas

New Here ,
May 14, 2020

Copy link to clipboard

Copied

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 thatZoom in&out.JPG

TOPICS
ActionScript

Views

1.3K

Likes

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

Zoom in & out using horizontal slider in Html5 Canvas

New Here ,
May 14, 2020

Copy link to clipboard

Copied

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 thatZoom in&out.JPG

TOPICS
ActionScript

Views

1.3K

Likes

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
May 14, 2020 0
Adobe Community Professional ,
May 14, 2020

Copy link to clipboard

Copied

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?

Likes

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
Reply
Loading...
May 14, 2020 0
New Here ,
May 17, 2020

Copy link to clipboard

Copied

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.

 

Likes

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
Reply
Loading...
May 17, 2020 0
Adobe Community Professional ,
May 18, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
May 18, 2020 1
New Here ,
May 19, 2020

Copy link to clipboard

Copied

Thanks For your reply,

 

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

Likes

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
Reply
Loading...
May 19, 2020 0
Adobe Community Professional ,
May 19, 2020

Copy link to clipboard

Copied

interpolateF's not correct.  use:

 

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

Likes

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
Reply
Loading...
May 19, 2020 0
New Here ,
May 19, 2020

Copy link to clipboard

Copied

 

 

ap1023_0-1589900660639.png

Not Working sir,

Likes

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
Reply
Loading...
May 19, 2020 0
New Here ,
May 20, 2020

Copy link to clipboard

Copied

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?

Likes

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
Reply
Loading...
May 20, 2020 0
kglad LATEST
Adobe Community Professional ,
May 20, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
May 20, 2020 0