Research methodology

Content

As musical theory is a vast area of study, my objectives were confined to the rhythmic elements of musical theory to make the task manageable. As information regarding melody and harmony was not part of this study it was decided to focus the animations around the drum kit specifically as this instrument only deals with rhythmic information. When deciding on the exact content of each animation, it seemed to be very important that single points were made to help keep the animations brief. Each of the six animations covered a single concept although most concepts involve several keywords.

Although each animation was designed to be self-contained, there is also a logical sequence in the order of the animations. Time Signatures (animation 5) would not make sense if the viewer had not first been introduced to preliminary concepts such as beat (animation 1), drum notation (animation 2), rhythmic notation (animation 3) and counting (animation 4).

This narrowing down of a single concept has an interesting precedent in the work of Henry C Morrison (1871-1945). He referred to a unit of work (1) in a different way to how it is used today. Modern usage might suggest an activity or section of work whereas Morrision used the term psychologically to denote an insight that is relatively complete in itself. Examples were in Mathematics where there are numerous concepts as opposed to learning a second language where the whole subject must be mastered before you have anything really worthwhile. For this reason some units could be covered in a single lesson but others might take several years.

Classic graphic design theory

The University of Saskatchewan web site (2) has an excellent summary of the principles of graphic design. The three components of graphic design noted here are:

1/ Spatial arrangements
2/ The use of colour
3/ The use of shape

For my purposes I added three additional multimedia elements:

4/ Music
5/ Voice-over
6/ Movement (animation)

Knowledge maps, concept maps, branch notes and other types of diagrams are all helpful for students to organise ideas and information. Various tests have been carried out where knowledge maps were contrasted with text alone. “The results suggested that the use of color, shape, and proximity facilitated learning by improving the organization of information”. (3)

Elements of design

Line
Shape
Texture
Value and colour
Space

These elements are self explanatory although research in this area provided some very interesting examples. Because my source material was basic music symbols, I didn't have to give too much thought to shape and texture. I decided to use the primary colours red and blue for highlighting purposes.

Principles of design

Movement
Balance
Emphasis
Unity

The principles of design required more careful consideration. The word "movement" here is not referring to animation but to implied movement such as a person drawn in a running position. The principle that I had to constantly be aware of was emphasis. I made sure that the subject in the voice-over narrative was highlighted whenever this was appropriate.

The conventions used for writing music are not ideal. As with language itself, the conventions in use are descriptive rather than prescriptive meaning that they evolved over time. English came from various sources, namely Latin and Greek. This is why we have 'K' from Greek and "C" from Latin to produce similar sounds. Attempts to reform irregularities in the English language have largely failed. "It is unlikely that our spelling system will ever become more rational. The alphabet is not the perfect climax of writing's "natural" evolution, but it has seeped into the pores of our culture." (5)

The main inconsistency with written music is that the movement of a note, up or down the stave, does not correlate equally to the change produced in pitch. Moving up from B to C is a semitone whereas moving from D to E is a whole tone interval (see Key signatures). Drum notation is more logical as the position on the stave determines which drum is played. These drumming conventions are more recent that reading notes off the Treble clef as the modern drum kit wasn't really standardised until the 1930s.

As animations use graphics, there is an obvious link to prior research on the use of graphic organizers and diagrams. Such issues had long been established such as the Gestalt principle that the whole of anything is greater than the sum of its parts. Gestalt theory arose in the 1890s as a reaction against atomism. (6) Context was emphasised as the framework for perception. Christian von Ehrenfels used music to illustrate context. He stated that a melody can be readily recognised when transposed to a different key, even if the new key doesn't contain the same notes.

"The information that learners notice most readily in the animation may not be the information that is of greatest importance. Conversely, information that is relatively inconspicuous may be very important." (7) This issue was mainly applied to badly designed animations. With my animations, I aimed to ensure that there was no unnecessary movement and that the intended focus was always clearly visible.

Moving images have a powerful effect on human peripheral vision. "Anything that moves in your peripheral vision dominates your awareness: it is very hard to concentrate on reading text in the middle of a page if there is a spinning logo up in the corner. Never include a permanently moving animation in a web page since it will make it very hard for your users to concentrate on reading text." (8)

As you continue to scroll down this page, you will notice animations amongst the text which would seem to contradict the previous quoted guidelines. I have done this because:

My own considerations of design issues are discussed for each animation as follows:

The first animation was called Beat and tempo but that is because the tempo is simply the speed of the beat. An incomplete picture would have arisen by dealing with these words in isolation. The main concept for beat is that it is a steady pulse within music. This was illustrated using a heart rate monitor graphic.

This beat then becomes a crotchet symbol as the sound of the pulse becomes a bass drum sound.

The words "Beats Per Minute" are used at the end with the letters appearing and disappearing to create the acronym BPM.

A rotating drum kit begins the drum notation animation as the five lines of the stave are drawn.

This drum kit is replaced with the drum clef to make the point that drum music is written with the drum clef. (The rotating drum kit itself was an animated gif. In the shockwave files given to the six viewers, the drum kit rotated but when this animation was transferred to video it became static).

The round shape of individual drums makes an effective transition into the point that each drum has its own position on the stave.

This drum is replaced with a crotchet note and then the snare drum is explained using the same approach. This seemed to work really well due to the similarity in shape between drum heads and note heads.

A common way to teach the various rhythmic values of notes is with diagrams showing how the subdivisions fit together. I constructed such a graphic for the opening sequence as follows:

By using the word Rhythm in a red font and making it fade out in time with a music note, I was able to denote longer notes such as semibreves. Drums have a short duration of sound so I used a bass guitar note for this semibreve. A cymbal could also sustain for this length but that would have sounded too distracting toward the end of the animation when the notes are played more frequently. This bass note was always the same pitch to reduce the number of variables in the animation as the whole point of this animation was rhythm.

As the common element with rhythmic notation is time, I experimented with different ways of showing the passage of time. My first attempt used a traditional style clock face where the clock hand moved at various speeds depending on the note being displayed.

This idea was abandoned because I wanted to show more than one note at a time so this model would soon look too complicated. Another variation on the clock theme that I tried involved notes replacing the clock hand as follows:

This was also abandoned as I couldn't show different types of notes easily. Another reason was that this didn't actually look like notated music and I wanted the animations to look realistic.

The semibreve at the top of the screen which moved across the screen looked like the original �Space Invaders� game. I envisioned giving each note type a place in this scenario with corresponding characteristics (e.g. 16 semiquavers moving quickly). Once again, I limited the amount of movement to aid the overall clarity of the animation.

The animation ends with each note being replaced with a rest depicting silence of the same duration. I considered expanding the Space Invader theme by having each note "shot" but I decided against this as it would have been a lot of trouble for a purely novelty effect.

In this animation I utilised repetition. The basic bar is played 14 times with various changes made to show the different elements of counting. The style and phrasing of the narrative was also designed to emphasise the rhythmic nature of the animation.

A pentagon was used to visualise 5. This extract moves erratically in contrast to the original version as an experiment. I continued this idea of shape by having a square for 4/4 and a triangle for 3/4.

This animation is the only which in which I utilised background colours other than white. I had originally planned to use a different background colour for each animation to help people remember each one. This idea was abandoned as music is almost always written on a white background. The green background shown here was to draw attention to which section is repeated and which section is changed.

The violins that were originally used have since been replaced with traditional crotchets and quavers. As the background music is Minuet by J.S Bach, the violins were used to show where the music was up to. Interview feedback from viewer

led to this change as the violins had confused her.

This animation was also the one which used the most text. The Italian terms such as D.C. al Fine were defined and each of the four terms were left on the screen and highlighted in turn. This is also the animation which used a split screen approach as the definition on the right corresponded with the information on the left. The moving drum graphic was used to trace out the actual position within the music in the same way that a pointed finger can draw attention to something.

I have concluded that this animation was probably the least effective. This was because too much information was covered. I could have split this into two animations:

This animation deals with reading notes off the treble clef to make the series of animations relevant for other instruments. This was not part of the original six animations but a later creation through the Knowledge Bank (9) initiative.

A different person did the voice-over on this animation. Having a female voice with an American accent worked quite well in my opinion. I also incorporated feedback from the original animations such as the pace of the overall presentation. By slowing down the pace it is also easier to follow.

I also used the method of including letter names within the actual notes which I have seen done before in some beginner piano methods.

There are two main ways of teaching people to identify notes off the treble clef. Although my preference is for the "G Clef" method rather than the acronym Every Good Boy Deserves Fruit, I used both methods to reinforce the same basic information.

The animation program used for all of the animations was Macromedia Flash MX. My original intention for the finished animations was to present them on DVD so the viewers could watch them at home in comfort. The rendering process using Flash to create stand alone video files was problematic in that the frame rate kept changing which put the visuals out of sync with the audio. My solution to this was to hand out CD-ROMs instead as all of the viewers had computers at home. This was still not ideal as the Flash files still go out of sync due to the latency inherent in each computer's processing time. I have since made them video files in Windows Media Format (.wmv) They were sychronised by changing the playback speed for each movement using Adobe Premiere Pro. This was a painstakingly slow process but necessary to make the animations in perfect sync.

The following table provides the same six animations in their original shockwave format. You will notice that the graphics look better than the video files but the synchronisation is not as good.

The main technical consideration for the actual web pages pertains to file sizes. Graphics take longer to load than text so they should be used sparingly to avoid delays. Pages such as this one are large but other pages such as the index page are small as delays are never a good introduction.

---------------------------------------------------------------------------------------------------------------

1. Beat and tempo	2. Drum notation	3. Rhythmic notation

4. Counting	5. Time signatures	6. Reading charts