Blog Archives

Flash and mobile phones (the HTC Hero)

I must admit that I haven’t really paid too much attention to mobile phones and consequently mobile learning to date.  That has been largely because the only available flash player on mobiles has been Flash Lite which offers a very limited set of functionality, and because of this it has not looked that likely that flash based applications such as Dragster would be usable on a mobile.

Well it looks like that is going to change and sooner rather than later…

In July 2009 HTC released their touch screen Hero handset which offers a much more capable flash player on the Android operating system. There are numerous reviews of this device out there but the video below (taken from this review by Rob Jackson) demonstrates some of the abilities and limitations of its current flash capabilities.


While its obviously not perfect, this is boding very well for the future, and according to Adobe the flash player is due to be upgraded later this year.

What this appears to be leading to is a future where flash development for the web and mobile devices will become much, much easier and may even get to a point of develop once and deploy onto any device. The project that is making this a reality is the Open Screen project.

This is all very exciting especially in combination with the developments in mobile touch screen interfaces which open up possibilities for more tactile interactions such as drag and drop.

I hope to get my hands on an HTC Hero soon and have a go myself… when I do I’ll post on how I get on.


Dragster activity “word cloud”

In my recent demonstration of Dragster 3 at ALT-C 2009 I encountered an unforeseen issue which has led me to develop a new activity results viewing facility.  I’ve called this a “word cloud” (the best I can come up with for now… suggestions welcome!) as it closely resembles a tag cloud, only the words displayed aren’t tags in the normal sense.

The issue

The third activity demonstrated at ALT-C 2009 involved a brainstorm where participants individually identified applications of blogs in teaching and positioned these on a matrix (akin to a virtual post-it note adding activity). The Webducate results recording system then allowed me to show the combined results of this activity back to the audience.

Combined activity results

I must admit that I hadn’t anticipated how effective this activity was going to be in generating and collating ideas from the audience. With 24 activity responses, consisting of four applications each, the resulting collation shows approximately 96 applications. When viewing this number of labels (virtual post-its) simultaneously it is difficult to quickly identify any emerging themes or focus on any particularly interesting items (see the screenshot above).

The word cloud

So following several days of reflection on this issue, I came up with the idea of a “word cloud”. This facility displays the most commonly used words  in the collated entries, in the manner of a tag cloud. This clearly identifies the emerging themes and makes each word into a link to a view of the recorded results that include just those labels that contain the selected word. (View an example word cloud)

An activity word cloud is now available for all brainstorming style Dragster 3 activities and how this works can be seen in the example shown below (this is the word cloud generated by the ALT-C 2009 demo activity)

Word cloud screenshot

This word cloud highlights the concepts of feedbackreflectionstudentssharingknowledge and collaborationfrom the 96 responses recorded during the demonstration. Clicking on the reflection link displays the screen shown below.

Reflection related responses

Here I have spread out the over-lapping reflection labels. This word related view allows the statements incorporating this term and their positions to be quickly viewed. In this case it shows reflection being most commonly associated with the activity of student writing blogs, but with one contribution considering reflection as an appropriate use for staff in reading the blogs of peers.

As with all Webducate results pages, these various views are available to the activity author and can be shared with participants via the share URL. In a classroom response setting, these views can be displayed back to the audience to facilitate related discussion and analysis.

And finally…

This facility is very much a work in progress and I welcome feedback. Please let me know what you think!


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:

Four stroke engine activity

1. Create your video file

A useful overview of creating digital video is provided by

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!

Dragster help movie – defining target areas with zoom and keyboard controls

The updated Dragster 3 target area definition facility provides several ways to improve the accuracy and time taken to author element feedback. This help movie provides an overview of the new functionality provided and gives some tips to improve your target area authoring. Included are the use of new keyboard controls (summarised below) and how to zoom in and out during the authoring process (View the defining target areas movie).

View defining target areas movie

Keyboard controls:

Arrow keys – accurately move the last target area point for the live target area.
D – deletes the last target area point on the live target area.
R – resets the target area for the live target area.
W – toggle the cursor and area points from grey to white and back again.


Dragster 3 results by element feedback graph

View results by element for the Volcano activity
An additional feature has been added to the View results by element page which provides a graphical overview of the feedback provided on recorded results for each draggable element. This graph displays the relative proportions of correctclosemiss and undefined feedback displayed in the recorded activity results (element feedback is considered undefined if the element has not been moved on to the dropzone image).

These graphs allow the viewer to quickly identify which activity elements are most often positioned correctly and incorrectly.  Clicking on the related View icon will then allow them to investigate the positioning of this element in more detail.

To see this in action view the Volcano activity results by element page.

Please Note – this feature was added on 16th April 2009 and only activities published after this date will display this facility.


Using SWFs as dropzone images in Dragster

One of the more advanced ways of building drag and drop activities with Dragster 3 is to use SWF files (flash movie files) as the drop zone image for your activity.

Why use SWF files?

There are two reasons you may wish to do this:

  1. Avoiding distortion on scaling – When you are scaling your activity to fill the browser, the dropzone image can appear pixelated with JPG or GIF files. This is particularly a problem when the dropzone image includes text which can become distorted and difficult to read when scaled. Using a SWF file in these cases means that the dropzone image will scale without distortion (View the Gapminder World Chart activity – try right clicking and using Zoom In to observe how the use of a SWF dropzone retains clarity).

    Gapminder World Chart activity

  2. Animation and interactivity – Using a SWF as the dropzone allows enormous flexibility in adding interactivity and animation. For example using video in an activity dropzone as demonstrated in this running gait analysis activity.

    Running gait activity

How to create SWF files

Now the difficult bit.  Creating SWF files (flash movies) can be quite involved depending on the complexity of the interactions required and will require the use of particular software.  Here are a few tips based on my experience to date:

Without Flash software – When creating non-interactive SWF dropzone images I have made some use of Adobe Fireworks to draw the image and then used the Save as > Flash SWF option. However this approach is not perfect and you may find that fonts, colour gradients, drop shadows etc are lost in the conversion.

With Flash software – Adobe Flash is expensive and complex software but its use offers almost unlimited possibilities. I begin by creating a movie of dimensions 600 by 450 pixels and then draw directly onto the movie stage.  Keep each drawn element on a separate layer and convert elements that you wish to add dropshadow filters into movieclips.

Hopefully this post has demonstrated some of the possibilities offered by using SWF files as dropzone images in Dragster 3 activities. Unfortunately creating SWF files is not simple but hopefully I have shown it can be worth the effort!


Dragster 3 – Results histogram

A bar chart displaying the profile of recorded activity scores has been added to the results page for Dragster 3 activities.  Clicking on a bar in the chart will display only those activity results within the range represented by that bar.

Try it and see!

With this feature you can now quickly assess how your students are doing and identify problem areas.


Improved target area authoring

We have implemented an update to the target area authoring facility on the Dragster 3 system.  This offers several improvements over the previous version:

  1. The position of the last point can now be accurately repositioned using the arrow keys on your keyboard. Click the mouse to place the point, then press the left, right, up and down arrow keys to move the point one pixel in the corresponding directions.
  2. The X-Y positions of the cursor and the last point are displayed on the target authoring screen.
  3. The point markers now also switch to white when you choose to use a white cursor.
  4. Choosing to use a white cursor or target now switches all three options to white.
  5. Selections for white cursor and display image / text box are now remembered by the system so you don’t have to repeatedly reselect these as you author each target area.


Screen shot of the updated target area authoring facility