splash

Create Responsively with Animate and Reflow

We live in a world of responsive design, and animation can play a meaningful and fun role on your website. Edge Animate and Edge Reflow give you the best of both worlds; easy-to-create responsive designs with RF and percentage-based interactive animations with AN. In this tutorial I’ll show you how you can take a responsive Animate composition and easily merge it with your Reflow preview files.

Watch the video to see it in action

Download Project Files

Step 1: Build something awesome in Reflow

Start off by building your Reflow project. During the design process, set a placeholder div for your Animate composition; we’ll be adding Animate content to it later.

rflw

Once you have your placeholder div, set the height to “auto” in the Properties Inspector. This will make the placeholder change it’s height to automatically match the height of the Animate composition. (Hint: The stage can be animates or have it’s height set in percentages, so this can dynamically change if you chose to make it so.)

Be sure to push the auto height as the default style for all your breakpoints.

auto

 

Step 2: Create your preview files

Once you’re done building your Reflow project, Go to View > Preview in Chrome. This will give you the HTML files we’re going to use to embed our Animate composition. You can find your new files in the same directory as your saved .rflw file.

projectfiles

 

Step 3: Build something awesome in Animate

View the Animate sample file

Using percentage-based layouts in Animate, you can create responsive compositions which can adapt to different viewports. You can set elements to use size and position in percentages for layouts, and “pin” objects to the top, right, bottom or left of the stage window.

Note: Don’t forget to set the Stage in percentages!

animate

Step 5: Publish your Animate content

Now we’re going to get ready to bring our Animate content into our Reflow preview files.

Go to the publish settings of your composition. In the target directory, change this to the preview folder of your Reflow files.

publish

 

Your preview file should now have all the Animate files merged into the folder.

folder

 

Now we’re going to copy and paste the bits we need from the Animate HTML file into the Reflow HTML file. Grab the two .html files inside of the publish directory and open them up to view the code.

html

Step 6: Copypasta

All we have left to do is copy the bits from the Animate HTML file into the Reflow HTML file. In the Animate .html, there’s only two parts you need to worry about; the block that says <!– Adobe Edge Runtime –> and the div inside.

edgecode

Now we’re going to paste these bits into the Reflow .html file. First copy the block found in the head tag, then place the Stage div inside of your placeholder container. For this project, the placeholder is called “box1”.

beforeafter

Step 7: Grab a soda, you’re done

Save the Reflow .html file and preview in Chrome. Your Animate file should now sit nicely inside of your Reflow preview files.

res

Download Project Files

 


53,076 total views, 12 views today

Posted on April 3, 2013 by Sarah · 5 comments

5 comments

  1. Priya
    - Reply

    Hi Sarah,
    I attended Adobe MAX yesterday and was lucky enough to attend your session about Edge Animate. Lots of great information, thanks! My question is about another session I went to on Reflow. In it, the speaker,
    Jared Wyles, said that Reflow is not meant to design whole documents in HTML and strongly suggested NOT copying and pasting the HTML from the preview files since it was not meant to be used to build a file, but only as a tool to help designers and developers communicate. But, according to this blog post, it seems like it would work. I’m so confused!! Reflow was so exciting to me before, but after his talk, it seemed like an added extra step that I don’t have time for since I can’t use the HTML. What do you suggest?

    1. Sarah Author
      - Reply

      Hey Priya,

      Glad you enjoyed the session!

      The code generated from Reflow isn’t intended for production use as it’s only optimized to use with Chrome. What you can do at development time is reference the code as a starting point to reference dimensions, colours, positioning and more.

      Embedding an Animate composition inside your Reflow project can help you communicate your design and interactive intent when you send your design to a developer. The advantage is Animate code is production ready, so during development you can take the Animate piece and place it inside the production ready site. Since your overall design vision was communicated via Reflow at development time you know exactly how you wanted the Animate comp to behave inside your responsive website.

      Cheers,
      Sarah

Leave a Comment

Your email address will not be published. Required fields are marked *