Web Production / Audio Engineering
Project 2: Narrative Requirements

The purpose of this collaborative Narrative Project is to showcase your work in writing, digital photography, graphic design, audio engineering, and web production by producing a shortstory, a screenplay, an illustration, a photonarrative, a photonarrative video. an animatic and an animation of an original screenplay written by you or your optional chosen partner. The audience for your animation and website is the world. When completed, the general public will be invited to attend an Exhibition of your animation and website.

 

The applications you will use for this project, at the minimum, include Adobe Flash, Adobe Photoshop, Adobe Illustrator, Apple Garageband, and Adobe Dreamweaver.

 

Pre-production work includes: Shortstory, Soundtrack(s), Animatics. Short Flash Excercises

 

A complete Narrative Project needs to include at least the following 6 webpages - you can add more if you wish:

 

1. Activate your Project 2 button in Sites/index.html to link to Sites/project2/pages/index.html

 

2. Narrative Unit WebPage Template
   1. Create a new webpage template Sites/Templates/project2.dwt (980 x 650 px) with a new style sheet project2/pages/p2-styles.css
   2. Include in your template at least these 7 rollover buttons
      • Home > linked to Sites/project2/pages/index.html
      • Shortstory > linked to Sites/project2/pages/shortstory.html
      • Animatic > linked to Sites/project2/pages/animatic.html
      • Animation > linked to Sites/project2/pages/animation.html
      • PhotoNarrative > linked to Sites/project2/pages/photonarrative.html
      • Illustration > linked to Sites/project2/pages/illustration.html
      • Projects > linked to Sites/index.html (which already exists from our Self-Portrait Unit)

       

3. Narrative Unit Introduction
   1. Create a new webpage project2/pages/index.html
   2. Include a paragraph or two about the focus of this Narrative Unit. What was required to complete in each of your classes? Describe what the viewer will see on the other pages as a teaser.
   3. Include some graphics to make the page more visually interesting.

 

4. Narrative Shortstory

1. Create a new webpage project2/pages/shortstory.html
2. Include some text explaining the assignment, your inspiration for the story and its relation to the animation.
3. Include the text of your shortstory that you used for the animation.

 

5. Narrative Animatic

1. Create a new webpage project2/pages/animatic.html
2. Write and include a short explanation to answer this question about animatics -> What is an animatic in general and its purpose? Include a warning to users that Flash Player 9 is required to view animatic and can be downloaded from www.adobe.com. Also include a link to the final animation.
3. Create and embed a project2/media/animatic.swf file (640 x 480 px) with imported storyboard panel scans, recorded audio track(s) - dialogue, sound effects, and/or music, appropriate transitions (fade in, fade out, wipes, dissolves, etc.), animated opening title(s) and ending credits.

 

6. Narrative Animation

1. Create project2/media/animation.swf (720 x 480 px) based on animatic.swf which includes dialogue, sound effects, and/or music, appropriate transitions (fade in, fade out, wipes, dissolves, etc.), titles and credits.
2. Create a new webpage project2/pages/animation.html
3. Include your Artist Statement about the Animation with correct spelling and grammar.

 

7. Design Photonarrative
   1. Create a new webpage project2/pages/photonarrative.html
   2. Include text explaining the assignment as you understand it.
   3. With your thumbnail, include the text of your Artist Statement.
   4. Embed a SINGLE thumbnail image project2/images/photonarrative_thumbnail.jpg that includes all 6 of your Photonarrative images. This SINGLE thumbnail should open to a new browser pop-up window with no URL or bookmarks bar showing a larger version (height of 660 px) of your 6 image Photonarrative project2/images/photonarrative.jpg but make sure to include "Scrollbars as needed" and "Resizable",
   5. Also include the text of the story that was the inspiration for the Photonarrative.

 

8. Design Illustration

1. Create a new webpage project2/pages/illustration.html
2. Include text explaining the assignment as you understand it.
3. With your thumbnail, include the text of your Artist Statement.
4. Embed a thumbnail image project2/images/illustration_thumbnail.jpg. This thumbnail should open to a new browser pop-up window with no URL or bookmarks bar showing a larger version (max width of 1000 px) of your illustration project2/images/illustration.jpg.
5. Also include the text of the story that was the inspiration for the Illustration.

 

 

For your Semester 1 Grade - ALL items listed below must be completed PRIOR to the December Holiday Break.

• English work - Shortstory used for your Animation
• Design work - Single Photonarrative (6 photos) jpg and a single Photonarrative thumbnail jpg and Symbols Story inspired by the Photonarrative
• Animation - Animatic.swf
• Webpage template - Rollover buttons (at least 7)
• Webpage template - project2.dwt
• Webpage - index.html (complete with contents)
• Webpage - shortstory.html (complete with contents)
• Webpage - animatic.html (complete with contents)
• Webpage - animation.html (almost complete with contents - no animation.swf until 1 week prior to exhibition at end of January)
• Webpage - photonarrative.html (complete with contents)
• Webpage - illustration.html (blank page - no content until 1 week prior to exhibition at end of January)
• Webpage - activate your Project 2 button on your Projects Listing Page (Sites/index.html)
• Animation Audio - All dialogue and SFXs for real animation recorded/chosen in Garageband and exported as individual audio mp3 clips
• Animation Flash File - Most of your animation symbols drawn, converted to movie clips, properly named, and all audio clips organized in folders your Flash .fla library

 

Your Sites/project2 folder should look something like this

 

Additional assessments for this project will include

1. Completion of content requirements listed above for each page
2. Use of the web design concept: Contrast
3. Use of the web design concept: Repetition
4. Use of the web design concept: Alignment
5. Use of the web design concept: Proximity
6. Use of the web design concept: Usability including at least 7 rollover button links from every page to every other page (6) and a button back to your Project Listing root homepage (Sites/index.html)
7. Participation in class website critiques
8. Partiipation in Project 2 Narrative design and layout reflection.