Interface Programming 2 introduces Flash's programming language ActionScript via projects that combine interactivity and animation. Students will learn basic computer programming techniques used to add interactivity to rich media and web-based applications.
"We don't have a single "Flash developer" at Big Spaceship. In fact, we grimace at titles like that.�We happen to be good at (and love) Flash, but we also happen to be good at (and love) a couple trillion different other technologies.�We believe in strategic thinking and great design and pushing the limits. Nowhere do we say it has to be done in technology X or programming language Y in order to be a successful and engaging project, and we don't believe the users who engage in the projects we put out there do either."
Jamie Kosoy, Associate Technical Director at Big Spaceship. From his Spaceship Labs blog post entitled "A Plea for Developer Unity."
"The cool thing is I'm working in one environment with Flash. I'm drawing vectors, writing programs, and then I can output to three different media."
Joshua Davis, Artist, Designer, and Technologist
| Assignment: | Week: | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Due: |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1. Simple Flash Site | Week 2 | |||||||||||||||||
| 2. Complex Flash Site | Week 7 | |||||||||||||||||
| 3. FInal Flash Site | Week 16 |
Click on the top bar for each week to expand or collapse the contents, or you can expand all weeks or collapse all weeks.
Agenda:
Presentation:
Class examples + related links:
Flash Web Sites
Flash apps used on HTML web sites
Flash Games
Flash stand-alone presentations
Hosting Examples:
AS3 Coding: Mouse Event code (Memorize)
//as3 import class
import flash.events.MouseEvent;
//as3 button code
myButton.addEventListener(MouseEvent.CLICK, myFunction);
//as3 button functions
function myFunction(event:MouseEvent):void {
//action goes here
}
Assignment-related links:
Assignment: Simple Flash Web SiteDue: Week 2
Agenda:
Class examples + related links:
Inspiration:
Infographics:
Assignment-related links:
Assignment: Controlling Movie ClipsDue: Week 3
Agenda:
Class examples + related links:
Inspiration:
AS3 Coding:
var newx:int = 350;
var newy:int = 200;
// Move the circle according to the values of newx and newy
addEventListener(Event.ENTER_FRAME, moveMyCircle);
function moveMyCircle(event:Event):void {
mc_circle.x += (newx - mc_circle.x)/10;
mc_circle.y += (newy - mc_circle.y)/10;
}
// Change the values of newx and newy via mouse location on click
stage.addEventListener(MouseEvent.MOUSE_DOWN, changeDestination);
function changeDestination(event:Event):void {
newx = mouseX;
newy = mouseY;
}
// Change the values of newx and newy via mouse location continually
addEventListener(Event.ENTER_FRAME, changeDestination);
function changeDestination(event:Event):void {
newx = mouseX;
newy = mouseY;
}
Assignment-related links:
Assignment: Controlling Movie ClipsDue: Week 4
Agenda:
Class examples + related links:
Flash Site examples:
Assignment-related links:
Assignment: Flash Web SiteDue: Week 5
Agenda:
Class examples + related links:
Resource:
Assignment-related links:
Assignment: Flash Web SiteDue: Week 6
Agenda:
Class examples + related links:
Flash Sites & Examples:
AS3 Coding for Step 6 (movie clip sections):
//initiate home content var defaultSection:mc_section_home = new mc_section_home(); mc_content.addChild(defaultSection); //dynamically add the targetsection movie clip into mc_content var tempSection:String = "mc_section_" + targetsection; var mc_section=new (getDefinitionByName(tempSection) as Class)(); mc_content.addChild(mc_section); }
AS3 Coding for Step 7 (external swf sections):
//initiate home content
var externalSWF:Loader = new Loader();
var url:String = ("swf/home.swf");
var urlReq:URLRequest = new URLRequest(url);
externalSWF.load(urlReq);
mc_content.addChild(externalSWF);
//dynamically load external swf sections into mc_content
var url:String = ("swf/"+targetsection+".swf");
var urlReq:URLRequest = new URLRequest(url);
externalSWF.load(urlReq);
mc_content.addChild(externalSWF);
AS3 Coding for Step 8 (preload external swf sections):
//preload external swfs and tell cm_transition to stop
externalSWF.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
runSubPreloader);
mc_transition.stop();
function runSubPreloader(f:ProgressEvent):void {
var subpercent:Number = Math.floor( (f.bytesLoaded*100)/f.bytesTotal );
if(mc_subpreloader is MovieClip){
mc_subpreloader.gotoAndStop(subpercent+1);
mc_subpreloader.txt_percent.text = (subpercent + "%");
}
if(subpercent > 99){
mc_subpreloader.gotoAndStop(1);
mc_transition.play();
}
}
Assignment-related links:
Assignment: Flash Web SiteDue: Week 7
Agenda:
Class examples + related links:
Sliding Interfaces:
Scrolling Navigation (+ simple image/mouse movement):
Assignment-related links:
Assignment: Reskinned Flash Web SiteDue: Week 9 (Thurs)
Assignment: FINAL Flash Web SiteDue: Week 16
Agenda:
Assignment: Reskinned Flash Web SiteDue: Week 9 (Thurs)
Assignment: FINAL Flash Web SiteDue: Week 16
Agenda:
Assignment: Reskinned Flash Web SiteDue: Week 9 (Thurs)
Assignment: FINAL Flash Web SiteDue: Week 16
Agenda:
Class examples + related links:
Assignment: FINAL Flash Web SiteDue: Week 16
Agenda:
Class examples + related links:
Custom Animated Buttons:
Assignment: FINAL Flash Web SiteDue: Week 16
Agenda:
Assignment: FINAL Flash Web SiteDue: Week 16
Agenda:
Class examples + related links:
Full-browser Flash links:
AS3 Coding:
//imports
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
//set stage scaling and alignment
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
//stage resize handler listener
stage.addEventListener(Event.RESIZE, resizeHandler);
//stage resize handler function
function resizeHandler(event:Event):void {
setBackground();
setPos();
}
function setBackground() {
mc_bg.x = stage.stageWidth/2;
mc_bg.y = stage.stageHeight/2;
mc_bg.width = stage.stageWidth;
mc_bg.height = stage.stageHeight;
if (mc_bg.scaleX < mc_bg.scaleY) {
mc_bg.scaleX = mc_bg.scaleY;
} else {
mc_bg.scaleY = mc_bg.scaleX;
}
}
//function to set the position of individual interface elements
function setPos() {
mc_content.x = stage.stageWidth/2;
mc_content.y = stage.stageHeight/2;
mc_footer.x=0;
mc_footer.y=stage.stageHeight-60;
mc_nav.x=0;
mc_nav.y=stage.stageHeight-60;
logo_mc.x=stage.stageWidth-300;
logo_mc.y=0;
}
}
Assignment: FINAL Flash Web SiteDue: Week 16
Agenda:
Class examples + related links:
Flash AS3 MP3 Players:
Assignment: FINAL Flash Web SiteDue: Week 16
Agenda:
Assignment: FINAL Flash Web SiteDue: Week 16
Agenda:
| Student | Time |
|---|---|
| ---------- SETUP ---------- | 8:00-8:15 |
| #1: Helen Chang | 8:15-8:25 |
| #2: Jennifer Lazariuk | 8:30-8:40 |
| #3: Jeremiah Skurtu | 8:45-5:55 |
| #4: Reynaldo Minn | 9:00-9:15 |
| ---------- 15 Min. BREAK ---------- | 9:15-9:25 |
| #5: Michael King | 9:30-9:40 |
| #6: Mardee Melton | 9:45-9:55 |
| #7: Davin Char | 10:00-10:10 |
| ---------- 45 Min. BREAK ---------- | 10:15-11:00 |
| #8: Melissa Lum | 11:00-11:10 |
| #9: Jason Mudrick | 11:15-11:25 |
| #10: Randall Shiroma | 11:30-11:40 |
| #11: Kathryne Sakata | 11:45-11:55 |
| ---------- 15 Min. BREAK ---------- | 12:00-12:15 |
| #12: Emma Denight | 12:15-12:25 |
| #13: Elly Chen | 12:30-12:40 |
| ---------- CLOSING REMARKS ---------- | 12:45-1:15 |
Assignment: RevisionsDue: Week 17
Find it fast.
Interface Programming 2
KCC | New Media Arts
Kopiko 202
T,TH :: 10:45 am - 1:15 pm
Instructor: Chris Gargiulo
Office: Olapa 225
Laulima is the online course management web site for the University of Hawai‘i. Login to visit this course's online resources such as the discussion board, chat room, and drop box.
Below is a list of student web pages for each student enrolled in this course.
Below is a list of completed web sites created in past classes in Interface Design 2.
Below is a list of online resources related to this course.
Below is a list of helpful sites on ActionScript.
Below is a list of sites that showcase sites built using Flash.
© Copyright 2008 KCC | New Media Arts KCC|NMA logo concept by Shawn Tamura