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.

Using Youtube to Create and Edit Videos

Youtube - not just a place to watch videos about how to communicate with giraffes or watching Koko the Gorilla bonding with kittens... This blog post is all about how to create and edit a movie using only youtube! 

First of all you need to upload videos to youtube. You can do this by clicking the 'Upload' button and recording direct from your webcam, or selecting files already on your device to upload. 

Another way to upload videos is to email them to your youtube. This is particularly useful because most people have cameras on their phone. Students doing group projects can film multiple angles at the same time and then send them to the same youtube account for combining and editing. To find out the email of your youtube account, first click on your youtube user - mine is A menu will open. 

Click on youtube settings and you will be taken to this page. You will see next to 'Mobile Uploads' an email Once your students have finished editing and published the videos you can change this email by pressing 'Click here.' 

Right, now all your videos have been filmed or uploaded you'll want to edit them. Click on your account name again to open the menu. This time click on 'Video Manager.' 

On the left hand side of the screen you will see a menu for 'Video Manager.' Click on 'Creation Tools.' 

You will be taken to a page called 'Audio Library.' This contains all the music that is free for you to use when making your video. It's too early to worry about that though. First of all you need to get your actual video looking good, before you start to think about adding music or sound effects. 

Under creation tools select 'Video Editor.' 

You will be taken to a screen that looks like this, except where it ays "no videos were found" there will be all the videos that you have filmed and uploaded. Pick which one you would like to edit, then drag and drop it into the row next to the film camera. 

There are other features available to you as well.  One of those is found under the creative commons (the logo with CC inside a circle).  These are videos free for you to use!  You can drag and drop any of them into your video. 

The other options are to add photos, add sound, change the transitions between scenes and to add text. 

Once you have added everything that you want, you can start chopping them up and adding extra effects to the individual segments. To cut a segment in half click on the segment and click on the scissors. Then move the blue bar to where you want to cut, and click your mouse just once. 

Next you can add effects to the different segments you have created. Click on the segment in your bar and this white section will pop up, allowing you to add filters to the segment (just like Instagram), text, sound effects, slow it down, change the brightness, and stabilise it (useful for steadying videos filmed on shaky camera phones). 

 Once you have a finished product that you are happy with, click 'Publish' in the top right hand corner. Check the sharing settings are what you want. Below I have included a screencast saying everything I have just written (for those of you who are visual learners). 

How to Make a Screencast

This is how to make a screencast on a Mac using Quicktime because Quicktime is free! Screencasts record the movements on your computer screen and can also optionally record your face, your voice and the sound of your clicks. Screencasts are great for creating how-to instructional videos for your students - how many times have you explained how to create a new doc? Or search on Google? Or tried to explain to your Aunty over the phone how to find a lost email draft??

Create a screencast and just send them the link!

The first thing you need to do is to find the Quicktime player using Spotlight in the top right hand corner. 

You will click to open Quicktime and may be confused because nothing obvious appears to happen. However all that happens when you open Quicktime on a Mac is the bar at the very top of the screen will change to show Quicktime player.

Click on File and select which type of recording you want. Movie Recording will include film from your webcam. Audio is just sound. To screencast without your face select New Screen Recording.

This box will open. Click on the little downward facing arrow to check the settings before recording.

To screencast without sound select None for Microphone, for sound select Built In Microphone. If you want your clicks to be particularly obvious select Show Mouse Clicks in Recording. 

Once your settings are sorted you can click the red record button. You will get the option of clicking (to record your entire screen) or you can drag and select a smaller area. Perhaps you do not want all of your tabs visible? 

Now you are ready to record. Have all the tabs that you are going to talk about/show/move between already open because nobody wants to watch a loading screen. Just flick between them in your tabs instead - much faster and cleaner! Once you have finished recording press the stop square and a preview of your screencast will pop up, with this black box on it: 

To publish your screencast select the tiny right-facing arrow on the right hand side of the black box, and select Youtube.

Log into your youtube account, and the video will upload to it! 

Have fun creating screencasts :) 

Linking and Using Google Sites and Google Docs

Today in our MDTA training we learned how to make a screencast with sound.I chose to make my screencast about how I used Google Sites and Google Docs to help create an online, e-blended learning environment incorporating games, shared docs, videos, forms and spreadsheets, research on other sites, student reflections and the commenting feature on docs. My goal was for the doc to act as a learning log or folder for all of the students' working.

I was very excited about the site and doc but after a week I realised that it wasn't engaging the students as much as I had hoped. To add to this I was trialling the effect of 'learning' in class before moving on to the effects of 'creating.' The first week we used the doc was fairly content and online-activity heavy as I was trying to do the 'learning' in one block, leaving more time at the end of the unit for concentrated 'creating.' 

It quickly became clear that was not a great idea. Students NEED to do something with information. Passive learning - even if that passive learning involves online games and collaborative docs and competitive researching - is not as engaging for students.

I sought feedback from students on these tools for learning - they did not want to purely work online and in the doc all the time. Our conversations reminded me there is still a place for direct teaching and definitely a need for active and creative learning. 

I would use a doc like this again with a site, but I would make it more explicit to students that it is a record of their learning - a log. I would teach everyone how to take screenshots at the start of the unit. I would move slower through the online games and activities and ensure students write reflections beneath the screenshots of their learning. And I would get students to take photos of active learning activities and insert them into their docs with reflections too. Like a digital diary of their time in class. I think it would be even better if they could have a blog to share descriptions and explanations of their learning.

The link to my site is here.

Making a Stop-Start Animation

This week at the MDTA training session we learned how to make stop-start animations. They were so much fun that we all voluntarily gave up our lunch breaks to keep working on them! I imagine students would be equally engaged by making these cool creations...

Here's how you make them from woe (oh gosh it seems like so much work) to GO (step back and watch the magic happen)!

I suggest students have a story-boarding session where they write a script to keep them on track during the photography. That way their story will have direction and include the content you want to review. 

Find a well lit wall of the room and set up a backdrop and a foreground. Blu-tak them down to make sure they don't shift too much. 

I used a scene from a calendar, but a plain sheet of A3 works just as well. If you were going to regularly make animations you might consider having a cardboard set constantly at the ready, with a couple of props like trees... Students could also find a wallpaper online and print it, or draw one themselves. 

Set up the camera. Try to keep it as steady and still as possible. 

I used an old digital camera with a flat base and blu-tak'd the camera in place as well. A tripod for a phone can work. Students can use their netbooks by pulling a chair up to the desk and adding a booster (old phone books work well) so the camera in their netbook is at the right height. 

Blu-tak the character's feet, make them do tiny movements, take a LOT of photos. 

Blu-taking the characters feet makes sure they don't move until you want them to. Have one student moving the characters and telling another student when to take photos. The student taking the photos can position themselves under the desk, ready to click away. 

What happens if I bump the camera out of position or my character falls over?

Change camera angles. That way you won't notice the big jump in continuity and it keeps the footage interesting. Think about changing camera angles anyway if it adds to the story; high angles, low angles, over-the-shoulder shots, close ups... 

Once you have taken all the photos to tell your story, import them to your device. 

Open iPhoto. You can find this by searching in the top right of your Mac  

Import the photos into iPhoto

Open iMovie. There are now some things you need to do before you can drag your photos in from iPhoto. 

Create a new project and change the properties.

If you just drag and drop the photos from iPhoto, each photo will get it's own transition. This will ruin your animation. To avoid this you need to create a new project. 

Right click on the project and select 'Project Properties...'

Change the Initial Photo Placement from Ken Burns (the annoying transitions) to Fit in Frame.

Open your New Project and drag in your photos. If you watch your animation now you will notice it is quite slow, and you will probably want to speed it up...

Click on one of the photos and Command+Shift+A to select them all.  Hover your mouse over one of the photos and you will notice a little cog pop up with a number just above it. Click on the cog and this box will open.

Select 'Clip Adjustments' and change the 'Duration.' I wanted my photos to flick over fairly quickly, so I selected 0.2s. 

If you want some sections of your animation to flick over more slowly, select only the pictures you want to change the speed of (not all) and then deselect (untick) the box that says 'Applies to All Stills.' 

Adding sound to your animation.

Once I was happy with the speed of my animation I used my digital camera to film it playing. Then I opened Garage Band and created a New Project

I selected Vocals and then got ready to voice my animation while playing the animation on my digital camera. This was so I could see the animation while I was talking, to try and get the timing right. I hit the little red circle to begin and end the recording. 

Then I switched back to iMovie and clicked on the little music note on the right. I selected GarageBand and chose the name of my recording. Then I could drag and drop it into my animation. 

Other people who made their animations used the recording feature in iMovie, which is probably easier. However if you do this you can only record sound to the length of the animation and nothing beyond it. 

You can also add iMovie Sound Effects to your animation.

Publishing your finished animation.

Once you are happy with the look and sound of your animation, click on Share and publish it to youtube. You will need a youtube account to do this.

Now you can share your animation to friends and family far and wide, or publish it for the public :)