Skip navigation
Currently Being Moderated

How can I make embeded Flash 6 createjs animations responsive?

Jan 1, 2013 10:32 PM

Tags: #ipad #wordpress #responsive_design #html_to_wordpress #toolkit_for_createjs

I've created an animation in Flash 6 and exported it successfully using CreateJS. I've embed the HTML code into a page on a WordPress multisite blog. What I've not figured out how to do, though is to make the animation scale so that it will not only display, but scale gracefully, within the context of it's allotted space within a WordPress theme. You can see an example of a Flash-created createjs animation on the landing page for bradkozak.com. If you view the page on an iPad, you'll notice that, while the theme framework scales for the mobile device, the animation does not. I'm sure there's a way around this, even if it's only a kludge. But it escapes me. Anyone have any ideas along those lines?

 

Thanks!

 

Brad

 
Replies
  • Currently Being Moderated
    Oct 20, 2013 9:14 PM   in reply to captdigital

    +1. I would also like to know how.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 7:22 AM   in reply to captdigital

    Don't know if this helps>

    A canvas has 2 sizes: A physical size and a logical size. Both sizes are called width and height. CreateJs obeys the logical size.

    For example: <canvas id="canvas" width="840" height="600" style="width:100%;height:100%;" /> has a logical size of 840x600 but an unknown physical size.

    For an 840x600 swf this will simulate the flash EXACT_FIT.

    I use this javascript to simulate the flash publish settings:

    function AdaptCanvas(canvas, stagesize, scaleMode)
    {
      if (canvas)
      {
        var prevsize = { x: canvas.width, y: canvas.height };
    
        switch (scaleMode)
        {
        case "EXACT_FIT":
          {
            canvas.width = stagesize.width;
            canvas.height = stagesize.height;
          }
          break;
        case "SHOW_ALL":
        case "NO_BORDER":
          {
            var sratio = stagesize.width / stagesize.height;
            var cratio = canvas.scrollWidth / canvas.scrollHeight;
    
            if ((scaleMode == "SHOW_ALL" && sratio >= cratio) ||
              (scaleMode == "NO_BORDER" && sratio < cratio))
            {
              canvas.width = stagesize.width;
              canvas.height = stagesize.width / cratio;
            }
            else
            {
              canvas.width = stagesize.height * cratio;
              canvas.height = stagesize.height;
            }
          }
          break;
        default: // NO_SCALE
          {
            canvas.width = canvas.scrollWidth;
            canvas.height = canvas.scrollHeight;
          }
        }
        return (prevsize.x != canvas.width || prevsize.y != canvas.height);
      }
      return false;
    }
    
     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 12:39 PM   in reply to ron700

    Thanks ron700, looks interesting but I can't see how this makes my CreateJS animation simply scale in a fluid layout. I don't fully understand Javascript though. When I tried it, it kept it at the original output size and broke some of the animation layers so it didn't work properly.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 4:39 PM   in reply to dv8kiwi

    Suppose you have a 840x600 swf, then you can wrap the canvas (in the generated html) in something like this to get EXACT_FIT:

     

    <div style="width:50%;height:50%;min-width:210px;min-height:150px;max-widt h:840px;max-height:600px;">

      <canvas id="canvas" width="840" height="600" style="width:100%;height:100%;"></canvas>

    </div>

     

    Suppose you want SHOW_ALL, then you can use the same adaptation to the html and have to add this code (in frame 2 or higher!!!):

     

    // CODE FOR FRAME 2 OR HIGHER
    /* js
    this.stop(); // This will give an error when the code is not put in frame 2 or higher
    window.addEventListener("resize", OnResize, false);
    
    function OnResize()
    {
      var stagesize = { width: 840, height: 600 };
    
      if (canvas)
      {
        var sratio = stagesize.width / stagesize.height;
        var cratio = canvas.scrollWidth / canvas.scrollHeight;
    
        if (sratio >= cratio)
        {
          canvas.width = stagesize.width;
          canvas.height = stagesize.width / cratio;
        }
        else
        {
          canvas.width = stagesize.height * cratio;
          canvas.height = stagesize.height;
        }
      }
    }
    
    */
    
    
     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 5:26 PM   in reply to ron700

    Yes that seems to scale now, but not proportionally. The aspect ratio changes depending on whether it is scaled horizontally or vertically.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 5:29 PM   in reply to ron700

    (...how do I add that code into frame 2?)

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 6:39 PM   in reply to dv8kiwi

    Not sure what is meant  ...

    Code can be added to a key-frame by opening the 'Actions'-Window (key F9 or Menu->Window->Actions)?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 6:46 PM   in reply to ron700

    Oh - do you mean adding it in Flash? Before publishing? Does that solve the aspect ratio problem? I've just noticed you are talking about a swf above. I'm using a CreateJS html5/javascript output.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 6:57 PM   in reply to dv8kiwi

    Both the fla and the html-output have to be adapted.

    Sorry I forgot to mention the fla.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 7:03 PM   in reply to dv8kiwi

    You can center by adding:

    this.origin.x = (canvas.width - stagesize.width) / 2;

    this.origin.y = (canvas.height - stagesize.height) / 2;

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 7:05 PM   in reply to ron700

    So the code for the FLA in frame 2 is exactly as typed - all enclosed in comment tags?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 7:11 PM   in reply to dv8kiwi

    Ah yes

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 7:23 PM   in reply to dv8kiwi
     
    |
    Mark as:
  • Currently Being Moderated
    Oct 21, 2013 7:48 PM   in reply to ron700

    My animation will not play once inserting your code in Frame 2. Not even if I add play();

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 22, 2013 2:16 AM   in reply to dv8kiwi

    Probably the animation in your fla is in the timeline in Scene 1.

    Remove the line with this.stop() or comment it out.

    Here is the code (with some improvements):

     

    // CODE FOR FRAME 2 OR HIGHER
    /* js
    // this.stop(); // This will give an error when the code is not put in frame 2 or higher
    window.addEventListener("resize", OnResize, false);
    window.addEventListener("orientationchange", OnResizeDelayed, false);
    OnResize();
    
    function OnResizeDelayed()
    {
         setTimeout(OnResize, 100);
    }
    
    function OnResize()
    {
         var stagesize = { width: 840, height: 600 };
    
         if (canvas)
         {
              var sratio = stagesize.width / stagesize.height;
              var cratio = canvas.scrollWidth / canvas.scrollHeight;
    
              if (sratio >= cratio)
              {
                   canvas.width = stagesize.width;
                   canvas.height = stagesize.width / cratio;
              }
              else
              {
                   canvas.width = stagesize.height * cratio;
                   canvas.height = stagesize.height;
              }
         }
    }
    
    */
    
    

     

    When the animation is repeated the handlers will be set more than once.

    (Personally I don't like that and would move the animation to a MovieClip).

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 22, 2013 3:28 AM   in reply to ron700

    I'm sorry I'm a bit thick, but I really don't understand.

     

    Yes it is in the timeline. I don't know where else I can write actionscript except in the timeline.

     

    I don't use scenes. This is a simple timeline.

     

    And the code is commented out, as you supplied it. So I don't uderstand what you are saying. Sorry.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 22, 2013 3:38 AM   in reply to dv8kiwi

    I can insert the code for you but then I need the fla.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 22, 2013 3:57 AM   in reply to ron700

    I've just replaced the earlier code with the code you just posted and it works! I thought you were telling me that I had put the code in the wrong place, and I couldn't figure that out.

     

    I noticed that the animation was including elements off the stage with width and height both set to 100% in the css for the div and the canvas. So I removed the height from the css for both and it works perfectly.

     

    Thank you very much, sorry I'm a bit slow. This really is a big help. Perhaps you could post a tutorial, because there is nothing out there about this really important functionality.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 22, 2013 4:13 AM   in reply to dv8kiwi

    Glad it works!

     

    Tutorial ... maybe. (I don't know where to start)

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points