Art 351 Assignment 4 - Jumpin' Jehosaphat!

This assignment has two parts:

A. Create a library of 10 buttons, just for kicks.

B. Create an interactive timeline-based story the user will navigate using buttons to jump around the timeline.

1. Script and thumbnail out your story. We'll look at these this Monday, Feb 8. Make sure you post your work to your blog.

2. Shawn will be coming in to demo some basic sound recording on Wednesday, Feb. 3!

3. This piece will be due for critique on Wednesday, February 17.

Embed Source Code for Animated Flash Movies

The above button is an example of an embedded swf file. Here's a link to the source code you'll need to embed your animated flash files. Make sure you are in the EDIT HTML tab of your blog post or, it'll look silly.

Art 351 - Assignment 3: Create 15 Animated Dingbats

1. Create a library of 15 animated dingbats.
2. Due Monday, February 1.
3. Post your progress as you go!

Here's a quick demo video on getting started with animation in Flash. More to come.

Art 351 - Assignment 2: Two more collages and interactive writing

1. Take one of your collages and double (at least) either the height or the width of the document. Use Modify > Document to accomplish this. Now work on your new canvas.

2. Create a new collage (or start with one of your old ones) and push the scale contrast! Enlarge stuff so it extends way off the canvas. Shrink stuff down. Go to town.

3. Write about 3 satisfying "interactive" experiences you've had in life. Think about sight, smell, sound, atmosphere, color, texture, drama, sensation, emotion, physicality, sensuousness and all that. Post to blog with relevant pictures.

4. Put all of this glory up on your site so we can critique first thing MONDAY, January 25.

image by Ernesto Caivano

Art 351 - Assignment 1: Dingbats! and Flash Demo Videos

 

Halloween Dingbats by Samuel Casal

1. Choose a theme of some sort and accumulate some related raw visual research on your blog. The theme can be very loose and fun. For example: "abstract pattern designs," "monsters," "random stuff that I've drawn for no good reason," "famous biscuits of the middle ages," "angry old people," "doodles," "pseudopods n' such," "goat referendum," "body parts and organs," etc. Use the theme choice to help you, not hinder you. If you're not one to enjoy thinking up themes ahead of time, just make stuff and think about a theme after you're into the project. Also, don't be afraid to let your theme evolve/change as you create your dingbats!

2. Create a Flash Library of 26 symbols related to your theme!

3. Use your library to create an organized layout of your symbols and export it as .png.

4. Create a set of 3 collages (see example by Samuel Casal, above) using your dingbat symbols and export these as .png's.

5. As usual, post all of this fragrant goodness to your blog.

Due date: Wednesday, January 20, 9:00 a.m.

Here is a link to the demo videos taking you through the basics of drawing and symbol making in Flash. Victory!

Final Projects, Final Blog Assignment, & Final Critique

The Art 351 Interactive Studio final critique will be Tuesday, March 17, 3:30 in the Digital Studio.

Your final blog assignment is to go to the Art Dept. web site and write a critique on your blog.

ARt 450 and Art 351 notes. Art 450 Final Crit.

Ashland Independent Film Festival Talk Friday, 11:00 Meese Auditorium!

ART 450 Final Critique will be Monday, March 16 at 6:30 p.m. in the digital lab.

Whitney Biennial 2008 site
Here's a nice image from the 2002 Biennial. It's Gilles Barbier's Nursing Home.

Midterm Madness & Flash Demos

On Wednesday, Feb 18, we'll take a look at your midterm projects. . . so . . . get to work!
You can present one grand project or several smaller ones. It's up to you.

On Monday, Feb 23, you'll present pseudo code, concepts, and a work schedule for your final project.

Here are the .fla demo files we covered today:
sound01.fla
sound02.fla shows how to add a dynamic text box
sound03.fla shows how to place a movie clip on the stage with ActionScript
alarm.wav

Art 351 Audio in Flash

General Sound Notes
0. Wear headphones.
1. Flash accepts .wav and .mp3 directly.
2. Pre-edit your sounds as much as possible in an audio program such as Garage Band or Audacity. Only import the parts you need. Flash is a clunky and inefficient place to edit audio.
3. Flash will recompress your audio file unless you tell it not to. The recompression can make the file sound lousy. Again, you'll have more control doing this in your editing program.
4. Keep all of your sound files together with your .fla files.

Here's how to bring sound into Flash
1. File > Import > Import To Library
2. Right click on the new sound symbol in the Library. Choose Properties.
3. Set your compression choice. Raw will stop Flash from compressing any further. This is usually what I'm after.
4. You'll see a dialogue box (pictured above). Hit the "Advanced" button at the bottom right of the dialogue box.
5. Check Export for ActionScript. Export in first frame will be checked too and an identifier name will also be added. Without this step, your ActionScript won't be able to refer to this file and nothing will work.
6. Many folk recommend 24 khz for music and even 11 khz for spoken words. Lower quality sound = lower bandwidth = faster load times. Mono is often just fine.

Here are the flame.wav and crash.wav files from Andy Harris' Beginning Flash Game Programming For Dummies. It's a great book.
Here's the basic sound.fla file taken from Harris' book.
Here's the Audrey.fla demo we did in class (where Miles accidentally wrote the code on the movie clip instead of the frame). Thanks to Melissa B. for letting us mangle her work!

Here's the code for the basic audio:
// ActionScript 2.0 Basic Sound handling based on Andy Harris' Beginning Flash Game Programming For Dummies. Adopted by Sir Milesicles

// Creates a movie that plays a sound. Yay.

// declare a new sound object named sndFlame using the new and Sound commands.
sndFlame = new Sound();

// fill the new sound object named sndFlame with an instance of the library symbol named "flame.wav"
sndFlame.attachSound("flame.wav");

// start the sndFlame sound object
sndFlame.start();

Heads, you lose

We'll critique your jump pieces in class on Wednesday. A quick note: 400 pixels wide seems to be about the maximum width for embeded .swf files in the blogspot blogs. Bigger widths wreck the layout. If you're working on a bigger piece you can either:
1. Not embed the swf, but post a still with a link to the .swf file.
2. Make a mini-version using the edit multiple frames onion skin option. (Save a copy BEFORE you do this--it can go hilariously wrong.)

Here's a link to the headsy.fla file above. And here's the code:

// headsy.fla ActionScript 2.0 by Miles Inada
// demonstrates how one button can control several movie clip timelines.
// the head movie clips have stops on frame 1 of their timelines.
// the body movie clip is looped and has a still rest frame on frame 40.

but01.onRelease = function(){
head1Ani.gotoAndPlay(2);
head2Ani.gotoAndStop(1);
head3Ani.gotoAndStop(1);
bodyAni.gotoAndStop(40);
}

but02.onRelease = function(){
head1Ani.gotoAndStop(1);
head2Ani.gotoAndPlay(2);
head3Ani.gotoAndStop(1);
bodyAni.gotoAndStop(40);
}

but03.onRelease = function(){
head1Ani.gotoAndStop(1);
head2Ani.gotoAndStop(1);
head3Ani.gotoAndPlay(2);
bodyAni.gotoAndStop(40);
}
//this button is placed over the figure's head to reset all movie clips to 1
clearButton.onRelease = function(){
head1Ani.gotoAndStop(1);
head2Ani.gotoAndStop(1);
head3Ani.gotoAndStop(1);
bodyAni.gotoAndPlay(1);
}

Doors of Perception

Head on over to Inadaville to check out a moving advent calendar solution.
Click here for the .fla file for the little door above.
Click here for the full moving doors .fla file o'er at Inadaville.
If you download the full moving doors, make sure you download this Door.as file and put it in the same location as the .fla file--otherwise the .fla file will not work.

Here's the code:
//Actionscript 2.0 doortestAS205.fla by Miles Inada

// Declare a boolean variable named shut, whose value (true or false) will indicate whether the door is currently shut (true) or open (false).
var shut:Boolean = true;

// Define the function openShutDoor. This function will check to see if the shut condition is true or false and act accordingly.
function openShutDoor() {
//check to see if the door is open or shut
if (shut) {
//if it's shut, open it
theDoor.gotoAndPlay(2);
//tell the program the door is now open
shut = false;
}else {
// if it's open, shut it
theDoor.gotoAndPlay(1);
//tell the program the door is now shut
shut = true;
} //end else
} // end function openShutDoor

// When theButton is clicked, run the openShutDoor function we've defined above
theButton.onRelease = openShutDoor;

// theDoor is a movie clip with a stop command on frame 1

Art 351 Code for Button Jumping

Here's the .fla file for the button jump demo. See if you can get it working, then get frisky with the graphics. Also, here's the Kuler URL.

Here's the basic code for the button jump in text form:

stop();
button1.onRelease = function() {
gotoAndPlay(10);
}

Here's a related .fla example I did for Victor.

Art 351 Update

Couple of quick things before class.

1. I commented on many of the blogs today. I'd like you guys to pick up the pace a bit here. I'd like to see your blogging become a part of your daily web surfing routine.
2. We'll discuss the advent project in greater detail today--I'll get an example or two up here. Here's the Wikipedia entry on advent calendars with a not so great picture.
3. We'll work over our timeline jumping to create some more sophisticated projects.
4. Add Verelle Stuck & Paul Wickliffe to your blog rolls-- I just added 'em to the class site. Actually, Paul--comment your url to this post.

Recommended Reading

Here's a good post from Jen Harlow about a visiting animator lecture she attended down at CalArts. He talks about the process of making a first film and the importance of completing projects (warts and all) vs. sitting around thinking about starting a project. Anyhow, good stuff.

Here are a few links to discussions about collision detection in Flash. I don't think we'll be getting into collision detection until the 2nd half of the quarter, but for those of you who want to read ahead, hop to it.
8bitrocket
troygilbert and follow-up at tink
ickydime
Also, here's an article on adventure gaming with a discussion of interactivity

Spelling--It's the New Black

For my students' edification, I post my typo-marred business card above. Spot the typo and win a prize (my undying enmity). Here are some "teachable moment" lessons.

1. Always, always have someone else proofread your stuff. I am a better speller than most (and a braggart, apparently). And I am a mighty fine proofreader. . . of other people's stuff.

2. So, GET OTHERS, PREFERABLY MANY OTHERS, to read whatever it is you're making-- website, t-shirt, business card, comic book, graduation announcement, resume, letter, tattoo -- before you send it to print it or put it before the world. The next time I do this, I'm gettin' Bill Gates, Stephen Colbert, and Rahm Emmanuel to read this ma' fa'.

3. Ironically, I caught this mistake myself within an hour after getting a shipment of several thousand cards and three t-shirts. I only saw it when I put a shirt on, looked in a mirror, and started reading the words backwards. This is a good example of how important it is to get some distance between our poor brains and the stuff we make. Mirror + Time = a clearer perspective.

4. Silver lining: better to catch it last night than after I handed out 1000 cards at a classics scholars convention. Tough crowd.

5. Silver lining #2. I'm not actually heading off to a classics scholars convention tomorrow. Since I had a soft deadline for myself, well before a "hard launch" this screw-up doesn't actually put me in a bad position. I can get order enough new cards to last me for about $25.

6. Silver lining #3. The cards look great and were easy to create online. I used vistaprint.com. But I would also check out the local offerings as well.

Art 351 Weekend Assignment

1. Create a timeline-jumpin' interactive piece. We'll critique these on Wednesday 21.

2. Go to another place you've never been before n' blog it. You could also add photos, drawings etc. to your post.

3. Find and post a link to a cool Flash site. It could be a tutorial on how to do something or just a cool site that uses some kind of interactivity--

4. Blog a bit about your advent calendar thinking.

All of this is due by Wednesday, January 21.

Embed a Button

Click the text above and see if this works. I'm not sure why the button is taking up so much space in the blog. Here's the flash file that generated the code. Thanks to Jake for tracking down the embed source code example.
UPDATE--I fixed the whoppin' space around the button issue. If you pay even a small amount of attention to the source code, you'll see that you have to enter height and width pixel dimensions in two places. I only entered them in one place. Oops. Goes along with my typo, I guess.

Duh - Monday, Jan 12 plan

Hmm the blogger image upload problem seems to be over. Huzzah. Okay, for Monday we'll:

0) Talk color and Kuler
1) Keep rolling on the secrets and mystic darkness of Flash animation.
2) Make some buttons.
3) Work on uploading .swf files
4) Maybe get some interactivity goin'
5) Talk about your writing assignments.

p.s. I recommend allowing anonymous comments as people won't have to register to comment on your blog.

Wednesday January 7 is coming for you. Are you Ready?

1. Check your blog on the list and make sure it's working. If your blog isn't on there or isn't working post a comment to THIS post with corrections. I commented on your interactive blog posts and will be commenting at least once a week. Cruise your classmates' blogs and leave at least one comment.

2. Link to your classmates' sites on your blog. Customize > Add a Gadget > Link list or blog list.

3. Today we'll be working with some flash basics. At the end of the day you should:
a) Export 3-4 jpegs/gifs/pngs of your work and post them on yer blogs. Use one of these images as a profile image.

b) Export and post a .swf file. To do this, you'll need to have a way to post material to the internet. Here's a tutorial on how to do this.

c) Export and post a quicktime video to your blog.

4. Over the weekend post some images to use as "color scheme" research. Check out the Kuler site.

Art 351 Interactive Studio- Assignment 1

Okay lads and lasses--

1. Start ein Blog. Link to this blog.
2. Discuss interactivity.
3. Write a blog post on our discussion. Include images and/or links.
4. Go to a place you've never been before and write about it. Post that writing on le blogue.
5. Begin your design for an advent calendar. If you don't know what one is, look it up. We'll discuss it further on Wednesday, the 7th.