Animated Rollovers

Animated Rollovers

Here you are going to create an animated rollover button. using Poser to provide the simple animation and putting everything together in Director.

POSER

Open Poser and immediately delete the default character from the scene.

Open up the menu on the right of the screen and select Figures/Additional figures/Head man and add this to the scene.

Select an appropriate camera view, Face Cam is probably best.

Now create a simple animation between frames 1 and 30. For example you could make the mouth smile or the eyes blink.

A good tip is to have the animation frames 1 and 30 be exactly the same visually. And example might be for the mouth to be closed at frame 1 and be fully open by frame 15 and closed again by frame 30. Doing this means that the animation will loop seamlessly.

Go to Display/Background Colour and colour the background completely white. Check that the values of the colour are R255, G255, B255. This is so that the background can be transparent in Director.

Now your animation is ready and must be rendered off. Go to Animation/Make Movie. In the options select Image files instead of AVI in the appropriate drop down. Choose half or even quarter size so that your files are not too big.

The main reason for using a series of still images instead of a single AVI clip is that Director can provide background transparencies for still images but not for video files.

You may now begin making the movie. Name the file 'Poser_roll' and choose to render the images as Bitmaps. Poser should render off the animation files quickly as a series of stills. If you check the names of these files they should be in the form Poser_roll _001, Poser_roll_002, Poser_roll_003 .....

Minimise the Poser application.



DIRECTOR

Open Director and right click the mouse in the Cast window, select Import and choose all of the poser rendered images. The easiest way to do this is to click on the first one and holding the SHIFT key click on the last file in the list. now click OK. Director will pop up a box giving you options as to how you want to import these files. Click the box that tells director to use the same setting for all of the remaining impoted images.

This should mean that all of the poser renders are now imported into your Cast. Draw a box around all of the Poser cast members.

Click Modify/Cast to time in the top menu bar. This will position all of the pictures onto the stage in the order they were in the cast.

To test that this is the case click the play button. The Poser animation should play smoothly on the Director stage.

Select the cast member on the stage and go to the Property Inspector and in the Sprite Tab change the dropdown from 'Copy' to 'Background Transparent'. This means that when we use this sprite later it wil automatically have a transparent background

If this looks OK then save your director work onto your hard drive as 'Poser _rollover.dir'.
Once saved go to File/New to star Director afresh.

Import any image into your cast to act as a presentation background. Position this onto the stage window and scale it to fit.

Next import the Poser_roll_001.bmp. This will act as the basic static button.

Now import the director file we just saved, 'Poser _rollover.dir'.

Drag the Poser_roll_001.bmp cast member onto the stage and position it appropriately.

Go to Window/Librabry palette. in the window that pops up click on the box top right and select Animation/Interaction.

This gives you a series of behaviours options. You may have to resize the window to see all of the options.

Select Rollover Member Change by left clicking and dragging onto the button picture (Poser_roll_001.bmp) on the stage.

This will cause another options box to appear. this box is asking which of the other cast members will be the second state of the button ie. the rollover state.

Choose Poser_rollover from the drop down and click OK.

Finally press play and try moving your cursor over the button. Hopefully you should now have an
animated rollover button.

If you find that the button jumps when you rollover it this is because there is a difference in center point between the Still image and the animated one.

If this is the case then double click on the Still image in the cast (for this tutorial Poser_roll_001.bmp). This should bring up an editing window. We need to change the objects center point, in Director this is called the registration point.

In the image editing window click on the Registration Point icon (Second down on the left, it looks like a circle with a cross through it).

Double clicking on this icon should centralise the registration point. This should mean that you are somewhere close to having a smooth rollover button. You make have to mover the Registration point manually by using the cross hair on the screen to tell director where it should be. You should not have to move it far.

Good Luck!!!!


Poser could clearly be used to create other animations useful to Director. Maybe you could try some other things out in Poser, like animation of some of the prop objects available from the right hand menu. Text could be animated by creating some text in PhotoShop, saving as a Bitmap and applying the bitmap as a texture map to a Poser object. Try some things out for your self and see how you do.