Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Is there any way to set a Dynamic Width to the canvas?

  1. #1

    Default Is there any way to set a Dynamic Width to the canvas?

    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

  2. #2
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498

    Default

    Not directly. You could attach some js to scale the scene to fit your dimensions on the fly.

    Something along these lines might work
    Code:
    //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.

  3. #3

    Default

    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?

  4. #4
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498

    Default

    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:
    Code:
    <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).

    Code:
    //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;

  5. #5

    Default

    quick side note, copy/paste doesn't work in that custom editor

  6. #6
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498

    Default

    What system are you running? (os, animator version).

  7. #7

    Default

    Quote Originally Posted by arnebech View Post
    What system are you running? (os, animator version).
    OS X Lion
    Animator Version 1.0 Build 41

  8. #8

    Default

    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.

  9. #9
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498

    Default

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

  10. #10

    Default

    Quote Originally Posted by arnebech View Post
    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.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •