Animated GIFs for Instruction and Demonstration

Animated GIFs are a great alternative to short videos or sets of screenshots. They can be used to display short moving images that can be looped to play repeatedly. The example GIF below takes the place of a series of screenshots demonstrating how to access a menu in Canvas.

Making your own GIFs

To make your own animated GIF, first record your screen as you perform the steps you want to illustrate. You can use Zoom for this, or any other screen-recording software you are comfortable with. Once you have your video, upload this to a video-to-GIF converter online. The best choice at the moment is ezgif – it has a wide range of features and good terms of use. They don’t store your file or claim any intellectual property rights over anything you upload, and your file is removed from the server in an hour. It’s always worth double-checking these online tools to make sure the terms are reasonable.

Using ezgif it is possible to crop the screen recording to show the specific part you are focusing on, and you can trim the clip to start and end where you need it to. Other settings include changing colours and setting how many times you want the animated GIF to loop.

Once you have created your animated GIF and have saved it, you can add it to a Canvas course in the same way as any other image.

The advantages of using GIFs

  • Compared with video, they minimise the storage space needed for the content, reducing data needed and loading times.
  • They can replace long sets of screenshots to show stages of a process. Often these screenshots take up a lot of space, and text can get lost amongst the large images.
  • They can be made quickly with no need for specialist skills or software.
  • Recently a change in Apple software made some other types of video and animation – those displayed in iframes – impossible to access using the Canvas app on iPhone. GIFs are a very accessible format and don’t require iframes to work, so using them where possible avoids this issue.
  • Some older formats of animations have become obsolete – animated GIFs have been around for over 25 years and show no signs of disappearing.

Uses for GIFs

  • To illustrate a couple of steps in using some software.
  • To show a series of improvements or changes to a document or file.
  • To show consequences of changing parameters in a simulation.
  • To illustrate the differences between a series of images, such as diagnostic scans.

Technology in your pocket

We have had a few enquiries via FMS Enquiries about getting tasks done without specialist equipment we would normally have on hand in our offices.

We have recently added some information to the FMS Community on how to use mobile devices to produce learning materials. A kind of Do It Yourself guide for producing materials from home or on location.

Create video, audio, images, presentations, conduct meetings, and communicate with students and staff. Set students tasks to do on their own devices. Check it out here: https://ncl.instructure.com/courses/30988/pages/technology-in-your-pocket.

Your device may not have all the features identified, but it may give you some ideas.

Branching Activities

Following a request to create branching activities for the BMS Health and Safety Course, we have added an example of a branching activity to the FMS Community so that others can try these out. These activities can be used to present a scenario with a range of options for students to follow, like a choose-your-own-adventure book.

A branching activity was included in the Health and Safety course this year to guide students through a scenario where a fellow student becomes unwell. At each stage, some information and a set of choices is presented. The student clicks through to discover the consequences of their choices, and finally, an outcome is presented. Students can run through the activity multiple times to try out different paths through the scenario.

These activities are built by setting up pages in Canvas to represent each stage and adding buttons that link pages together in the right order depending on the choices.

You can try out an example branching activity in the FMS Community. This example has 13 different pages, including a landing page where students start the activity. The number of pages you need to create will depend on how complex you want your scenario to be.

If you’d like to try making your own branching activity, you can find instructions here: https://ncl.instructure.com/courses/30988/pages/creating-branching-activities.

360° Images

Prompted by the need to show students FMS teaching labs, we have added some information around 360° images to the FMS Community, including example images and how these images are captured, processed and made ready for viewing. This work results in images which can be viewed on screen or using a VR headset.

360 pan of lab showing navigation through the tour
This is a low-quality preview of the real output.

These images have a variety of uses, including:

  • allowing students to view places they may otherwise never see in person
  • allowing students to see facilities such as labs before they arrive on campus
  • students can familiarise themselves with the layout of a room or building
  • taking activities in a safe controlled realistic environment, for example identifying hazards without putting themselves at risk
  • helping students learning at a distance to feel like they are part of the institution

As well as single images, it is possible to connect a series of images to create tours. Users can then click one place to the next in a series of linked 360 images – like in Google Map Street View. Video tours can also be created.

Recently we used these images to provide a virtual induction to FMS labs as part of a health and safety course. To see the full case study, visit the FMS Community.

Accessibility and Ally

This week I have been working on how to improve accessibility of resources, focusing particularly on the four commonest issues flagged by Ally in Canvas. I have been working on the BMS Health and Safety course to check its accessibility. I found that while it’s easy to add an image description in the Ally view within Canvas, I wasn’t familiar with how to correct issues within the PDF itself. After a few searches online, I was able to come up with a guide to help others fix these issues. A quick summary is below. You can access the full walkthrough on the FMS Community.

The four commonest issues I found were; a lack of image descriptions, a lack of headings, the lack of document title, PDFs not being tagged.

Find the Original Document

These can be added under image formatting tools in Word and PowerPoint.

Add or Define Headings

Make sure you are using the built-in style galleries and slide templates to format your document. This makes it easier for screen-readers to understand the structure of the information.

Add a Document Title

This setting lives on the ‘Info’ tab of a file – one that I had never paid attention to before!

Tag your PDF

After you have saved your file, you can also export it to PDF from the option on the same menu. Go to the advanced settings area and you can make sure that your PDF maker will include bookmarks and headings.

You can access the full walkthrough for each of these steps on the FMS Community. More information about Ally and accessibility is available via LTDS.

New Zoom Features Released

Some new Zoom features have been pushed today, a few of which have some clear benefits for users in FMS.

Share Multiple Programs at Once allows you to share more than one window with your audience, without having to share the entire desktop. This will be particularly useful if you need to go between a PowerPoint and a webpage, or another piece of software. You can now do this without worrying about accidentally having your emails pop up! The windows are arranged on the participants’ screens exactly as you have them arranged on your desktop, allowing you to rearrange/overlap or change their relative sizes. The image broadcast will update as you do this. To start sharing multiple programs, select the screenshare of one window as usual, then hold Ctrl and click on any additional programs you’d like to include. When you’re ready, click ‘share’.

Suspend Participant Activity acts as a sort of emergency brake in case of serious disruptions. You can disable all microphones, screen sharing and videos at once to stop any disruptive behaviour and give yourself time to remove the unwanted user without the pressure of ongoing interruptions.

Click ‘security’ and then ‘suspend participant activities’ to halt participant input.

To update your Zoom client, click on your profile picture/initials in the top right of the main Zoom window and then click ‘check for updates’. Follow the prompts to complete the update.

The full list of changes can be seen in detail on the Zoom website.

The FMS Community has more detailed walkthroughs relating to security settings and managing disruptions in Zoom, including downloadable guides.

Creating Buttons in Canvas

We have recently added a page to the FMS Community showing how you can add buttons to your pages. To add a button to your page, you just need to add a little snippet of HTML in the required place, and alter the specifications to suit what you’d like.

You can view the full instructions on the FMS Community page.

The button code is simple to edit following the instructions above, and buttons can be used for a range of purposes, such as navigating forward and back through a course, or links to external resources.

They come in a range of predefined colours, and are automatically formatted to look in keeping with the rest of your content.

Buttons can make your content more visually appealing, and can improve ease navigation through content. If you have a link that you want to stand out, try adding a button to your page!