Skip to main content

Creating web content for use in Articulate

Image
By

For those of you who are interested in exporting Captivate 5 SWFs for use in Articulate Presenter, there is an interesting dilemma preventing us from importing Flash Movies. We will address a workaround for the dilemma in this blog post. My hope is that this issue will become irrelevant as Articulate upgrades their standards, but for the moment it seems as though Articulate only recognizes Flash Movies written in ActionScript 2. The current design standard is ActionScript 3. ActionScript is essentially the code used to define the various flash components in the SWF. It was originally developed by Macromedia, but now Adobe owns it.

For those of you who are still using Captivate 4, the solution is actually fairly simple. When you publish your SWF file in Captivate, make sure that the settings are set to publish using AS2 (ActionScript 2). To import it, simply click on Flash Movie (in the Insert group of the Articulate ribbon) and locate your SWF file.

The Captivate 5 users will encounter problems, as there is no option to save using AS2. The only option is AS3, which Articulate does not recognize. What we are going to do is to create our own web content.

First step once you have your SWF content created, is to publish the content. (You'll notice under the Project Information tab, that the default ActionScript Version is AS3 with no options to change it.) Name your project what you would like and save it in your folder. Before you click Publish, make sure that under Output Options, the boxes for Zip Files and Export to HTML are unchecked (see below). You don't need the Zip and we are going to create our own HTML file. A quick note is that Articulate does not support any resolution above 720 x 540 at this time. Keep that in mind as you are publishing your SWFs.


Now open up explorer and browse for the folder that you just created. The default location for Captivate publications is:

C:\MyDocuments\My Adobe Captivate Projects\

Create a new folder called "Web Object" and put the SWF file in that folder. Once you are in the Web Object folder, you will need to create an html file called index.html. Prior to our retreat in September I emailed the team a file called index.html; if you still have that correspondence then just copy that file into your folder. If not then you will need to create one. Right click somewhere within the folder and click on New -> Text Document. Name that document index.html and then open it up in notepad. Copy the code below:

<html>
<body>
<object width="720" height="540">
<param name="movie" value="name of your file.swf">
<embed src="name of your file.swf" width="720" height="540">
</embed>
</object>
</body>
</html>

Make sure that the width and height values match the sizes of the published SWF, and that you replace "name of your file.swf" with the actual file name. I recommend doing this by right-clicking on the actual SWF file, selecting properties, and actually highlighting the file name, copying and pasting it into the text document. (nerd shortcut: you can also access a file's properties by simply clicking on the file and hitting F2). One time I created the html document, but I misspelled part of the name and the web object would not function right in Articulate, so I recommend copying and pasting. Code is particular like that.

So by now you should have a web object folder with a published SWF file and an index.html file. If you would like to test the html file, simply double click on it. It should open a web browser and play the SWF file (it will probably shove a security popup before it plays. Just click through it). At this point we are ready to import the content into Articulate. This part is so simple that I am not even going to explain how to do it; I will just show you an image of the import screen (click on the image to see it in better resolution).


The result is that your Captivate 5 project should appear fully functional in Articulate, and it should play the same way that a Flash Movie would. It is really not a complicated process, but it will be nice when Articulate is able to play well with AS3. As always hit me up if you have any questions

Labels:

Comments

Post a Comment

Popular posts from this blog

basic html tables

By
Hey all, I figure that I would expose you guys to the basics of creating tables in html. There are many ways to do this. The wysiwyg way of constructing a table would be to use the built-in eCollege table wizard, or to build a table in in MS Office or Dreamweaver. These methods offer limited customization, as is the nature of visual editors. In order to really customize every aspect of the table, you must have a working knowledge of the html used to create the table. The basic elements of a table are as follows: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 This is what the code for a basic table with a border looks like. And this is what that table would look like: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 The elements include table rows <tr> and table definitions <td> which are the individual cells. { As an aside, if you ever want to include an empty cell in a table, make sure you put the code: &nbsp;. That...
2 comments
Read more

Labbett button set

By
Hi again, So the first thing that I am sharing here is a button set that Mark uses in his courses. These buttons are currently found on the shared drive, but additionally I uploaded them onto a photo sharing site (picasa). I created a document with the image code and will walk you through inserting the buttons/icons into the course and week headers. The google doc with the code is found on the shared drive: Z:\Icons & Logos\buttons\img style.doc. Click on the images below to enlarge them Here is the main screen. What we would like to do is put an icon by Week 1. Make sure you are in the Author window and in the HTML editor. Find the icon that you would like to include and copy the code associated with it (underneath the icon) Paste the code into the html where you would like the icon. Normally this will be in the header. Put the img code between the brackets (it could also be depending on the header style). If done right, The image will appear beside the header. ...
3 comments
Read more

Canvas Conference: InstructureCon 2013

By
This last week I had the opportunity to attend Instructure's annual conference which focuses on it's flagship product, Canvas.  Founded in 2008, Instructure launched Canvas in 2011, and in that same year hosted its first annual conference.  The attendance at the first conference was meager, but in 2012 the attendance numbers grew to 600 attendees.  This year marked the third annual conference, with 1,200 attendees and a giant inflatable panda mascot flocking to the resorts of Park City.  Including staff and volunteers, some 1,500 people gathered to present and attend sessions.  After-hour festivities were themed based on the 1980's and included a conference carnival, visits from the Ghostbusters, a DeLorean (yes I had to google the spelling), and concerts from an 80's cover band and MC Hammer himself. The festivities were grand (and the 80's florescence was blinding), but the real value of the conference was obviously in the sessions.  Here are a few ...
Post a Comment
Read more