Skip to main content
paul_james123
paul_james123
Inspiring
September 20, 2017
Answered

Breaking content up into DIVs (to make responsive)

  • September 20, 2017
  • 1 reply
  • 2835 views

Hi All,

I'm a new to Animate (and responsive web development) and I'm trying to understand how Animate CC would create a responsive site when exporting an HTML5 canvas final product.

It seems like the usual way to make a site 'responsive' is to use DIVs to break up the content so that individual elements can be rearranged and then CSS is used to control how each of those DIVs shows its content (on small screens). For example, here is a sketch of the way I'd like my site to behave when going from a desktop to a mobile screen: https://goo.gl/ybuXSf

Currently, when I export my site from Animate, the HTML wrapper puts all the Animate content into one DIV...All the all elements stay together so everything srinks in size on mobile screens.

Can Animate CC use DIVs to 'package' a site's content so that it behaves responsively and elements can stack on smaller screens like the above link shows? Can someone point me to an Animate tutorial about that?

Thanks Much!

    This topic has been closed for replies.
    Correct answer Colin Holgate

    Animate uses the term 'responsive' to mean that the canvas is resized and scaled to fill the available area. What you're describing is more like what people think is responsive, but used to be called liquid layout.

    Here's an article that covers both things, and for createjs:

    CreateJS and HTML5 Canvas: resize, fullscreen and liquid layouts — Fabio Biondi

    It doesn't use DIVs, but works on images. You should be able to do the same with movieclips, textfields and buttons, but not graphics. It would have to be something that could be given an instance name. Or something that was made from a new library symbol. Maybe that would even work for graphics.

    Some of the example code is just to set up createjs, and you may not need those parts, Animate will do those when you publish. So mainly look at the window resize listeners and resize function. Here's one example line that makes the logo appear in the upper right corner, regardless of the canvas size:

      // Logo: top-right position (canvasWidth - image width - 10 px padding)

      logo.x = stage.canvas.width - logo.image.width - 120 - 10;

    1 reply

    Colin Holgate
    Colin HolgateCorrect answer
    Inspiring
    September 21, 2017

    Animate uses the term 'responsive' to mean that the canvas is resized and scaled to fill the available area. What you're describing is more like what people think is responsive, but used to be called liquid layout.

    Here's an article that covers both things, and for createjs:

    CreateJS and HTML5 Canvas: resize, fullscreen and liquid layouts — Fabio Biondi

    It doesn't use DIVs, but works on images. You should be able to do the same with movieclips, textfields and buttons, but not graphics. It would have to be something that could be given an instance name. Or something that was made from a new library symbol. Maybe that would even work for graphics.

    Some of the example code is just to set up createjs, and you may not need those parts, Animate will do those when you publish. So mainly look at the window resize listeners and resize function. Here's one example line that makes the logo appear in the upper right corner, regardless of the canvas size:

      // Logo: top-right position (canvasWidth - image width - 10 px padding)

      logo.x = stage.canvas.width - logo.image.width - 120 - 10;

    paul_james123
    paul_james123Author
    Inspiring
    September 21, 2017

    Thanks, Colin.

    Yes that 'liquid layout' approach is what I'm talking about. I thought most sites that need to work for both desktop and mobile would use that approach (rather than just shrink all the page content together) so that the user can see content bigger.

    I'll work through that article by Biondi.

    Sounds like you're saying that Animate, by default, just shrinks the entire canvas including all elements on it ...and that I need to make all elements into symbols then use CreateJS to position them relative to screen size.

    (I'm wondering if I should even be using Animate to design the whole website. Maybe it's just best for the animated elements...that make up the whole site.)

    carstenw84433394
    carstenw84433394
    Participant
    August 22, 2018

    I think I understand most of what you're saying:

    Since my site will include lots of animation [When user clicks on some bitmaps they will zoom big (using tweens) and other bitmaps will move their internal parts (using timeline-based animation]...it sounds like I should continue to use Animate for the project.

    I'll just need to design the whole site to reconfigure (changing the size and position of the elements) by using math and CreateJS so that it adapts to different screen sizes.

    ...and the method the Biondi article uses is an example of how that would work.

    Thanks, Colin.


    Hi Paul, did you ever figure out how to make this work? I am working on a site with lots of moving parts, but can't figure out how to get them to adapt to screen size changes. Anything would help, thank you!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices