ART279 - 3D Computer Graphics Design II
Spring 2002 - NVCC - Giulio Porta

Web Animation - FLASH

By Holly Zell


Assignment # 8b
Mouse Drag


The Ghost Cursor

This project required becoming familiar with the Flash ActionScript language.  

This assignment illustrates a simple mouse interaction of a graphic following the mouse as it is moved. In addition,  I used invisible buttons to trigger the appearances of the apparitions and made the ghost cursor semi-transparent when it's over the buttons. I also added a sound to the apparitions and added some animation to most.


I used free halloween clipart from Halloween Online to create this project. I modified most of the clipart to suit my needs using Adobe Photoshop.  For the background image I merged and modified two clipart files, a haunted house and a graveyard.  The blueghost was too pixelated to use so I re-colored him. The bluespook was part of a larger clipart file. I removed everything else but the bluespook and reshaped him slightly. The other clipart files I used unchanged.

These five apparitions are hidden in the haunted house scene below
and the cursor has been turned into a
ghost.
Simply move your Cursor into the haunted house image below
 to make the Ghost Cursor appear. 
Help him with his haunting by moving your cursor around within the image.
When he becomes transparent, click the left mouse button to see what appears.
 To turn off an apparition, click the left mouse button again.

 

 


 

 About the ActionScripts

The instance of the ghost has some Actions associated with it . The following code has been generated using the Actions panel and following the tutorial instructions:

******************

This script executes when the movie is loaded. It attaches the Ghost image to the regular cursor using the startDrag property.

onClipEvent(load) {
     startDrag(this,true);
}

Via the tutorial, I was able to make the appropriate entries in the Action panel and this script was generated for me. Per the tutorial, I specified GetProperty(_x,_y) in the Target field and checked Lock Mouse to center box.
The action and property panels in Flash MX are completely different from Flash 5. 

I created 5 invisible buttons to handle the mouse click events that cause each apparition to appear and disappear. All the buttons exist on a single separate layer. The ActionScript for the buttons is below: Each button has this script with the highlighted "button name" different for each occurrence. (I gave each button the same name as the apparition layer name)

****************

This script makes the  movie clip (apparition) visible or invisible on a mouse click 

on (release) {
if (getProperty(blueghost,_visible)) {
setProperty(blueghost,_visible,false);
} else {
setProperty(blueghost,_visible,true);
}
}

I used Expert mode in the Action panel to develop this script. I needed to know the current state of the apparition's (movie clip) visibility (getProperty _visible - returns a true or false) to determine which action to take, on or off (setProperty _visible - set to true or false).
Get and Set are basic concepts in Javascript and C++ and function the same here in Actionscript.

Each movie clip (the 5 apparitions) exists on a separate layer and  has the following Actionscript attached to it.

****************

This script causes the Ghost Cursor to dim when over a button. 

on (rollOver) {
setProperty(ghost,_alpha,25);
}
on (rollOut) {
setProperty(ghost,_alpha,100);
}

Again I used Expert mode and used the _alpha property to set the objects opacity. I reduced it to 25% when the ghost is over a button and it returns to 100% when it's not.

 

Layers, Timelines and Button Locations

Layers and Timeline


Button Locations

The bluespook has one keyframe at the midway point and fades in and out.
The blueghost has 3 additional keyframes to handle his motion and change of direction.
The lite (lightning) has multiple keyframes was various opacity levels with no tweening to make the flashing effect.
The bats image scales up from the beginning to end of the timeline.
The but(button) layer contains all the buttons (shown above right, in turquoise).
The bkgd(background) and cat layers have no additional effects associated with them.
The ghost layer is the cursor.

Things I attempted that didn't quite work out...

I also tried to make the regular cursor invisible but, the semi-transparent ghost cursor event did not work properly. It would briefly appear
semi-transparent and then return to full opacity even when you left the cursor parked over the button. I would have liked to have found out why
but, my trail copy of Flash expired. Below is my example of this problem. Also, I would liked to have figured out how to associated a sound with only one button so I could have have different sounds for each button. 

The change to the ActionScript to make the regular cursor invisible appears below. 
The MouseHide(); causes the regular cursor to be invisible.

onClipEvent(load) {
MouseHide();
     startDrag(this,true);
}

 

 

Back to Assignment Description


İHolly A Zell
Revised: September 22, 2007
All Original Artwork Copyrighted.