Animate CC 3D Camera focalLength?

Report · Mar 01, 2018

Hello,
Wondering if there are any folks out there that know how the 3D camera internals work in Animate CC. I'll try and explain what I'm trying to do and if anyone knows a way to get the info. This is probably a question for the developers who work at Adobe.

So, I'm getting into using the 3D camera and Advanced Layer Depth's but falling into an issue / limitation. If you were to create a new Canvas file, add in a camera, some objects, move the camera around, etc .... and then export -->

In the HTML file's JavaScript code you'll find this variable in a couple of places >

var focalLength = 528.25;

This appears in the handleTick() and getProjectionMatrix() functions in the generated HTML file that Animate CC exports. The code is specifically for handing the camera.

I'm assuming the number is generated internally somewhere based on the use of the Layer Depths and Camera and IS NOT the same on every new export if you change something.

This works all fine and dandy with the generated files that Animate CC creates.

HOWEVER, if you're using your own template file for the HTML file's generation, there isn't a way to generate this number dynamically using a token (ie. $WT, $TITLE, etc..the token variables you can use for templates). Right now, the only workaround if you want to use your own template FLA is to copy all the keyframes, put it all in a new Canvas doc, export, etc, just to get that number. Obviously, not efficient, especially if you need to change something.

Does anyone know if there is a $ token variable that we can use to generate that focalLength number in our own templates? I didn't see it in Adobe's documentation. Or if there's a way to get that value from within Animate CC so we can change the value/variable from within Animate CC's Actions Panel? I was thinking of making focalLength a global variable and just getting its value within Animate CC and referencing it that way (since I don't know of a token I could use for my template).

Please let me know if anyone has any insight.
Thanks so much.
Davi-T

Report · Mar 01, 2018

There is nothing called the "3D Camera" in Animate. You only get the focalLength variable when Advanced Layers is activated, regardless of whether you're even using a Camera layer.

As for your issue, all the code that contains that variable seems to be generated by the $START_ANIMATION token, so I'm not seeing what the problem is.

Report · Mar 01, 2018

Well, the '3D camera'....when you turn on Advanced Layers and get parallax, as opposed to not turning on Advanced Layers and getting no parallax. I know it's not technically called that.

I'm talking about being able to get the focalLength variable's value if you're NOT using the default HTML file that Animate CC automatically generates. I'm using my own FLA template via 'Save as template' and under Publish Settings > Advanced > Template for Publishing HTML. I'm not using any of the code for $START_ANIMATION token. The default template for Animate CC just isn't robust enough for me, so I've made my own template and want to incorporate the existing camera code from the default template into my own template -- but no way to get that value that gets generated from the default template. Does that make sense? Perhaps if there was a way like getFocalLength or something....

Report · Mar 01, 2018

You're not making sense. If you want to use the existing camera code... then just put the $START_ANIMATION token in your template. That's what it's for.

Report · Mar 01, 2018

ClayUUID:
Thanks for your help and I know you help a lot of folks on these forums, appreciate your input. I think this question may be geared more towards someone who also uses a custom template that's different than the default one supplied with the app, who has run into this issue since trying to incorporate the new(ish) camera feature (the old template code such as the one supplied with Cory Hudson's starter kit wouldn't work).

Perhaps this is something I need to request from Adobe's team. Not sure. Hoping someone else has run into this issue.

The $START_ANIMATION token comes with other code that I don't want to use, and conflicts with my existing code (scope issues, etc). It's NOT just the camera code that the token adds in. It places a function called fnStartAnimation and adds in other things I don't want.

I use my template specifically for banner ads and have other things in it that conflict with the code that gets injected from that token (such as using Intersection Observer to start the ad, detecting if it's in an iFrame and in a version of Safari that throttles frame rate, a different way of starting playback, etc etc).

This is what that token adds in (see below and see area of code that I don't want to add in). I'd like to use the 2nd half of that code which is the same thing every export, but don't want the code towards the top, and want to be able to change the focalLength variable using a token (or some other method, perhaps global variable).

//Registers the "tick" event listener.

fnStartAnimation = function() {

**********
Don't want this stuff START
**********

stage.addChild(exportRoot);

createjs.Ticker.setFPS(lib.properties.fps);

createjs.Ticker.addEventListener("tick", stage)

stage.addEventListener("tick", handleTick)

**********

Don't want this stuff END

**********

function getProjectionMatrix(totalDepth) {

var focalLength = 528.25;

var projectionCenter = { x : lib.properties.width/2, y : lib.properties.height/2 };

var scale = (totalDepth + focalLength)/focalLength;

var scaleMat = new createjs.Matrix2D;

scaleMat.a = 1/scale;

scaleMat.d = 1/scale;

var projMat = new createjs.Matrix2D;

projMat.tx = -projectionCenter.x;

projMat.ty = -projectionCenter.y;

projMat = projMat.prependMatrix(scaleMat);

projMat.tx += projectionCenter.x;

projMat.ty += projectionCenter.y;

return projMat;

}

function handleTick(event) {

var focalLength = 528.25;

var cameraInstance = exportRoot.___camera___instance;

if(cameraInstance !== undefined && cameraInstance.pinToObject !== undefined)

{

cameraInstance.x = cameraInstance.pinToObject.x + cameraInstance.pinToObject.pinOffsetX;

cameraInstance.y = cameraInstance.pinToObject.y + cameraInstance.pinToObject.pinOffsetY;

if(cameraInstance.pinToObject.parent !== undefined && cameraInstance.pinToObject.parent.depth !== undefined)

cameraInstance.depth = cameraInstance.pinToObject.parent.depth + cameraInstance.pinToObject.pinOffsetZ;

}

for(child in exportRoot.children)

{

var layerObj = exportRoot.children[child];

if(layerObj == cameraInstance)

continue;

if(layerObj.currentFrame != layerObj.parent.currentFrame)

{

layerObj.gotoAndPlay(layerObj.parent.currentFrame);

}

var matToApply = new createjs.Matrix2D;

var cameraMat = new createjs.Matrix2D;

var totalDepth = layerObj.layerDepth ? layerObj.layerDepth : 0;

var cameraDepth = 0;

if(cameraInstance && !layerObj.isAttachedToCamera)

{

var stageCenter = { 'x' : lib.properties.width/2, 'y' : lib.properties.height/2 };

var mat = cameraInstance.getMatrix();

mat.tx -= stageCenter.x;

mat.ty -= stageCenter.y;

cameraMat = mat.invert();

cameraMat.prependTransform(stageCenter.x, stageCenter.y, 1, 1, 0, 0, 0, 0, 0);

cameraMat.appendTransform(-stageCenter.x, -stageCenter.y, 1, 1, 0, 0, 0, 0, 0);

if(cameraInstance.depth)

cameraDepth = cameraInstance.depth;

}

if(layerObj.depth)

{

totalDepth = layerObj.depth;

}

//Offset by camera depth

totalDepth -= cameraDepth;

if(totalDepth < -focalLength)

{

matToApply.a = 0;

matToApply.d = 0;

}

else

{

if(layerObj.layerDepth)

{

var sizeLockedMat = getProjectionMatrix(layerObj.layerDepth);

if(sizeLockedMat)

{

sizeLockedMat.invert();

matToApply.prependMatrix(sizeLockedMat);

}

matToApply.prependMatrix(cameraMat);

var projMat = getProjectionMatrix(totalDepth);

if(projMat)

{

matToApply.prependMatrix(projMat);

}

layerObj.transformMatrix = matToApply;

}