Interface Programming 2
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.
SYLLABUS:
MAJOR ASSIGNMENT LIST:
| 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. Movie Clips #1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 3 |
| 3. Movie Clips #2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 5 |
| 4. Movie Clips #3 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 7 |
| 5. Flash Site #1A |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 9 |
| 6. Flash Site #1B |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 7 |
| 7. Flash Site #1C |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 9 |
| 8. Flash Site #1D |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 9 |
| 9. Flash Site #1E |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 9 |
| 10. FInal Flash Site |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Week 16 |
CALENDAR:
WEEKLY SCHEDULE + DIGITAL ASSETS:
Click on the top bar for each week to expand or collapse the contents, or you can expand all weeks or collapse all weeks.
Lesson:
Class examples + related links:
AS2 Coding: Simple Button onRelease
buttonInstanceName.onRelease = function() {
//Action goes here
}
Assignment: Due: Week2
- Set up your class web page.
- Complete the "Controlling the timeline" video lesson and post your simple flash web site on your class web page. You can choose either AS2 or AS3 as your programming language - both are accepted.
Lesson:
Class examples + related links:
AS2 Coding: Controlling Movie Clips
onEnterFrame = function() {
movieFrameNumber = _currentframe;
movieClipFrameNumber = myMovieClip._currentframe;
}
b_stopMovie.onRelease = function() {
stop();
}
b_playMovie.onRelease = function() {
play();
}
b_stopMovieClip.onRelease = function() {
myMovieClip.stop();
}
b_playMovieClip.onRelease = function() {
myMovieClip.play();
}
Assignment: Controlling Movie ClipsDue: Week3
- Complete the "Controlling Movie Clips" video lesson and post your flash file on your class web page. Feel free to try to complete the assignment using ActionScript 3.0 (optional).
- Note: Even though the AS2 video lesson uses it, DO NOT USE _root. Instead use either no suffix at all, or _parent (realtive path). See the actionscript in the source lesson file .fla for details.
Lesson:
Class examples + related links:
AS2 Coding: Moving Movie Clips with Buttons
speedx = 0;
speedy = 0;
mc_circle.onEnterFrame = function() {
mc_circle._x += speedx;
mc_circle._y += speedy;
if (Key.isDown(Key.RIGHT)) {
mc_circle._x += 5;
} else if (Key.isDown(Key.LEFT)) {
mc_circle._x += -5;
} else if (Key.isDown(Key.UP)) {
mc_circle._y += -5;
} else if (Key.isDown(Key.DOWN)) {
mc_circle._y += 5;
}
}
b_right.onPress = function() { speedx = 5; }
b_right.onRelease = function() { speedx = 0; }
b_left.onPress = function() { speedx = -5; }
b_left.onRelease = function() { speedx = 0; }
b_up.onPress = function() { speedy = -5; }
b_up.onRelease = function() { speedy = 0; }
b_down.onPress = function() { speedy = 5; }
b_down.onRelease = function() { speedy = 0; }
Assignment: Moving Movie Clips w/ ButtonsDue: Week4
- Complete the "Moving Movie Clips" video lesson and post your flash file on your class web page.
Lesson:
Class examples + related links:
AS2 Coding: Simple Dragging
mc_circle.onPress = function() {
this.startDrag();
}
mc_circle.onRelease = function() {
this.stopDrag();
}
AS2 Coding: Moving Movie Clips with Math
mc_circle.onEnterFrame = function() {
this._x += (newx - this._x)/10;
this._y += (newy - this._y)/10;
}
mc_circle.onMouseDown = function() {
newx = _xmouse;
newy = _ymouse;
}
Assignment: Moving Movie Clips w/ MathDue: Week5
- Complete the "Moving Movie Clips w/ Math" video lesson and post your flash file on your class web page.
Lesson:
Class examples + related links:
AS2 Coding: Mouse Trails via DuplicateMovieClip
i=1;
mc_ball.onEnterFrame = function() {
this.duplicateMovieClip("mc_ball",i,{_x:_xmouse, _y:_ymouse});
i += 1;
}
AS2 Coding: Random MC Generation via DuplicateMovieClip
i=1;
mc_ball.onEnterFrame = function() {
this.duplicateMovieClip("mc_ball",i,{_x:random(550), _y:random(400)});
i += 1;
}
Assignment: Duplicate Movie Clip, Mouse Trails, and Random()Due: Week6
- Complete the Duplicate Movie Clip video lesson and post your two flash files on your class web page:
- Mouse Trails
- Random()
Lesson:
Class examples + related links:
Mid-term Assignment: Flash Web Site (work in progress)Due: Weekly until Week9
- Begin your mid-term flash web site by downloading the illustrator file.
- Import the illustrator (.ai) file directly into Flash.
- Complete the "flash site in a day" video lesson, but ignore the "swf importing technique" in the beginning (exporting a .swf from Illustrator and then importing the .swf into Flash) - this is no longer necessary since Flash now has better import support for text from Illustrator.
- Complete the "flash site - subsections + nested movie clip" video lesson - due at the beginning of Tuesday's class next week.
Lesson:
Class examples + related links:
Mid-term Assignment: Flash Web Site (work in progress)Due: Weekly until Week9
- Complete the "flash site w/ transitions" video lesson. NOTE: Please ignore the dated use of "_root" in the video lesson. Instead use "_parent".
- Complete the "flash site w/ hilite + scrollbar" video lesson.
Lesson:
Class examples + related links:
Mid-term Assignment: Flash Web Site (work in progress)Due: Weekly until Week9
- Complete the "flash site w/ moving hilite" video lesson: add a highlite state and animate it using math.
- Complete the "flash site w/ preloader" video lesson: add a custom preloader to your Flash site.
- Once you have completed all flash site video lessons to date, customize the graphics and redesign the interface. Try moving elements around, creating your own transitions, and ultimately add your personality to your Flash web site by "reskinning" it. Please post the final result for next week's class.
Lesson:
Class examples + related links:
INFORMAL MIDTERM CRITIQUE
- Post the latest version of your flash site with custom graphics/redesigned interface to your www2 site for an in-class informal critique.
Final Assignment: Art 257+258 Flash Web SiteDue: Week 16
- Decide what your flash site will be - the choice is yours. 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.
- WARNING: You will only have two weeks to work on the visual designs for your flash site (due week 11). So start designing your flash site right away. Begin by sketching, then work in either Illustrator, Photoshop, or Flash to create your graphical site design.
- Post your designs to your www2 site early and chris will provide feedback via laulima.
- ----- [ NOTE: we will not meet in-class this week (chris is on the mainland). instead chris will provide support "online" via laulima and via email. on tuesday the kopiko lab will be open starting at 9AM. ] -----
Lesson:
Class examples + related links:
Final Assignment: Art 257+258 Flash Web SiteDue: Week 16
- By now you should have already chosen your client and have a 1st round of designs done. Continue working on your designs and post your FINAL designs to your www2 site for next week's online critique.
- While experimenting with your designs/mockups, take the time this week to research and sketch out the specific interface features of your site. How will the navigation work? Will there be any special rollover effects? Scrolling effects? How will the user transition from page to page within the site?
- Create several test files in Flash. This is crucial for those who will be attempting to create an "experimental" navigation or transition system.
- ----- [ NOTE: due to the holiday, tuesday's physical class is optional. chris will be in kopiko from noon until 4PM for 1-1 Q&A/help/support. for those who choose to not attend the optional support session, please use laulima's discussion section for online support. all students are responsible for all online lessons and assignments (see below). ] -----
Lesson:
Class examples + related links:
ONLINE CRITIQUEDue: Week 11
- Post your final designs to your www2 site.
- EVERYONE must provide critique feedback via laulima in the appropriate discussion section. One comment for each person's designs (that means that each person should be writing 15 comments, one comment for each of your classmates).
Final Assignment: Art 257+258 Flash Web SiteDue: Week 16
- Use the feedback from the critique to make the necessary design changes to improve your site.
- If you haven't done so already, be sure to answer the following questions: How will the navigation work? Will there be any special rollover effects? Scrolling effects? How will the user transition from page to page within the site?
- Continue to create test files in Flash. This is crucial for those who will be attempting to create an "experimental" navigation or transition system.
- The 1st draft of your flash site is due next week.
- ----- [ NOTE: due to the holiday, tuesday's physical class is optional. chris will be in kopiko from 9AM until 4PM for 1-1 Q&A/help/support. for those who choose to not attend the optional support session, please use laulima's discussion section for online support. all students are responsible for all online lessons and assignments (see below). ] -----
Lesson:
Final Assignment: Art 257+258 Flash Web SiteDue: Week 16
- The 2nd draft of your flash site is due next week. Be sure to use CSS and SWFObject when posting your site and pay attention to how your site is positioned inside of the browser window.
Lesson:
Class examples + related links:
Final Assignment: Art 257+258 Flash Web SiteDue: Week 16
- By now you should have the foundation of a working flash web site completed, with all major pages/sections working, and all of your content set and in your site. If you still have placeholders for content, you should add all of your final content this week.
- At this point, you should be asking yourself, "how can I ENHANCE my flash site? How can I make it better? An improved flash intro? Custom scene transitions? Animated rollover effects?"
- Post your site off your class web page. Stylize your HTML using CSS, and place your .swf into your .html file using SWFObject. This will prove to me that you are paying attention to how your site will be positioned inside of your browser window.
Lesson:
Class examples + related links:
Final Assignment: Art 257+258 Flash Web SiteDue: Week 16
- Complete your site by adding all final content.
- Post your site off your class web page using SWFObject.
- If you are finished with your site, ask yourself, "what can I do to make it better? How can I ENHANCE my flash site? How can I make it better? An improved flash intro? Custom scene transitions? Animated rollover effects?"
- Don't forget about the portfolio entry!
- If you have any questions for me over the next two weeks, post them in the discussion board area at Laulima - the online course management site. Be sure to go to the Art 258 discussion board.
Final Assignment: Art 257+258 Flash Web SiteDue: Week 16
- Finish your site and post a link to it on your class web page.
- Create your portfolio entry and post a link to the pdf on your class web page.
- If you have any questions for me this week, post them in the discussion board area at Laulima - the online course management site. Be sure to go to the Art 258 discussion board.
Lesson:
Final Assignment: Art 257+258 Flash Web SiteDue: Week 16
- This is the last week of class; all projects are due.