Edge Animate for Responsive BC Sites

Size: px

Start display at page:

Download "Edge Animate for Responsive BC Sites"

Morgan Taylor
9 years ago
Views:

1 Edge Animate for Responsive BC Sites

2 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

design contains an image at the moment Ÿ The animation images in should be in the

3 Ÿ The animation div in responsive design contains an image at the moment Ÿ The animation images are in the images folder for the website

4 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

5 Opening Edge Animate and starting to set up the animation

6 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

7 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

8 Save the edge file into the website folder Edge creates the animation files in a separate folder (a new feature )

9 The files all need to be moved out to the root directory of the website folder. Close the animation first before doing this

10 There is a javascript file in an folder called edge_includes - it needs to stay in that folder

11 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

html file (not necessary but useful) The animation _edge.

12 The slideshow images are in the images panel

13 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

14 Move 3 seconds along the timeline and click on opacity 100%

15 Move 1 second along the timeline and change opacity to 0%

16 Move back one second and add second image to stage Make its opacity 0

17 Move 1 second forward and make the opacity of image 2 100%

18 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

Move forward 1 second and make opacity 0% 3. Move back one second 4.

19 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%

20 Move the red timeline indicator back to the start of the animation Hit the space bar to play the animation through

21 You can also preview the animation in a browser window

22 Check the animation in the browser window to make sure it is responsive

23 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

24 Select the complete action

25 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

26 Preview the animation in a web browser and check that the repeat works

27 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)

28 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.

29 <!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>  <meta http-equiv="x-ua-compatible" content="ie=edge"> <script type="text/javascript" charset="utf-8" src=" edge_includes/edge min.js"></script> <style>.edgeload-edge { visibility:hidden; } </style> <script> AdobeEdge.loadComposition(' Edge-presso', 'EDGE ', { scaletofit: "both", centerstage: "none", minw: "0", maxw: "1232px", width: "1232px", height: "200px }, {dom: [ ]}, {dom: [ ]}); </script>  </head> <body style="margin:0;padding:0;"> <div id="stage" class="edge "> </div> </body> </html>

30 In the <head> section place the following code: <meta http-equiv="x-ua-compatible" content="ie=edge"/> and  <meta http-equiv="x-ua-compatible" content="ie=edge"> <script type="text/javascript" charset="utf-8" src=" edge_includes/edge min.js"></script> <style>.edgeload- EDGE { visibility:hidden; } </style> <script> AdobeEdge.loadComposition(' Edge-presso', 'EDGE ', { scaletofit: "both", centerstage: "none", minw: "0", maxw: "1232px", width: "1232px", height: "200px }, {dom: [ ]}, {dom: [ ]}); </script>

31 In the <body> section place the following code: <div id="stage" class=" EDGE "> </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 "></div> </div> {tag_pagecontent}</div> </div> <div class="fluid footerwrapper">footer links in here</div> <div>

32 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

33 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:

34 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!

35 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: Engineering never solved the issue as far as I know.

36 Further examples to look at An interactive animation with points that can be clicked on to view the images in detail An interactive and responsive animation with click throughs to other webpages on the site

CSS Techniques: Scrolling gradient over a fixed background

CSS Techniques: Scrolling gradient over a fixed background This is a little hard to describe, so view the example and be sure to scroll to the bottom of the page. The background is a gradient that fades into a simple graphic. As you scroll down the page, the graphic