Summary: Adapt the Labeled Graphic Engage interaction and combine with a transparent video masterslide to have a video running in your Engage interaction.
Difficulty: Quite complex.

Even if Articulate Studio ’09 has been around for over 2 and half years, it is always possible to discover newish ideas. This trick combines a number of techniques that we have already looked at in previous posts.

How useful is it? Well, it all depends on what you are teaching of course. For those of you who simply don’t have time or the inclination to get to the ‘nitty gritty’, then you might give this one a pass but if your project needs a bit of ‘wow’ factor and you are prepared to get your hands slightly ‘dirty’ then read on!

Let us see a couple of examples first of what we are talking about:

Interactive Pond Demo

View demo.

Nuclear Power Plant Demo

View Demo

You should notice that the background image is in fact moving. In fact, we have replaced the background picture that we ordinarily find in the Engage Labeled Graphic with a video.

How do you do it?

There are two main steps to creating a Video Labeled Graphic Interaction.

1. Add your video to the masterslide Flash file in Presenter.
2. Create a special transparent Labeled Graphic in Engage.

Note that we need to make use of both Engage and Presenter for this to work. You will not be able to create a Video Labeled Graphic Interaction in Engage alone. Consequently, your published Engage will need to display from a presentation published with Articulate Presenter in PowerPoint.

Preparing The Video Masterslide

So how can we add a video to the masterslide? Adding a video to a masterslide in PowerPoint and then publishing with Articulate Presenter is not an option. Nor can we just add a movie to a PowerPoint slide using the Flash Movie option in the Articulate Presenter ribbon and then publish Engage on top, since Engage will remove the video.

So, as described in the article ‘How To Create A Background Animation In Articulate Presenter’, we need to edit the PUBLISHED files. That means that we publish our Articulate presentation with a regular masterslide and then swap a SWF file for our background animation manually afterwards.

That is not as complicated as it sounds.

First you need to prepare your video or background animation according to the following criteria.

• It is in SWF format.
• The size of the file is 720 pixels by 540 pixels.
• The framerate is ideally 30 fps
• There is no sound.
• The objects in the video do not move about!

That last point may sound strange for a video but note that the background video you use will be made to loop in Articulate Presenter, so if your Labeled Graphic interaction is going to make sense, your labels need to be on objects that don’t move about too much. Otherwise, you’ll find that the labels are not hovering above anything in particular.

The sort of things that you could use for a Video Labelled Graphic interaction are therefore limited. Processes, machinery, diagrams might all work. The camera angle or perpective must not change.

Note too that the audio of your masterslide will play, even if it is not being used ! So it is better to stay safe, and not have any audio. (It is simple matter to remove the audio that you may have in your source video when you come to convert to SWF). If you do need an audio background to your video, then you can add it as a regular audio file from Articulate Presenter.

Assuming you have a suitable video to use, you’ll need to convert it to the right format and size.

An easy and cheap way to convert your video is to use the free Format Factory.

If you decide to install this software, be aware that it will also add toolbars to your browser and add other programs unless you select otherwise. So read each page of the installation dialog windows carefully and uncheck everything you don’t need.

1. Open Format Factory and then scroll down in the menu of formats on the left until you get to ‘All to SWF’.
   
2. Click on ‘All to SWF’ and that will open a dialog box.
3. Click on ‘Add File’ and choose your video that you want to convert.
4. Click on the ‘Option’ button to trim or crop your video.

   

You don’t want your video to be unnecessarily long. Once the main process or idea has been understood, you can allow the video to loop. That will make a smaller file size and make viewing easier.

5. Now click on Output Setting:

   

6. This opens the Video Setting dialog box. You need to make the following adjustments:
   1. Change the video size to 720×540.
      

      This is not one of the predefined settings so type 720×540 over the existing setting.

   2. Change FPS to 30
   3. Change the Aspect Radio to 4:3
   4. Disable Audio to Yes.

   

Tip: You can save these settings by clicking on ‘Save as’ at the top of the dialog box. Next time you want to convert a video, choose ‘All to Custom’ rather than ‘All to SWF’ from the list of available formats on the left menu when you open up Format Factory.

7. Click Start from the main Format Factory ribbon and your video will be converted with the right specifications and saved to the default folder FFOutput in your My Documents folder.

Create A Special Transparent Labelled Graphic Interaction In Engage

You may have read this article about adding transparency to Engage and Quizmaker and you may have seen this example of a Labelled Graphic with a PowerPoint masterslide showing from behind:

If ever you need to link to a specific page in a presentation like in the example above and your presentation is on a regular server (ie. not an LMS) add the code ?=sliden to the end of your URL (where n is the slide number you want to link to).

We are going to use the same method as described in that article to create a transparent background for our Engage interaction which will allow our PowerPoint masterslide to show through once published in Articulate Presenter. But rather than have a graphic to click on, we going to remove it altogether so that users will click on the masterslide to get the labels to appear on.

Since it is not possible for the Labelled Graphic interaction to work in Engage without any image, we need to import an extremely small image that will be effectively so small for us to notice.

1. Create a 1 pixel x 1 pixel image in your favourite image editing software and then import that as your main graphic by selecting ‘Change Image’ from the Engage ribbon:
   

You can download a tiny image here (right-click the link and save the image to your computer). It’ll save you having to create it yourself.

2. If you preview your new interaction, you’ll find that the default settings cause the image to display something like in the image below with a large grey area at the bottom right:
   

   To get rid of that deformity of the image, go into Interaction Properties from the Engage ribbon and select the Colors and Effects tab. Go the Media Borders section and choose the Media border style ‘None’ from the dropdown menu as shown below:

   

3. Your Labelled Graphic preview should now look something like this:
   

   Make sure that the background of your Engage interaction is set to transparent.

4. Edit your existing Color Scheme by right-clicking on it in Engage and selecting Edit.
   
5. Set the transparency for your main background (see graphic below) to 100%:
   
6. Your Engage interaction is now ready to be published except that you have not placed the Labels in the correct position nor indeed added any information to your Engage Labelled Graphic. Since it is not possible to add a video as the master graphic in a Labelled Graphic interaction, placing the labels in the right position is going to be problematic. There are two ways you could tackle this:
   
   • The rough and ready method is by trial and error. Funnily enough, it is not too difficult to gauge where the labels need to be once you have had one go. You’ll just need to publish your Engage into Presenter each time and then manually copy over your video masterslide into the published files to see if it works.
   • Another suggestion would be to take a screenshot of your video (creating a still) and import that into Engage as your main graphic and use that until the labels are in the right place. Then, once all is fine, replace your still with your one pixel image to make your image invisible again.

Either way, if your labels are not quite right, you can always move them around later, so don’t worry if they are not right from the outset.

7. Publish your Engage interaction to Articulate Presenter. This will embed your Engage Labelled Graphic into your PowerPoint presentation.
8. Locate your Engage interaction and apply a masterslide to this particular Engage slide. If you are using PowerPoint 2007/2010, just right-click on the slide thumbnail in PowerPoint, and select Layout. That will bring up a choice of masterslides.

To help with your workflow, you might want to create a special masterslide for your Engage animation. Just go into masterslides, and type Engage Labelled Graphic and/or make it a distinct colour. Then apply that masterslide to your Engage interaction. This may help you later when you need to identify which masterslide to change in your published files.

9. Assuming your have finished your presentation, publish from Articulate Presenter to the WEB.

You could also publish to your LMS, Articulate Online or CD, but for this tutorial we’ll just look at publishing to the WEB.

10. Open up your published files by clicking on the ‘Open Folder’ button in the Publish Successful dialog box:

    

11. Open up the data folder and then the SWF folder. You might see some files like this:

    

    In reality, you’ll probably have a lot more files than you can see in the image above.

    Each file called slide(n).swf represents one of your slides in your presentation. The tb(n).swf files are your thumbnails. The bgd(n)l(m).swf files are your masterslides. You need to identity which masterslide swf file is being used as your masterslide for your Engage interaction. If you have an application associated with your SWF files, you can probably just double-click on it and view the file directly. I use Swiff Player which you can download for free here.

If you created a special Engage Labelled Graphic masterslide, you’ll now be able to find it very easily.

This is the file we need to replace with our video file.

12. Copy that file into your published files of your Articulate presentation. It needs to REPLACE the masterslide SWF file you identified earlier. You can just delete the old one.

Tip: Why not set up Format Factory to publish directly into your Articulate presentation’s SWF folder in the published files folder? That will save you having to copy it over each time. You’ll still need to change the file name. You can change the output folder from Format Factory by clicking on Option in the main ribbon.

13. Now relaunch your Articulate presentation and the new video masterslide will appear behind your transparent Labelled Graphic interaction.

Make sure you do NOT republish your Articulate presentation, or you will lose the changes you made to your masterslide. If you do need to republish your presentation because you want to make some edits to the Engage interaction, then you will need to manully copy over the video masterslide again to replace the one created by Articulate Presenter.

Tip: If you use the FTP function in Articulate Presenter, keep the Publish Successful dialog box open after you have published, make your manual edits, and then click the FTP button, to send your presentation to your server. Articulate will send your manually edited files!

NOTES

Remember that a background animation in Articulate will loop once it is played through once. Choose a video that will look fine if it loops.

Remember too that you will hear audio on your background animation even if if you don’t actually see it on a slide in your presentation. Consequently, make sure you remove that audio when you prepare your background SWF. I also noticed that audio caused the Flash animation to ‘stick’ – another reason for not including audio.

Your background animation will need to load before it plays so make sure it is as small as possible and test before you distribute.

This worked for me with PC versions of Internet Explorer 9, Google Chrome, Firefox 4 and Safari.

The Nuclear Power Station video was extracted from Youtube (without the audio). You can find the original here.

This post is tagged