Resources in a flash!

I’ve been busy over the past few days getting ready for the start of the new term in a more practical, immediate way, but today I’ve decided it’s time for another play.  I’m ambivalent about using Flash: it’s brilliant fun, and produces some good products, but it’s fiddly with little help for debugging, it feels like a dead end, and with no support for iOS, Android withdrawing support and with HTML 5 coming up, I’m not sure it will be around for much longer.

However, I have dabbled in it, both animating and coding, and it seemed an ideal way to combine the work I’ve been doing in a useful way.

I’ve been using Cam Studio, Audacity and MoviePlus to make screen capture videos with narration, to help my students use Serif MoviePlus, and the result is a collection of nine videos, the shortest 40 seconds (trimming and splitting) and the longest 4:30 (transform effects).  I wanted a way to tie all the videos together for ease of selection.

I could use powerpoint of course; in fact I already have a hyperlinked powerpoint on MoviePlus which I’ll probably add the videos to at some stage, but I wanted to try building a flash project to house the videos.  It’s based on chapter 7 of Adobe Flash CS4 Professional Classroom in a Book, which has a project showing how to link videos together.

I used the adobe encoder to encode the videos into Flash format, then examined the finished project from chapter 7, which I worked through a few months ago.  The code for the buttons was very straightforward, so I created a graphic for a button and put together a version just to check out that it would work.

first try at flash embedded movie

first version of flash resource to play tutorial vids

I was pleased with the result: I have a screen with a button on it.  The button is animated for mouseover and mousedown, and when pressed it activates the appropriate video, complete with playback skin containing video and volume controls.  The button is too large, and the project itself probably too small to contain all buttons plus the video playback, but the principle has been well and truly proven.

Time to create all the button graphics then!

I used Drawplus to create the original buttons, then adjusted size and position for the different button states in Flash, but I wasn’t happy with the results – the text on the buttons looks rather blurry, and I think next time I’ll try creating them directly in Flash, or have a closer look at the export settings.  I had a reminder of some of the problems I’ve found with Flash: it can be rather fiddly at times, and really doesn’t like being messed with – I’ve found it’s far easier to spend a few minutes planning and do exactly what I want from the beginning, rather than to rush in and try to fix things on the fly.  I also remembered eventually that it’s far easier to use layers to separate elements on the page.  I did use a little maths to get the elements to line up properly and adjust the size of the finished project to accommodate all the elements.

completed design - nearly working, just one problem

finished product (looks good, not quite working yet)

This is the finished project: I have 9 buttons plus a video window, and clicking on any of the buttons brings up the associated video.  The only problem for a while (and it was a fairly major one, to be honest!) was that as I switched from one video to the next the sound from the previous one would keep playing.

Still, the code itself was remarkably simple:

startButton1.addEventListener(MouseEvent.CLICK,clickListener1);
function clickListener1(event:MouseEvent):void {
     gotoAndStop("startvid");
}

This is placed on the actions layer, in the first frame of the timeline, and repeated for each button, changing the name of the button, the number of the clickListener and the name of the frame to move to.    The action in frame 40 is just stop(); – there’s no actual animation in the project between frame 1 and frame 40, but I left the space there just in case I decide to include any.

partial timeline showing named frames

part of the timeline, showing named frames

This is my timeline, showing that I’ve named frames for each video.  Each button listener function sends the playhead to the appropriate frame, and the video inside its control starts playing automatically.  The timeline stops on the first frame of the section, but the rest are there as padding so I can see the name of the frame.

So I’ve learned a lot on this project so far, and while it’s been time consuming the learning has been worth the time spent and next time round I’ll be more confident in what I’m doing and so will work faster.

A little playing around to tidy up the project miraculously seemed to fix the sound problem, so I now have a finished resource (or set of resources) ready for use, plus the confidence that comes from tackling a project and making it all work, plus a template that I can use again and again to link videos together (I’ve had students say: “Your video was useful, Miss, but I did have to play it over and over and keep stopping it!”).

In the meantime, I’ll also dig out my hyperlinked powerpoint and try not to fall asleep adding the videos to it!

 

Advertisements

About emmyleigh
Writer/editor/proofreader who loves technology

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: