multimedia video systems report

Hugo King Multimedia Video Systems 2-Dec-05

Multimedia Video Systems Accompanying Report for Flash Development Hugo King 1.0 Introduction 2.0 Macromedia Flash 3.0 Design Decisions 3.1 Graphics 3.2 The accurate time 3.3 Changing the time 3.4 Changing the day and date 3.5 Switching the light on and off 4.0 Improvements and Limitations 5.0 Features of Website 6.0 Bibliography 1.0 Introduction The brief for this project was to create a simulation of a working watch using the 2D vector modelling program 'Macromedia Flash'. The simulation was to keep time, for that time to be changed using winders/buttons and the optional inclusion of other features. I implemented several extra features in my watch simulation, these being; the ability to keep the correct time as well as the correct day and date, to be able to wind the time forwards or backwards and to switch to a 'night mode'. In the following sections I will explain some of the basic features of Flash in context with how I’ve used them. 2.0 Macromedia Flash Flash is the most widely used 2D vector graphics package, it has functionality to animate and draw vector graphics and is often used on websites as an interactive tool. Flash uses vector graphics; this means storing graphical information as a series of points to plot a shape, this is opposed to storing the colour values for each pixel in an image, this is called a bitmap graphic. This means two things; that less space is needed to store the graphical information, and that the shapes making up images can be easily manipulated, as they are simply redrawn to a different scale or in a different place. This makes Flash a very versatile tool and


one ideally suited for the integration of interactive content on the web. Flash uses a hierarchical system of frames and instances. The 'timeline' is made up of frames into which can be inserted ‘keyframes’, these are containers within the timeline for instances on the stage (the viewable document) and represent objects in the time domain. Flash deals with instances in 3 types, graphics, movie clips, and buttons, which it organises these using a hierarchical structure. Graphic symbols are static objects to wrap up drawn or imported graphics. Movie clips are mini movies which can be referenced within the document so they can be played, stopped, and skipped. Buttons are a series of graphics representing press-able buttons (img 3) much like in application dialogue boxes. Flash also has its own programming language much like javascript (a simple language using the Java syntax) called actionscript. This can control instances, the movie itself and also interface with other parts of the system. There are a lot more features in Flash, but using these basic interactive documents can be created with relative ease. 3.0 Design Decisions 3.1 Graphics For my watch simulation I wanted to copy the design of an existing product to get a realistic appearance. Using the Swatch website I chose a picture of a watch and imported this into Flash. Using the imported image I inserted a layer over it and traced the outline with the Flash drawing tools. This gives a realistic but cartoon drawn effect which works well for the design I have planned. I then extrapolated from the face view of the watch a side view giving detail with artistic license. I also used a copy of the watches shape to create a drop shadow; simply by filling it with a half transparent light grey and offsetting this to the right behind the watch face.


img 1 I have used the gradient fill and masking techniques in some places to give subtle interest to the graphics. In the watch face I used a masked ring of a radial gradient filled circle to get the look of the bezel (img 1) and for the radiated light from the lamp I used a gradient filled trapeze. I used the trace bitmap feature in Flash to get the Swatch logo, this feature takes an imported image file and traces over and smoothes the image; this means avoiding the pixellated look that graphics often have when imported into Flash.


img 2 To get the glow on the hands when in 'night-mode' I used the expand fill tool (Modify > Shape > Expand Fill...) to created a stepped gradient (img 2) around the centre block of colour, this makes the hands look as if they're glowing!

img 3 I used buttons to control the interactivity in my simulation, buttons have 4 'states'; up, over, down, and hit (img 3). These are, in order; the appearance when the button is inactive, when the buttons is moused over, when it is pressed and the mouse detect area of the button. Using buttons I made text appear on the mouse-over of the time adjust wheel and the lamp pull cord, these act as tool-tips for the user.


I used buttons again for changing between winding forwards and backwards and between changing date and day. This time I created a button but only filled the 'hit' part, this gives an invisible button, which, using actionscript, I set to goto another frame when moused over. This gives the effect that if the user has the mouse over the upper part of the winding wheel it will wind the time forward and the bottom part it will wind backward. I organised all my graphics in order; the hands for example were a graphic inside a movie clip inside the watch movie clip, this allows greater control when editing a document. 3.2 The accurate time In frame one using actionscript I initialise the simulation; I 'get' the date from the system, this is an object which contains the systems current time and date values. myDate = new Date(); hour = myDate.getHours(); if(hour > 11) { hour = hour - 12; } minute = myDate.getMinutes(); second = myDate.getSeconds(); day = myDate.getDay(); date = myDate.getDate(); fig 1 I use this information to set the current time on the watch with the following script. function refresh() { hr = _root.hour*5; movement = _root.minute/12; hr = int(hr+movement); setProperty(watch.hrs, _rotation, hr*6); setPr operty(watch.mins, _rotation, _root.minute*6); setProperty(watch.secs, _rotation, _root.second*6); watch.day.refresh(); watch.date.refresh(); } fig 2 This finds the angle to set the hour hand to (using the amount of minutes and hours that have past), and sets the angle of the minutes and seconds hands (this makes them point to the right time). It also sets the day and date, which I will


describe later. The instances in the scene are referenced using instance names, the main one being watch which contains all the hands and other instances to change. When the code says watch.mins this refers to the minute hand in the watch movie clip. 3.3 Changing the time Each mode of operation works in a different frame of the scene, this means that there is a frame at which the watch is initialised, a frame at which the watch ticks normally, a wind forwards and backwards frames and frames for changing the date and day. In each of these frames I have used actionscript to increment the specified variable every interval of time, this is done with the setInterval() function. int2 = setInterval(increment, 1000); function increment() { second = second+1; if(second>59) { second = 0; minute = minute+1; if(minute>59) { minute = 0; hour = hour+1; if(hour>11) { hour = hour-12; } } } refresh(); } fig 3 In this example; every second the variable seconds is incremented, this is a counter for the number or seconds past, checks are then made for incrementing the other counters and the watch is refreshed using the refresh() function (fig 2). clearInterval(int3); fig 4 Using the setInterval() function is problematic in so much that any previous intervals that have been used must be cleared. This is apparent in moving from the date changing frame to the time ticking frame, if the previous interval is not cleared using clearInterval() (fig 4) then the date will keep ticking over. Interval instances are stored so they can be cleared (fig 3).


3.4 Changing the day and date Displaying the day and date is done using dynamic text fields. In Flash these are text areas which can be written to and referenced using actionscript. A similar method as in fig 3 is used to increment the day and date variables in their respective frames and when the refresh() function is called the following code is executed in the day and date movie clips. function refresh() { var dy; if(_root.day == 0) { dy = "SUN"; } if(_root.day == 1) { dy = "MON"; } if(_root.day == 2) { dy = "TUE"; } if(_root.day == 3) { dy = "WED"; } if(_root.day == 4) { dy = "THU"; } if(_root.day == 5) { dy = "FRI"; } if(_root.day == 6) { dy = "SAT"; } code = dy; } fig 5 function refresh() { var dt; if(_root.date<10) { dt = "0" + _root.date; } else { dt = _root.date; } code = dt; } fig 6


In fig 5 the function decodes the number stored in the variable day, this is a number representing the day. The name code refers to the dynamic text field we wish to contain the day, this is simply set to the decoded day. In fig 6 we use the same method for setting the date to the dynamic text field but this accounts for date numbers less than to add a leading zero. These symbols are stored within the watch movie clip and are called in turn when the main refresh() function is called (see fig 3). 3.5 Switching the light on and off This is controlled through the pull cord on the lamp which is in-fact a button (see above); when this is toggled to the on position the following code is executed. on(release) { gotoAndStop(2); _root.watch.gotoAndStop(2); _root.watch.mins.gotoAndStop(2); _root.watch.hrs.gotoAndStop(2); } fig 7


img 4 This code moves the current frame in the movie clips of the watch, hour hand, and minute hand to the second frame and also moves to the second frame of the lamp graphic. In the second frame of the watch movie clip a black panel is drawn over the watch face, in the second frames of the hands their centres glow a luminescent green colour. The second frame of the lamp movie clip is merely a darker version of the lamp graphic to indicate it is switched off. This gives the appearance of glowing watch hands in a darkened room (img 4). 4.0 Improvements and Limitations I would've liked to add several features to my simulation but was limited by time and other commitments. In particular I would've liked to add the functionality of a stopwatch and an alarm, to demonstrate using sounds in Flash. These additions


could however be implemented without a great deal of change to the existing structure of the actionscript or graphics as the basic principles to implement them are already in place. The simulation does have one flaw in it's operation, this being due to the nature of flash. The watch loses time from being initialised. To make the time adjustable the watch must tick independently from the system clock, this is so as to be able to keep any adjusted time. Depending on the system running the simulation the watch can lose up to 5 seconds a minute, this is down to the processor intensive operations used in making the hands tick. There is a possible work-around for this problem using a combination of a timer and getting the system time but I have not had time to implement it here. 5.0 Details of the Website I have used some advanced features in the creation of my website, for reference I will describe these briefly here. • I have use CSS to control the appearance and layout of the website; this has

been used to apply styles to divisions, text, images, links, and tables. This means that any design changes to the website can be made changing one file.

• The menu bars on each page are controlled using image maps, these are maps to specify the coordinates of the clickable buttons within one image. Using this means that I can use less images in the menu structure and also achieve precise clickable buttons (note the rounding on the left).

• I have inserted an automatically updating timeline on the home page which tells the user which term and year I am currently in at university, this is done using javascript.

• I have also used javascript to control windows in which coursework pieces are displayed in, this means that a new window will be opened for each piece and it will be of a big enough size to view that document.

• I have ensured that my website is compatible with all popular browsers. 6.0 Bibliography Basic tutorials on time keeping using flash: www.flashkit.com/tutorials (accessed on the 10th November 2005) Macromedia Flash tutorials: Within the Flash program - Help > Getting Started with Flash

multimedia video systems report

Technology