PDA

View Full Version : Is there any way to set a Dynamic Width to the canvas?



rockinthesixstring
12 Dec 2011, 11:05 AM
I'm working on a Sencha Touch app that needs to be able to not only rotate, but also display on phone or tablet. This means that I need a "dynamic width" solution for my animation.

Is this possible with Animator? If so, how?

Thanks

arnebech
12 Dec 2011, 6:17 PM
Not directly. You could attach some js to scale the scene to fit your dimensions on the fly.

Something along these lines might work


//untried
var scaleFactor = Math.min(pageWidth/sceneWidth, pageHeight/sceneHeight);
var transform = " scale3d("+scaleFactor+","+scaleFactor+",1)";
scene.style.webkitTransform = transform;


you could also look at the exported code from animator, particularly in the "ormmaNextScene" method. It contains code to center and scale an animation to fit a set height/width.

rockinthesixstring
13 Dec 2011, 10:06 AM
Thanks for this. I'm trying it, but I'm not sure where to put it. I tried in a separate <script> tag to no avail.

Where do I put the above script?

arnebech
13 Dec 2011, 10:36 AM
The code above is not a full implementation. You would need to get a reference to the different elements to get and set their dimensions. Here is a sample implementation to size an animation to fit a browser page.

First put this style in the Project->Head HTML property box:


<style type="text/css">
html, body {
height:100%;
}
</style>

Then you could add some js to the Start Action of your first scene (Properties -> Actions -> Start -> Custom JS).



//set your scene dimensions
var sceneWidth = 300;
var sceneHeight = 300;


//get container for all the scenes
var scenesContainer = document.querySelector('#AN-sObj-parentOl');


//get the parent of the scene container and it's size
var parentElement = scenesContainer.parentElement;
var pageWidth = parentElement.clientWidth;
var pageHeight = parentElement.clientHeight;




//calculate the scaling factor
var scaleFactor = Math.min(pageWidth/sceneWidth, pageHeight/sceneHeight);
var transform = " scale3d("+scaleFactor+","+scaleFactor+",1)";


//apply the scaling
scenesContainer.style.webkitTransformOrigin = "0 0";
scenesContainer.style.webkitTransform = transform;

rockinthesixstring
13 Dec 2011, 10:41 AM
quick side note, copy/paste doesn't work in that custom editor :(

arnebech
13 Dec 2011, 10:42 AM
What system are you running? (os, animator version).

rockinthesixstring
13 Dec 2011, 10:47 AM
What system are you running? (os, animator version).
OS X Lion
Animator Version 1.0 Build 41

rockinthesixstring
13 Dec 2011, 10:55 AM
Looks like I'm getting the following error with your above code

var parentElement = scenesContainer.parentElement;
Uncaught TypeError: Cannot read property 'parentElement' of null

It might have something to do with "#AN-sObj-parentOl" since I first thought it was parent01 and not parentOl, however I changed it to match the output source code and it didn't help.

arnebech
13 Dec 2011, 12:35 PM
Could you PM me your project, and I'll take a quick look. The copy/paste issue should be resolved in the next version.

rockinthesixstring
13 Dec 2011, 12:44 PM
Could you PM me your project, and I'll take a quick look. The copy/paste issue should be resolved in the next version.Yep, done.

rockinthesixstring
13 Dec 2011, 12:50 PM
Could you PM me your project, and I'll take a quick look. The copy/paste issue should be resolved in the next version.I also noticed that there's no "Check for updates" in the menu. Will that be coming as well?

arnebech
13 Dec 2011, 1:54 PM
There was a couple of typos in your project. Sent you a PM about those. Automatic update check is in the product already (it currently checks on startup).

rockinthesixstring
15 Dec 2011, 9:28 AM
So after some playing with this... it's working mostly as expected, but I'm still a little confused on one bit.

Instead of growing proportionately, I'd rather have it have a fixed height (150px) and grow in width. I would set the background image at 1280px wide, but allow it to "hide" if the screen width is less than 1280px... ie: it would be hidden off screen.

Is this possible from within Animator?

arnebech
15 Dec 2011, 10:40 AM
You could set the scene in Animator to be the maximum dimension and then use a start action, similar to what we did earlier, to hide part of it.



//set your scene dimensions
var sceneHeight = 150;

//get container for all the scenes
var scenesContainer = document.querySelector('#AN-sObj-parentOl');

//get the parent of the scene container and it's size
var parentElement = scenesContainer.parentElement;
var pageWidth = parentElement.clientWidth;
var pageHeight = parentElement.clientHeight;

//set the dimensions of the scene container
scenesContainer.style.overflow = 'hidden';
scenesContainer.style.height = sceneHeight + 'px';
scenesContainer.style.width = pageWidth + 'px';

liechtir
5 Jun 2013, 2:03 PM
hi guys

unfortunately this solution does not work for me. you can download my project from
http://www.liechti-fotografie.ch/download/intro.zip

I need this page to be at 100% of the screen.

how can I fix this?

Thanks

liechtir
5 Jun 2013, 3:29 PM
I finally have it running, in Chrome.

Firefox somehow does not work, not scaled. IE9 I could not test yet.
Any idea why in does not work in FF?


var sceneWidth = 900;var sceneHeight = 600;




//get container for all the scenes
var scenesContainer = document.querySelector('#puepgPXdB-an-anim');




//get the parent of the scene container and it's size
var parentElement = scenesContainer.parentElement;
var pageWidth = document.width;
var pageHeight = document.height;


//calculate the scaling factor
var scaleFactorHeight = pageHeight/sceneHeight;
var scaleFactorWidth = pageWidth/sceneWidth;
var transform = " scale3d("+scaleFactorWidth+","+scaleFactorHeight+",1)";


//apply the scaling
var properties = [
'transform',
'webkitTransform',
'msTransform',
'MozTransform',
'OTransform'
];
var p;
while (p = properties.shift()) {
if (typeof scenesContainer.style[p] != 'undefined') {
alert(p);
// scenesContainer.style.webkitTransform = transform;
scenesContainer.style[p] = transform;


//scenesContainer.style.webkitTransformOrigin = "0 0";
scenesContainer.style[p+"Origin"] = "0 0";
}
}

arnebech
5 Jun 2013, 3:44 PM
Not sure, what Firefox version are you using? Could you share the updated project? We do not support IE9 since it doesn't support CSS3 Animations.