Varndean Sixth Form College

Background to the Resource

In my role as an ILT champion (and media studies technician) at a Sussex sixth form college I have been closely working with media studies teachers in creating a media studies intranet site and various online resources for the students.
Myself and Julian Bowker, media/film studies teacher and head of ILT at the college decided to create a truly ‘interactive’ resource which would take an existing classroom paper based project and update it on online. The resource was created using Flash MX, Dreamweaver 3, Photoshop 5 and Adobe Premiere 6.

We took a project that looks at the ‘Narrative Arc’ of a film. Put simply a Narrative Arc is the high and low points of a film, in chronological order. If you join these points up you are left with an ‘arc’ which represents the film’s narrative progression.
Students were creating narrative arcs themselves already, in groups and mapping them out on large pieces of flipchart paper.
Our task was to take this project (create a Narrative Arc for the film ‘What’s Eating Gilbert Grape’) and re-create it online using with a user-friendly interface.

Creating the Resource

Creating the adjustable arc

It was obvious from the start that creating an interactive ‘arc’ that the user could manipulate themselves would be the most challenging task. I started out by exploring the drag and drop features in Dreamweaver 3 to see if I could create a movable line with it.
Using a mixture of sliders on a graph that could move up and down and some ‘sticks’ made up of graphics I did manage to make a page that could build a arc but it was far to time consuming and clumsy to use. The page was also too ‘heavy’ (large in file size with lots of graphics).
I turned to Macromedia Flash MX after finding quite a few clever, interactive animations on the Internet.
I looked at some code from an existing file from an online Flash resource and built my own adjustable line with 13 points that could be manipulated up, down and sideways. I was now ready to build the rest of the site.

Building the Narrative Arc pages

I decided to stick with Flash MX to build up the body of the pages for a few reasons. Firstly Flash creates a ‘clean’ and almost cartoon like look that I wanted for the resource. Secondly I knew that there may be more interactive menus, buttons etc on the page and Flash is perfect for that type of work.
The ‘arc’ now needed to be put into a graph to make sense. This was made up of a scale consisting of 4 colour coded ‘levels’ (the importance/tension of the scene) running up the side of the graph and 13 key scenes selecting by Julian running along the bottom. I illustrated each scene with an image from the film grabbed with Adobe Premiere 6 and saved as a JPEG. The image was then scaled down in Photoshop and placed in the right place along the bottom of the graph.
The scenes were then described below the graph for reference.
After a few discussions about the graph we decided to place a text box next to each scene description that the user could fill in, giving their reasons to why they had rated that scene on the scale, adding an extra level of self-learning to the resource.

The interactive narrative arc was now complete. After testing the page out I decided to add a print button that would allow users to automatically run a copy off for later reference. There were a few problems adding the print button. One was printing colour and black and white.
Colour prints were fine but black and white prints were too dark, so I brought the colour down on the page a little so black and white prints were clearly readable.

I also added a ‘Comment’ button. This took the form of a cartoon representation of Julian’s face, created with a digital camera and Photoshop 5. When the user passes their cursor over Julian, a speech bubble appears with some useful advice about the narrative arc. I felt that this added a human element to the pages, with the teacher still ‘virtually’ present while the student is working through the page.
The final button to be added was a pop-out menu made in Flash, which looking back on the resource isn’t particularly necessary (or as user friendly as simple links) but it looks good!

Once the final Gilbert Grape Narrative Arc page was complete it was relatively easy to adjust it for a ‘build your own’ Narrative Arc. The film images were removed, text boxes modified and the ‘comment’ feature replaced with a ‘help’ button to refresh the user as to what to do in case they got stuck.

Supporting Pages

Once the Narrative Arc pages were constructed we discussed the content of the supporting pages. These explain what a Narrative Arc is and how to complete the interactive pages.
We opted for a linear structure where the user starts on the first page reading the instructions and theory and then goes on to complete the Gilbert Grape page, finally ending the project with a brief conclusion with Julian’s own timeline and notes on the film’s structure. The resource can also be navigated in a non-linear fashion if the user wishes, with links on each page to the other sections.

Further Development

We tested the resource with some 2nd year students at college. The feedback was positive, with many students feeling that the online resource added an extra element of interest to the project.
The ‘build your own arc’ feature will hopefully be utilised in other subject areas where a narrative or even timeline is used, i.e. English Literature or History.
Features that I am working on are a save function and a possible adaptation of the build your own arc page with pictures and as many/few points as the user wants added into the page.

Links

www.flashkit.com - Flash Resources
www.studiowhiz.com - Flash Tutorials
www.actionscripts.org - A beginners guide to Flash actionscript
www.swishzone.com- Swish – an easy to use Flash type programme.