Highlighted

How to make zoomBy() smooth

New Here ,
May 01, 2019

Copy link to clipboard

Copied

Hi all,

I've got a my animation pretty much how I want it, now I want my animation to zoom in smoothly when the mouse is over and back again when out.

var cameraObj = AdobeAn.VirtualCamera.getCamera(exportRoot);

this.mouseOver.addEventListener("mouseover", MouseOverHandler);

function MouseOverHandler(){

cameraObj.zoomBy(110);

}

this.mouseOver.addEventListener("mouseout", MouseOutHandler);

function MouseOutHandler(){

cameraObj.resetZoom();

}

I've got the mouse over/out working but the animation jumps to zoom 110 instead of tweening from 100 to 110. How would I go about this?

Thanks!

Edit: You need to have the zoomBy command inside your tick function

example code:

createjs.Ticker.addEventListener('tick', stage);

var over = false;

function stage(){

     if(over == true && cameraObj.getZoom() < 120){ //Will zoom in until 120%

          cameraObj.zoomBy(100.5);

        }

}

this.LAYERNAME.addEventListener("mouseover", MouseOverHandler);

function MouseOverHandler(){

     over = true;

}

TOPICS
Ad development

Views

119

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

How to make zoomBy() smooth

New Here ,
May 01, 2019

Copy link to clipboard

Copied

Hi all,

I've got a my animation pretty much how I want it, now I want my animation to zoom in smoothly when the mouse is over and back again when out.

var cameraObj = AdobeAn.VirtualCamera.getCamera(exportRoot);

this.mouseOver.addEventListener("mouseover", MouseOverHandler);

function MouseOverHandler(){

cameraObj.zoomBy(110);

}

this.mouseOver.addEventListener("mouseout", MouseOutHandler);

function MouseOutHandler(){

cameraObj.resetZoom();

}

I've got the mouse over/out working but the animation jumps to zoom 110 instead of tweening from 100 to 110. How would I go about this?

Thanks!

Edit: You need to have the zoomBy command inside your tick function

example code:

createjs.Ticker.addEventListener('tick', stage);

var over = false;

function stage(){

     if(over == true && cameraObj.getZoom() < 120){ //Will zoom in until 120%

          cameraObj.zoomBy(100.5);

        }

}

this.LAYERNAME.addEventListener("mouseover", MouseOverHandler);

function MouseOverHandler(){

     over = true;

}

TOPICS
Ad development

Views

120

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 01, 2019 0

Have something to add?

Join the conversation