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).

   

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.

   

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 help movie – using the dropzone image creator

The key to a successful Dragster drag and drop activities is the dropzone image on to which the draggable elements are to be placed. In August we launched the dropzone image creator to make the task of resizing existing images for Dragster activities much, much easier. Using this facility you can take your image and crop and resize it to the dimensions required by the version of Dragster you are using in seconds.
To illustrate this process we have put together this short help movie which includes the use of an image from Wikimedia Commons.

NEW – Easily create Dragster dropzone images

Until now creating an appropriate image for use as the dropzone in a Dragster activity has been quite tricky.  Either you needed to use your favourite image editing software (e.g. Photoshop, Fireworks, Paintshop etc) or you could use the free web based tools Snipshot and Gliffy (as described in this help movie).

Now Webducate offers a new web based service to convert existing images into images sized appropriately for Dragster activities.  Simply go to the Webducate dropzone image creator, browse to your existing image on your PC, select the appropriate version of Dragster and click Produce dropzone image. There are more detailed instructions on using this facility available on the image creator page.

Creating dropzone images for Dragster activities movie

PLEASE NOTE – the approach outlined in this help movie has been superseded by the availability of the Webducate dropzone image creator. For help on using his facility please refer to this related help movie. (note added 19/10/2008)

——————–

Often the most difficult part of creating a Dragster drag and drop activity is creating the dropzone image, that is the image on to which your draggable elements will be placed.

This new help movie provides a brief overview of some of the issues and techniques involved including:

1. Copyright issues
2. Using an example source of suitable images (Wikimedia Commons)
3. Techniques for editing an image to the appropriate dimensions for use in a Dragster activity using Gliffy and Snipshot (free on-line image editing services)

View the creating a Dragster activity dropzone image movie