Flash Project 2

From Cmsc434_f08
Jump to: navigation, search

Flash Project 2: Free items around the corner (part 1)

Contents

Due

October 14, 2008.

Method of submission:

  • Email your .FLA file to umd.cs.ta at google's email service (@gmail.com).
  • DO NOT upload your application to the wiki.

Description

When disposing of usable household items, it is a courteous common practice to leave them on the street for others to pick up and enjoy, before being irretrievably turned into waste.

This practice is both kind to other people and to the environment. It also requires very little effort on the part of the original owner of these items. Unlike holding a garage sale or advertising the items on http://www.ebay.com, http://www.craigslist.org, etc., there is no need to interact directly with finders or follow-up in any way on the items. Unclaimed items will be turned into trash by the residential waste disposal service.

The drawback of this approach is that the scope of advertising is very limited. Normally, only passerbys are informed of the availability of these items. Given the short timeframe between the items being placed in the street and their turning into waste, the chance for their reuse is significantly reduced. In an effort to ameliorate the situation, we propose a website that will allow owners to advertise the items they are putting on the street, and will allow searchers to look for specific items that they are interested in or possibly subscribe to get notified when these items become available.

In this assignment, you are to design the data entry form used by owners (posters) to advertise their items.

Requirements

  • Set the stage dimensions to 800x600.
  • The posting form must include the following fields:
    • A description of the items (TextArea).
    • US street address for pickup: address (TextInput), city (TextInput), state (ComboBox), ZIP (TextInput, numbers only, limit 5 digits).
    • Start availability date: Use DatePicker (initialized with current date), see details below.
    • Start availability time: hours (NumericStepper), minutes (NumericStepper), and AM/PM (ComboBox). Initialize with current time.
    • Picture upload: Filename (TextInput), Browse (Button), Preview (UILoader).
    • Submit (Button), Cancel (Button).
  • The form must be easy and quick to use. It is anticipated that owners will not spend more than 5 minutes to fill it up, so your design must take that into consideration. Otherwise, you are allowed to add more fields.
  • Upon submission present a preview of the posting formatted as it will appear to a searcher.

All fields except the picture are mandatory input.

Additional Resources

File browsing and previewing

The following code snippet shows how to implement the file browsing behavior. You should show the selected filename in the corresponding TextInput field and a preview of the image in the UILoader component.

NOTE: Due to security restrictions you will not be able to obtain the full path. For the purposes of this assignment, we are going to assume that the picture is stored in the same directory as your SWF.

 btnBrowse.addEventListener(MouseEvent.CLICK, clickHandler);
var fileRef : FileReference = new FileReference(); fileRef.addEventListener(Event.SELECT, selectHandler);
function clickHandler(evt : Event) : void { var imagesFilter : FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png"); fileRef.browse([imagesFilter]); }
function selectHandler(event:Event):void { var fileRef : FileReference = FileReference(event.target);
txtFilename.text = fileRef.name; picPreview.source = fileRef.name; picPreview.scaleContent = true; }

Date picking

 NOTE: The original DatePicker component has been replaced since it wasn't
 compatible with ActionScript 3.0, see details below.

You may use the following open-source DateChooser component DateChooser.

This version is an ActionScript 3.0 port of the component available here DatePicker. The new version includes several bug fixes and performance enhancements. You may also use any other DateChooser with similar functionality.

For you convenience, DateChooser implements two functions that control the calendar's visibility. The functions are:

 hideCalendar()
 showCalendar()

Grading Criteria

The grading for this assignment will be based on:

  1. (50%) Completeness: Are all the requirements fulfilled?
  2. (20%) Coding sytle: Is your source code commented? Does it make good use of layers and symbols?
  3. (15%) HCI Principles: Was your interface designed according to the Eight Golden Rules (or other principles from class)?
  4. (15%) Aesthetics: Was your use of fonts, colors, animation, and so forth aesthetically pleasing (e.g., readable text)?