The purpose of this project is for students to demonstrate their ability to create a dynamic, non-traditional web application using a variety of multimedia.  Specifically, students are to create a web application using the Adobe Flash development platform and a number of audio, video, animation, and interactive components.  Students may create any type of application they wish as long as it conforms to the required project specifications and is sufficiently optimized for web distribution. 

Required Checkpoints (all or nothing, each worth 5 pts)

• Check1: First Friday (at 11:00 PM) after project is assigned:
  • Preproduction materials. If done by hand, scan them so that you have digital copies.
  • Obvious lack of trying results in a zero. Simply turning in something does not guarantee 5 points. Your preproduction materials must be complete and well done.
  • Copy all files and place in a P1_Check1 folder nested inside your Project1 folder
• Check2: Second Friday (at 11:00 PM) after project is assigned:
  • Asset library. Make a copy of your .fla and any other asset files you have and paste them into this checkpoint folder.
  • Copy all files and place in a P1_Check2 folder nested inside your Project1 folder

General Project Specifications

• Connections: Incorporates external links
• Sound: Includes audio - background music, rollover effects, voice -overs, etc., and has an option to turn the sound off.
• Video: Incorporates at least 1 video - usually included to showcase animations and video work
• Optimization: Optimized for and published effectively on the Web
  • Resolution - no less than 1024 x 768 if a liquid GUI is not being designed
  • Download Efficiency - effective use of pre-loaders, separate movies, externally-loaded assets, etc.
  • Embedded: Note that publishing to the Web does not simply mean referring to a .swf file located on a server. The application must be embedded in an HTML page named index.php
• Test your app: tested for quality assurance and usability
• Real World Competition: Many people apply for positions, but of course, only some will get hired. To reflect this "real world" form of open competition, only a certain percentage of "A's" will be awarded, with "A" grades reflecting people who will be hired. The remaining web sites will be graded on fairly, but will only be able to receive the highest possible grade of 89%.

Content

Any type of application is acceptable for this project, as long as the work is commensurate with the amount of time allowed and is designed specifically for Web usage. Students may choose to create a portfolio web site for this project, but if they do so it should meet a certain set of criteria (see below). There are a wide variety of projects types that could be used for this Flash website project.

General Design Considerations

• Be sure to consider demographics such as audience age, culture, connection speed, etc.
• Students should design their applications to function adequately on a DSL connection, or provide both low-speed and high-speed alternative versions. Use the bandwidth profiler to help you gauge how long your app pages take to load.
• Flash web sites will be tested on both Internet Explorer and FireFox.

Optimization: The efficiency of web sites are just as important as their content. As such, web sites should be efficient in factors such as animation, navigation, and download speeds. Graphics, audio, and video should be optimized as much as possible, and pre-loaders used wherever necessary. Lack of efficiency in any aspect will result in a lower grade.

Junk Animation: Animation should serve a purpose, not just be included to make web sites more "flashy". The primary reason intro-animations are taboo is because in this class they usually do nothing other than make people leave your site. While creative, interesting animation will be considered positively, junk animation will result in a lowering of your grade.

Previous Student Projects:

See the project examples page

Portfolio Design Considerations (you may choose to create something other than a portfolio)

If students choose this type of application to develop, they should remember that it will be a showcase for their work and is one of the primary means of an employer’s evaluation. While the web site should be a representation of students and their particular styles, remember that style = specialization and that specialized sites might result in fewer options for employment.

The goal should be diversity and flexibility. For example, an e-business development firm may be hesitant to hire a multimedia developer with a Grateful Dead portfolio theme. While there IS logic in thinking,"Well, I wouldn't want to work for an uptight company like that," you never know what might turn an employer off. Usually, the best thing to do is to balance creativity with professionalism.

Another tip to remember is that it may not be a good idea for students to include portrait photos or personal interests on their portfolio sites. While we hate to think of personal bias or preconception as a hiring determinate, the sad fact is that people HAVE preconceptions, whether they are conscious or unconscious.

For example, say someone with a buzz-cut puts their picture on their web site, and your potential employer was once bullied by a guy with a buzz cut. Unconsciously, he may get a negative impression of your web site without even knowing why, and choose to discard your application. Let employers get to the point where they will first see your face at the interview where they can form a balanced impression. It sounds ridiculous, but we are a ridiculous species. Employers make those kinds of decisions, whether they are deliberate or unintentional (especially at the pace they review material). Rather than contend with these problems, the best solution is to try to minimize the possibility of pre-conceived ideas on the part of the employer.

Portfolio Site Requirements

Portfolio Web site Requirements: The web site is required to include the following sections, although students can include more if they think it will be beneficial:

• Home / Main
• Resume
• Portfolio
• Contact

The Home Page is the most important piece of screen real-estate, and should be used effectively. It is the first (and often only) page potential employers see. Students should remember that most employers spend an average time of 30 - 45 seconds determining whether or not their sites are worth exploring. Any more than that, they're usually on their way to the next portfolio. This makes a 25-second pre-loader a severe limitation in this type of web site.

The Resume should be available in both Web and Print versions. You need to display your resume nicely within your Flash app as well as provide an external link to a PDF version.

The Portfolio: This will be the most involved section and it should be the most impressive (next to the main page). While it is always beneficial to be creative, remember that efficiency is key. Navigation should both be interesting AND intuitive.

Be creative. Try to think of new, interesting ways of using navigation for loading content on the page. However, we've all been to some over-designed site where we can't even figure out where the buttons ARE, let alone navigate with them. So the message is....balance creativity with usability.

Quality Assurance, Usability, and Assessment of your Project

Students should always test their applications - there are many reasons for doing so. Namely, doing so validates the quality of your products. It also shows employers that you're not only interested in creating something, but you also care about the end product. You should spend some time focusing on the following areas of your project:

• Aesthetics and Graphics - visually pleasing, well-made graphics, color scheme, etc.
• Layout and General Design - placement of elements to convey site content
• Navigation and Organization - translates into ability to move within application and find content
• Media Elements - effectiveness of audio, video, etc.
• Communication - effectively conveys intended content
• Optimization - downloaded quickly and efficiently, smooth animations, etc..
• Creativity - novel, unique application
• Professionalism - something you'd expect to see developed by a company

Recommended Procedures

To be successful, students must develop a flowchart (or site map), a brief outline describing the sections of their applications, and 3 interface design variations. Before students begin development they must have their preliminary and pre-production work approved. Failure to have this work approved will result in a lower grade. Additionally, once pre-production work is approved the project should not significantly deviate from the original design without the consent of the instructor.

1. Concept: Determine the goals, tasks, and functions of the application.
2. Demographics: Be sure to examine the intended target audience. Consider all factors such as experience, technology, etc.
3. Organizational Design: Create an flowchart / site map and outline depicting the organization of the application. The document / chart should show how the application is organized while the site outline should describe the content that will be presented in various sections.
4. Visual Design: Develop a visual theme or style for the application. Create 3 full-color interface designs using either digital or hand-drawn techniques. Poor sketches or unacceptable presentation (wrinkles in the paper, eraser marks, etc) will result in grade deduction. Students will need color prints for their final submission.
5. Design Approval: Students will presents their designs to the instructor and get feedback and approval for the project. Students are not allowed to proceed with the project without approval from the instructor.
6. Asset Generation / Collection: Once students have received approval from your instructor, they should begin creating and collecting your assets (raster images, vector images, sound files, etc) Graphics created by the developer will generally receive a better grade than "borrowed" graphics.
7. Development: Using their designs and assets, students should begin to create their applications. Provide the necessary level of organization and interactivity with ActionScript.
8. Publication and Distribution: Students should publish the web site to the web server space they are given for all of their assignments.
9. Q/A & Usability Testing: Test your application for quality assurance. Find and correct any bugs or design flaws.
10. Revision: Revise your design according to the results of your testing. Publish the final version of your site.

Deliverables

Students should be prepared to conduct an in-class critique/ peer evaluation of their projects. As such, students should submit their files to their share space on the web server so that it is readily accessible.

You are to deliver the following copies of the project:

1. One finished copy in your share space on the server. Do not modify the files after the due date/time. We will check the timestamp. Your Project1 folder will contain the checkpoint folders listed above with all associated files. You should also provide resources, that is a description of any materials that were not created by the student along with the location of where said materials were acquired (URLs, stock CD's, etc..)

Grading Criteria

Here is an example grading rubric for this project. The grading rubric may be this exact one or it may be slightly modified from this one, subject to the instructor's discretion.

Above average grades will be awarded to those projects that go above and beyond the general specifications of the project. Implementation of the following elements will generally tend to improve the project:

• Aesthetics - original, aesthetically pleasing graphics and overall design
• Animation - advanced but appropriate for project
• Production - additional quality content
• Advanced Interactivity - effective or unique use of ActionScripting or some other technology
• Unique, creative pre loaders
• Flexible/ Liquid GUI's
• Integration of external technologies - XML, Swift 3D, etc.