Breaking content up into DIVs (to make responsive)

[paul_james123]

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!

[Colin Holgate · Accepted solution]

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]

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

[Colin Holgate]

Animate is well suited to fixed asset positions, though it can scale and crop in useful ways. Most of the AIR apps on mobile that work fine on wide iPhone 5, or narrow iPad, are getting by with just scaling and cropping. If you want the UI buttons to be physically the same size on all screens, but give bigger screens more content area, then you have to get into the math needed for liquid layout.

It should all be the same math whether it's symbols on a canvas or DIVs and CSS. With DIVs and CSS there may be more public code libraries that will help you, and you could even do the whole thing in Muse perhaps. But, if you're doing a lot of things that Animate is the right tools for, and you want some amount of liquidness (hey, that's a real word!), I would look into doing the math with Animate symbols rather than either mix and match with DIVs, or switch to another tool that won't be as good for the majority of the work.

Having said that, I haven't had to do the math I'm talking about! So maybe it'll be harder than I'm thinking.

[paul_james123]

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.

[Colin Holgate]

The pure CreateJS way that Biondi and others use doesn't take advantage of things you can do in Animate. One approach you could take is to have variations of your UI laid out in the timeline, then jump to the best layout for the current device ratio, and scale it to make it fit the size of the screen. That's the approach Muse would take, you manually set boundaries at which the layout jumps to a different version, all without too much math.

[paul_james123]

Interesting, Colin.

I'll look into that.

Thanks

[carstenw84433394]

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!

[marjantrajkovski]

Animate is for games, cartoons, presentations, banners...

[Colin Holgate]

And for anything else you want to do with it. Here's one app I did that had both kids game activities and also parent directed utilities:

Let’s Get Ready! on the App Store

[marjantrajkovski]

Sorry, I am using Android

[Colin Holgate]

Here you go: Let’s Get Ready! - Android Apps on Google Play