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
- 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.
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!
dave, you saved me. Sorry for the random comment. If it is removed for lack of relevance I will understand… I just wanted to let you know that its 3:30am and I can go to sleep now, thanks to your help with removing the white border from my flash presentation… you rule!
[...] 2, 2008 Click here to view a useful post on adding an Articulate Engage Interaction within [...]
This is a very useful post Dave. I tried your instructions and it works! Thanks so much.
I am both new to Articulate and new to the blog, but this site has allowed me to show of a couple of neat tricks that are already netting me a reputation of a whizkid. For this, my thanks. This embedding-thing is my personal favourite by far!
I have been able to create an embedded engage within an engage interaction that works when viewed from the engage.html file. Thank you for your tutorial. However, the interaction does not work once published with Articulate Presenter? Can’t get past the spinning Flash icon? Assistance would be greatly appreciated.
It’s been a while since I last worked with engage…
Now is asking for an update in order to work… but i’ve lost my serial…
Does ant one have any idea how can i make it work again?
Thank you
Hi Jose, you’d need to contact Articulate Support with a date of order, name of purchaser etc to be able to track the serial number.
[...] Hello Greg, The end of this article shows you how to insert Engage into Engage into Presenter. How To Embed Engage Within Engage I find it easier to edit the project files of Presenter when putting an Engage within an Engage. [...]
Hi there,
I was wondering if you might be able to shed some light on this issue I am finding. I have been able to run the SCORM files correctly in Blackboard, however within the engage files I have further embedded engage interactions that form part of each of the sections. I have been able to run these previously by copying across the correct folder and then unpacking the zip files in Blackboard, but now that I can publish to SCORM they don’t seem to open. Have you come across this before, and if so do you know of a work around for it.
regards
Hi Dom, If you are using Engage ‘09, there was an issue with opening Flash movies in a new window that also affected the “Engage within Engage” interaction. That has been resolved with the new Studio release which I would encouragage you to install. You can get it here: http://articulate.com/products/upgrades/studio09/20081118_1922.php Otherwise, I am not exactly clear on the issue. What are you publishing to SCORM? The Engage interactions direct as standalone to your LMS? Or are you embedding the Engage interaction to Presenter and publishing that to SCORM?
Hi Dave,
thanks for getting back to me, i will install the update and see if that proves to help my issue. In terms of answering your questions, i am publishing an Engage ‘tab’ interaction into our LMS (Blackboard) well several actually. Within these tab interactions, i have further embedded interactions that i have craeted (so both circle and Pyramid etc.). I followed your instructions above previously when i published to ‘web’ and i have been able to embed them and run the tabbed interaction with the embedded circle, or pyramid interaction running inside it. However i want to publish the tab interaction to SCORM because in Blackboard you can setup specific items for grading and tracking which would be useful for our College. However when i come to run the embedded interaction in one of the tabbed sections it does not open; i just get the loading screen. Would it be best to publish to Presenter then SCORM? Do you know of a work around to this?
Thanks again
Dom
Hi Dom, As far as I can see nothing has changed from Engage 1.2 to Engage ‘09 except that Engage ‘09 is now SCORM and AICC compatible. This means that if you want to embed an Engage element within another Engage container, you will want to publish the element to the WEB as usual, while the Container, you will publish to LMS. You need to copy over the regular files into the zip file, making the necessary name changes before you copy over if you want to avoid unpacking the zip file, then upload that zip file to your LMS. I tested in Articulate Online and it worked. http://daveperso.articulate-online.com/9378822340 (Note that with Articulate Online, the file ending is .en2 which you need to temporarily change to zip to make the changes and then change back to .eng2) I also tested on a regular LMS and it also worked. Here it is in Moodle. http://www.mediaenglish.com/moodle/mod/scorm/player.php?scoid=7&id=4
Perhaps the issue was that you were trying to open the Engage element in another window and this was not working in the previous version of Engage ‘09.
Hi Dave,
thanks for your help i have managed to get things to work correctly in Blackboard now, after much deliberation over the last few weeks.
Thanks again
Hi Dave,
just a final point that i wondered if you could clarify or of you had come across before. I have embedded hyperlinks into the engage content so you can open documents or link to external webpages from the engage content. However when i come to try and open them in Internet Explorer the window opens breifly and then closes again, but when i try to open them in FireFox or Safari they work fine. Just wondered if this was an issue with Articulate software or if you had come across this before.
Thanks
[...] talks about the idea. You can get more detailed instruction on how to place Engage within Engage here. Regards __________________ Dave Moxon ********************************* Customer Support [...]
[...] Re: engage in engage to new computer issue I think Sam is on the right track. Look at Dave’s blog. He explains how to insert engage in engage. How To Embed Engage Within Engage [...]
[...] Re: Embedding Breeze in Engage Not knowing how the breeze structure is set up, it’s hard to provide specifics. Essentially, Sam is correct. When you insert the .swf, most likely the Breeze .swf actually needs to pull information from other files. So after you publish the Engage file, you need to go into the published folder and look for the inserted Breeze .swf. Take the content from the Breeze folder and place it in the same relative location with the inserted swf in the Engage folder. Dave’s blog post on inserting Engage inside Engage offers the same concept. How To Embed Engage Within Engage [...]
[...] within Engage Hi, I’ve been followng the tutorial at How To Embed Engage Within Engage I’m able to get everything working until I want to add the main container interaction to [...]
[...] Ahh found it, Daveperso
Hi Dave,
This is awesome!!Thank you for sharing this with everyone..it works and I have been able to design some very creative content using this feature.
Thanks for posting this all in one place! I’d LOVE to say that it worked, but I have a problem…
I’ve been trying to embed an Engage presentation into another with no luck. I got through most of the steps thanks to this blog, but even after I do these things, I get a continuous “loading” circle in my presentation when I publish it to the web.
I’m trying to put a media tour interaction into a tabs interaction. Have any good hints? :D
Thanks in advance!
Hi Julie. It does work. I just tested! You can see a demo here. I guess you are missing just one little thing and it is not loading. I have zipped up the published files of that demo which you can download here. It might help you to figure out what is happening. Make sure you are not uploading the published files via the Articulate FTP tool as that won’t upload the files you moved manually. Regards.
Thanks so much! I have been wanting to do this! It seems so parochial to go back to PowerPoint between Engage Interactions. Now I can move between Engage interactions as I wish, especially when I need to refer a learner back to a lesson before proceeding (such as, “If you have not yet installed Flash, you cannot proceed with this software launch, so go back to lesson X for instructions and come back when you are done”. They rarely take us seriously about those Flash installation requirements and I lose them in the process.)
Note: Posted in the forums, but then thought this was a better location.
Embedding works great. One thing I have noticed:
Engage 1.1
Outside interaction – Tab
Inside (Embedded) interaction – Labeled image
When the zoom button on the labeled image is clicked (embedded mode), the image zooms as expected. However, the click area to close the zoom image is different than the image location. It seems to be the upper right band of the tabbed area.
Any thoughts on adjusting the click area.
A workaround is to zoom in a new window, or to disable the zoom feature, however would prefer the normal embedded zoom option.
Thanks,
Todd
The 2nd part of this very useful article deals with adding Engage within Engage to Presenter and I’m wondering if the it’s still valid now that we don’t have the Articulate Presenter/Powerpoint project folder but instead the presenter project file. Any thoughts?
Hi Kai,
Thanks for your question. Yes it is still valid but you’ll need to work with the published files only rather than copying the files to the Presenter project files. ie. it is a little more tedious because every time you publish you need to copy the Engage files over. However, I’ll let you into a little secret (!). It is possible to open up the PPTA file to slip in your Engage files and I intend to update this article to mention that. Use the program 7-zip to open up the archive. I’ll let you figure out the rest !
Hi Dave,
This is indeed a very helpful article. I have been able to successfully follow your instructions and use nested engage in presenter. However, I have a problem in that quiz maker quiz does not load if I use it in presenter file with nested engage on another slide. I have posted this question on the forum as well.
Here is a screencast of the issue:
http://screenr.com/F18
Thanks alot. :)
Hi,
I have been trying to embed 2 element engage interactions (pyramid and tab) in to a container interaction (process) but have been unsuccesful. Can someone please help me. At the end, the container (with embedded elements go to a course in powerpoint. Please help.
Regards,
Swati
Hey Dave,
First off, excellent tutorial!! Secondly, I was wondering if there is any way to (say editing the xml files generated by the interactions) to remove the un-needed space from the container interactions, such that the embedded interactions don’t have to shrink. I can increase the size of the embedded interactions by embedding engage within presenter, but I would still like to be able to modify the default interaction screens to make room for full-fledged embedded interactions. Can I use Articulate SDK to do this? Please let me know.
Sincerely,
Jay Mahendru
Hi Swati, Thanks for your comment. It is difficult to help out here without seeing what you have done. You can upload your published files here for me to take a look if you wish. Contact me at daveperso@me.com and I’ll send you the password to view the site. Thanks!
Hi Jay, I don’t know if the Engage SDK might help but I doubt that the Presenter SDK will help. You can of course have the element interactions option open “Full Size” rather than embedded. To get the maximum size of embedded interactions, the end of this article gives some idea of dimensions. Best wishes,
Does this work if I publish with LMS? That’s what I am trying to do. Please let me know.
Hi Swati, yes, there is no reason why this should not work on an LMS. You’ll need to publish to LMS first, edit the published LMS files and then upload the manually edited content to your LMS as usual. Hope that helps.
I love this and suspect it WILL solve my need.
I got the procedure for making a stand-alone Nested Interaction working with no problem at all.
BUT when I tried to follow the instructions at “Adding Engage within Engage to Presenter” I was “at sea” by the third paragraph.
Specifically the paragraph that begins “And rather than navigate to your Engage project folder…” and ends with the line “you will see a folder called something like engage_257.”
I have been looking for hours and cannot find a folder anything like “engage_257.” I thought it might be that I have dozens of iterations of the PPT file, so I moved the set into an empty folder; then republished the E in E Container again. No “like engage_257″ folder. I tried sorting by date and time to see if I could find a folder or file that matched when I published. Nada.
What is particularly frustrating is that I actually HAVE a beautiful working E in E Interaction, but I cannot connect it to my working Presentation. Arrrrg! (Please note piles of hair on floor next to chair.)
Can you tell me more precisely what I am looking for and where it might have hidden?
Help will be appreciated. Thanks, JP
Does anyone know if you can change the size of the font inside engage interactions (like the font size in the pie charts to a little bigger?)
Thanks!
This has been really helpful, I was able to follow along until it got to the part where i needed to “go to your Articulate Presenter/Powerpoint project folder, and you will see a folder called something like engage_257″
What is this Articulate Presenter/Powerpoint project folder? I have published the content engage to the powerpoint, but no folder is created out of it…
Your help is greatly appreciated!
Hi Jen, Thanks for the comment. The article was written for Presenter 5 (our legacy version of Presenter ‘09) and Engage and, at that time, the project folder was easily accessible. Now, you can still access the project folder but you first need to unzip the PTTA file that comes with your PPT or PPTX file. You can unzip it with a program like 7-zip. Of course, you can just edit the published files but it means you have to do it every time you publish in Presenter. Editing the project files means that you can publish in Presenter as many times as you like once you have edited the Engage within Engage files. Hope that makes sense. Dave