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.

Difficulty: Medium

 

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

1. 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.

    

   

 

2. 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.

    

   

    

3. 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:

    

   

 

4. 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.

5. 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.

    

   

 

6. 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).
7. 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:

    

   

 

8. Now paste the entire folder into the content_engage folder of your Container interaction. Inside this folder, you should see something like this:

    

   

 

9. 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.

Here is the example I put together with the Element interaction and Container interaction from above.

 

 

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!

This post is tagged