Introduction to Multimedia by moti

VIEWS: 189 PAGES: 20

									     Introduction to Multimedia




ICA: A Multimedia Tutorial


             08/01/03




                                       By Ali Zaidi

                                          B2047968

                        BSc (Hons) Web Development
CONTENTS

1 INTRODUCTION……………………………………………………………….....4

2 MAIN.SWF…………………………………………………………………………5

   2.1 Justification of Design……………………………………………………5

   2.2 Testing…………………………………………………………………….6

   2.3 Evaluation………………………………………………………………...6

3 MENU.SWF………………………………………………………………………...8

   3.1 Justification of Design……………………………………………………8

   3.2 Testing…………………………………………………………………….8

   3.3 Evaluation………………………………………………………………...9

4 FROG.SWF………………………………………………………………………..10

   4.1 Justification of Design…………………………………………………..10

   4.2 Testing…………………………………………………………………...10

   4.3 Evaluation……………………………………………………………….11

5 FISHERMAN.SWF……………………………………………………………….12

   5.1 Justification of Design…………………………………………………..12

   5.2 Testing…………………………………………………………………...12

   5.3 Evaluation……………………………………………………………….13

6 CAMERA.SWF…………………………………………………………………...14

   6.1 Justification of Design…………………………………………………..14

   6.2 Testing…………………………………………………………………...14

   6.3 Evaluation……………………………………………………………….15

7 HOUSE.SWF……………………………………………………………………...16

   7.1 Justification of Design…………………………………………………..16

   7.2 Testing…………………………………………………………………...16


                         2
    7.3 Evaluation……………………………………………………………….16

8 CONCLUSION ………………………….......……………………………………18

9 APPENDICES…………………………………………………………………….19

    9.1 APPENDIX A NAVIGATION MAP…...…………………………….19

    9.2 APPENDIX B STORY BOARDS ……………………………………20




                        3
1 INTRODUCTION
This report accompanies my Flash MX Multimedia prototype developed for the In
Course Assessment (ICA) titled A Multimedia Tutorial. The purpose of this report is
to justify the design of the product; describe the testing process; and the evaluation
process gone through. The intended reader is the module tutor.

The report is structured by dividing it into separate sections for each Flash MX file.
These sections are further divided into three subsections covering the (i) ju stification
of design, (ii) testing and (iii) evaluation of each file.

The information and opinions collected in this report were mainly from personal
observation and interviews for the evaluation.




                                            4
2 MAIN.SWF

This section deals with the file called main.swf. It is the opening screen for the
multimedia product.



2.1 Justification of Design

This was the last screen that was designed. The author wanted to develop the opening
screen so that its identity was intertwined with the identity of the author. Not only
does it provide the projects title and authors details it also expresses how the author
was feeling at the time of its development.

The music, background colour, speed of movement and animation were put together
in a way to express a feeling of sadness at the loss of someone close.

The background music is East 17’s Stay Another Day. This was used because the
words express some of the meaning of the story that is told in the animation. This
music was used as the basis for the development of the visual movement on the
screen.

The background colour is black. This was used to represent emptiness, vacuum,
spiritual darkness and solitude.

From the first frame of the screen a Skip Intro button is provided in case the user
wants to jump straight to the menu. The colour is red so that it contrasts well with the
black background. Impact was used as the font to give the button a chunky look.

The screen moves slowly downwards on a self portrait of the author. The movement
is deliberately slow to go in tune with the music and express the author’s feeling.

After the face has come to a standstill tears slowly develop and fall from the eye.
After a few drops have fallen a partially transparent yellow streak falls upon the
author’s face. This represents light from God, which represents His peace and
blessings. As a result of the light, the tears begin to dry.

After the tears dry, the text containing titles and author’s details appear slowly line by
line. Again the lack of speed has been deliberate to go in tune with music and the
emotions being expressed. The colour of the text is the same as the tears which gives
the screen a coherent look with contrasting colours.

As the full text is displayed an Orange M appears at the bottom of the screen next to
the Skip Intro Button. Its colour is a warm tone like the other button and placed in the
same area (bottom right) of the screen to indicate it is a navigation button. When a
user scrolls over the M it changes colour and changes into the word Menu. Navigation
in all the movies in this prototype are similar. Most buttons are found at the bottom
right, and are in Impact font and appear with the first letter of the word or phrase of


                                            5
the action they represent. On rollover the button expands to the full word or phrase.
This has been used this to avoid ambiguity in what the different buttons do.




2.2 Testing

Testing was carried out throughout the development of this screen. Almost after every
change made in the .fla format “ctrl” and “enter” were pressed in order to see the
effect of the change in the .swf format. Some of the tests carried out are outlined in
the table below.


                      Event/Response Test For main.swf

      Action            Expected Result           Actual Result          Response
                        Face moves into
                        position without        Incomplete side of   Amend initial and
   Played movie             showing               the face can be     final position of
                       incomplete side of               seen                 face
                              face
                         Light appears                                 Outline deleted
   Played movie                                  Outline appears
                         without outline                                 from frames
                                                                      Frame containing
                                                 Tear pool in eye
                        Tear pool in eye                              error deleted and
   Played movie                                 shifts downwards
                         stays in place                                 replaced with
                                                near end of movie
                                                                        correct frame
                        Personal Details         Personal Details
                        Appear On Right         Appear out of line   Text realigned into
   Played movie
                         Of Page Below          and some text goes    correct position
                             Light                  off screen




2.3 Evaluation

During the development of the screen evaluation and improvement were a continuous
process.

Initially buttons developed to go at the bottom right of the screen were triangular
icons. However their use was confusing – the same icon performing different tasks in
different applications, so it was decided to settle for the simpler letter/text
combination for buttons. A fanciful use of text as buttons is better than icons since not
everyone can understand the meaning an icon represents.

The original idea for the opening screen did not include the light from Heaven or the
drying of tears. But during the development of the scene it was noticed that a sudden
switch from tears to no tears when the movie loops didn’t make much sense and


                                            6
looked unprofessional. It was decided to make the change gradual so you couldn’t tell
so easily that a loop was taking place. The inclusion of the light was to extend the
original concept of mere sadness to how sadness is removed with God’s Blessing.

After completing the opening screen three improvements could be made. First is the
speed at which the light shines on the face. It would be better if the face cried for
longer before the light shines and dries the tears. At the moment it looks too rushed.
The second change is to make the light more faint and transparent. The third is to put
a solid rectangular object behind the text of the Skip Intro and Menu buttons in order
to avoid the multiple “plops” that can be heard if the mouse is skimmed over the
buttons.




                                           7
3 MENU.SWF

This section deals with the file called menu.swf. It is the navigation centre of the
multimedia product.



3.1 Justification of Design

The author’s aim was to develop a menu page that united the four different tutorials
being presented and was simple. Simplicity was considered important because it is the
page from which navigation to the other parts of the application is undertaken. Too
much animation can be irritating when all he user wants is a way to find their way
around the application.

Background music is David Beddingfield’s: If You’re Not The One. This was used to
express the author’s thoughts at the time of development. The music is suitable for a
background sound to the menu page because it is unhurried and soothing.

The background is a simple green landscape with a lake in the middle. This setting
was chosen since it appeared to be a background in which the main images of the
different tutorials could be presented as if they were all part of one picture.

At the bottom right of the screen there is an “I” that changes into “Intro” on rollover
and links back to the opening screen. This empowers the user to view it again if they
wish. The colours used for this button are the same as the Menu buttons on all of the
other screens in order to present consistency.

The buttons that link to the tutorials are images of the main objects that the tutorials
are named after. This was chosen as a way to make the menu page more interesting
than merely linking through words. On rolling over the image buttons, they change in
some way either completely or with slight modifications. Also as you rollover the
buttons the actual title of the tutorials appear in white in the lake. This was done in
order to remove any confusion that may arise with the lack of written clarification as
to what the button linked to. White was used because it made the words readable with
a blue background.




3.2 Testing

Testing was carried out throughout the development of this screen. Almost after every
change made in the .fla format “ctrl” and “enter” were pressed in order to see the
effect of the change in the .swf format. Some of the tests carried out are outlined in
the table below.




                                            8
                      Event/Response Test For menu.swf

      Action            Expected Result           Actual Result           Response
                         All the Stage is        White patches at      Green painted on
   Played movie
                             covered             the screen edges       white patches
                                                                        Camera Button
                                                 Camera Tutorial
  Mouse is rolled                                                      Amended: Down
                        Nothing happens          Appears and Plop
  over the Lake                                                         position made
                                                   can be heard
                                                                             blank
    Intro Button         Loads Opening                                   Intro Button
                                                 Nothing Happens
       pressed              Screen                                        Amended
                           Music in
   Played movie                                    Music Plays                 n/a
                          Background




3.3 Evaluation
During the development of this screen evaluation and improvement were a continuous
process.

At first plain blue and plain green were used for the background colours. However it
looked too plain, so the Colour Mixer was used to create green and blue colours that
gradually change through fusion.

After completing this screen the following improvements can be considered: a more
interesting font for “Menu”; a more detailed background with trees and other objects
to add interest to its look. For the tutorial buttons they should be scripted in a way that
the movies load after release of the button so that a third image can be viewed when
the buttons are pressed.




                                             9
4 FROG.SWF
This section deals with the file called frog.swf. It is the first tutorial screen.


4.1 Justification of Design

The task was to create a frog that jumps and has rolling eyes. To this basic concept a
background was added consisting of dark blue water, bright lily pads, and marsh like
leaves. The colours used were chosen to contrast with frog to give a striking look.

The frog was also made to shrink through each jump to give it a feeling of leaping
into the distance.

Two sound files were used to give a realistic impression. One was the sound of a frog
croaking. The other was of water splashing. The splashing sound was inserted each
time the frog jumped from pad to pad adding to the realism.

The buttons are in the same location and style as the rest of the prototype. This gives
the impression that though the screen is different it is still part of the overall product.




4.2 Testing
Testing was carried out throughout the development of this screen. Almost after every
change made in the .fla format “ctrl” and “enter” were pressed in order to see the
effect of the change in the .swf format. Some of the tests carried out are outlined in
the table below.




                       Event/Response Test For menu.swf

       Action            Expected Result       Actual Result           Response
                         Nothing Happens      Nothing Happens
   Played movie         until Jump button is until Jump button is
                               pressed              pressed
   Menu Button                               menu.swf does not Amend scripting on
                          menu.swf loads
     Pressed                                          load            Menu button
                                                                      Splash sound
                         Line Cast, Maggot
                                                                  removed from main
  Hotspot pressed       lands in Water with Splash sound stops
                                                                  timeline and placed
     first time             splash sound            abruptly
                                                                     into a separate
                              complete
                                                                    movie timeline




                                             10
4.3 Evaluation

During the development of this screen evaluation and improvement were a continuous
process.
Initially there were no background images or sounds, nor did the frog shrink. To give
the frog a more life like environment, water and marsh background were added with
lily pads that shrunk in the distance. Splash sounds were then found to coincide with
frog’s leaping. A croaking sound was also found to add realism.

After completing this task it can be seen that it could be improved in two ways: to add
a hotspot on the frog rather than the Jump button; and make the frog’s legs move as if
they were pushing the frog up.




                                          11
5 FISHERMAN.SWF
This section deals with the file called fisherman.swf. It is the second tutorial screen.


5.1 Justification of Design

The task was to animate given graphic images of a motionless fisherman casting his
line with a moving maggot at its end. The casting would be initiated by the user
pressing a hotspot.

This concept was then further developed to make it more life like. A background was
created to give the fisherman a setting. Classical music was added for background
sound. Classical music was used because it is soothing just like fishing.

When the line falls into the water a splashing sound has been added to give life like
experience. When the hotspot is pressed again the line is pulled back with a moving
fishing replacing the maggot. This was done to make the experience simulate the
fishing experience. As the fish exits the water a splashing sound can be heard, a nd the
fisherman smiles saying “Ooh! Baby! Ahem! Ahem!” This was added to create
humour.

At this point an S > Start Again button appears allowing the user to have another go.
However the user has the option at this stage to either press this new button or press
the hotspot as before to go back to the beginning. This has been done to empower the
user to navigate in two different ways that they should by now be used to.

On rollover of buttons the same plopping sound can be heard as in the rest of the files
in this application to keep consistency.


5.2 Testing

Testing was carried out throughout the development of this screen. Almost after every
change made in the .fla format “ctrl” and “enter” were pressed in order to see the
effect of the change in the .swf format. Some of the tests carried out are outlined in
the table below.




                   Event/Response Test For fisherman.swf

      Action            Expected Result           Actual Result            Response
                        Nothing Happens          Nothing Happens
   Played movie          except maggot            except maggot
                             moves                    moves
   Menu Button                                   menu.swf does not    Amend scripting on
                         menu.swf loads
     Pressed                                           load             Menu button


                                            12
5.3 Evaluation

During the development of this screen evaluation and improvement were a continuous
process.

Whilst the author’s sister was evaluating this screen she complained about the original
rollover sound that was chosen. It was the Beam Scan sound; it was too long and
interfered with the other sounds in the scene. This was replaced with the plop sound
which is shorter and less intrusive. This sound was placed into all buttons for rollover
the effect.

A moving fish movie was added when the rod is pulled out of the water. A movie was
used to give the effect of a living fish.

After completing this task two ways of improving it have been noted. First would be
to space the second splashing sound and the “Ooh Baby!” sound. This is because it is
difficult to hear the “Ooh Baby!” part of the sound file. The second would be to use
an .mp3 format for background music rather than the .wav format in order to increase
the speed of the loading time of this file.




                                          13
6 CAMERA.SWF
This section deals with the file called camera.swf. It is the third tutorial screen.


6.1 Justification of Design

The task was to create an animation of a camera taking a picture of the user and then
after loading presenting the image of a monkey to the user.

The background colour was kept white since there was no need to change it. The
writing was made to hover in from above and the side. A “Cheese!” sound activates
after the end of the appearing of the text. This was added to get the user ready to smile
for the photo.

A blue button placed next to the camera was used to activate the camera. It changes
colour when rolled over and changes colour and position when pressed to give a
pressing down look. The pressing of the button also creates a flash light affect. This
was added for making the experience feel real. When this button is pressed a
camera/flash sound is activated this adds to the photo taking experience.

The colour of text colour is red, chosen because it contrasts with the black and white
backgrounds.

The next scene starts with egg timers emptying. This provides a visual representation
of waiting for the photo to develop. Then a photo of a monkey which starts faint then
gets clearer appears. The appearing image is back up with a sound of a monkey
screaming. When the photo is loaded a voice of an old lady says “Well Look at this a
darling Little Monkey!” this adds to the humour of the photos result. Finally text
appears as if being written saying “You’re Gorgeous”. This was added to give the
whole photo taking a polished finish.




6.2 Testing

Testing was carried out throughout the development of this screen. Almost after every
change made in the .fla format “ctrl” and “enter” were pressed in order to see the
effect of the change in the .swf format. Some of the tests carried out are outlined in
the table below.




                     Event/Response Test For camera.swf

      Action            Expected Result           Actual Result            Response
                       Navigation Buttons         No navigation        Navigation Buttons
   Played movie
                        present at bottom        buttons at bottom           added


                                            14
                                                 Take Picture         Camera Button
 Mouse is rolled
                                               Button changes        Amended: Down
 over white space       Nothing happens
                                             colour and Plop can      position made
     and text
                                                  be heard                blank
                        Loading Screen         Loading Screen
   Take Picture          Followed By          Loops and doesn’t
                                                                    Scripting amended
  Button pressed        Monkey Photo            go to Monkey
                        Screen Appears              photo




6.3 Evaluation

During the development of this screen evaluation and improvement were a continuous
process.

When first developed there was no flash light effect, this was added after to improve
the experience. There was initially no “Cheese!” sound; this was added to enhance the
experience. Finally the “You’re Gorgeous!” text was added to improve the
application.

After completion of this file a few improvements can be noted. The first is the
introduction text appears too fast, overwhelming the user. This should be broken
down allowing the user to read each line before, disappearing and the next line
appearing.

Generally each animation in this file needs to be slowed down.

The take picture button could be a hotspot at on the actual camera button area. Or it
could appear at the bottom after the appearance of the last line of text.

A .jpg monkey image should be used rather than a .gif image to increase the quality of
the photo.




                                          15
7 HOUSE.SWF
This section deals with the file called house.swf. It is the fourth tutorial screen.


7.1 Justification of Design

For this screen the Fun House theme tune was used as background music. It’s
supposed to give the feeling of excitement about the fun interactive activities offered
by the screen!

Invisible buttons were used for the activity buttons. This was done to arouse curiosity
in the user about what is going to happen next. When an invisible button is pressed a
visual “Main” button appears. This appearance of a new button is an indication the
user that they have to press it in order to move on and try the other invisible buttons.

A background was given to the house with a back garden, trees, front path and car.
This was done to give the house a more interesting setting.




7.2 Testing
Testing was carried out throughout the development of this screen. Almost after every
change made in the .fla format “ctrl” and “enter” were pressed in order to see the
effect of the change in the .swf format. Some of the tests carried out are outlined in
the table below.




                      Event/Response Test For house.swf

      Action             Expected Result          Actual Result             Response
                          Menu button at         No Menu button at
   Played movie                                                        Menu button added
                              bottom                 bottom
                           Main Button
                          Appears with           Writing on Main       “Main” text colour
  Hotspot Pressed
                         visible coloured        Button invisible           altered
                              writing




7.3 Evaluation

During the development of this screen evaluation and improvement were a continuous
process.




                                            16
Originally there was no background only the house and the garage, after initial
evaluation the background was added. The car was then added (it was another tutorial
exercise).

After completing this screen three improvements can be noted. The Main button
should appear at the bottom of the screen where navigation buttons are normally
found in the rest of the prototype. The car could have a hotspot on it which could
make it animate and drive away. Text could be added hinting to the new user what
they need to do.




                                         17
8 CONCLUSION
This document has discussed justifications for the design of elements within each
screen. It has shown that the design was well thought out. This document has outlined
the testing carried out on each screen. It described problems encountered during
development and how they were dealt with. It has illustrated how evaluations were
made throughout the development and ongoing improvements made. It has also
provided suggestions for the further development and improvement of each
application.




                                         18
9 APPENDICES

9.1 APPENDIX A       NAVIGATION MAP




                          main.swf




                         menu.swf




   fisherman.swf   house.swf         camera.swf   frog.swf




                                19
9.1 APPENDIX B   STORY BOARDS




                       20

								
To top