Embed code available for Dragster 3

Following requests we have added a facility to embed your Dragster 3 activities in blog posts and web pages using a similar method to that provided by YouTube. On your Dragster 3 activity publish page you will now find a Dragster 3 activity embed code displayed near the bottom of the page (see below). Select this code and copy to your clipboard (Ctrl C or right click and select Copy – see below).

Paste this code into the HTML of a blog post or the HTML of a web page to display your Dragster 3 activity.

Tips – You can amend the dimensions of the embedded activity by editing the values of the width and height attributes in the embed code. You will want to maintain the same ratio between width and height. So example dimensions for a landscape Dragster activity are 900 by 490, 600 by 327, 450 by 245.

You can disable the embed facility in the Dragster 3 activity settings.

Example

Below is an example embedded Dragster 3 activity embedded with a width of 600 and a height of 327:

<iframe src="http://www.webducate.net/dragster3/publish/embed.php?c=Nt5HaqTiHPMI" width="600" height="327" frameborder="0"></iframe>

Embedding Dragster 3 drag and drop activities into Adobe Captivate 5

Dragster 3 offers a great way to add drag and drop activities to e-learning resources created with Adobe Captivate. The process of embedding a Dragster 3 activity in Captivate involves a number of steps described below:

1. Publish your Dragster 3 activity using the Embed activity publish option and extract the zipped files (more details on the Embed activity publish option).
2. Create a new blank Captivate project. In this case I am choosing to use a project size that will fit a Dragster 3 landscape activity (1024 x 576).
3. Select the Captivate slide where you wish to add the Dragster activity. Use the Insert > Animation menu option.
4. Browse to and select the published Dragster 3 activity SWF file.
5. You may see a warning at this point about the version of actionscript. I have found that this warning can be ignored, so click Yes.
6. The outline of the Dragster activity will now appear on the slide. You will need to change two Captivate properties for this inserted activity in the right hand properties panel. Make sure the activity is selected on the slide, then expand the Timing box in the properties panel. Edit the display for a specific time and allocate the appropriate number of seconds.
7. Now expand the Transition box and select No transition. You have now finished inserting the Dragster activity.
8. Save your Captivate project. Once you have completed the other aspects of your resource, you are now ready to publish the project.
9. Select the menu option File > Publish to display the Publish dialog. You can leave most of the publish settings in their default values, apart from one preference. Click the Preferences… button to reveal the preferences dialog.
10. On the preferences dialog on the Project > Publish settings page, Externalize resources list check the Animations option and click OK.
11. Now publish the Captivate project. Once complete select No to Do you wish to view the output. There is one more step for you to complete before you can test your resource.
12. Open your published Captivate project files folder and the published Dragster activity files folder. Copy the SWF file and folder from the published Dragster activity into the published Captivate project files folder. Select Yes to replace the dragster SWF file already in this folder.
    
13. Now you can test your Captivate resource by opening the appropriate HTM file with your browser. An example Captivate resource created by following these steps is shown below (View this example Captivate).

Dragster – Using the embed activity publish option with Wimba Create, eXe and CourseLab

In March 2010 a new publish option was provided for Dragster 3 activities called the Embed activity option. The format of the activity files published via this option have been specifically designed to facilitate the integration of the published Dragster 3 activity into e-learning resources created with other common authoring software. The steps by which an embed activity can be integrated into an Articulate Presenter presentation have been described in a previous blog post. This post will review how this publish option can be used to quickly and easily add Dragster 3 activities to resources created using other authoring software such as Wimba Create, Exe and CourseLab.

To publish a Dragster 3 activity using the Embed activity option click on the Embed activity link on the publish dragster activity page as shown below:

Extract the downloaded zip file to view the files making up an activity published in this format. These consist of a SWF file and a folder containing all other related activity files that have the same name (see below). These file and folder names are important and should not be changed.

In general terms the steps involved in adding a Dragster 3 activity published in this format to your e-learning resource or course are:

1. To embed the activity into your e-learning resource you should use the normal options available for inserting a flash movie according to the software involved (see below for specific details).
2. If you have multiple Dragster activities, insert each related activity SWF file at the appropriate point in the resource.
3. Publish the resource.
4. Copy all the embedded Dragster activity folders into the published resource files (usually at the root level).
5. View the resource.

Wimba Create (Coursegenie)

1. At the appropriate point in your MS Word document select the Interaction > Media options in the Wimba Create menu.
2. In the related pop-up:
   • select the Flash option
   • for File browse to the published Dragster 3 activity SWF file
   • define the Display as Width 600 and Height 660 for portrait activities Width 900 and Height 490 for landscape activities.
   • Check the Autostart option (leave the Loop option unchecked).
   • the accessibility tab allows the entry of a long textual description of the activity and for the addition of a link to download a flash player.
   • click OK to embed the activity.
3. Repeat the previous steps to insert other activity files at appropriate points.
4. Publish the course files using the Generate Course menu option.
5. Copy all the Dragster activity SWF files into the Wimba Create published media folder.
6. Copy all the published Dragster activity folders into the root folder of the published Wimba Create course.
7. View the Wimba Create course by opening its index.html file in your browser.

eXe – e-learing XHTML editor

1. Open the eXe editor and at the appropriate point in your content, select the Flash with text iDevice.
2. Using the Select Flash Object button browse to your unzipped dragster activity folder and select the SWF file.
3. You will need to size the activity appropriately in the eXe iDevice using the dimensions below :Dragster 3 – Portrait 600 by 660 – Landscape 900 by 490

   Dragster 2 – 700 by 560

   Tip – you can scale the embedded activity by using smaller dimensions while keeping the height and width in the same proportions (e.g. Dragster 3 Landscape at a scale of 80% – 720 by 392).

4. Repeat steps 1 to 3 to insert multiple Dragster activities.
5. Export your finished eXe resource (e.g. File > Export > Web site > Self-contained folder).
6. Copy all the published Dragster activity folders into the same folder as the other eXe exported files (if eXe exported a zip file, you will need to extract this zip file before copying these files).
7. To view the finished eXe resource open the index.html file within the eXe exported folder.

CourseLab

1. On the appropriate CourseLab slide use the menus to select Insert > Object and expand the Media section and drag a Flash object on to the slide.
2. Resize this flash object to make it as large as possible.
3. Right click on the Flash object and select properties.
4. For the file option, select the SWF file for your published Dragster activity.
5. Repeat steps 1 to 4 to add multiple Dragster activities to your CourseLab course.
6. Publish your completed Courselab course on to your PC and extract the published zip file.
7. Copy the published Dragster activity folders into the folder called 1 (you should see a file called start.html within this folder). Now test the course by opening start.html inside the folder called 1.
8. Re-zip the course for upload in your VLE.

Improved Dragster 3 – Articulate integration

Until recently the only way to embed a Dragster 3 activity in an Articulate presentation was to use the Web Object option. This approach suffers from a couple of drawbacks in that Articulate player elements (e.g. pop-up windows for notes and attachments) would disappear behind the Dragster activity and also the authoring process wasn’t straight forward as you would have to publish the dragster activity on-line and independently of the articulate presentation. With recent updates to Dragster 3 you can now use the Flash Movie option to embed a Dragster activity which avoid these drawbacks.

The steps involved in embedding a Dragster 3 activity are:

1. Author your Dragster 3 activity in the usual way (Tip – use the landscape layout option as this fits best into an articulate
   presentation)
2. Publish your Dragster 3 activity using the Embed activity zip download option
3. Unzip the downloaded activity files. You will see they consist of a single flash SWF file with a name like dragndrop1023.swf and a similarly named folder which contains the rest of the activity related files.
4. In Powerpoint click the Articulate, Insert Flash Movie button. Browse to the SWF file for your published Dragster activity and click Open.
5. In the Flash Movie settings change the Advance to the next slide option to When user clicks next and Synchronisation option to Movie displays independently of slide. Click OK to finish inserting the Flash movie.
6. The embedded Dragster activity will be displayed as a blank rectangle which will extend beyond the edges of the powerpoint
   slide. Resize this activity by dragging the handles at the sides and corners of this rectangle for a more appropriate fit (Tip – hold down the shift key when resizing to maintain the aspect ratio of the activity). NB – if you set this slide’s articulate Slide properties to Change view to the No sidebar display option you don’t have to resize the embedded Dragster activity!
7. Repeat the activity and publishing process described above for each activity you wish to add to the Articulate presentation.
8. Publish the completed Articulate presentation.
9. Copy the folders of the dragster activity related files into the root folder of the published Articulate presentation.
10. Finally view your Articulate presentation (example presentation).

Hopefully this new approach will make it even easier to create rich interactive resources using Articulate and Dragster 3!

Other tips

Use the Dragster 3 transparent skin option to seamlessly blend your activity into the articulate presentation.

How to create a video based Dragster activity using an FLV file

In the previous blog post instructions were provided on how to create dragster activities that used a youtube video as the dropzone. In this post a similar set of instructions and files are provided that demonstrate how to create a video based Dragster 3 drag and drop activity where you have the original video file available and can convert it into an FLV file.

Below is an example activity created using the approach described here:

1. Create your video file

A useful overview of creating digital video is provided by mediacollege.com

To make the most of the dropzone area of a dragster 3 activity you

should try to encode your video with dimensions of 600 by 450 pixels.

Other video sizes will work but these will be resized

within the activity dropzone. The activity will take place on the paused last frame of the video and so it should be edited with this in mind.

2. Publish/Convert your video file into FLV format

In order to display a video within a Dragster 3 activity it needs to be encoded in the flash compatible FLV video format. There are a variety of tools available for publishing into FLV format or converting from alternative formats (e.g. Adobe Flash, On2 Flix, Sorenson Squeeze, Riva FLV encoder).

Save this video file as video.flv

3. Download the FLV video dragster files

I have provided a set of 4 files to aid your creation of these video Dragster 3 activities.

Download a zip file containing these files

You will need to save these on to your PC and extract them (left click on the downloaded zip file and select Extract all…)

Now copy the video file (video.flv) into this extracted folder overwriting the example video file with the same name already in this folder.

4. Create a dropzone image of the paused video

Within this downloaded folder is a file called video.html Open this file in your web browser to view your video as it will be displayed within the Dragster activity. Play the video until it reaches the end frame and pauses. At this point you need to create a jpg image file to use as the dropzone image in your activity authoring.

As mentioned in the previous post, I have used two alternative methods to do this:

1. use screen capture software such as TechSmith SnagIt

2. press the PrtScrn button on your keyboard then open image editing software such as Photoshop or Fireworks and use Paste to place a copy of your entire screen into the working area. Then crop this image.

Ultimately you need to create a jpg image which is 600 by 450 pixels in size which just includes the flash file displaying your video. This means the edges of this image should be where the green background meets the edges of the video. Save this image as video.jpg

5. Author and publish the Dragster 3 activity

You should now login to your myWebducate account and author the activity in the usual way using the jpg image created in step 4 as the dropzone. When you are happy with this activity publish it and extract the published files in the usual way.

6. Copy the video related files into the activity folder

Copy your video files into the extracted activity folder (i.e. copy the files: video.flv, video.swf, SteelOverNoVol.swf, video.html into the activity folder).

7. Edit the Dragster 3 activity dragndrop.xml file

Nearly done now… Open the published activity dragndrop.xml file in a text editor such as Notepad and edit the line <target targetImage=”video.jpg“

/> replacing video.jpg with video.swf. Save the amended dragndrop.xml file.

8. Test the activity

You can now test this activity by opening the index.html file within the activity folder with your web browser.

Have fun using these two approaches to embed video in your activities. If/when you develop an activity you are proud of and are happy to share please do let me know!