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:

function clickListener1(event:MouseEvent):void {

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!



Processing – part 2

simple shapes drawn on screen

A variety of shapes

Time for another look at Processing.  I now have the book Getting Started with Processing, and it seems straightforward so far.  The language is described as a dialect of Java, with custom features for graphic drawing.  The code I’ve used so far can be built up one line at a time, making it feel a little like building up a sketch.  Commands include ellipse, rect, triangle, quad, arc etc, plus beginShape/endShape which draws a shape vertex by vertex.  The stroke, stroke colour, fill colour and transparency can all be set with parameters.

listing for drawing shapes

listing to draw shapes

The code is straightforward, simply the name of the shape followed by parameters which either refer to the on-screen co-ordinates or the dimensions of the shape.  I used a for loop to draw the series of lines – any regular drawing can reuse code in this way, and of course the use of variables can simplify the drawing process as well.

robot drawn with Processing

Simple robot

To draw arcs, the measurement is given in radians, but there is an easy way to convert degrees to radians if you prefer to measure that way.

So far so good; the fun will be learning how to animate the shapes and interact with them.


Processing – another resource

I’d never heard of Processing until a few days ago, and then I came across three mentions of it in less than 12 hours, and that sort of coincidence is what makes me take interest.

circles drawn with Processing

Circles drawn with processing

Processing is a language tailored towards graphic programs, and that’s really all I know about it so far, apart from it being what Tom Scott uses, so it must be fairly useful and versatile.  I’ve now downloaded and installed it and written my first program, which displays circles under the mouse as it moves – black if the mouse button is pressed and white otherwise.

processing editor

Processing editor

I’ll be exploring Processing more over the coming days and weeks, and seeing just what it is capable of and what it’s like to learn. My first reaction was that the editor looks very like the Arduino code editor, and like in arduino coding, the programs are called sketches (on the Processing website, they’re referred to as sister projects).  The code is typed into the main area of the screen, while messages are displayed at the bottom.

Processing will run on all the major platforms, Windows, Linux and Mac, and it’s quick and easy to export the completed program either as an applet to be embedded in a web page or as a stand-alone application for any of the platforms.  The language looks straightforward so far, and the editor uses colour coding and indenting to make structure clear.