Web Production / Audio Engineering
Project 6: Mystery Website Requirements

The purpose of this individual Mystery Project is to showcase your work in writing, digital photography, graphic design, audio engineering and web production. The design of your Mystery Website is entirely up to you but with some guidelines below. The audience for your website is the world. When completed, the general public will be invited to attend an Exhibition of your website.

.

The applications you will use for this project, at the minimum, include After Effects, Photoshop, Illustrator, Pro Tools, Flash and Dreamweaver.

.

Deadline for a complete and working version of your Mystery Website posted on the webserver for is Mid-Year Exhibition in late January.

.

A complete Mystery FLASH website (at least 980 x 650 px stage size) needs to include at least the following content - you can add more if you wish - in any order you wish:

Introduction info
1. Summary explanation/Artist Statement of the Mystery Unit as you understand it for all your Freestyle classes - Design, English and WebAudio - with correct spelling and grammar.
2. Include a short Artist Statement about your website deisgn with correct spelling and grammar.
3. Include a short Artist Statement about your ORIGINAL background music/audio compostition with correct spelling and grammar.
4. Optional - record yourself speaking your Artist Statements and include the audio as an optional media on website. Be sure to include ActionScript code that pauses any background music while listening to the Artist Statement and then returns background audio back to original state when done.


Design Surreal Photo
1. Import in your Flash file ONE version of your Surreal Photo - a .jpg resized to dimensions no larger than your largest stage size dimension. You can also use this large version as your thumbnail version.
2. A thumbnail version of your Design Surreal photo that "explodes" to a larger version and "implodes" back to a thumbnail version - as demonstrated in class through "intro" and "outro" animations.
3. Rewritten Artist Statement about your work with correct spelling and grammar
4. Optional - record yourself speaking your Artist Statement and include the audio as an optional media on website. Be sure to include ActionScript code that pauses any background music while listening to the Artist Statement and then returns background audio back to original state when done.


Making of Design Surreal Photo screenshot video
1. Intro text about this "Making of Surreal Art" video - what will the viewer see and hear?
2. Embed your "Making of Surreal Art" screenshot .flv video of your Photoshop file with you discussing the main features of the photo and how you created that photo. Start with the raw photo and while turn on adjustment layers, discuss the goal of the effect - eventually showing the final composition.
3. This video will eventually be converted into a Flash Video file (.flv) which you must include in your Flash website with movie controls using the FLV Playback component similar to our practice Flash website. Recommended dimensions of the FLV Playback component and .flv is 800 x 600 px not the raw 1024x768 screenshot size that is created by Snapz Pro X - conversion from .mov to .flv and from 1024x768 to 800x600 can be done with VisualHub as shown in the class video tutorial.


Design 10 Year Future Illustration
1. Import in your Flash file ONE version of your Future Illustration - a .jpg resized to dimensions no larger than your largest stage size dimension. You can also use this large version as your thumbnail version.
2. A thumbnail version of your Design Surreal photo that "explodes" to a larger version and "implodes" back to a thumbnail version - as demonstrated in class through "intro" and "outro" animations
3. Rewritten Artist Statement about your work with correct spelling and grammar
4. Optional - record yourself speaking your Artist Statement and include the audio as an optional media on website. Be sure to include ActionScript code that pauses any background music while listening to the Artist Statement and then returns background audio back to original state when done.


Making of 10 Year Future Illustration screenshot video
1. Intro text about this "Making of Future Illustration Art" video.
2. Embed your "Making of Future Illustration Art" screenshot .flv video of your Illustrator file with you discussing the main features of the illustration and how you created that final illustration. Start with the raw photo and while turn on adjustment layers, discuss the goal of the effect - eventually showing the final composition.
3. This video will eventually be converted into a Flash Video file (.flv) which you must include in your Flash website with movie controls using the FLV Playback component similar to our practice Flash website. Recommended dimensions of the FLV Playback component and .flv is 800 x 600 px not the raw 1024x768 screenshot size that is created by Snapz Pro X - conversion from .mov to .flv and from 1024x768 to 800x600 can be done with VisualHub as shown in the class video tutorial.


Audio Mystery - webpage
1. Include Introduction and Artist Statement text to your Audio Mystery. If you worked with a partner, give credit to your partner and create a link to your partner's Mystery site.
2. Optional - record yourself speaking your Introduction and Artist Statement and include the audio as an optional media on website. Be sure to include ActionScript code that pauses any background music while listening to the Artist Statement and then returns background audio back to original state when done.
3. Embed your audio_mystery.flv in your page with movie controls
4. Embed your "Making of Audio Mystery" screenshot video of your Pro Tools and After Effects project file as described below.
5. Include the transcript/screenplay of the entire Audio Mystery so that people can read along as they listen, if they so desire.


Mystery Unit Reflection
1. Include some paragraphs reflecting on the entire Mystery Unit - commenting on English, Design and WebAudio projects and how you have grown in artistic/technical skill and knowledge.


Audio Mystery - audio portion
1. Recorded from your original and revised screenplay
2. All character voices are recorded from different people/talent
3. Mixed and edited in Pro Tools
4. Use left and right channels for effect
5. interwoven SFXs
6. Minimum time: 5 minutes for individual production OR 10 minutes for pair productions


Audio Mystery - visual effects portion using After Effects
1. Composition dimensions of 720 x 480 px for easy integration with Film Class videos for Exhibition
2. Must include beginning Titles Animation and end Credits Animation - PLEASE check spelling and use Freestyle Academy, not Freestyle High School
3. Use visual effects to ENHANCE audio story, not to dominate over the audio story
4. Render the final version as .mov (as required for Exhibition) and then convert to .flv for website integration


Making of Audio Mystery screenshot video
1. This "Making of Audio Mystery" video which will have 2 parts - Pro Tools session AND After Effects Project. You could make the screenshot video of each in separate movies or do both one after the other and then you can combine them as one later in VisualHub.
2. This video content is you discussing the main features of the recording session and visual effects file and how you created/edited both projects to the final .
3. With Pro Tools, start with the raw recording, show how you spliced up/trimmed the audio and then added SFX layers and other audio plug-ins to come up with the final audio version.
4. With After Effects, start with the imported audio and how you added visual effects at different points in the timeline to enhance the audio. Discuss details of how you applied effects and changed parameters to achieve some visual effects.
5. This video will eventually be converted into a Flash Video file (.flv) which you must include in your Flash website with movie controls using the FLV Playback component similar to our practice Flash website. Recommended dimensions of the FLV Playback component and .flv is 800 x 600 px not the raw 1024x768 screenshot size that is created by Snapz Pro X - conversion from .mov to .flv and from 1024x768 to 800x600 can be done with VisualHub as shown in the class video tutorial.


Navigation criteria
1. On every page, animated buttons all with SFXs, correct links and in any order of your choice keeping proximity and alignment criteria in mind.
2. Required for this project - simple intro animations and outro animations to every page.
3. On every page, links to every other page in the Mystery Website.
4. Link to Sites/index.html (our project listings page) so that viewers can go to all your other projects (Self-Portrait, Narrative, Documentary, Experimenta 1l, and Profile Unit)
5. Activate your Project 6 button on Sites/index.html which is your Projects Listing Page.


Other Details & File organization
1. Appropriate web browser title
2. Proper copyright notice on every page
3. Default page of Sites/project6/index.html which uses a preloader (standard Freestyle preloader or your own design) properly to load index.swf
4. Center content on browser
5. To keep Flash Actionscripting simple, don't bother organizating files into sub-folders. Just have all .swf, .flv. and .mp3 files all saved into main Sites/project6 folder.
6. Make sure to change Publish Settings > Audio Stream and Audio Event settings in Flash to MP3, 128 or 160 kbps and Stereo settings.
7. Do not upload any .mov files to the webserver since you will be using .flv files on your website.
8. Do not upload any .psd, .ai, .ptf, or .wav files to the webserver siince these files are unusable in a web browser
9. Do not upload any .jpg, .gif, or .png files to the webserver siince these files should be imported into your flash website file library.

.

.

Assessment for this project will include

1. Completion of content requirements listed above for each page
2. Proper file structure as suggested above
3. Use of the web design concept: Contrast
4. Use of the web design concept: Repetition
5. Use of the web design concept: Alignment
6. Use of the web design concept: Proximity
7. Use of the web design concept: Usability including rollover button links from every page to every other page.