Heads You Lose Part 2

The evolution continues.

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 450--Naruto review on NPR

Audio review of the Naruto anime and how it's achieved mainstream popularity in the U.S. A . It's a good example of how a project is described to people who don't know anything about it. Could be handy in refining your project descriptions.

Also, I'll be checking your blogs before this week's critiques, so get 'em updated if you've been slacking. I'd like you to make bloggin' a part of your daily web-surfing routine.

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.

Wednesday January 21 is Here

Have you done your work yet?????

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. Oh, that's today!

Blizzard 3D Environment Artist Job Listing

Self-portrait as Tourgot, Level 56 Undead Rogue

For all youse 450/496 types. Check out this job offer at Blizzard for a 3D environment artist.

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.

Art 450 and Art 496 Capstone--Fear The Reaper

Okay kids--
We'll meet next Wednesday the 14th at 2:30 or Thursday the 15th at 2:30, depending on which section you're in. You'll bring the following to that class:

A written description of your project including:

0. A working title for your project.
1. A one sentence description of your project.
2. A one paragraph description of your project.
3. A one page description of your project.
4. A description of your specific products of study or deliverables that you will be creating for your project.
5. Visual and/or written research for your project. Stuff done by other people.
6. Treatment visuals for your project. Stuff done by you.
7. A written description of specific technical and research issues you will need to address during the course of your project.
8. A timeline of your project. When you will be doing all of this good stuff. You must include specific DEADLINES (for example: "January 27th", not "some time in January."
9. A blog containing all of the above. You will also keep track of your activity here. If you do something for your project, blog it.
10. Your magic sunshine. See you then. If you have questions about any of this, ask me or post a comment. I will check it. Ask earlier rather than later. I'll post our meeting schedule here as well.

Voila, La Blogue Francaise

Here's our class blog page. I'll post yer pages here so's y'all can keep track of all the magic.