6 Steps to Create Adaptive HTML5 Layouts in Adobe Edge Animate

6 Steps to Create Adaptive HTML5 Layouts in Adobe Edge Animate

17:15 09 November in Adobe Edge Animate
3 Comments

When you develop web content it is common practice to establish break points that helps you adjust how your content looks at certain sizes. That way you can say ok above 700 px I am going to have a full size banner and from 400 px to 699 px I am going to have a media browser and change from having two columns of text down to just one column staking on top of each other and thens something completely different on a phone size so it give your audience a optimized experience for whatever device they are on. I am not just talking about making it scalable and having the content be the same just smaller or larger or having it responsive where it will adjust with the size I am talking about having it adaptive or adapt to the size and shift, hide/show or look differently at certain points.

Adobe Muse does a really good job at this. You can design a website to look good on a desktop and then design for a tablet and finally a phone and you can have unique designs for each of these sizes. The new Adobe Captivate 8 does this really well as well. While these tools are useful they do not have the flexibility that Adobe Edge Animate has. While Edge Animate does responsive content it does not easily allow you to set up different break points. However I a work around that I think does the job and want to show you how to implement it within Edge Animate. Start a new project in Edge Animate and make sure the auto-play is turned off. We are going to jump to different points in the main timeline based on size of the browser and this is how we are going to visually set it up.

Step 1: Choose Your BreakPoints

So the key in doing this is to use the keyframes on timeline to change the stage size and to make the look and position of all objects on the stage look different for each key point. This is up to you but find different breakpoints for the type of devices you want to target. Just to show you in this example I have chosen 900, 600 and 400.

Step 2: Add labels on your timeline for each breakpoint

We will use these labels in our code so just so I am aware of which one is which I am going to name the labels the same as the sizes I am targeting.

Screen Shot 2014-11-08 at 3.14.22 PM

Step 3: Adjust the stage size with keyframes on each size

I am not sure why it did not dawn on me before but you can adjust the stage size and have different sizes on your timeline using the keyframe right next to your stage size. This means when you have your scrubber bar on the 900 label insert a keyframe for the stage width and height and adjust the width and height to be 900×410 and then move your scrubber to 600 and insert new keyframes on the stage size width and height.

Screen Shot 2014-11-08 at 3.16.49 PM

Now on the 600 label adjust your stage size to be 600×410 and finally on the 400 label adjust your width to be 320. If you scrub through the timeline you will see your stage size adjusting to the new sizes. I did not change the height but you can if you want.

Screen Shot 2014-11-08 at 3.18.15 PM

Step 4: Add keyframes and adjust your content

Now all you have to do is go through each object on the stage and add keyframes at each size and change and reposition how you want it to look at that size. You can resize or you can turn the display off/on and show certain things during one size and other things during another size. Or if you want you could create movie clips for each size and adjust everything you want within that movie clip, it’s up to you at this point but the key is having these keyframes with the different adjustments at each timeline label. Here is an example of how I adjusted mine.

Screen Shot 2014-11-08 at 3.21.21 PM

NOTE: The numbers on the timeline objects are the names of different text boxes I have.

Step 5: Add code to jump to different parts of the timeline

Now we need to have code to detect the browser size and then do a simple timeline jump to that part of the timeline based on the size so we have to have a if statement to add some logic. We have to add this code initially on the compositionComplete event so it adjust the size before the Edge Animate Composition is ready. Here is the code.

if ($(window).width() <= 400){
//Go to 400
sym.stop("400");
} else if ($(window).width() >= 600 && $(window).width() < 900) {
//Go to 600
sym.stop("600");
} else if ($(window).width() >= 900){
//Go to 900
sym.stop("900");
}

You will notice that the code checks the window and if less than or equal to 400 it will jump to the 400 label in the timeline. If the code is greater than or equal to 600 and less than 900 it will jump to 600 point in the timeline and finally greater than or equal to it will jump to 900.

You will see when you preview that it will jump to the part in the timeline based on your browser size. Only issue is it does not adjust when you resize or change orientation of a device so we need to add the code to the resize trigger and orientation triggers.

Step 6: Copy and Paste Code to Resize and Orientation Triggers

So all we need to do is take the same trigger and copy and paste it into the stage resize trigger and orientation change trigger. And that is it!

Screen Shot 2014-11-08 at 3.32.06 PM

Now when you resize the browser on the fly it will automatically adapt and jump to the different points in the timeline based on the size. There is a whole more you can do with this but that should at least get you started with creating adaptive layouts within Adobe Edge Animate.

Download a sample project here


Buy this on Selz
Selz powering ecommerce websites

Watch video below:

Be Sociable, Share!
3 Comments
  • bryann 00:37h, 11 June Reply

    Thank you!

  • Marco 12:03h, 30 December Reply

    Thanks for sharing this Jeff. I have used your solution on a couple of occasions this year. Take a look at this recent adaptive edge project I created: https://www.behance.net/gallery/32434591/MGA-Christmas-2015

    • Jeff Batt 21:26h, 30 December Reply

      That is awesome! Well done perfect example. Glad my solution helped.

Post A Comment