HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK 

TUTORIAL - DESIGN AND YOUR INTERFACE

 

OK, you should have a pretty good idea of how to structure your interaface in Flash, and that is no small accomplishment! Kudos!

 

Now, let's spend a little more attention to DESIGN, since it's very EASY to make the interface following all these tutorials, and you end up with something that still looks a little elementary, maybe. Here's a few things you can do to FOOL YOUR AUDIENCE INTO THINKING YOU'RE A PRO AT FLASH:

 

• Use a DIFFERENT STAGE SIZE than the DEFAULT 550 X 400 pixel stage size. Even 800 X 600 is better, but why not make something nice and 16-by-9iney? Like maybe, 800 X 450. Just click on the STAGE, and in the PROPERTIES windows, change the Stage size.
• ANIMATE YOUR BUTTONS. Design in Flash includes MOTION DESIGN - buttons that just change from state to state (over to up to down) are OK, but why not make things move a little more? There is an ANIMATED BUTTON TUTORIAL embedded in the PURPLE interface - see if you can find it and figure it out! (Basically, you make 2 movie clips  - one where the button gets bigger, one where it gets smaller. The movie clips each have a stop(); command in the last frame, and you put one movie clip in the UP state and one in the OVER state of your button. This is not the "Perfect Button", but it's pretty good if you don't want to learn any more Actionscript right now . . . .).
• Make the BACKGROUND CHANGE from page to page. Make the background FILL YOUR ENTIRE FRAME, make it from a photograph in Photoshop, and use the GAUSSIAN BLUR to bring things out of focus. WHEN IN DOUBT, BLUR.

 

Here are three sample backgrounds you can use as placeholders until you make your own:

 

         

 

Notice a couple things: 1) They all have gradient fades on the right hand side, so maybe your body text will pop up on the right, and 2) even a fairly busy image can work in this context if it's blurry.

 

• Use TINY, NIFTY NESTED ANIMATIONS as intermittant background elements, too. The trick is to make it cool, but not too overwhelming. Amon Tobin always has some pretty interesting interfaces.

 

 

Check out ALL these principles in action (I guess except for the Animated Buttons, which I'm now kinda over) in my ANATOMY OF MELANCHOLY(tm) site. This one also has the four main panels of the interface background (as well as text, animations, music, and even VIDEO) loading to different levels or to movie clips on the main page. Can you figure out how I did it all?