Designing VAL

TO STAY MORE UP TO DATE WITH THE DESIGN AND DEVELOPMENT OF VAL! GO TO THE BLOG:

http://www.lab-spot.blogspot.com/

Here are some random musings of my experience of developing this resource. I would love to hear from anyone who is considering developing their own stuff, and would be happy to answer any questions you have.

Software
Nightmare on Main Street
A bit of planning
Voiceovers
Animation
Making video
Catch the pigeon
Producing web pages
Publishing to the web - active content updates for IE7

Software

This resource has been designed and developed using the following software.

Adobe Dreamweaver CS3 - web site design
Adobe Fireworks CS3 - photograph editor
Adobe Flash CS3 - for developing and publishing animations as ".swf" files
Adobe Flash Video Encoder - converting captured video to Flash ".flv"files
Adobe Captivate CS2 - screen grab software e.g. for demonstrating the use Excel
Pinnacle Studio - video editing software
Sony Sound Forge Audio Studio 8 - sound editing software

Nightmare on Main Street

I tend to approach things like a bull in a china shop with little planning because I like to let the creative juices flow and see where I end up. I also recommend doing any development work at home since you'll need a quiet environment and to be able to get stuck in. I find this work quite addictive and can be sat at my PC for hours, so ensure you are comfortable and do everything you should to minimise the risk of repetitive strain injury.

The main problems encountered in this project was needing to use Adobe CS3 for the first time, and problems arising from changes to Microsoft Internet Explorer 7.0. CS3 was quite problematic to load onto my laptop and took about a day conversing the the Adobe support chaps in Germany. The other unforeseen nuisance was realising that CS3 is quite different to CS2, particularly regarding the Action Scripting which controls the elements (e.g. buttons) of the animations. Dreamweaver CS3 was quite different too. Fortunately, there are many great on-line tutorials from Adobe and other sources, although they do take a bit of finding. The problem with much of Adobe's support materials is they assume you are an IT expert to start with, and I am certainly not!

A bit of planning

As a team we decided who was going to write the content for each resource. As a developer this is the most important aspect to get right - good content saves you time (you don't want to be writing stuff) and also stimulates your ideas (e.g. Graham's Village Fete demonstration of serial dilutions). So the process goes like this - CONTENT - VOICE OVER - ANIMATION. If you are using external content such as graphics or sounds, ensure you have the copyright approval to do so.

Voiceovers

The voiceovers were done using a Blue Snowball Microphone which is one of the few and best "USB" mics around and plugs directly into your laptop. I believe in getting the best quality possible and then compressing to a sensible file size. I used Sony Sound Forge software to crop and splice, and to compress my files. There is sound editing freeware available which would start you off, but you do get what you pay for, and such freeware is quite limiting to what you can achieve.

I save my recorded voiceovers as MP3 files (64 kbps bit rate and 22kHz frequency) in Sound Forge, which is fairy good quality. Once in Flash, I then compress the file. Again I selected MP3 quality and this time squash to 32 kbps. This is just about the sub-alien threshold - any faster than this bit rate and you'll end up lisping into the sunset. Essentially, play around with compression and you'll hit a level where you cannot hear any discernible difference, but you may save a few KB of file size.

When recording a voiceover it is difficult to not sound boring for example explaining how to use a haemocytometer makes drying paint seem like an exciting past time . I often stand up and gesticulate to get as much expression into the voice as possible. For the animations I write out a script which then forms the text content on the resource. You may need to amend this a few times so your speech flows naturally. Most of the voice overs were done in one or two attempts. I import the sound file into Flash and it forms the basis and timings for the animation.

Animation

My approach to animation again is probably straight from the text book of "how not to do it". I don't plan or story board anything, but let the creative spark determine what happens. I find it quick and easy to think of pictures and animations that will illustrate the voiceover. My biggest fault is probably over complicating things and having objects move to quickly, but the pragmatist in me doesn't care because I've been developing educational animations for 7 years now and students enjoy them and find them useful.

Some top tips. It is essential to include some CONTROLS so the student can govern their own learning. It is a good idea to include a short quiz so the student can test their understanding. I like to provide TEXT, ANIMATION and SOUND since this hits all the learning style buttons and is also great for making accessible resources. The great thing about vector graphics of course (as opposed to bitmaps) is that they are scaleable so are as crystal clear on a huge lecture theatre screen as they are on the web. If you do import JPEGS or other photo formats into your animation, these will not scale so well.

When using Flash, you save your actual file and all the raw graphics as a ".fla" file. These can be huge - around 10MB+ for a 3 minute animation. The great thing about Flash is that when you publish your movie it can compress the graphics (80% JPEG quality) and the sound (see above) without effecting the looks of the end product; a massive file can compress to around 200KB. Tiddly! In all the years I've been using Flash, I've never had problems with having to reduce the file size. When publishing it is important to select the option to "detect Flash Player" so if the user hasn't got the latest player, they can automatically download it from Adobe.

People say animations take a long time to develop. Clearly, learning to use the software takes a while, but once I have the content, I can do all the voiceovers and complete a 6 page animation in one day. This isn't a huge investment of time when you think of the hours of teaching it will potentially save you and your colleagues, and of course the immeasureable benefits of students being able to access resources in their own time and space.

Making video

When producing video I'd recommend not using the built in microphone. I used Canon FS10 video camera - light and dinky - and an external Panasonic microphone. Set the camera on a tripod - you will never hold the camera still enough even if you think you are. Again, some people work from story boards, but for the Spectrophotometer assay, Ruta and I took about 1 hour to complete filming and broke the video down into logical steps based in what the students would need to do. Perhaps for someone with a quiet voice like Ruta I would recommend a lapel clip-on microphone, but I think we just about get away with it. There are a few thuds and bangs in the background which was probably the Hawthorn Building ghost joining in the fun.

The video was downloaded onto a Pentium 4 PC which is actually my home PC, but many Universities will have multimedia departments where you can video edit, since it is likely your desk PC will have the internal processing power of a fly. I edit and publish an initial video using Pinnacle Studio. You can compress the video and audio quality - no need for High Def or anything fancy for the web. Go for a medium file size MPEG4. I also produce a small file size MPEG4 so students can download to multimedia players such as Apple iTouch. But, har, har, you can play video but Apple products are Flash incompatible and will not "touch" the buttons and interactive elements.

I transfer my MPEG4 files to my laptop using a memory stick and use the Flash Video Encoder to convert to the ".flv" file. I can then import my video directly into Dreamweaver and it is web-ready. I find file sizes of around 10MB (3 min's of video in this case) almost to large, so break these down into smaller clips.

Catch the pigeon

"Catch the pigeon" was one of my favourite programmes starring Dick Dastardly and Mutley, and during my PhD at Sheffield University Channel 4 were showing repeats. Our supervisors were puzzled as to why none of the PhD students would arrive in the lab until 10 in the morning! Prizes went to those who could do the best Klunk impression.

In terms of catching less-feathery objects, great software exists these days allowing you to capture your PC screen whilst you use it. Adobe Captivate is excellent for demonstrating software and recording voiceovers. We used it in VAL! to demonstrate the use of Excel for performing calculations and producing graphs. Captivate has different levels of interactivity which is particularly useful - you can give a demonstration or you can set it so the student can interact with the software to test their learning. Captivate publishes as ".swf" files - the same as the animation. The files are notoriously large. The haemocytometer "table dimensions" file is 3 mins 40 seconds long and is 2.7MB in size. By compressing the images to 80% and reducing the bitrate to radio quality (64 kbps), the thing don't look or sound any different but is reduced to 1.8MB. You publish the thing in a "skin" which provides the resource with video controls.

Again freeware screen capture software is available if you wanted to experiment in producing your own tutorials. Remember you get what you pay for, and the two versions I have tried struggled to synchronise the voiceover with the animation.

Producing the web pages

I had a minor trauma when I realised that CS3 was different to CS2, so I decided to go back to basics and work through a tutorial on how to design web sites! One eye opener was the use of CSS (Cascading Style Sheets) which I've not got my head around before; CSS not only makes web design easier, the site look sleeker, but it is important to ensure accessibility and flexibility for those who may be using screen readers. These tutorials are some of the best I have seen.

Web design tutorial by Jon Varese
Available at:
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

Publishing to the web

Majoro problemo numero duo. Microsoft in their wisdom had updated Internet Explorer 7.0 to no longer handle animation or video "objects" or so called "active content". Again, much on-line support exists for the IT specialist on the Adobe web site , but for the likes of me, I had to work it out for myself, and as usual, there seemed to be key bits of information missing from the help documents.

What to do to cope with IE7.0? Well this is what finally worked for me.
1) Manually remove old FlashPlayer and replace with new version "9.0.115".
2) Ensure Flash publishes to this version ( and not an old version such as Player 8).
3) Download various patches for Flash software and other Adobe software that you might have that is out of date, so that as they publish or save, they generate a JavaScript (".js") file.
4) When you publish your animation, Flash will produce the required ".js" file along with the ".swf" and ".html" that you will also require.
5) Now this should all speak to eachother, and using the ".html" file generated to upload your animation onto the web, as instructed by the ".js" file.
6) What most of the on-line help failed to say, is that every animation requires its own ".js" file in a separate folder. You cannot organise all your files together, so for each animation there is a folder, e.g. "Haem 1" and within it the associated ".swf", ".html" and ".js" files.

How to cope with existing animations?
1) You can use Dreamweaver to produce a ".js" file if you have an exsisting page containing animated content.
2) When Dreamweaver opens up a knackered page it should ask whether it can convert active content. Say yes. This generates the ".js" file you need, alternatively go to "file / convert / active content" to generate it manually. Again, each page and file needs to be kept in a separate folder.
3) Mind you, I have equally tried to update some of my existing pages and it tells me that it cannot do it.

Here is Adobe's article on the active content update.
http://www.adobe.com/devnet/activecontent/articles/devletter.html#nojavascript