You are here: Home > tutorial>tutorial_coolmotion>Create a Magic 8-Ball Application
Create a Magic 8-Ball Application

To start with, of course, you’ll need the ball. That’s easy enough, using the Oval Tool (with the shift key held down to keep it constrained to a 1:1 proportion) and either a solid fill or a gradient fill, depending on how you want your 8-ball to look. For mine I used a predominantly black radial gradient with a sharp falloff to a small white center, then used the Reshape Tool to shift the gradient so that the white center could be a highlight for the ball.

Create a “portal” into the 8-ball with just another circle centered on the first, this time in black (or whatever color you want the glass to be). It’s not that hard to use a slightly larger circle underneath the first with a tilted linear gradient to create an “inset” look.

If you’re having problems aligning them, just use the Transform Panel to center each one individually to the stage, or to each other.

The last thing you’ll need to draw on-stage is that little….doohickey (yes, that is a technical term) that floats up from the bottom of the 8-Ball when you shake it to show the message printed on one side. Since we’re not working in 3D, only pretending to, you just need to draw a triangle – the Pen Tool or the Line Tool work well for that.

Add a dynamic text box centered on the doohickey. Place any text that you want; customize the font and color, and make sure to add an instance name to the text box.

You’re going to want to make a movie clip symbol (F8) twice; first one movie clip with just the blue triangular backing, and then a second movie clip encompassing the first with the triangle and, now, including the dynamic text field.

 

Double-click the movie clip containing the text and the backing, and create an animation that fades the opacity of the triangle doohickey from 0 to 100 over a period of X frames. You can do this using a motion tween and the Alpha settings for the symbol.

 

Move the dynamic text field to a new layer above the triangle. On the first frame of that layer, you’ll want to insert a basic stop, and then use the text properties of the dynamic text field (referenced in mine by instance name “balltext”) to make sure that when the movie clip loads, the text is blank:

stop() ;
_root.ballanimated.balltext.text=””;

This keeps the movie clip from playing until we tell it to, and makes sure that there’s no text visible. When the right action is triggered, the movie clip will start, and the triangle doohickey will fade in, seeming to rise from the bottom as with a real 8-ball.

Now comes the complicated part; on the second frame of the layer containing the dynamic text field, you’ll want to insert a keyframe and add code similar to the following:

ballvar=Math.ceil(Math.random()*8) ;
if (ballvar==1){
_root.ballanimated.balltext.text="YES";
}
if (ballvar==2){ _root.ballanimated.balltext.text="NO";
}
if (ballvar==3){ _root.ballanimated.balltext.text="MAYBE";
}
if (ballvar==4){
_root.ballanimated.balltext.text="ASK ME LATER";
}
if (ballvar==5){
_root.ballanimated.balltext.text="NOT A CHANCE";
}
if (ballvar==6){
_root.ballanimated.balltext.text="SIGNS LOOK GOOD";
}
if (ballvar==7){
_root.ballanimated.balltext.text="WHO KNOWS?";
}
if (ballvar==8){
_root.ballanimated.balltext.text="ASK YOUR SELF";
}
I have eight options, so I used Math.random to generate a random number between 0 and 1 (such as .1, .2, .45689), then multiplied it by 8 to get a number greater than one. Then I used Math.ceil on that number to round it up to the next whole integer, before assigning that integer to the variable ballvar.

The series of if statements following tests the value of ballvar and, depending on what it is, displays a certain message using the text properties of the dynamic text field once the animation passes through frame two. All of this is triggered by nothing more than the playhead passing through frame two on the timeline, which means that the value of ballvar resets every time the movie clip starts again from the beginning.

Now all that’s left is to make it all come together; we’ve set up an animation to show the triangular display and added a function to display one of eight randomly generated messages, but it doesn’t do anything unless the timeline of the movie clip moves beyond frame 2. Right now it’s stuck on frame 1 because of that stop that we inserted, but that’s easily fixed.

Add a new symbol (movie clip or button) on the main stage; if you’d like you can also put in an input text box for people to type in their questions, but it’s not necessary for it to work; it’s purely cosmetic, so that it can seem as if they’re actually posing the question to the digital 8-ball rather than thinking it. All that really matters is the following script added to the button:

on (release) {
_root.ballanimated.gotoAndPlay(2) ;
}

This jumps the playhead of the movie clip ahead to frame two whenever the user determines that they’re ready to “shake up” the 8-ball and ask.

That just about covers it; depending on how you’ve set up your movie clips’ timelines and animations for fade-in and fade-out, you may need to throw in a few more stops here and there or another script on a new keyframe to once again empty the text of your dynamic text field.