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.
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.
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.
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.
Step 3: Build something awesome in Animate
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!
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.
Your preview file should now have all the Animate files merged into the 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.
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.
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”.
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.
52,784 total views, 7 views todayPosted on April 3, 2013 by Sarah · 5 comments