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!