Friday 30 May 2014

Google Presentation Animations and How to Embed Them

Let me begin by saying that while I used Google Presentation to animate to the concept of balancing chemical equations and that teachers could also use it to illustrate concepts, it can also be used by students to create animations - of a story they read, of a scientific concept, of anything!

Click here to see a gorgeous example of this - the tale of two Pukekos at the Beach



First of all you need to actually create the animation. This will require a lot of copying and pasting of slides, because to get a smooth animation you need to move objects in the animation the tiniest amount between slides. 




You can see what I mean in the picture below, where the line in the middle of the slides is only slightly longer from one slide to the next. This will make the growth of the line smooth when the animation is played. 




Another thing to consider is the amount of time it will take people to read any text in your animation. Because the slides will flick very quickly during the animation, you may need to have the same information shown on 10, 15 or 20 slides. Just copy and paste the slide with words on it to give your viewers time to read.




Once you are happy with your animation you need click 'File' and then 'Publish it to the Web' 




This box will pop up.  There are a couple of things you need to do with this box.



First of all, change the 'Presentation Size' to Small. If you choose medium or large it may take too long to load on your site.



Next, change the speed of your presentation. 




Now there are some boxes for you to tick. These are important. Tick the box that says 'start slideshow as soon as the player loads.' This will make your animation automatically load and play when people come to your site. If you tick 'restart slideshow after the last slide' then the slideshow will just keep on playing over and over until your students hit the pause button.




Now you are ready to copy the 'embed code.' 




Go to your site and edit the page you want the animation on.  Click on 'insert' and click on '...more gadgets...' 




Search for the 'embed gadget' in the search box.  After you hit the search button the two options shown in the picture below will pop up.  Click on the second one - the 'embed gadget' one.




Select it.




An empty box will pop up. Paste in the embed code that you copied from the Google Presentation. It should look like the picture below after you have pasted it. 




You will notice in the code that it tells you the width and height of your animation. In this case, it is 480 and 299. 




You will also notice that the width and height of your embed gadget is already set at 400 and 400. This will not do, because it will cut off the sides of your animation and leave extra space below and above it.


 Change the width and height to match the animation.




Now this is the important bit! This changes your Google presentation into an animation. You need to change the time delay between slides. It is set at 1000, and that is just far too slow.




Change the time delay (false&delayms=) to somewhere between 300 and 700. I like 300. It is nice and fast. If your animation is flicking too quickly when you watch it though, you can come back and make this number bigger to make the gap between slides bigger. The other thing you could do is to reopen your Google Presentation and add more slides where you need longer to read things (just copy and paste the slides you want to show for longer). 




The last thing you need to do is scroll down and untick the two boxes that say 'include a border around the gadget' and 'display title on gadget.' This just makes the animation much tidier on your site. 



Once you save your page and go to view it, you should have a lovely animation to watch :) Check the timing is right and when you are happy, share it with your class! (Or if they are making it, get them to share it with you!!)







You can see my animation about balancing chemical equations here, or make a copy of it for your science site here.

No comments:

Post a Comment