Inspiring

Answered

Breaking content up into DIVs (to make responsive)

Forum|Forum|8 years ago
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;

Colin HolgateCorrect answer

Inspiring

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_james123Author

Inspiring

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

paul_james123Author

Inspiring

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.

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded