How to Make Wheels Roll in Web Pages
Make your wheels roll on your website by creating a gif or through Flash. Gifs will show up on any browser that displays images, and Flash users will need to have the Flash player installed. The Flash player is free, and the majority of Internet users already have it installed. Rolling wheels are useful for animations such as cars, shopping carts and motorcycles.
Other People Are Reading
Instructions
-
Flash
-
1
Open Flash and click "File," "New" and then "Flash File (ActionScript 3.0)" from the pullout menu.
-
2
Import your wheel image by clicking on "File," "Import" and then "Import to Stage." Browse to where your images are, and then click "Open."
-
-
3
Click on the wheel image, and from the main menu click "Modify," "Convert to New Symbol." Click on the "Movie Clip" radial box and type in "spinningWheel" for the name.
-
4
Double-click on the movie clip to enter its timeline. Click on frame one of "Layer 1″ in the timeline. Right-click and select "Create Motion Tween." Right-click frame 24, and click Insert "Keyframe," "Rotation. "
-
5
Click "Window" from the main menu, and then click "Properties" and then "Properties" again from the pull-out menu. Under "Rotation: - time(s)," click the dash line style, and type "1,″ then click on "CCW" for the direction.
-
6
Go back to the main stage, and click on "Scene 1" at the bottom of the timeline to exit the "spinningWheel" movie clip's timeline. Drag the "spinningWheel" movie clip to the far right of the stage.
-
7
Right-click on the first frame of the timeline, and click on "Motion Tween." Drag the tween to at least 60 frames, in order to see the wheel move. Right-click on the last frame, and select "Insert Keyframe," "Position." Drag the "spinningWheel" movie clip to the other side of the stage.
-
8
Press "Ctrl" + "Enter" on your keyboard to test the movie. Adjust as needed. Publish your file as an .html file type by clicking "File," "Publish As" and clicking on HTML.
Gif
-
9
Open your wheel in a graphic program that will create gifs such as Photoshop, Gimp or Fireworks. Create your gif by moving the wheel to a different place in each frame/layer.
-
10
Preview your animation by using the play button. Change the speed by entering a new value on the number located near the name.
-
11
Add your gif to your web page the same way you would add an image. See sample code below:
<img border="0" src="/images/image_1.jpg" alt="Image_Description" width="304" height="228" />
-
1
