Paul Solomons has been kind enough to share a few tricks of the trade. He has compiled an excellent post on drawing characters and props on Flash. Perhaps this will give you an insight into Daftoons amazing creations. Thanks Paul for sharing this! We are sure our visualizers will enjoy reading and learning from it!
Paul writes, “As a regular contributor to 123Greetings Studio, I thought it might be nice to share a few tips and tricks and take you through the process of designing a Flash animated ecard. Of course, as with lots of things in life, there are many routes to the same destination, so what follows is by no means the only way to approach your Flash ecard project, but rather, it shows the way that I tend to work.
I thought it might be fun to look at my “To You We Sing Happy Birthday” ecard. It features lots of bits and pieces that you might have in your project.
Of course, before you start you must come up with an idea and if necessary, write a script. You might then wish to draw a storyboard – a handful of sketches that help you to visualise the action in your ecard.
So, let’s get started. Open up Flash (Fig. 02) and make sure that you use 123 Greetings’ preferred settings. Your project should be no larger than 550 x 500 pixels (I tend to use the default 550 x 400px) and your frame rate should preferably be 12 frames per second. In more recent versions of Flash, the default setting is 24 fps, so be sure to change this either in the Properties area or by clicking Modify > Document and making the change there. 12 fps doesn’t sound very fast compared to the 24 fps default, but when you consider that although 2D cinema movies tend to be animated at 24 fps, much of the action uses “twos”, with each picture being held for 2 frames, effectively making the frame rate 12 fps. If it’s good enough for Disney, it’s good enough for me.
The other setting you will want to be sure matches 123 Greetings’ requirements is your Actionscript version. It should be set to Actionscript 2. You can choose this option when you first set up your document, or you can alter it using the “Script” drop down menu in the Properties section.
You’re now faced with 4 main areas.
1. A blank stage area (the white rectangle). This is where your action takes place.
2. A timeline. This is where you can alter the action over time.
3. Your tools. Everything you need to create a masterpiece.
4. The Properties area. Here you can make all manner of changes to your project and its elements.
You can draw objects on to the stage using any number of tools. Some people like to draw using the pencil or brush tools, but I tend to favour pulling shapes around to build up my characters. Let’s look at Turple the Purple Turtle from my eCard.
As you can see (Fig. 03) he’s actually made up of lots of individual parts or “symbols” as they are known in Flash. One of the advantages of using Flash for web animation is that when you create a symbol, it is added to that project’s library, allowing you to reuse it (as I have done for Turple’s legs, arms, eyes, pupils, etc.). Reusing symbols is great because it hardly adds to the overall size of your file. Keeping file sizes down is really important for web animation.
Let’s look at how an arm is created starting with a simple rectangle. Firstly, choose a stroke and fill color by clicking on the colored squares in your toolbox. This should reveal a palette with an eyedropper to pick the color. Next, select the rectangle tool, click on the stage and drag out a rectangle shape.
See Fig. 04 to see how to turn your rectangle into the arm.
Believe it or not, every single part of Turple, all of the other characters and even the background and props were created using this technique.
Once you have completed pulling the arm into shape, you need to convert it to a symbol (Fig.05).
Simply select the object (you can double-click on it, click and drag around it, or click on the keyframe in the timeline represented by a little black circle). Be sure to select the stroke and the fill. It’s very easy to leave one or the other behind. Once selected, click Modify > Convert to Symbol and name your symbol (in this case TurpleArm01). Next, select either “Graphic” or “Movie Clip” from the drop-down menu. Either will work, but they both behave very differently. Needless to say, you don’t really want to choose ”Button”, even though it would also do the job. I would tend to favour “Graphic” for reasons I will go into in the next tutorial. It should serve you very well. Click OK and you will see a blue rectangle around your arm (or rather Turple’s arm). This signifies that the object is now a symbol and ready to be animated. If you open the library (the books icon near the Properties area), you’ll see that the symbol is also showing in there. If you wanted to, you could drag multiple “instances” of your symbol from the library on to the stage.
Returning to your symbol on the stage you will notice that you can no longer pull around the corners and edges. Actually, you can easily edit the symbol by double-clicking on it either on the stage, or in the library. This takes you inside the symbol and you can pull it around and reshape it just as you did before. Bear in mind though, that if you alter the symbol from within, it will similarly alter every instance of that symbol in your project.
By default, when you turn an object into a symbol, it is given a pivot point in the centre. This means that if you were to scale the object, it would scale from that central point. More importantly, if you rotate the object, it will rotate around that point too – not ideal in the case of an arm. If you want Turple’s arm to swing, it must rotate around the shoulder.
To remedy this, click on the Free Transform Tool (Fig. 06) and select the arm. You will see the pivot point revealed as a small white circle in the centre of the object. Simply click on the circle and drag it to where you want. In this case I’ve moved it to the top, where the shoulder might be. Now you’re ready to create the other parts of your character. Be sure to save each one as a separate symbol and to name them so that you can easily identify them.
Have fun creating your ecard characters and props.”
Author of the post: Paul Solomons – 123Greetings Studio Visualizer
