How to Make a Bee Fly in Flash CS3 or CS4 – Part 1

Please join our RSS feed

At the onset of this Flash project we should define the main tasks and concepts of this project.

The three main tasks are to:

1. To draw the Bee using Flash’s tools.
1. Make the Bee flap its wings in place.
2. To make it fly on a motion guide – that happens in part 2 of our project.

The main concept behind this project: make the Bee seem like it could fly in place, then use a motion guide to actually make it fly on a path.

Here is the Flash movie containing the Bee flying in place:

Step 1

We start with creating the Bee and we do it all in Flash. It is important to mention that in this day and age it is very easy to all the drawing in Adobe Illustrator, but as a homage to Flash (who’s drawing tools, we hope, will someone be as good as Illustrator), we will do it all in Flash.

We get going by creating the various parts of the Bee, the main body, which is Yellow, the strips which are Black and head and the antenna which are also black. and finally we make a wing and then duplicate and flip it so we can have two wings.

The main body of the Bee is created by using a radial gradient from a golden Yellow a more Neon Yellow and then applying this to an oval that is upright. Here is how the final product looks as well as how we made the color selections:

Here is how the final Bee will look:

We use the oval tool to make this shape. The oval tool is found under the square tool in the tool box. A long click will reveal the oval tool “under” the square tool.

It is important to note at this point that each part of the body of the Bee should be saved as a separate symbol, mostly Graphics. This is essential to your success. While we will ofter times put these Graphic Symbols into a Movie Clip we must first have them as Symbols.

Here is how the color pallet looks as we make our color choices.

Step 2

We now move to make the black strips of the Bee. These strips are created by drawing several Black rectangles, evenly separated and they applying a mask to all of them.
Here are the strips with the the mask already applied to them:

Here are the strips with their mask, which happens to be the same exact object as the body of the Bee, so both the strips and the Bee, fit each other perfectly.

From the body we move to the head and the antennas, again we use gradients, this time a radial gradient from black to a softer Grayish-black. The antennas we do completely in black.

It is important, again, to note at this point that each part of the body of the Bee should be saved as a separate symbol, mostly Graphics. This is essential to your success. While we will ofter times put these Graphic Symbols into a Movie Clip we must first have them as Symbols.

Step 3

Once the full body of the Bee is ready we bring it into a Movie Clip where a little later we will make it fly (using very rudimentary animation techniques).  The structure of the Movie Clip should be such that each part of the Bea is in a layer of its own. That said, we refer to the wings as one Symbol and therefor one item. The same goes for the antennas.

So, all in all we should have 6 layers: a layer for the yellow body, the head, wings and antennas, and two layers for the strips which are made by creating a masked layer using another layer to mask it.

Now for the animation of it all. We add two key frames to (F6) frames 4 and 8 on the wings layer. So our time line will work as expected (meaning we will see all parts of the Bea at all times we extend each of the other layers to frame 8 by pressing F5 at frame 8 of each layer). A short cut would be using the Apple key on a Mac or Ctrl key on a PC to select frame 8 of all effected layers and then click F5.

Once we have added the two keyframes to the wings layer we choose the middle keyframe, the one in frame 4, and using the Free Transform tool we bring the wings in, or in other words make the wing symbol narrower then it was. We make sure that the White dot representing the axes on which the symbol moves is in the middle of the Symbol at all times, otherwise our animation would do things we did not expect.

We then add a motion tween between the three keyframes of the wings layer to complete the animation process. A simple click on the Return key will test the animation once.

Once done we will return to the main time line ( remember we did all that inside a Movie Clip). We drag the Movie clip on to the stage and we test it using File>Publish Preview>Flash.

Part 2 of our project is posted here.

Please join our RSS feed



7 Responsesto “How to Make a Bee Fly in Flash CS3 or CS4 – Part 1”

1. The Stock Well – Tutorials | Scripts | Stock Images | Helping … | Drakz Free Online Service says:

   January 16, 2010 at 6:58 am

   [...] here to see the original: The Stock Well – Tutorials | Scripts | Stock Images | Helping … Share and [...]
2. Tweets that mention The Stock Well – Tutorials | Scripts | Stock Images | Helping Creativity » How to Make a Bee Fly in Flash CS3 or CS4 – Part 1 -- Topsy.com says:

   January 16, 2010 at 8:54 am

   [...] This post was mentioned on Twitter by bkmacdaddy designs, ashamis. ashamis said: New post of thestockwell.com > http://thestockwell.com/how-to-make-a-bee-fly-in-flash-cs3-or-cs4-part-1/ [...]
3. texture man says:

   June 2, 2010 at 1:22 am

   Thank you for that informative post. I hope to read more from you guys and continue that great work that really inspires me.
4. King Deblanc says:

   January 4, 2011 at 5:08 pm

   I was just thinking about that, hmm interesting I wonder. Well thanks for the post really useful, to me anyway.