Cog shapes have been requested a number of times in our forums. However an easy method of creation was not possible until the introduction of the ClipClone component. Cogs are often used to symbolize a number of things, for example: machinery, technology, processing, working, loading and settings. Consequently, their inclusion on a website is often very useful.

In its most basic geometry, a cog is a circle or ring with a number of identical teeth evenly spaced around it’s perimeter. Using the ClipClone component, all you need is one tooth and a circle.  The above demo is basic.swf which is included with basic.swi in the examples.zip file.

You can follow these basic steps in SWiSH miniMax3 or Max3 to create a cog:

1. If you haven’t got it already, you can get ClipClone from here. Drag the ClipClone component to the stage.  On the Parameters panel, change the Number of items to 1, select Ellipse as the Arrangement, the A value (width when using Ellipse) to 300, and the B value (height when using Ellipse) to 300. Make sure ‘Align with curve’ is ticked, and set the Effect Delay to 0.
2. With the ClipClone movieclip selected in the Outline panel, use the rectangle tool to draw a rectangle about twice as high as it is wide (in the example above it is 40 x 23 pixels).
3. Delete the default shape in the clipClone so only your rectangle is showing, and in the Parameters panel, change the ‘Number of items’ to the number of teeth you want (16 in the example).
4. Close the ClipClone MC, making sure that the transform point is in the center.
5. Select the Scene level in the Outline panel and draw a circle 290 pixels across. Drag it roughly into position over your clipclone MC and then select the circle and the clipClone MC and use r-click  ‘Align’ settings to align the objects, centered vertically and horizontally.
6. Group the ClipClone MC and your circle as a new Movie Clip ( “cog”). This will allow you to add a ‘move’ effect to the new movie clip containing both the clip clone and circle objects. Click on the effect in the timeline and then, in the Effect panel,  on the Motion tab, set the X angle to ’Rotate CW by’ and specify ’360′, also check [x] X=Y.
7. You can now Preview the movie to see your cog spin and increase the frames of your move effect to slow the cog down.

Using the BevelFilter and DropShadowFilter (Components | Effects | Filters)  you can add a 3D look to your cog.

More complex cogs

Instead of a square tooth you may wish to have rounded teeth or something different. From here-on I describe steps which require SWiSH Max3 for the Group As Shape and some other operations.  If you are trying to reproduce a more complex cog shape from an image, the first step is to import your image and then rotate it so that a vertical guide will split a single tooth down the middle. 

Then magnify your layout until your stage fits just one tooth that is dissected by your vertical guide. This will enable you to draw one half of the tooth, which will then be copied, pasted in place and flipped horizontally and then joined with the original half-tooth to form a full tooth with matching curves (you could use the drawing tools to draw a full tooth, but this method ensures that each side of the tooth is a mirror image of the other).

You should be able to define your half tooth with about eight or nine control points. One at each sharp corner and one or two in between to help define the curves you want.

Use the Subselection tool to adjust your points and curves, making sure that the ‘backbone’ line (where you will join a mirrored copy) is absolutely vertical. Once you are satisfied with your half-tooth, Ctrl+C to copy and Ctrl+Shift+V to paste in place.  Then r-click and select Transform|Flip horizontal.

Next, step the copy across, using your keyboard arrow keys, until the 2 half teeth just overlap each other by one pixel along the main vertical axis.

Select both of your shapes in the Outline panel, and then, again r-click and select Shape Operations>Add. Shape Operations are only available in Max3 but you can use Grouping | Group as Group in miniMax3 as long as you remove the shape outlines. This will turn 2 half teeth into one tooth. Adjust the parameters of the ClipClone component as described above.

To make the ring which will complete the cog as per the example below, draw a circle, on your keyboard and use Ctrl+C, and then Ctrl+Shift+V to copy the circle and paste in place. Select the top circle and, on the Transform panel, change the scale to 80%. Select both circles in the Outline panel and r-click select Grouping | Group as shape (Max3 only). Select ‘Yes’ to the question ‘Make the overlapped regions of objects with the same fill style empty?’.

The example below adds a BevelFilter component to offer some rendition of 3 dimensions.

All of the examples shown in this article are contained in the examples.zip file mentioned above.

Have fun and don’t forget to ask questions if you get stuck.

Tags: ClipClone, cogs

This entry was posted on Monday, January 11th, 2010 at 10:49 am and is filed under Max3, components, miniMax3, tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.