Spinning wheels make fun website games.
You can make a "spin the wheel" as part of a fun game that you create on a Web page. Contestants can take turns spinning the wheel and be awarded a prize or lose their turn or go bankrupt, depending on where the wheel lands. Creating the spinning wheel involves importing a picture of the prize wheel into Adobe Fireworks, rotating it for each space on the wheel and importing the rotated images into Adobe Flash to create a Web page.
Instructions
Create The Wheel
1. Launch Adobe Fireworks, select "File -- Import" and select a picture of a prize wheel -- for example a "Wheel of Fortune" or roulette wheel.
2. Choose "New -- Layer" and type "Marker" to create a layer to draw a marker that indicates the currently selected space on the wheel. On the "Tools" panel, click to highlight the "Line" tool. Draw a vertical line where the marker should go. On the "Properties" panel, increase the width of the line to your satisfaction.
3. Click "File -- Save As..." and type "wheel1" to save this wheel as the first in the series.
Rotate The Wheel
4. Click the "Select" arrow on the "Tools" panel and click on the wheel to highlight it.
5. Hold down the right mouse button and use the left mouse button to click "Transform" and then "Skew."
6. Move your mouse to the gray area outside the square with the picture of the wheel. Notice that your cursor changes to a circular arrow. Hold the left mouse button down and drag down and to the left to rotate the wheel clockwise. Rotate it to the point where the next space on the wheel lines up with the vertical marker you created.
7. Select "File -- Save As..." and type "wheel2" to save this wheel as the second in the series.
8. Repeat these steps for each position on the wheel. Increase the number of the wheel each time you save a new one, for example "wheel3," "wheel4" and so on.
Make The Wheel Spin
9. Launch Adobe Flash and create a new Actionscript document. On the "Properties" panel, change the size of the document to one that will fit the wheel you created.
10. Click on Frame 1 in the "Timeline" panel. From the menu, choose "File -- Import -- Import to Stage..." and select the first wheel you saved, for example "wheel1.png."
11. Click "Yes" when the system prompts you with "This file seems to be a part of a series of images. Do you want to import all of the images in the sequence?" Click "OK' to accept the defaults on the "Options" prompt. The system will place each image in a frame on the "Timeline" panel.
12. Click "Control -- Test Movie -- Test" from the menu to view your spinning wheel.
Add Actionscript and Publish Web Page
13. Click on the first keyframe and enter Actionscript to control the start and stop of the wheel. For example, when someone clicks the mouse, spin the wheel for about one second and then stop it on a randomly-chosen position on the wheel. The wheel in the example has this wheel has 24 positions.
var delay:Timer = new Timer(1000,1);
this.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
delay.addEventListener(TimerEvent.TIMER, land);
function mouseUp(ev:MouseEvent):void {
this.play();
delay.start();
}
function land(e:TimerEvent):void {
gotoAndStop(1 + Math.ceil(23 * Math.random()));
}
14. Choose "Control -- Test -- Test Movie" to check that works correctly.
15. Click "File -- Publish" to create a Web page with the spinning wheel. Click "File -- Publish Preview -- HTML" to preview the Web page.
16. Click "File -- Save" and type a file name to save your spinning wheel project.
Tags: spinning wheel, Click File, your spinning wheel, , File Save