CS4358 Interactive Media Project Daniel Heffernan (0543004) / 4 th Year Multimedia and Games Development

Splash screen A splash screen shows my name, ID number, and the code and name of the module. This information is not useful after the first few seconds, so it is displayed for a few seconds at start-up and then removed.

Loading progress There are almost 5MB of MP3s that must be loaded, so loading is something I thought was worth giving some consideration to for this project. All clips are loaded in parallel, and as they load, they grow until they reach their final width. The number of clips which have finished loaded is displayed in the top-right corner of the stage. When all clips are finished loading, this status text disappears as it is no longer needed.

Colour I chose to use white and dark blues for the UI where colour was not indicating some useful information. Where colour is used, it indicates some important information. Colour is used on:

• Volume sliders to indicate sound level ( green =low, red =high). These colours were chosen because of cultural convention (Winamp, for example, uses the same convention) • Clips to differentiate between different clips. This is discussed in more detail in the “Clips” section of this document.

Button-mode Flash allows visual elements to use a “ mode”, which means that when the user moves the mouse over the element, the cursor changes to a hand. This indicates the potential for interaction to the user and is quite a powerful way of communicating affordances of an interface to a user. A nice feature of this feedback mechanism is that the user can explore the interface without actually interacting, yet can still mentally flag areas of the screen which can be interacted with later.

The following elements are in button mode:

• Volume bar ( draggable ). The slider bar is a very small target at 4x8 pixels, so I have made the entire slider clickable . • The scrubber (clickable and draggable ) • Clip boxes (draggable ) • Control buttons (clickable )

Stage The stage scales vertically but expands horizontally. This means that the user does not have use a scroll-bar to move up and down between the tracks and the clip browser, but maximises use of the screen width available to allow as long a track as possible. Writing my own class proved to be a great way of learning ActionScript, and was one of the first things I went about doing. Tooltips fade in and out when appearing/disappearing. A big problem I had was with these fading animations failing sometimes: the animation would stop half-way through, and a faint tooltip would remain attached to the cursor. I eventually realised that this was because I wasn’t retaining references to the tweens, so the garbage collector was sometimes deleting them while they were still executing. This problem was solved by making an instance variable to be used for the active animation, ensuring that the animation will be seen through to the end.

All that’s needed to attach a tooltip is to instantiate it: public function Tooltip( parent:DisplayObject, text:String )

The tooltip will then attach itself to parent by attaching event listeners to it, and it will display text when it appears.

Another challenge I had with the tooltip class was keeping the tooltip visible at the edges of the screen, while ensuring that the “tail” of the tooltip stayed over the mouse. This was accomplished by redrawing the tooltip when needed (i.e., when the tooltip would move outside the stage: tooltip.x+tooltip.width > stage.stageWidth ). The text is not redrawn, only the rounded rectangle and tail. The glow filter is not changed either, but Flash has to redraw it itself.

Scrubber I wanted the scrubber to look similar to a track so it would fit with the style of the application, but I didn’t want it to look so similar that it would be expected that clips could be dropped onto it. I made the scrubber’s graphics by taking the graphics code from the Track class and:

• Removing the gradient fill in favour of a flat fill. • Reducing the height so the boxes representing time intervals are square. • Changing the alpha of the boxes slightly. • Removing the drop-shadow. • Putting the boxes into button-mode so the by hovering over the scrubber, it is apparent that its behaviour is different to a track.

Scrubbing works by using Flash’s raycast system. When a user clicks a box on the scrubber, the scrubbing begins. When the mouse is released, the last box which was active (i.e., clicked or hovered over) becomes the new position for all tracks. All tracks then query themselves to see if a clip is at the new position. If one is, the play position of the sound for that clip, and when the track is played, playback will begin from the correct position in all tracks.

Track volume As mentioned in the Colour section of this document, the track volume is coloured so green is low volume and red is high volume.

As mentioned in the Button-mode section of this document, the dark blue slider bar is in button- mode so the cursor changes to a hand when the mouse hovers over it. However, the entire bar can be clicked/dragged at any position, as the slider bar is only 8x4 pixels (before scaling). Tracks The position of a track is controlled by the scrubber. Play commands are sent to the scrubber, which keeps an instance of Timer to send messages to tracks to move to their next interval. The current position is shown by increasing the alpha of interval box n in every track, where n is the current time interval being played.

Clips can be dropped onto tracks. The dropTarget variable available from the MouseEvent.MOUSE_UP handler gives the drop target under the mouse, which is not what is necessary. Instead, the sound interval box under the left-most side of the clip is where the clip should be dropped. I use Flash’s raycasting to find the box under the position (0, clip.height/2) to find where to drop the clip. To handle the possibility of a user dropping a box over the gap between interval boxes, if nothing is under the queried position, this is done again at position (8, clip.height/2) , which proves to be quite reliable.

Controls/Settings The control panel controls the playback of the tracks. The top buttons play/pause and stop (reset) the playback, and the text boxes can change the BPM/beats per bar/number of bars. A keyboard event listener attached to the stage toggles play/pause when space is pressed. Event listeners attached to the buttons and to the text boxes confirm changes when the buttons are clicked or when enter is pressed in a .

Changing the BPM or beats per bar requires resizing of the tracks and resizing of the clips. This is done when any settings are changed.

Clip Browser • The clip browser resizes with the SWF. This happens when the settings (BPM, etc) are changed. I wanted this to happen dynamically when the SWF is resized, but unfortunately this is not possible as I also want the SWF to scale vertically with the . When Stage.scaleMode is set to SHOW_ALL , Event.RESIZE is not fired. If Stage.scaleMode is NO_SCALE it would work, but I would lose my scaling support. • The clip browser wraps the clips so they move down Y when there is no more room along X. • When a clip is dragged from the clip browser, a duplicate is left in its place. Compare this behaviour to dragging a clip from a track, in which case no duplicate is left, so it can be removed.

Clips A full spectrum of hue is used across all the clips. If you use degrees of a circle to describe the range of hue (0° to 360°), with n clips, each clip will have a hue in 360°/n, meaning all clips have their own colour.

The problem with this is that with many clips, it becomes difficult to distinguish between different clips. With 60 clips (about the number used in this project), the difference between hues is 5°. Though the human eye can distinguish between colours this close together, it takes concentration to do so. With a difference closer to 15° it would be more comfortable to distinguish between clips. This difficulty is one motivation for using multimedia information (text preview, size, and hover-over sound preview and tooltips) to help users know which clip is which: • As much as possible of the clip’s name is presented in space available. If it can’t fit, an affix of “…” indicates to the user that more information is available. When hovered over, a tooltip shows the complete name. • The length of the clip is represented by the box’s width. • When the clip is hovered over, it is played back. Playback is indicated by pulsing colour and sweeping bar. It was originally intended to have the pulse move in rhythm to the BPM, but this proved to give too large a variation in beat (20bpm~200bpm is allowed). In the end, I decided to use a static variable in the Sequencer class instead. The Sequencer class increments frameCount every . By using this as opposed to an instance variable, all the boxes pulse in phase during playback. The pulse is generated from a sinusoidal wave function like so (where b is the final brightness): var b:int = 20*Math.sin( (Sequencer.frameCount%stage.frameRate)/stage.frameRate * 2*Math.PI );

The brightness is then applied to the box by creating a ColorMatrixFilter with an appropriate matrix: 1 0 0 0 0 1 0 0 max = 0 0 1 0 0 0 0 1 0 0 0 0 0 1

The sweeping time indicator is a child sprite of the box, with a gradient going from 0% alpha white to 100% alpha white. This is updated every frame, along with the brightness pulsation.