'3D for Beginners:' Preparing a Button for the Web — Part 2

This is part two on the basic button. Please read Part 1 on how to make a simple 3D button.

The language of the Web is HTML, and it has its limitations with regards to links. The effect of a button is to change the mouse pointer when you rollover it, thus indicating to the user that it is a button. However, with the addition of the Javascript language you can create a rollover state. This means that the graphic used to display the button can be swapped when the mouse is on top of it, giving you the opportunity to create a more interesting result. It is possible to create more complicated buttons than this, using Macromedia Flash and we will talk about this later. First we should animate our button in our 3D program in order to create our rollover states.

[Figure 10] PRS Parameters. Creating keys. All images from 3D for the Web by Carol MacGillivray and Anthony Head. Reprinted with permission.

Exercise: Animating the Button in 3D

An introduction to the simplest animation you can do.

What to do

To animate the button being pressed is very simple. Along the bottom of your program is a frame counter. Below it there is a button called Auto Key. Switch Auto Key on (in earlier versions of 3ds max this was less confusingly called the animate button) and the surrounding viewport box will turn red; this reminds you that you are now in Animation mode. The first thing we need to do is set a Keyframe for the button in its normal position. To do this, select your button and from the top right panel select Motion. Under PRS Parameters, Click on the Create Key>Position. A key will appear on the timeline at 0 (Figure 10).

This Keyframe sets our button at that time, in that position. To animate, move the slider on the timeline on to frame 8, and in a side viewport move your button down to look as if it has been pressed. A Keyframe will automatically appear. You can play your animation now and the button will go down. That is all the animation you need to do for actually moving the button. The button will be taking rather a long time to get pressed, eight frames is the equivalent of a third of a second and a bit too slow for our purposes, so now by moving the Keyframes, we will get the buttons timing right and bring it back up again.

Start by sliding the Keyframe from frame 0 to frame 5, that gives us three frames of animation, which looks and feels better. To return the button to its normal state, duplicate the first key, by Shift-clicking and dragging on it. A new key will appear that carries the same properties as the first key. Put this key at frame 14. If you play your animation now, you will see the button bob down and straight back up again. To make it more realistic, copy your second Keyframe (from frame 8) and drag it to frame 11.

Now the button will stay down for three frames. Play your animation again (Figure 11).

[Figure 11] Button down.

Now our button moves we have created the rollover states that we require. We need to render two frames of our animation, one frame in the up state and one frame in the down state. To do this, select the Rendering Render Menu (Figure 12).

[Figure 12] The Render Menu. 3ds max.

There are a few important points to be aware of here; one is the image size. The size of the image is going to have a direct effect on the download speed of your site. Although broadband is becoming more and more popular you should still always try to keep your graphics down to the minimum size they need to be. Although you can resize a button in HTML, you do not want to have to, as there is no point in downloading a full screen image that is only going to appear in a tiny section of your website. We need to decide what size our buttons need to be, and this would be done in the planning stage of your web page design.

In this particular case we will decide that we want our buttons to be nice and big, so I suggest a size of 100 pixels wide and 60 pixels high, as this roughly matches the shape of the button. On a screen this will be approximately an inch across, although it very much depends on the monitor size and the screen resolution. So set the Render Scene palette to the settings in Figure 12 or change them to suit your own needs.

You may need to reposition the button on the screen using the Pan tool (the hand) and the Zoom tool (the magnifying glass), in order to make the button fit properly on the rendered image. Test it by pressing the Render button and when you are happy, save the image by clicking on the Disk icon of the resulting image. Select JPEG as the image format and use a quality level of 80. Render and save frame 1 and frame 10.

The other point to remember is the background color. As part of your website design, you should have already decided upon a background color. You can choose your background color to match whatever background color you are going to use in your web page by going to the menu Rendering>Environment>Background Color. The next section will explain why this is a good idea.

To learn more about interactive 3D animation using 3ds max, Flash and Director, check out 3D for the Web by Carol MacGillivray and Anthony Head; Burlington, MA: Focal Press, 2005; 328 pages with illustrations and CD-ROM. ISBN 0-240-51910-8 ($36.95). more about the book and check back to Animation World Magazine frequently to read new excerpts.

Carol MacGillivray was already a successful film editor before forming the pop video production company, Giblets with three friends who were animators and directors. Giblets specialized in combining media, mixing live action with 2D and 3D animation in an almost pre-digital era. Although they worked with many stars, Giblets, are most famous for bringing about the re-release of a trilogy of Jackie Wilson songs, starting with the clay animation video for Reet Petite that was a number 1 hit in 1987. Carol still has the gold disc hanging in her loo! After teaching at the Royal College of Art, Carol became interested in the new digital technology and was given an AHRB award to study an MA in Digital Moving Image at London Guildhall. She is now a senior lecturer in Digital Animation and Digital Arts at The London College of Music and Media, Thames Valley University.

Anthony Head worked in design and printing industry for seven years before pursuing his digital art full time, he has a First in BA Digital Art and a Distinction in MA Computer Art, awards include D&AD Student Award for E-Toy Design 2001, Peterborough Prize for Digital Art, joint prize with Jeremy Gardiner for Purbeck Light Years. A digital artist who combines creative intelligence with a strong design background, Anthony specializes in interactive 3D and immersive environments. He recently exhibited at SIGGRAPH 2004, Art Gallery Synaesthesia and has won many cans of Pepsi for a digital picture of The Haywain for Amiga Format Magazine! Anthony is currently course leader at Bath Spa University College Design for Digital Technologies, after being a fellow Lecturer in Digital Art at Thames Valley University. Both Anthony and Carol are passionate about their roles as teachers, keen to pass on their knowledge and share ideas and information. They are equally passionate in their role as learners; digital media moves so quickly and there is always something new just around the corner.