Edge Animate for Responsive BC Sites
Folder setup for Edge Animate work Ÿ The assumption is that your responsive website is already created including a div for the animation Ÿ The animation div in responsive design contains an image at the moment Ÿ The animation images in should be in the images folder for the website Ÿ The animation will be saved in the website folder root directory
Ÿ The animation div in responsive design contains an image at the moment Ÿ The animation images are in the images folder for the website
Slideshow images are at the maximum pixel size required for the PC view - in this case 1232px wide as that is the maximum width of the PC media query
Opening Edge Animate and starting to set up the animation
Set up canvas size W 1232 px H 200 px Max W 1232 Set up whether it is responsive or not. Select either - height - width - or both In this case I have selected both
Set up background colour in this case I have chosen a clear background. Don t be fooled, it will look white but is actually clear
Save the edge file into the website folder Edge creates the animation files in a separate folder (a new feature )
The files all need to be moved out to the root directory of the website folder. Close the animation first before doing this
There is a javascript file in an folder called edge_includes - it needs to stay in that folder
So the files that are part of the animation and need to be uploaded are: The animation.an file The animation.html file (not necessary but useful) The animation _edge.js file The animation _edgeactions.js file The edge_includes folder The slideshow images in the images folder
The slideshow images are in the images panel
Add the first image to the stage. Generally you line image up at 0 0 The image will now be listed in the stage panel
Move 3 seconds along the timeline and click on opacity 100%
Move 1 second along the timeline and change opacity to 0%
Move back one second and add second image to stage Make its opacity 0
Move 1 second forward and make the opacity of image 2 100%
Continue adding each image one at a time 1. Move 3 seconds along and make opacity 100% on current image 2. Move forward 1 second and make opacity 0% 3. Move back one second 4. Add the next image to the stage 5. Make the opacity of this new image 0 6. Move forward 1 second and make the opacity of this new image 100% 7. Move forward 3 seconds and go back to step one
Add all images and fade them in and out At the start of the final second, set opacity of first image to 0% At the end of the final second, set opacity of first image to 100%
Move the red timeline indicator back to the start of the animation Hit the space bar to play the animation through
You can also preview the animation in a browser window
Check the animation in the browser window to make sure it is responsive
To make the animation complete do the following: 1. Move timeline indicator to the end of the animation 2. Open the timeline actions in the tiny {} brackets here
Select the complete action
I find this area very difficult to use and understand Select playback and play from Some sample code will come up Overtype the first line with the sample code: sym.play(000); Close the code window ( top rh x) and the code will save
Preview the animation in a web browser and check that the repeat works
Inserting the animation into your responsive template To do this you need to open up your template in Dreamweaver ( or whatever else you use to edit your website html files)
Open the responsive template Open the animation html file - this file gives you the code you need to insert the animation into your template. It also shows where that code needs to be placed.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <title>untitled</title> <!--Adobe Edge Runtime--> <meta http-equiv="x-ua-compatible" content="ie=edge"> <script type="text/javascript" charset="utf-8" src=" edge_includes/edge.5.0.1.min.js"></script> <style>.edgeload-edge-12026568 { visibility:hidden; } </style> <script> AdobeEdge.loadComposition(' Edge-presso', 'EDGE-12026568', { scaletofit: "both", centerstage: "none", minw: "0", maxw: "1232px", width: "1232px", height: "200px }, {dom: [ ]}, {dom: [ ]}); </script> <!--Adobe Edge Runtime End--> </head> <body style="margin:0;padding:0;"> <div id="stage" class="edge-12026568"> </div> </body> </html>
In the <head> section place the following code: <meta http-equiv="x-ua-compatible" content="ie=edge"/> and <!--Adobe Edge Runtime--> <meta http-equiv="x-ua-compatible" content="ie=edge"> <script type="text/javascript" charset="utf-8" src=" edge_includes/edge.5.0.1.min.js"></script> <style>.edgeload- EDGE-12026568 { visibility:hidden; } </style> <script> AdobeEdge.loadComposition(' Edge-presso', 'EDGE-12026568', { scaletofit: "both", centerstage: "none", minw: "0", maxw: "1232px", width: "1232px", height: "200px }, {dom: [ ]}, {dom: [ ]}); </script> <!--Adobe Edge Runtime End-->
In the <body> section place the following code: <div id="stage" class=" EDGE-12026568"> </div> No need to worry about the style="margin:0;padding:0;" code in the edge html example file. In my template file the <body> code sits in this div: <div class="fluid flower"><img alt="" src="../images/embroidery2.png" /></div> </div> <div class="fluid contentwrapper"> <div class="fluid leftcontent">{module_contentholder,name="main Menu"}</div> <div class="fluid rightcontent"> <div class="fluid slideshow"> <div id="stage" class="edge-12026568"></div> </div> <!-- TemplateBeginEditable name="contentarea" -->{tag_pagecontent}<!-- TemplateEndEditable --></div> </div> <div class="fluid footerwrapper">footer links in here</div> <div>
FTP up the following Ÿ Edge animation files, including the edge_includes folder Ÿ the template with the Edge code inserted into it Ÿ also the animation images
Finally, check the webpage live and see that the animation is changing size as the screen does Here is the URL of the sample animation: http://freesite3.businesscatalyst.com/
Further information 1. You can insert more than one animation on a page. To do so you need to make the second one be on stage 2. Change the <body> code to read as this for the second animation when inserting it: <div class="fluid slideshow"> <div id="stage2" class="edge-xxxxxxxx"></div> </div> You will also have to upload the Edge files for the new animation and the edge_includes folder again Plus you will also need insert the <head> code for the animation And the images for the new slideshow!
Known issues Edge animations don t work on a page with a BC photo gallery tag added. See this post in the Adobe paid partners forum: https://forums.adobe.com/message/5208208#5208208 Engineering never solved the issue as far as I know.
Further examples to look at An interactive animation with points that can be clicked on to view the images in detail http://www.derbalnara.org.au/boodjar-a-changing-coastline An interactive and responsive animation with click throughs to other webpages on the site http://www.travelhealth.com.au/