Meeting Times and Location:
Tuesday / Thursday
Room 231 11:00am - 2:00pm
Syllabus: im2490syllabus.doc
Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11
Interactive Motion Scripting - Week 1
Tuesday: Welcome to Interactive Motion Scripting. Today we'll be going over the Syllabus for the class, then introducing some of the concepts, software and "languages" we'll be learning about throughout the quarter.
Interactive media design is a vast and quickly growing field. In this class we will be exposed to one of the most powerful authoring tools in the industry specifically designed to generate interactive applications, Flash MX. Our exposure will include learning to develop with Actionscript, the scripting language specific to Flash. Today we'll start looking at some of the basics of ActionScript.
ActionScript 2.0 Learning Guide
Thursday: Complete the tutorials listed below which are found at http://www.actionscripts.org/tutorials.shtml. The rest of the quarter will be spent looking at ActionScript for Flash MX.
Tutorial 01 Variables 101
Tutorial 02 Instance Names
Tutorial 03 Paths to Objects and Variables
Tutorial 04 Get Property
Tutorial 05 Set Property
Tutorial 23 Controlling Different TimeLines
The rest of the tutorials found here are also excellent learning resources. Please browse through as many of the other tutorials you like. The more the better.
Interactive Motion Scripting - Week 2
Tuesday: Today we'll be going over the details for the first assignment / exercise involving the manipulation of properties within Flash. Download the example file created by Shawn Boeckman and look at the example. Our next assignment is to create a similar movie. Here are the requirements:
1. Create a movie clip object in a Flash document with an instance name.
2. Include movie clips with timelines nested within the main movie clip like in Shawn's example.
3. Create a minimum of 5 ActionScript controls that allow the user to manipulate and transform the object.
4. Use dot syntax on two of these controls to manipulate movie clips inside the main movie clip.
5. Use keyboard controls and continuous feedback to interact with the movie clip.
6. Include sound as an interactive element (dog bark, car horn, door bell, etc.).
7. Use a text field to enter a value that manipulates the movie clip properties.
Try to use several different techniques not shown in the examples. This project / exercise will be due by the end of class on Tuesday, Week 3.
Let's also carefully examine and analyze the ActionScript in the following examples.
Shawn Boeckman's set property example: +setProperty.zip
Take a look at some other Movie clip properties you can set.
Here's an excellent ActionScript reference
Here's another example I made for randomly changing the color of a movie clip
Thursday: Today we'll be learning how to use keyboard controls to manipulate the properties of a movie clip. These kinds of behaviors allow us to use the keyboard for enhanced interactivity (i.e. to control characters in a game). Try including some keyboard controls to manipulate the properties in your project. Today I'll demonstrate how to produce continuous feedback on keyboard and button controls.
Interactive Motion Scripting - Week 3
Tuesday: Our next assignment/exercise involves using ActionScript to bring external content into a .swf file. A strong understanding of how to bring in external content such as text files, data from XML documents, images, audio, video and additional .swf files is an important step toward being able to produce dynamic content in flash. Here's the requirements for the assignment:
1. Create a Flash MX 2004 document that loads in text from an external XML document.
2. Use an externally loaded CSS document to format the text in your project.
3. In the Flash document create a link to an additional external text file.
4. Choose two other types of media to load externally into your project (images, audio, video, swf)
Use this tutorial from ActionScripts.org to help you with the second and first requirement of the project. This project will be due on Thursday of Week 4.
Thursday: Let's continue learning how to load external content into Flash. First of all take a look and my example that is designed to load multiple files into an individual dynamic text area through the use of button based navigation. This example can be found in the IMD drive under R:\keston\ im2490\external content\external images\
Second, let's look at loading images externally. Here's a tutorial that explains how to use components and ActionScript 2.0 in Flash MX 2004 to load images externally. This tutorial is for Flash MX 2004 and ActionScript 2.0 only. The use of components can make your .swf a little larger, but loading the images externally will save load times in the long run.
http://www.webwasp.co.uk/tutorials/b30-load-images_MX04/index.php
Interactive Motion Scripting - Week 4
Tuesday: Let's look at some more examples of how to load content externally. Today's files can be found on the "IMD Design" drive under John Keston/im2490/External Content/image_loader/. This example uses HTML in Flash to load the images.
Thursday: Let's look at randomized behaviors with ActionScript. Please look for the example on the "IMD Design" drive called "invaders1.fla" and "psychedelic_invaders.fla". These documents can be found on the "IMD Design" drive under John Keston/im2490/examples/. Check out the tutorial below to learn how to use the Math.random() function to create a wide variety of randomized value ranges.
One example of how to use these functions is to create an action that activates a "hyperspace" feature. This can be accomplished easily by randomizing the x and y coordinates of the movie clip within the scene as illustrated in the following example :
function randomizeCoordinates(clip,xmax,ymax,offset) {
clip._x = Math.round(Math.random()*xmax)+offset;
clip._y = Math.round(Math.random()*ymax)+offset;
}
Interactive Motion Scripting - Week 5
Tuesday: Here are the minimum requirements for the final project. We will be going over these requirements and citing a list of examples in class today (MP3 Player, arcade style game, photo gallery, interactive flash cartoon, educational tool, l-systems). Perhaps buy a book and incorporate some features that we did not cover
in class. Another excellent way to improve your knowledge is through
tutorials and the web is loaded with excellent examples (see Thursday week1). Macromedia's site has some excellent tutorials as well. For books, take a look at www.friendsofed.com (Flash Games Studio). Also check out amazon.com. ActionScript for Flash by Colin Moock is probably an excellent choice. Here's a site with some game examples to get you started: http://www.ferryhalim.com/orisinal/
Something Useful
Interactive Flash Game or Interface
Due Date – 1st Class of Week 9
Evaluations - 2nd Class of Week 9
(Participating in the evaluation is 5% of final project grade)
Assignment Overview
Create an interactive game or interface which relies on ActionScript for the majority of its functionality. Several areas should be accessible via navigation functionality. A minimum of eight customized ActionScript behaviors should be included. Use motion graphics, sound, and/or animation to enhance the game or interface.
Examples:
Build something useful. How do companies use interactive Flash applications to engage users? Take a look at http://www.timbuk2.com/. This company has a Flash tool that allows customers to design their own messenger bag. Other examples include Scion and Vans. Many companies are offering ways for customers to "build their own" product. Other sites offer games that are used to promote their products.
Content Specifics:
- Project must be developed in Flash MX 2004.
- Create a user centered navigation experience with a minimum of 4 distinct areas.
- Use advanced scripting techniques to integrate media elements and objects (load external content, etc.)
- Create a minimum of 8 features using customized ActionScript functionality.
- Include motion and sound to enhance the game or interface.
- Use optimization techniques to increase interactive design efficiency
Objectives:
- Demonstrate an understand of ActionScript through customized features
- Understand the issues and challenges of timeline-based interactive design
- Participate in a minimum of two peer feedback sessions
Schedule:
- Be prepared to discuss your design concepts and show two examples by Thursday, Week 5
- Have initial features implemented by Tuesday, Week 6 for 1st peer feedback session
- Reach "half way point" by Thursday, Week 7 for 2nd peer feedback session
- Finish project for presentations by Tuesday, Week 9
Resources:
- Adapt techniques shown in the tutorials from from class (actionscripts.org, etc.)
- Use the Flash Games Studio, Chapter 2 hand-out to optimize your flash content
- Use other Flash/ActionScript books and web resources (kirupa.com, etc.)
Thursday: Let's look at your design concepts and examples today. Also, here's another example from my SpaceWar Flash project. This time I have made the ships moveable. The ship in the upper left (ship1) can be moved with the A (rotate left), D (rotate right), and S (thrust) keys, while the lower left ship (ship2) uses the arrow keys (left, right and up).
SpaceWar Version 0.2a (right or control click to download)
Also, let's review the hitTest function in ActionScript. This is a very useful function often used in games for detecting collisions between objects within a playing field. Using the hitTest function you can make objects react to collisions by bouncing away from the collision, or causing damage. The main limitation to hitTest is that it detects collisions only with the bounding boxes which surround movie clips. For another more difficult solution which takes into account the shape of your movie clips, see the example linked below.
Bounce Collide Example
SpaceWar Version 0.6a (includes functions and hitTest example. Right or control click to download)
Interactive Motion Scripting - Week 6
Tuesday: Make sure you are prepared today for our first peer feedback session. Also, here's a link to a newer example of the Spacewar game. I've skipped some of the intermediary steps so you can learn at your own pace. I will be demonstrating several times from this example. Pay particular attention to the use of the attachMovie ActionAcript function. The attachMovie function is very useful for games because it allows you to create new and multiple instances of movie clips from the library, such as enemies or shots fired. For more details try the attachMovie tutorial.
Thursday: Here's a simplified version of how the attachMovie function works. In this example I created a couple of buttons. One to add symbols and one to remove symbols from the screen. The buttons call functions that I have defined in a frame script. This is a very simple example. Please take some time to pick it apart and try to understand what's happening in the code.
attachMovie example
In class exercise: In class today, create your own version of the attachMovie example. Use ActionScript to manipulate the properties of the movies that are attached.
Interactive Motion Scripting - Week 7
Tuesday: Volume sliders are excellent controls to include in Flash project, but not necessarily very easy to create. Let's look at an example of a volume slider and pick apart how it works. Also, check out the definition for the _parent property in the ActionScript dictionary.
Thursday: Today is our second peer feedback session. Remember that you are required to participate in these sessions. At this stage you should be at least 50% finished with your project. Afterward let's continue looking at the "spacewar" code.
Interactive Motion Scripting - Week 8
Tuesday: This is the last time you will have to work on the "Something Useful" project before we start on the Processing project. Presentations are on Thursday, week 9.
Thursday: No class due to Holiday...
Interactive Motion Scripting - Week 9
Tuesday: Processing is an Open Source programming language and environment used for context such an images, animation, sound and interactivity. "...initiated by Ben Fry (Broad Institute) and Casey Reas (UCLA Design | Media Arts). Processing evolved from ideas explored in the Aesthetics and Computation Group at the MIT Media Lab." -Processing.org
Thursday: Final presentations for the "Something Useful" ActionScript project. After the presentations will will start discussing the "Something Interesting" project that we are be building with Processing.
Interactive Motion Scripting - Week 10
Tuesday: TBA.
Thursday: TBA.
Interactive Motion Scripting - Week 11
Tuesday: Let's have our final project critiques today. Everyone needs to participate in the critiques in order to get credit for your final project. If we can't get everyone today then we can continue on Thursday.
Thursday: Today is the last day to turn in your final projects which were due Tuesday. Inside your folder on the drop off drive create a folder called "final" and put your files in it. Good job, and have a great break!