Introduction to Flash MX
 |Sofia Home | Content Gallery |
Home
Syllabus
Schedule
Lessons
Assignments
Exams

7.4 Final Project

General Guidelines

You can select one of the following 3 project themes. Any selection should illustrate use of the required Flash techniques listed later on this page. Review Macromedia's Usability Tips before beginning your project. Your final will be ONE .swf file only. Please do not reuse homework assignments. Create a totally integrated website with interactive buttons and a main menu. Do not submit a self-running linear animation for your final project.

    1. A professional website for a real or fictitious company, organization, non-profit.
    2. A professional gallery or portfolio of work.
    3. An educational project or academic presentation, lesson, or lab.

If your scope for your project is too broad, create your project in modules so that you can submit a great fully-functional and professional final project and add to it as you have more time and resources after the class session is over. This way, you can have a high quality presentation in any stage of development. Keep this simple. Work in modules. Make every stage of development appear complete before moving to the next stage.

If you're going to have links to 6 labels but you only have time to complete the work for 4 labels, don't include the buttons that link to the 2 labels that are currently 'under construction'.

If you use bitmap images, be sure that the image is necessary to compensate for the added file size. Make sure any external media, bitmap, sound are high quality and optimized.

A simple preloader is required for your final. Your preloader will help maintain the interest of the user and hopefully prevent boredom while waiting for large file bitmaps and sounds to load. If you can't justify the use of bitmaps and large sound files, don't use them.

Please do not submit any 'under construction' work in your final. The final should appear complete when submitted even if you know you are going to add more to it later.

Back to Top

More Instructions

Take time to read these instructions carefully. Then, read them again!

FRAME LABELS or SCENES: Use frame labels with or without scenes and the goTo actions for your navigation. Do not use loaded .swfs, or links to other .swf files for this beginning course project.

CREATE ONLY ONE .FLA FILE: Publish only one .fla file into one .html file and one .swf file. In the Publish Settings dialog box, click on the Flash tab, and generate a size report. If your .fla is over 3 MB, optimize your movie to stay under 3 MB.  Try to keep your Flash less than 1 MB.

You can do the following to optimize your file:

  • Remove some bitmap images.
  • Resize the width and height of the bitmaps in an image editing program, compress the image to maintain quality but lower file size, and then re-import them in Flash.
  • Remove or edit some sound files - use a sound editing program to shorten the loops.
  • Reduce the stage size of the movie and resize all the elements on the stage and your library.
  • Remove some shape tweening which is processor intensive.
  • Limit embedded fonts.
  • Limit or remove gradients - gradients add to the file size.
  • Remove all unused library items and then save the file with a new filename.

When you publish, generate a size report to identify what is taking up the most amount of space in your project. Limit your fonts to only 3 font faces. Additional embedded fonts can make your movie larger. Reread the optimizing your .fla pages in the textbook.

Include a main screen for navigation and consistent navigation on all screens so that viewers can leave a screen at any time. Allow your users to get back to the main menu from every screen without having to go through your preloader or view the opening animation each time they want to return to the navigation menu. Additionally, pay attention to uniformity of design elements and placements, consistent theme of color and iconography and fonts, etc.

You are expected to be able to create ONLY ONE .html file and one .swf file for this project. All new screens should be created by using frame labels and the goToAndPlay() action or goToAndStop() action on the main timeline of scene 1 or other scenes. Do not embed different .swf files into different .html documents.

Back to Top

Requirements

Required Competency

Demonstration of Competency

List specific ways this competency was demonstrated. Use the Grading Rubric to determine the level of competency demonstrated for each requirement.
User Interface: intuitive and logical navigation and interactivity with a way back to the main menu or navigation screen from EVERY screen.  
ONE SELF-CONTAINTED .fla file published as ONE .swf and ONE .html file. NO links to .swf files and no links to .html files except external (not created by you) websites.  
All links to external websites must be targeted to _blank to open a new browser window.  
Uniformity of design elements, theme, color, iconography and fonts.  
Motion tween  
Shape tween  
Motion guide  
Text effects  
Masking  
Frame actions including stop, play, and go to actions.  

Frame labels to identify areas of your timeline and to use for scripting your buttons.

 
Quick-action (incidental) sound(s) applied to buttons or frame actions.  
1 longer background sound loop.  
1 sound_toggle button to mute and play the background sound loop. (one button only)  
1 functioning email mailto: link either using static text or a button with the getURL action.  
3 button actions from the Basic Actions Set such as play, stop, gotoAndPlay.  
Library cleaned of unused library items and the .fla file RENAMED using File Menu - File>Save As...after the library is cleaned.  If you don't rename using the SAVE AS feature, your .fla file size will not decrease when you clean the library.  
Use the smallest stage size possible for your design. List the dimensions of the stage.  

Create and link one screen of credits where you will list your name, functioning email address link, functioning URL link if you have a URL, date, course, instructor, and project name. Make sure that the email address and URL are active links that will open your email client or a NEW browser window.

 
Individual layers for actions, labels, and all other elements. Layers named descriptively.  

2 or more movie clip symbols with several instances of one movie clip symbol on the stage.

 
2 or more button symbols with rollover states, sound in the button and well-defined hit areas. If using text as buttons, be certain to use a solid shape to define your hit area or the user will have to mouseOver a part of a letter to get the button effect.  
Maximum of 3 font faces for the project unless designing about fonts. Consistency of fonts: (device/ embedded/ convert to shapes).  
Create a small preloader.  
Create a screen with active text links to illustrate how you used these requirements. In other words, create a frame label "requirements" and create a list of these requirements. Illustrate how you fulfilled each competency in your project making the text a link to the frame label that has the effect. Put a link back to the requirements frame from all your other frames. Use the goTo action with frame labels to achieve this. You can write a brief description of how you fulfilled the competency next to the link. You can use an invisible button to create the link or button text.  
Name 4 properly named files in either zip or stuffed formats: .zip for Windows users, .sit for MacOS users:  
1 working .fla file named lastname_final.fla  
1 published .swf file named lastname_final.swf  
1 associated .html file named lastname_final.html  
1 .txt file identifying these competencies and where and how you used them in your final project. Download this file, fill out, and return to your instructor as lastname_final.txt or lastname_final.rtf.  
Name(s) of the classmate whose project you reviewed and approved for submission.  
Names of the 2 classmates who gave you feedback, support and approval for your final project based on these required competencies.  

Your Name:

Name of 1st Code Reviewer and in depth critique:

Name of  2nd Code Reviewer (if applicable):
TOTAL POINTS and GRADE will be assigned by the instructor.

Critique: Critique as if you were a professional critic. Discuss what works and why. Discuss elements of design, time, structure, continuity, unity, sound, quality of graphics, ease of navigation, consistency of form, repetition, contrast, dynamic energy, and visual cues to the user. Are button hit states clearly defined? Do URLs open in a new browser window? What is outstanding, original, unique about this piece? How could this piece be improved for better usability? Are the fonts smooth and clear? Do the elements blend?

Here are a few things you can do to improve your final project:

  • limit the use of shape tweens and don't use complex (or any) shape tweens in a preloader...shape tweening uses a lot of processing power and can really slow down your movie
  • limit use of font families - embedding fonts adds to file size
  • open external html links in a new window by targeting the window to "_blank" ...otherwise your user will go out of the Flash movie into the new webpage and when they hit the back button, they will have to watch the preloader over again
  • always allow the viewer to return to any of the frames without having to sit through the preloader again
  • make the hit state of text buttons a complete filled rectangle so the user doesn't have to mouse onto a thin part of a letter in order to get the button to work

The above guidelines apply if you are taking the course for a grade or credit.

See FINAL PROJECTS of former students of this course.

Back to Top

Summary

Phase 1 of the Design Process:

  • Define the purpose of your project
  • Define your target audience
  • Assess your skills, knowledge, time, etc.
  • Define your content
  • Define your tasks
  • Create a storyboard - a series of sketches to describe the content of a sequence of screens
  • Define the flow of your project
  • Create a script of specific text and narration
  • Develop an interface metaphor
  • Define the structure

The following information must be included in your storyboard:

  1. a sketch or drawing of each screen
  2. color, placement, and size of graphics
  3. actual text for each screen
  4. color, size, and type of font
  5. animation, Video, Audio, Interactivity
  6. narration and text cross referenced with its corresponding storyboard number
  7. audience interaction

This is the last section of this lesson. Please proceed to the Assignments area.

Back to Top

Up » 7.1 Labels & Navigation » 7.2 Scripting the Buttons » 7.3 Storyboarding » 7.4 Final Project