User Interface Lab: PUI Prototype Lab

TERM
NUMBER
TIME
LOCATION
Fall 2013
05-433 A
M 9:00-10:20a
DH 1117
INSTRUCTOR
EMAIL
OFFICE HOURS
Iris Howley
ihowley {at} cs. cmu .edu
NSH 1505 Tuesdays 2-3p
Other days/times by appointment in NSH 4617


| Announcements | Introduction | FlashBuilder | Tips for Programming | Course Materials |

Announcements
  • Now holding office hours in NSH 1505 Tuesdays 2-3pm (Same time, different place)
  • This is not a programming course, but it does require some programming knowledge. Remember to start assignments early because programming takes time!
    • Great resources include: your instructor (not last minute), fellow students (for general coding & debugging issues, no duplicating code), and the Internet (cite and comment all code you use).
    • Here's a good collection of video tutorials from Adobe to get you started: http://www.adobe.com/devnet/flex/videotraining.html
Introduction
In this lab, you will learn fundamental concepts, skills and tools to rapidly prototype interactive applications. At the end of the course you will be able to:
  • use programming tools to express your thoughts computationally (use programs as a medium for expression of design)
  • be credible when you talk to people who do the production implementations.
  • evaluate intuitively what's hard and what's easy to actually make.
  • experience the interactive design process (implement prototypes, test them with users, and then modify them based on your findings).


FlashBuilder
  • The lab will largely consist of hands-on working through of the assignments. You are required to bring your laptop ready to the lab. Please download and install Flash Builder 4.6 (not 4.7) on your laptop before the lab time.
  • Download FlashBuilder 4.7 Trial (no 'Design' view)
  • Having trouble getting FlashBuilder to run your code? Change your default browser that FlashBuilder uses to run your files. See this website: http://flashadvanced.com/setting-up-default-browser-in-flex-builder/ (set to Safari or Firefox, not Chrome)
  • To open Flex Projects (.fxp) in FlashBuilder 4.6: File > Import FlashBuilder Project
  • To export your Flex Projects to a .fxp file in FlashBuilder 4.6: File > Export FlashBuilder Project


    •
    Tips for Programming
    Remember that your Data Model needs to communicate with your GUI in order for anything to happen!

    Try the following steps before you begin programming in Flex:

    1. Start by listing all the widgets you will need (buttons, labels, text areas, images, etc.).
    2. Implement only the widgets in FlashBuilder/XML.
    3. Then list all the functions you’ll need and what they should do (event handlers, converting functions, etc.).
    4. Type the function declarations (i.e. lines like “protected function init():void”), and include “what they should do” as comments in the functions.
    5. Choose one chunk to implement & test. Maybe start with only one bulletpoint that is 'required' in the homework.
    6. Implement your first “chunk.” Test it to make sure it works.
    7. Select, implement, and test another chunk. Make sure your previous chunks still work after you’ve added new code.


    Materials
  • Lecture 7 (10/14/2013)
    • Lecture 7 - Project1B.fxp (In FlashBuilder: File > Import FlashBuilder Project (fxp))
    • One Possible Solution:
      private function onHit(ballRadius:int):void {
	if (playing && ballRadius <= 40) { // we're hitting a friend
		invincibleMode();
	} else if (playing && !isInvincible) { // we're hitting an enemy
		playing = false; // stop playing
		var endTime:Date = new Date();
		var totalTime:int = (endTime.time - startTime.time)/1000; // how many secs passed
					
		Alert.show("You lasted " + totalTime +"s.\nPlay again?"); // dialog box
		onDialogRespond(null); // DO NOT DO THIS. This is a hack!
		invincibleMode(); // need to do this so that we don't lose immediately upon replay
	}																			
}
  • HW2
  • HW1
    •