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
Ÿ The animation div in responsive design contains an image
at the moment
Ÿ The animation images are in the images folder for the
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
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
Set up background colour in this case I have chosen a clear background.
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.
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
Add the first image to the stage. Generally you line image up at 0 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%
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
Move the red timeline indicator back to the start of the animation
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
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>
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>
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
Finally, check the webpage live and see that the animation is changing size as the screen does
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
‘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