Groovy geometric shapes and easy kaleidoscope effects in Flash
This video is not available.
Introduction
Do you remember those paper snowflakes we made in school as kids? You’d fold up a sheet of paper, make some random cuts with plastic scissors and unfold it to reveal your hidden artistic genius?
A few years back while teaching a Flash course I developed an exercise a lot like that. It was intended to illustrate how MovieClips can be placed inside other MovieClips. The exercise turned out to be a lot more fun then expected. My students and I got lost in the endless art and design possibilities of this simple technique.
This video tutorial doesn’t focus on the technical details of embedded MovieClips but it does show you the simple steps needed to create some beautiful and emergent design patterns in Flash.
Create the Base Layer
The first step when making this type of button is creating the base layer. This layer defines the shape of your button and will eventually hold it’s background colour and stripe effect.
- Start by adding a layer called base.
- Click on the rectangle tool (R)
- In the properties panel set the rectangle corner radius to 5.
- Create a rectangle using the mouse to the size and shape you need.
- Switch to the selection tool (V)
- Select the rectangle and change it’s fill colour from white to green.
- Erase the border by selecting it and and pressing the delete key.
- Select the rectangle and convert it into a MovieClip.
- Call the MovieClip “base colour”.
- Edit the properties and assign an inner glow effect to the rectangle.
- Adjust the ‘blur’ and ‘strength’ to give it a subtle dark inner shadow.
- This is a personal look and feel choice here. Play with it until it feels good to you.
Creating the base.
- Start by creating a vertical line. (N)
- Click and drag downwards. Hold the ‘SHIFT’ key to constrain the line to a single direction.
- Select the line and convert it into a MovieClip symbol.
- You can do this by pressing the ‘F8′ key or by right clicking the mouse on top of the line.
- I named the symbol ‘leg’ but feel free to name it anything you want.
- We will be creating eight of these in total and their purpose is to help with alignment.
- Copy and paste the MovieClip.
- Rotate the copied MovieClip 90 degrees clockwise.
- Make sure that you copy the MovieClip. This effect won’t work if you create a new line.
- Repeat the copy, paste and rotate steps two more times.
- Switch to ‘outline’ mode. This will help us align the objects more accuratly.
- Use the Zoom Tool (Z) to magnify the area where the four lines meet.
- Carefully align all the MovieClips to the same point.
- Use the arrow keys to nudge the lines into position.
- Select all four lines and copy and paste.
- Rotate the copied lines 45 degrees clockwise.
- Move the copied MovieClips so they are on top of the original lines.
- Using the arrow keys again, nudge the lines into position.
- These lines will serve as the base for the shapes we are about to create. Make sure you save at this point so you can come back to it at any time.
SciFi Pattern
First we will create a SciFi pattern.
- Double click the top leg to ‘edit in place’
- Lock the bottom layer.
- Add a new layer.
- Select the line tool. (N)
- Make sure that the line has a stroke height of 2 pixels and the cap type is set to ‘none’.
- Zoom in so the line fills the whole stage.
- Using the line tool draw three sides of a box on the top layer.
- Notice how those lines are being duplicated in the copies.
- Everything that you do in one box automatically happens in the others.
- Select the newly drawn line and convert it to a MovieClip.
- I named my MovieClip ‘half leg’. Feel free to be more creative.
- Copy the MovieClip and Paste it beside the original.
- Flip the MovieClip from left to right by using the transform tool. Change the percent value of ’100′ to a value of ‘-100′ percent. This is a quick way to flip MovieClips in Flash.
- Double click on the left hand MovieClip so that you are editing it in place.
- Select the line tool. (N)
- Add some vertical and horizontal lines. I find that using only vertical and horizontal lines make for a good sci-fi look. Think circuit board.
- Things are a little too complex now. So lets remove the original middle line and space things out a bit.
- I love how the smallest change in position effects the overall look. Play around with the position of the legs until you are happy with the effect.
- You can get some pretty neat effect by playing around inside the ‘half’ MovieClip. I am simply adjusting its position to see what effects it will have.
- Play around until you find something that appeals to you.
- I’m just trying different positions here. I hope you have as much fun as I do when playing with these shapes!
- Tip: You can draw in the to the main MovieClip if you don’t want it duplicated inside it’s two child MovieClips.
- I delete the box’s fill so all the duplicated box outlines behind it are visible.
- Use the arrow keys to change the position of the box by small amounts.
- I’m just playing around here looking for something nice…
Using Letters
Next I use a simple letter ‘S’ to create some unexpected designs.
- Start by double clicking on the top leg to edit in place.
- Lock the bottom layer and create a new layer above it.
- Click on the Type Tool and type an ‘S’
- Make sure the letter ‘S’ is selected and increase its size in the properties panel.
- I used a 38 point font for this effect.
- Time to erase the orginal middle line.
- Move and rotate the letter ‘S’ until you find a pattern that appeals to you.
- That looks good… Lets see what else we can do.
- Wow – its hard to see the letter ‘S’ in there at all!
Icy Snowflake
Using short straight lines I will create a traditional style snowflake. If there is such a thing as a traditional snowflake!
- Double clicking on the top leg to ‘edit in place’.
- Lock the bottom layer and create a new layer above it.
- Start by drawing some short random lines.
- Select the newly created lines and convert them into a MovieClip.
- Copy and paste the MovieClip.
- Flip the MovieClip using the transformation tools.
- Remove the original line and layer. Tip: You can just erase the layer, which will automatically delete anything on it.
- Double click one of the MovieClips to edit it in place.
- Using the line tool (N) create some more lines.
- All done. By repeating this basic technique we have created three very different designs in a relatively short period of time. Why not see what you can do? Thanks for watching.