How to Make a Spin the Wheel on a Web Page

Written by steve mcdonnell Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make a Spin the Wheel on a Web Page
Spinning wheels make fun website games. (roulette image by Orlando Florin Rosu from Fotolia.com)

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.

Skill level:
Easy

Other People Are Reading

Things you need

  • Prize wheel picture
  • Adobe Fireworks
  • Adobe Flash

Show MoreHide

Instructions

  1. 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. 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. 3

    Click "File -- Save As..." and type "wheel1" to save this wheel as the first in the series.

  1. 1

    Click the "Select" arrow on the "Tools" panel and click on the wheel to highlight it.

  2. 2

    Hold down the right mouse button and use the left mouse button to click "Transform" and then "Skew."

  3. 3

    Move your mouse to the grey 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.

  4. 4

    Select "File -- Save As..." and type "wheel2" to save this wheel as the second in the series.

  5. 5

    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.

  1. 1

    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.

  2. 2

    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."

  3. 3

    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.

  4. 4

    Click "Control -- Test Movie -- Test" from the menu to view your spinning wheel.

  1. 1

    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, mouse Up);

    delay.addEventListener(TimerEvent.TIMER, land);

    function mouse Up(ev:MouseEvent):void {

    this.play();

    delay.start();

    }

    function land(e:TimerEvent):void {

    gotoAndStop(1 + Math.ceil(23 * Math.random()));

    }

  2. 2

    Choose "Control -- Test -- Test Movie" to check that your spinning wheel works correctly.

  3. 3

    Click "File -- Publish" to create a Web page with the spinning wheel. Click "File -- Publish Preview -- HTML" to preview the Web page.

  4. 4

    Click "File -- Save" and type a file name to save your spinning wheel project.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.