Scribd
Upload
0 views19 pages

Adding Hotspot

The document provides a step-by-step guide to creating a Color Wheel application using Adobe Flash. It outlines the process of setting up the background, creating hotspots, converting shapes to buttons, and implementing color change functionality through ActionScript. Additionally, it includes instructions for saving the project and details on the hexadecimal color values for various colors in the color wheel.

Uploaded by

katherinewilsons18
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views19 pages

Adding Hotspot

The document provides a step-by-step guide to creating a Color Wheel application using Adobe Flash. It outlines the process of setting up the background, creating hotspots, converting shapes to buttons, and implementing color change functionality through ActionScript. Additionally, it includes instructions for saving the project and details on the hexadecimal color values for various colors in the color wheel.

Uploaded by

katherinewilsons18
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Creating a Color Wheel Application

Meow! Lalala! Huhu Grrrr Ting-aling


OOH Waaa Boom boom Roar!
Ho ho ho Bam bam! Bazinga! Awoo!
Oh yeah! Awesome! Weh? Ring ring!

Example: Meow meow ting-aling waaa boom boom awoo weh!


When you go to a certain website or play a certain
game, you will notice that when you hover the
mouse pointer to a certain part of the screen,
something will change. The object that triggered that
action is called a hotspot. A hotspot is invisible to
the user but still performs a function when a certain
action is done to it (i.e. click, hover).
A button has four states: UP, OVER, DOWN and HIT. These
states can be seen in the timeline if the button is in symbol –
editing mode. Since hotspots are invisible, the UP, OVER and
DOWN states’ keyframes should be empty and the HIT state
should contain the object.
1. Open Adobe Flash
2. Open ColorWheel.fla
3. Create a background.
Double – click the rectangle using the Selection Toolthat is also
found in the toolbar. Fix the following properties in the Properties
panel located beside the Library panel:
X: 0.00
Y: 00
W: 800.00
H: 600.00
Stroke color: none
Fill color: white
Convert the rectangle to a movie clip by pressing F8(Convert to Symbol
shortcut key) and fix the following settings:
Name: background
Type: movie clip
Registration: upper – left corner
Then press OK.
Then on the Properties panel, write “background_mc” as its instance name.
Lock the Background and Color Wheel layers.
4. Work on the Overlay layer.
Click on the Overlay layer. We will create the hotspots in this layer.
To do this, create a circle using the Oval Tool in the Shapes Tool found in the toolbar.
Double – click it with the Selection Tool and fix the following properties in the Properties
panel:
W: 100.00 Stroke color: none
H: 100.00 Fill color: black
Position the circle on top of the yellow circle completely overlapping it.
5. Convert the circle to a button.
Do this while the black circle is selected. Press F8 (Convert to Symbol shortcut key) and set
the following information:
Name: circle
Type: button
Registration: upper – left corner
Then click OK.
6. Make instances of the circle button and give instance names.
Making instances (copying) the button can be done in two ways: (1)
Click the button that is on the stage using the Selection Tool,
press Ctrl+C (Copy shortcut key) then press Ctrl+V (Paste shortcut
key) or (2) Hold the Alt key in your keyboard, click and drag the button
that is on the stage and you will notice that you are already dragging a
copy of that button.

Make instances of the circle button and put 1 instance on top of each color in the color
wheel.
In the Properties panel, make the instance name of each circle the name of the color plus
“_btn”. Eg: yelloworange_btn
7. Make hotspots.
To do this, double - click on any of the circles with the Selection Tool and it
take you in symbol – editing mode. You will see the button timeline that
includes the 4 states: up, over, down and hit. To make the button a hotspot,
click and drag the shaded circle under the UP state and drop it in the HIT
state so that the hit state is the only state that contains an object. On the
upper left side of the document, click on Scene 1 to return to the main
timeline. You will notice that the fill color of your button will change from
black to a translucent sky blue.
8. Enter the codes.
To do this, click on yellow_mc and press F9 (Actions panel shortcut). Then
type the following codes in the Actions panel. the codes will be explained
later:
9.Explaining the codes.
The on(rollOver) handler executes the statements inside it when the user hovers the mouse
pointer over the object where this code is placed.
var colorful creates a new color object named colorful. The statement new
Color("_root.background_mc") says that the color object created (colorful) will be based on
the movie clip called background_mc.
The statement colorful.setRGB(0xffff00) gives a color value to colorful. And
because colorful is referring to the background_mc movie clip, background_mc will change
color based on the hexadecimal value inside the setRGB() function.
The on(rollOut) handler executes the statements inside it when the user hovers the mouse
pointer outside the space taken up by the object where this code is placed.
10. Copy the codes to the rest of the hotspots.

The codes will still be the same, however, the hexadecimal value for the first setRGB() function should
change:

- Be guided by the following hexadecimal values for the different colors used in the color wheel:

Yellow: 0xFFFF00
Yellow Orange: 0xFEBF00
Orange: 0xFE8F01
Red Orange: 0xFE6A00

Red: 0xFE0000
Red Violet: 0xD000DA
Violet: 0xAE00FF
Blue Violet: 0x8C00FF
Blue: 0x0000FE
Blue Green: 0x00B5B8
Green: 0x00FF00
Yellow Green: 0xACFF00
NOTE: the hexadecimal value in the setRGB() function found in the on(rollOut) handler should be fixed

because whenever the mouse pointer does not point on any color in the color wheel then the background should remain white in
color so as not to confuse the user.
11. Save your file.
To save your Flash file, click on File ► Save As
Shortcut: Ctrl + Shift + S

You might also like