Creating and editing screencasts as animated GIFs using Recordit and Ezgif

Screen Shot 2015-03-12 at 5.52.34 PM

Yesterday, I created a comprehensive guide to GroupZap and I used a number of animated GIFs to demonstrate certain functions. Today, Marisa asked me what tool I used to create them and I thought it might be helpful to do up a post showing all of the steps I used.

There are a number of ways to create a screencast for free, but not many of them export as an animated GIF. I have started using a tool called Recordit, a free app for Windows and Mac that makes a simple screencast that is cloud stored as both a video and a GIF. Here is how it works:

Recordit Mac install:

  • Go to Recordit.co and click on ‘Download for Mac’ button near the bottom of the page.

Screen Shot 2015-03-12 at 5.30.37 PM

  • It is a ZIP file and depending on your browser, may need to be opened by double-clicking on the ZIP file.
  • Once it is unzipped, move the file to your Applications folder.
  • Double-click on the app and you will likely get a security warning and won’t allow you to run it. This is a new security feature Apple added a couple of updates ago, stopping third-party apps from running unless they are downloaded from the Mac App Store. This app can be trusted. To run this app (this only needs to be done once), follow the instructions from this website under the “Trusting Apps on a Case-by-Case Basis” title. This works for all third-party apps.
  • Go to the Applications folder and double-click on ‘Recordit’ to start the program.
  • You will know it is running once you see the Record button in your menu bar (it looks like a rectangle with a dot in the middle of it).

Screen Shot 2015-03-12 at 5.37.43 PM

Recordit Windows install:

  • Go to Recordit.co and click on ‘Download for Windows’ button near the bottom of the page.

recordit1

  • Once the installer has downloaded, double-click on it to run it.

recordit2

  • You may be prompted by Windows about running the app. Give permission to run it and then click on ‘Next >’ to start the install.

recordit3

  • Select whether you would like to create a desktop icon or not and then click on ‘Next>’.

recordit4

  • Click on ‘Install’ to start the installation.

recordit5

  • Once it is finished, click on ‘Finish’.

recordit6

  • Find the Recordit program and double-click it to start.

recordit7

  • You will know the program is running when you see the rectangular icon with a dot in the middle in your notifications bar in the bottom-right corner of the screen.

recordit8

Recording screencasts with Recordit:

  • Once you are ready to record, click on the Recordit icon in either your menu bar (Mac) or the notifications area of the task bar (Windows).
  • Click and drag over the area you want to record and it will start recording immediately.
  • Once you are done, click on the ‘Stop’ in the menu or notifications area (same area as starting the screencast) and Recordit will start processing and sending the recording to the cloud. None of the screencasts are saved on your computer. Instead, you will be notified of a link once it is done. Click on the ‘All Done’ button to go to the video or click on the ‘GIF’ link to go to a GIF instead. Neither option uses audio (GIFs never have audio).

Screen Shot 2015-03-12 at 5.48.24 PM

  • If you miss the notification, or you want to go back later, click on the record icon in the menu or notification bar, and click on the recording you would like to visit.

Screen Shot 2015-03-12 at 5.48.48 PM

  • If you visit the video recording and would like to see the GIF, click on the ‘GIF’ button in the bottom-right section of the video.

Screen Shot 2015-03-12 at 5.57.55 PM

  • Once you are at the GIF, right-click (or also, Command+click on a Mac) on the GIF and choose to save or download the GIF (depends on the browser as to what option you will be given). You can also just copy the URL if you don’t need to download it.

Resizing a GIF using Ezgif:

  • Go to Ezgif and click on ‘GIF Resize’.

Screen Shot 2015-03-12 at 6.01.48 PM

  • To upload a file, click on ‘Choose File’ and upload the file. If you have the URL, paste the address into the box.
  • Click on ‘Upload!’ and wait for the GIF to appear on the screen.

Screen Shot 2015-03-12 at 6.04.09 PM

  • Under the GIF, type in your desired width OR height (not both) in the appropriate boxes and click on ‘Resize It!’ [Note: For my blog post, the larger GIFs were a width of 700 to fit across the post]

Screen Shot 2015-03-12 at 9.16.07 PM

  • The newly resized GIF will appear below the big GIF. Right-click (or Command+click on a Mac) on the smaller GIF and download it to your computer.

Speeding up the GIF:

  • If you have just resized a GIF, simply click on the ‘Speed’ button just below the new GIF.

Screen Shot 2015-03-12 at 9.21.12 PM

  • If you are uploading a new GIF, go to this page and upload a GIF or input a URL and click on ‘Upload!’
  • Once your GIF is showing at the top of the page, type in a delay speed in the ‘Delay Time’ box just below the GIF. A number like 5-10 will be quite fast, with a 15-20 being just a bit faster. [Note: I used 15 for the GIFs on my previous post].

Screen Shot 2015-03-12 at 9.24.11 PM

  • Your new GIF will appear just below the original GIF. Right-click (or Command+click on a Mac) on the smaller GIF and download it to your computer.
Advertisements

Video in ELT: Moving from Passive to Active Part 3 – Screencasting (Social Asynchronous Webinar)

Welcome to part three of the first Social Asynchronous Webinar (SAW). Here is where you can find part one and part two along with my initial idea regarding SAWs.

For this section, the focus was on screencasts in the classroom. Below is the link to the videoANT for part three along with links to some of the things mentioned in the video.

Screen Shot 2014-07-18 at 8.24.46 PM

Mentioned in the video:

My post on screencasting using Quicktime Player on a Mac

My post on giving oral feedback for writing assignments

My post on portable apps including CamStudio

Comment from Laura Adele Soracco on using screencasting

Hello everyone!

This SAW idea is incredible. Really like what’s happening here, Nathan 🙂 At the risk of getting a bit off topic, I just wanted to say, since you’ve mention screencast-o-matic, that I find this program really useful to make screencasts of my feedback to students’ first drafts. I do this as an alternative to written feedback when I know the errors are complicated to explain in writing and I want to make sure students can understand me more easily. The nature of your webinar here is making me realize that I could also ask students to use the program to post replies and go over changes with me.

Also, here is a comment this week from Janet McQueen on two teachers who use video and ICT to enhance learning

Hi Nathan

[H]ere are two video clips I think are relevant. They both come from CORE Education EDTALKS series where New Zealand teachers talk about what they are doing especially in ICT.

The first is Amy Park,Engaging parents in transparent classrooms http://edtalks.org/video/engaging-parents-transparent-classrooms.

Amy is actually from Canada and she discusses engaging parents with their children’s learning through the use of technologies. Amy has found that technologies such as blogging and videoing children’s work provides parents with a window to the classroom and helps them feel more connected and better able to be a partner in the learning process. It can be downloaded from http://vimeo.com/50111283.

The second clip follows on from my comments about knowing why you are using a particular tool that you talked about in this weeks video. It is of Claire Amos who is director of eLearning at Epsom Girls’ Grammar. Claire talks about how the school is using a ‘teaching as inquiry’ cycle to inform the eLearning action plans that will be implemented by professional learning groups in each of the school’s curriculum areas. Claire describes the process the teachers are going through in this initiative. Using teaching as inquiry to guide an eLearning action plan you can view it here http://www.edtalks.org/video/using-teaching-inquiry-guide-elearning-action-plan, or download it from http://vimeo.com/50175025.

I look forward to hearing your thoughts on how you use screencasting and also how you have your students use videos in your classroom.