When you edit Articulate presentations AFTER they have been published, it often involves manually placing files in the Articulate published file folder. This can be the case with Embedding Engage into Engage (although, as I pointed out in the post about this, this should not be necessary – see below), inserting some Camtasia and Captivate movies, or when linking to an FLV video from a SWF Flash file. There is nothing wrong with that, of course, and it can give some great results, but what if you want to upload your presentation to an LMS or to Articulate Online? How can we get those manually inserted files onto those systems, since we place those extra files AFTER we publish in Articulate Presenter or Quizmaker.
Publishing to LMS and Articulate Online
If you are going to publish to either an LMS or to Articulate Online, and you have edited the published files AFTER you published in Articulate Presenter, then you won’t be able to rely on the automatic publish options available. You are going to have to upload your file manually. Publishing manually means publishing to LMS in Articulate Presenter (even if you want your presentation to go to Articulate Online) and then editing the created zip file (or art5 file in the case of Articulate Online).
When you publish to LMS in Articulate Presenter, choose the type of LMS you want to upload to: SCORM 1.2, SCORM 2004, AICC or AO (Articulate Online):
If the AO option is not appearing when publishing to LMS in Articulate Presenter, you need to check “Enable publish for manual uploading to Articulate Online) in Articulate -> Library and Options -> Other.
Then navigate to the zip file or the art5 file. If you are wanting to upload to Articulate Online, then you will have created an art5 tag file like mypresentation.art5. To edit that art5 file, change the tag to zip, so that your file becomes mypresentation.zip.
Now, double-click the zip file to view the contents (no need to unzip), and continue opening folders until you navigate to the folder where you want to edit the published files. In the example below, I want to insert an FLV file to the player folder so that it will run when I launch the SWF shell in my published Articulate Presenter course. So I simply copy the FLV from where I had prepared and saved it previously, and drop it into the player folder. Dropping the FLV file into a zipped folder, will automatically zip the FLV file too. Navigate back up and you have your edited published files ready for upload.
If you are going to upload to upload to LMS, you are done and you upload the normal way, probably via the LMS directly. If you are to upload to Articulate Online, then change the zip tag back to art5, and you too are ready for the manual upload.
Log on to your Articulate Online account, select the Content tab and then choose Manual Upload.
Upload your art5 file and then view your FLV playing perfectly from your Articulate Online account.
Engage within Engage
So long as you have access to your Presenter project files, you should not need to edit the published files of a presentation in which you have embedded Engage within Engage, and so there is no need to do anything other than publish automatically and directly from Articulate Presenter.
The Articulate Presenter folders are located in the same directory and the same level as your PowerPoint file, and it will have the same name. When you open that folder, you will see an engage_257 folder (the name can change, particularly if you have more than one Engage interaction in your presentation). Your embedded “Element” interaction needs to go inside this folder.
The best way to create an embedded Engage within Engage, is to insert the embedded Engage into the container Engage in the PROJECT FILES of Articulate Presenter, and not the published files. Edit the Engage interactions in the PROJECT FILES, and you will see that Articulate Presenter will conserve your Engage within Engage interaction in your published files. So you can actually publish direct to Articulate Online or to LMS by FTP from within Articulate Presenter if you like.
If, on the other hand, you edit and create your Engage within Engage in the published files, then you will need to manually upload as described above. But why bother? Edit the project files and not only will you not have to worry about unzipping and zipping up again, it will also prevent you from editing the published files EVERY TIME you publish.
Summary: If you edit the data.xml file for Engage, you can specify the size of a Media Tour interaction video or image.
While you can pretty much change all the published sizes of embedded videos in the Engage interactions, there is one interaction which defies all video size customization and that is the Media Tour Interaction. If you insert a SWF video or FLV video into the Media Tour Interaction, it will display at its original size or reduce it to fit, if it is too large.
Large video, small file size ?
Sometimes, you may want your video to be as small in size as possible for bandwidth reasons. If you want to publish your video so it fits the Engage Media Tour screen then you need to have your original video also at a large size, say at 640 x 480 pixels. to fit the Media Tour interaction window size. Inevitably, that means your video will be larger in file size too and so may cause downloading problems.
So what if you could use your original small file size video and have it play larger? The quality may not be quite as good but at least your video runs smoothly.
Here is a video published encoded in Flash FLV at its original size (320 x 136) and then embedded into Engage. It has been converted from mov to FLV.
It looks ok but it doesn’t fill the screen and I’d like it to.
Here is exactly the same video file but this time it has been made to fill the screen out:
The quality is acceptable and the video is easier to view.
How do you do it?
Since this cannot be done within Engage itself, you need to edit the data.xml file which comes in the published files of your Engage Media Tour interaction. Locate the data.xml file which is in the engage_content folder of your published files and open it in Wordpad or a similar text editor. You’ll see something like this:
Notice the references at the end (highlighted in the red box) to the size of the video. Simply change these figures to the size you want (for example, an image width of 640 and an image height of 360) and then save the file.
Without republishing in Engage (as this will cause the size figures to revert back to the original size), double-click on the engage.html file to launch the interaction and you will see your video is playing at the new size. You can even upload your interaction via the inbuilt FTP service of Engage providing you edit the data.xml file just before sending the file by FTP but after you have published.
Many users of the Articulate Rapid E-Learning Studio Second Edition resort to using Techsmith’s Camtasia application for taking video screen captures of their screen which they then embed into Articulate Presenter or Engage. There are two main ways of doing this and this article looks at the first method which is essentially the easier way. There is no ‘hacking’ as such, but you need to be aware of a few settings.
METHOD 1: Embedding SWF files into Articulate Presenter/Engage
By far the easiest way of embedding Camtasia screen captures into Presenter or Engage, is to encode your Camtasia capture directly into SWF format.
Setting the size of your video.
Resizing a video reduces the quality of the finished product, so it is a good idea to do your screen capture AT THE SAME SIZE as you wish to show it in Articulate Presenter. Resizing a video can cause playback issues and generally reduces the quality and clearness of the published video, so your best bet is to avoid resizing from the beginning to the end of the process.
Decide how big your video will be in Articulate Presenter. If you are playing in the slide in “Standard” view, your video can be no wider than 720 pixels and no higher than 540 pixels. If you are viewing your video in “No sidebar” view, then you can push the width of your video to about 920 pixels. Don’t forget that once imported, you will not be able to change the size of your published SWF but you WILL be able to change its position. By way of example let us go for a video size of 920 px by 400 px, to leave us some space at the bottom or at the top of the slide for a title.
Preparing your recording screen
Next, try to recreate what you are trying to capture in a window of 920 px x 400 px. Open Camtasia 5, and choose “Make a recording” and then “Select area to record”. Now prepare the subject that you want to record and try to make it appear in your box, either by reducing the size of the application window or by concentrating on just one part of the application. Use your cursor to make a box which is exactly 920 px x 400 px. In the screenshot below, I have made an area which covers the Articulate Online product site on the Articulate website by resizing the internet browser.
Record your video, and when you have finished click “Stop” and your video should appear in a preview window. Choose “Save”, type a name for your video, and then choose “Edit my recording”. It is important, at this stage, to choose the right size for your video as Camtasia 5 tends to place your video in a default 640 x 480 screen or other. In the “Project Settings” dialog box, select the “All” presets and then choose the “Recording dimensions” as your preset for your video. This will ensure that you encode your video at the size you recorded it at.
Once you have finished editing your capture in Camtasia, then, if you are using Camtasia 5, choose “Produce Video As” and then select “Custom Production Settings”. Finally choose Adobe Flash output for your screen capture and click “Next”.
Unlike previous versions of Camtasia, Camtasia 5 has a Flash template called ExpressShow, which adds a player control right at the beginning of the video resembling the videos on YouTube and other similar sites. This template is not compatible with the Articulate Presenter player. When using this template, the Camtasia video will not play the first time the slide is viewed, though it will play on subsequent visits. So you must not use the ExpressShow template. Instead you can opt for the “Legacy SWF output” Flash template.
Once you have selected the “Legacy SWF output”, click on the “Flash Options” button:
This will open the “Flash Options” dialog box where there are a number of settings we need to change:
- Change the frame rate to 30 fps. By default this is set to automatic. When you look at the various options, you will see that 30 fps is not a suggested setting. However, you can type 30 via the keyboard. Having a framerate of 30 fps ensures maximum compatibility with the Articulate player.
- If you want to make your video file smaller and quicker to load, and then select Using “JPEG compression”.
- Choose the quality level of your JPEG compression. 50 may well be good enough for most uses but test. If you find that your file is too large, or the quality is not good enough, change this figure. Make it lower to reduce file size and higher to increase quality.
- Change the background color of your video. This is not important if you are using the Legacy SWF format.
The other settings need not be changed in the “Flash Options” dialog box. Click “OK” and this will bring you back to the “Production Wizard”.
Make sure that the size is the same as your recording and if necessary change the size settings:
Finally click “Next”. Click “Next” again unless you want to add a watermark or add copyright information about your video, “Next” again for the “Marker Options” (there are no marker options), and finally choose the “Production name” for your output file. You can leave the default settings. Click “Finish” and the encoding process will begin.
Embed your video in Articulte Presenter or Engage.
Now, all that is left for you to do is to import your Flash movie via the “Import Flash Movie” tool in Articulate Presenter. Leave the default settings (Play Flash movie and slide in sync), click “Next” and “Finish”. When you publish your presentation with Articulate Presenter, you should find that your video plays fine and that you can control it via the Articulate player controls. Here is a little demo showing the video of the Articulate Online tutorial page that was prepared above.
Similarly, you can insert your Flash movie into Articulate Engage as per normal.
In another article, I’ll talk about the second method of embedding Camtasia files into Articulate which includes knowing how to insert a multiple-file Camtasia project into Presenter and Engage.
I have set up a number of demos either via the forums or through some blog articles on Gabe Anderson’s Word of Mouth blog and most of them are stored on Articulate Online which allows me to see which are the most and least popular. So I thought you might be interested to see the top ten of all time, as of 14th March 2008.
Here they are !
This has been a very popular demo and has only been out a short time. It relates to this 101 article I wrote about hyperlinks.
The first demo of an article about how to remove the controls completely or change the controls in the Full Slide view in Articulate Presenter. This demo is not very interesting at all but it was the first of three so got the most hits ! However, it shows how the article got some interest. The other two come in postion 4 and 5.
The ability to house Captivate content in Presenter and Articulate software remains popular.
The second demo of this article which shows how to change the controls in the Full Slide view.
The third and most interesting of the demos. There are no controls at all in this demo other than the hyperlinks.
This shows how you can use the SDK to point different Engage steps to different Presenter slides.
We often want to add more than one SWF to a slide and this demo shows that it can be done.
Another demo showing how to incorporate a third-party application into Articulate software. Expect another article soon going into more detail about how to do this.
Part of the 101 series, this demo relates to this article written last month about how to make your Engage interactions fit in better with your PowerPoint slides.
That’s it for this month. We’ll see how interest develops next month! If you’re interested in seeing the other demos (over 60 publicly available), just drop me a line and I’ll add you to my user list. You’ll have access to the portal. Not all of them are worth writing home about but some may give you some ideas.
Summary: If you manually copy published Engage files into the published files of another published Engage interaction, you can make even more sophisticated interactions which can be viewed standalone or embedded into Articulate Presenter.
Pretty soon after Engage was released last year, I was reading on the forums how some clever people (Doofdaddy) had managed to insert one Engage interaction within another. A few of us then went on to explore this further and I wrote up one of many threads in the forum giving some of the ins and outs of the procedure. There are still quite a few enquiries about this so I thought it might a good idea to publish a “real” reference post on the subject. Because it is not really supported by Articulate, this article is on my own blog ! So here it is!
While Engage was not specifically designed to create interactions which would then be inserted within other Engage interactions, the procedure is actually quite straightforward and involves manually copying and pasting the content folder of one interaction into the content folder of the other. It applies to all interactions and you are therefore able to embed any type of Engage interaction into any other type of Engage interaction.
So how do we do it?
Adding Engage within Engage Standalone
- First create your “embedded” or “inserted” interaction. Let’s call this interaction the Element interaction. This inserted interaction is the interaction which will be embedded or inserted into the other interaction which we will call the Container interaction. It can be of any type and content. And you can have several Element interactions inserted into a Container interaction. This is a mockup of a Circle Diagram Element interaction that I am going to place IN a Container interaction.
- Second, start creating your Container interaction. This is the interaction which will contain or house the other inserted Element interaction which you have just made. This is a mockup of a Tab type Container interaction which will contain the Circle Diagram Element interaction above.
- Decide where you want your Element interaction to be placed. It must be added via the “Add Media” or “Change Media” options as shown below:
- Locate and open the engage.swf of the Element interaction which you want to insert:
You will see the default loading image of Engage appear in the preview window.
- Now, set your Multimedia Properties. If you want your Element Engage Interaction to appear within your main Container interaction rather than replacing or covering your interaction, select “Embedded.” If you want your second interaction to temporarily take up the whole of the “stage,” then select “Full size.” Your user will be able to close the second Element interaction to come back to the main Container interaction.
- When you have finished the rest of your Container, you can publish to the Web or Presenter. Let us consider, for the moment, that you are publishing a standalone Engage interaction and so you will publish to the Web. (Publish -> WEB).
- The next step is to copy the content folder of your Element interaction (the first one) and place it in the Container interaction. Navigate to your first Engage interaction which you created at the beginning. Copy the engage_content folder:
- Now paste the entire folder into the content_engage folder of your Container interaction. Inside this folder, you should see something like this:
- Finally we need to manually change the name of the folder so that it will link up with the .SWF file that we have inserted and that we can also see in this folder. Notice that it is called swf0.swf. We need to rename our folder as swf0_content so that our files will look like this:
That’s it. Just locate the engage.html file of the same Container interaction and you should find that your Element interaction will play within it.
Adding Engage within Engage to Presenter
So that’s how to put an Engage interaction within another Engage interaction, but what if you want to put the whole lot into a Powerpoint Presentation and publish it with Articulate Presenter?
Well the procedure is pretty similar to the above except that in Step 6, you publish to Articulate Presenter (and not to the Web).
And rather than navigate to your Engage project folder as you did in Step 7, you now go to your Articulate Presenter/Powerpoint project folder, and you will see a folder called something like engage_257:
Open that folder and, lo and behold, you find the engage_content folder in which you are going to place the Element interaction folders exactly like in Step 8:
Make sure you change the name of the folder as explained in Step 9 above:
and you are now ready to publish from Articulate Presenter. Of course, you mustn’t republish your Engage interaction again from Engage or you will lose those files that you just manually entered. But you can now continue to edit your Powerpoint presentation, adding slides etc. When you finally are ready to publish your presentation, Articulate Presenter will automatically pull in those files that you were prepared so that your presentation will now include a slide with Engage within Engage. If you are using Articulate Online or indeed any LMS, this is great news as you won’t have to modify the files before uploading your published presentation.
Here is an example Articulate Presenter presentation that I made using the above interactions. I changed the colors a little and added a second Element interaction for the second tab called Past Tenses.
There are no ends to the combinations of Engage interactions that you can make. A few months ago, a user on the forum wrote a post wanting ideas on how to compare two parallel timelines (the timelines of two companies). Using a Tab Container interaction and two Timeline Element interactions, the result could be something like this.
Another example shows how you can give more detail to an image by actually creating an Engage interaction for each part of the image using the Guided Image and Labelled Graphic Interactions. In fact, the only limit is your imagination!
- How To Link From Engage To Presenter
- How To Add Quizmaker ’09 to Engage ’09
- How To Link From One Presentation To Another – Part 1
- How To Add Captivate To Engage ’09
- Reading Articulate Presenter 5 CDs With Flash 10
- Cheating in Quizmaker
- Creating A Hotspot Game In Presenter
- Controlling Audio In Engage
- Changing Default Timings In Engage
- Viewing Presentations Locally
- Adding A Sound Logo To Your Presentation
- Creating On-Click Triggers in Articulate Presenter