KCC New Media Arts - Chris Gargiulo's Faculty Web Site

Kapi‘olani Community College, University of Hawai‘i - NMA Interface Design

ART 258

Interface Programming 2

Coding for Rich Media

Interface Programming 2 introduces Flash's internal scripting language ActionScript via projects that combine interactivity and animation. Students learn basic computer programming techniques to create expressive content for interactive web applications.

Interface Programming 2

An Introduction and Course Overview

Rich media interfaces and web applications (RIAs) offer users an expressive experience that differs from tradional HTML/CSS interfaces. Some examples include flash sites for the entertainment industry (movies, bands, etc.), online games, educational learning systems, interactive product promotion and demos, custom gallery systems (for videos and images), interactive advertising, interactive infographics, mobile apps, and much more.

In this class we will learning how to use Flash and accompanying technologies to create expressive interfaces in the form of rich web appications and web sites. During the first few weeks of the semester we will learn the basics of ActionScript, Flash's internal scripting language. During the remaining weeks of the semester, we will go through the full design process of planning, designing, and building one large-scale rich media interface.

Major Assignments

Overview of the Major Projects for this Course.

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 Project Week 16

Calendar

A monthly overview of the semester

Lessons

A Week-by-Week Breakdown

Click on the top bar for each week to expand or collapse the contents, or you can expand all weeks or collapse all weeks.

Week 1: Intro to the Course

Agenda:

  1. Introduction to the course
    • In this class we will learning how to create rich media interfaces in the form of Flash applications and web sites. During the first few weeks of the semester we will learn the basics of ActionScript, Flash's internal scripting language. During the remaining weeks of the semester, we will go through the full design process of planning, designing, and building one large scale rich media interface.
  2. Introduction to the primary project: using Flash to develop a large-scale rich media interface
    • You can choose any interface that you want to work on (yes, you can choose a real-world client).
    • Your interface must be relatively small (approx 3-5 pages in depth, no less)
    • You must go through the full design process, including doing all research
    • You must gather all content
  3. We will take a look at student sites from past years.
  4. Look at a few Flash Examples
    • Flash Web Sites
    • Flash Web Applications
    • Flash Games
    • Flash-authored Stand-alone Presentations
    • Flash-authored Mobile Apps

Presentation:

Class examples + related links:

Flash Web Sites

Flash apps used on HTML web sites

Flash Games

Flash stand-alone presentations

Other:

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 Site Due: Week 2

  1. Set up your class web page. Please note that all students are required to have hosting space to post their designs, assignments, and ultimately their final web site. Students are required to purchase a hosting plan with a third party hosting provider. Past students have purchased hosting plans from Bluehost, iPage, Super Green Hosting, and GoDaddy (these are just a few of many hosting providers available). Plans should include ample disk space (ie. more than 2GB or unlimited), support for CGI, PHP, and MySQL, multiple domain hosting (to host more than one site), one-click install/support for Wordpress, Joomla, and Drupal (popular CMS options), and a low, competitive price (an example rate is around $3-$5/month – this is subject to change based upon current trends for hosting prices).
  2. Once your class web page is set up, email the url to the instructor.
  3. Study & memorize the AS3 Mouse Event code above.
  4. Watch the Simple Flash Site (controlling the timeline) video lesson, then create a simple Flash web site. Post it on your class web page.
  5. Reading :: "Getting Started with ActionScript" chapter on Adobe.com's LiveDocs
Week 2: ActionScript Basics

Agenda:

  1. In-class Exercise :: Contolling Movie Clips

Class examples + related links:

Inspiration:

Infographics:

Assignment-related links:

Assignment: Controlling Movie Clips Due: Week 3

  1. Watch the Controlling Movie Clips video lesson, complete the Contolling Movie Clips in-class exercise, and post it to your class web page.
  2. Start doing personal research on Flash authored rich media applications and interfaces. Identify a few potential sites/interfaces/apps that you find interesting, bookmark them for future reference, and start thinking about the interface that you eventually will want to work on for your final project.
Week 3: ActionScript + Movie Clips

Agenda:

  1. In-class exercises:

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 Clips Due: Week 4

  1. Complete the Moving Movie Clips with Math and Moving Movie Clips with Math ("Chasing") in-class exercises and post them to your class web page.
  2. Complete the Flash web site - part 1 (import & setup) in-class exercise and post it to your class web page.
  3. Continue your research on Flash authored rich media applications and interfaces. Work toward Identifying potential clients/sites/interfaces/apps that you may want to work on for your final project.
Week 4: Building a Flash Web Interface
Week 5: Building a Flash Web Interface

Agenda:

  1. In-class exercises:

Class examples + related links:

Resource:

Assignment-related links:

Assignment: Flash Web Site Due: Week 6

  1. Complete the Flash web site - part 3 (selected nav state), Flash web site - part 4 (moving nav state), and Flash web site - part 5 (custom preloader) in-class exercise and post them to your class web page.

Assignment: Reskinned Flash Web Site Due: Week 9 (Thurs)

  1. Once you have completed all of the weekly Flash web site exercises, reskin the existing site to have your own design.
  2. Post your reskinned Flash site on your class web page using SWFObject.

Assignment: FINAL Mobile App Due: Week 16

  1. It is time to work together in groups to decide what your FINAL interface will be - the choice is ultimately yours, but I suggest choosing something simple (to start) with the flexibility to expand/grow (feature-wise) as we learn more about how to use Flash for mobile app development. Examples: you can make up your own site, choose a hypothetical client, redesign an existing site, or find a real client and build a real site.
  2. WARNING: You will only have three weeks from today to plan your interface and to work on the visual designs (due week 10). So start designing right away. Begin by sketching, then work in either Illustrator, Photoshop, or Flash to create your graphical interface design and assets.
  3. Come to class next week with project ideas.
Week 6: Building a Flash Web Interface

Agenda:

  1. For reference (we are not going to complete in-class, nor do you need to as an assignment):
  2. In-class exercises: Sliding Interfaces.
  3. Final project brainstorm:
    • We will do some more small group work with the goal of draftng a list of final project ideas.

Class examples + related links:

Flash Sites & Examples:

The Last Steps for Building a Flash Web Site:

Archived Steps (for future reference):

Sliding Interfaces:

Assignment: Reskinned Flash Web Site Due: Week 9 (Thurs)

  1. Complete the sliding interface in-class exercise and post it to your class web page.
  2. Now that you have completed all of the weekly Flash web site exercises, reskin your site or redo all of the steps from scratch with your own design.
  3. Post your reskinned Flash site on your class web page using SWFObject.

Assignment: FINAL Mobile App Due: Week 16

  1. Continue your research on Flash authored mobile apps. Come to class next week with a final list of concrete project ideas.
  2. Even if you have not yet chosen your final project idea, start thinking about/working on your designs for your final project.
Week 7: Final Project - Mobile App

Agenda:

  1. Final Project Meeting
    • We will meet as a large group to discuss final project ideas and choose which projects each team will pursue.
  2. Flash Demos:
    • Full-browser Flash Web Sites
    • Image slightly moving to the mouse in Flash
    • Scrolling Navigation in Flash

Class examples + related links:

Full-browser Flash Web Sites:

Scrolling Navigation (+ simple image/mouse movement):

Simple image/mouse movement:

Assignment-related links:

Assignment: Reskinned Flash Web Site Due: Week 9 (Thurs)

  1. Once you have completed all of the weekly Flash web site exercises, reskin the existing site to have your own design.
  2. Post your reskinned Flash site on your class web page using SWFObject.

Assignment: FINAL Mobile App Due: Week 16

  1. Work together as a group to chooseyour final project. Identify the client, target audience, etc. and write up a brief description to be included within a creative brief. Add to your creative brief any related or pertinent information that may be helpful.
  2. Draft a site map that clearly illustrates the basic information architecture of the interface.
  3. As a group, decide how you will post your creative brief and site maps - either via one of your class web pages or Laulima - your choice.
Week 8: Final Project - Mobile App

Agenda:

  1. Creative brief and site map presentations.
  2. Work week to take advantage of class time to discuss your projects as a group and begin working on your visual interface designs.

Assignment: Reskinned Flash Web Site Due: Week 9 (Thurs)

  1. Once you have completed all of the weekly Flash web site exercises, reskin the existing site to have your own design.
  2. Post your reskinned Flash site on your class web page using SWFObject.

Assignment: FINAL Mobile App Due: Week 16

  1. Begin your visual designs for the interface. Create visual designs (jpgs) for each page/section of the app.
  2. Post your designs to your class web page. (due week 10)
Week 9: Final Project - Mobile App

Agenda:

  1. Lesson: How to insert flash into HTML using SWFObject
  2. In-class group work and in-class working time to finish your visual designs.
  3. "Reskinned" midterm due at the 2nd class meeting this week.

Class examples + related links:

SWFObject

Assignment: Reskinned Flash Web Site Due: Week 9 (Thurs)

  1. Once you have completed all of the weekly Flash web site exercises, reskin the existing site to have your own design.
  2. Post your reskinned Flash site on your class web page using SWFObject.

Assignment: FINAL Mobile App Due: Week 16

  1. Continue working on the visual designs for your flash site (due week 10).
  2. Post your designs to your class web page.
Week 10: Final Project - Mobile App - Designs Due

Agenda:

  1. Informal Critique: Final Project Designs

Assignment: FINAL Mobile App Due: Week 16

  1. Work with your team to define remaining tasks.
    • Lead developer(s)
      • Flash authored?
      • or DW/HTML/CSS/Javascript + Phonegap?
    • Feature A, B, C, etc. developer
    • Logo/icon designer
    • App UI designer
    • HTML page designer
    • HTML page coder
  2. Continue tweaking/improving your visual designs as you code.
Week 11: Final Project - Mobile App

Agenda:

  1. Team Meetings
    • Status updates on individual tasks
    • Define immediate in-class needs and decisions that need to be made today
    • Define individual tasks for the next week.
  2. In-class work time to continue working on the final project. One-on-one support during class.

Assignment: FINAL Mobile App Due: Week 16

  1. Continue coding your final project. By now you should be working on the following:
    1. Multiple Tests of the Core Features/Functionality
      • Authoring environment tests (ie. Flash vs. HTML)
      • Third party plugin tests (ie. Google Maps API, JQuery Mobile, Flash XML galleries, Javascript galleries)
      • Consider taking both top-down and bottom-up approaches. For example, a top-down approach would start using an existing framework, such as an existing Javascript Gallery system or Flash XML gallery system, then tweaking it to fit your needs. The bottom-up approach would be to code it from scratch.
    2. The Master Authoring Environment Document
      • If you are authoring in Flash, a functioning main/primary/shell Flash .fla with all consistent interface elements (logo, navigation, etc.) and sub pages.
      • If you are authoring HTML/CSS/Javascript, a functioning site (or page, such as is the case with a simple JQuery Mobile app) with all of the primary content sections.
    3. Scene-to-scene (section-to-section) Transitions
      • If you are authoring in Flash, transitions should be animated.
      • If you are authoring HTML/CSS, perhaps JQuery Mobile or some other Javascript third party mobile plugin will work.
    4. The HTML/CSS container that will hold the "demo" version of your latest draft will need to a) designed and b) coded.
      • If you are authoring in Flash, be sure to use SWFObject to place your swf onto the HTML page.
      • If you are authoring in HTML, consider using an iframe.
  2. Once you have a solid, functioning prototype or 1st draft, then you can consider the following:
    • Adding experiential enhancements, like an animated preloader and mobile-like animated transitions.
    • Consider adding sound effects.
    • Continue improving your visual designs as you code.
    • Custom icons/graphic symbolism.
  3. Roles to consider for this week:
    1. Project Manager - [in charge of tracking to-do lists and the primary internal site that will showcase the full creative process]
    2. Lead UI developer - [setting up the primary authoring environment]
    3. Primary Feature developers/testers - [conducting smaller tests for various app features & functionality]
    4. Logo/icon designer - [main app logo + main app icons]
    5. App UI designer - [in charge of the master Photoshop PSD files and the creation of any/all graphical assets]
    6. HTML page designer - [working on the visual layout and content of the app web page that will showcase the app including the working demo version of the app]
    7. HTML page coder - [creating the working html version of the web page that will showcase the app including the working demo version of the app]
Week 12: Final Project - Mobile App - 1st Draft Due

[ -- NO FACE-to-FACE CLASS -- ]

[ -- Class will be held online asynchronously via Laulima -- ]

Week 13: Final Project - Mobile App

Agenda:

  1. Statue report meeting.
  2. In-class work time to continue working in groups and coding.

Class examples + related links:

Mobile Frameworks links:

Assignment: FINAL Mobile App Due: Week 16

  1. Continue coding your final project. By now you should be working on the following:
    1. The Final App (web app)
      • The fully functioning web app (starting from the chosen prototype).
      • Integrating the final design into the prototype.
    2. The web page showcasing the app that will hold the "demo" version of your latest draft will need to a) designed and b) coded.
      • Design should be near finalized.
      • Code it.
    3. The web page showcasing the process of creating the app that will hold all of the final assets (site map, wireframes, design comps, zip files, etc)
      • Gather content.
      • Code it and post it.
Week 14: Final Project - Mobile App - 2nd Draft Due

[ -- NO FACE-to-FACE CLASS -- ]

[ -- Class will be held online asynchronously via Laulima -- ]

Week 15: Final Project - Mobile App

Agenda:

  1. Last full work week. In-class work time to meet in groups and finish your final project due next week. Group and one-on-one support during class.

Assignment: FINAL Mobile App Due: Week 16

  1. Continue coding your final project. By now you should be working on the following:
    1. The Final App
      • The fully functioning web app with the final design.
      • Testing the web app on all targetted devices.
      • Testing Phonegap to find out whether or not we can convert the app from a web app to a native app.
    2. The web page showcasing the app that will hold the "demo" version of your app.
      • Should include a link directly to the working web app.
    3. The web page showcasing the process of creating the app that will hold all of the final development assets (intro/brief description, site map, wireframes, design comps, final source zip files, final links to the app web page, web app, etc)
      • Be sure to add an intro/brief description to the top of the page.
      • Be sure to add links to 1) the final web page showcasing the app and 2) the final working web app.
Week 16: Final Project - Mobile App - [FINAL]

Agenda:

  1. Final Critique
    • 30-45 minutes per team to present.
Thursday Time
---------- SETUP ---------- 10:45-11:00
Team #1 11:00-11:45
---------- 15 Min. BREAK ---------- 11:45-12:00
Team #2 12:00-12:45
---------- CLOSING REMARKS ---------- 12:45-1:15

Quotes

Random quotes that are relavent to this class

"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

↑ back to the top ↑