Cochesaurus Playground

Dessins, peintures, infographies, animation et pensées

23 février 2008

Curl Tree (Spiral Tree) Tutorial

Following with my integration examples, this time we'll try to integrate Inkscape and Adobe Flash (Flash 8 or Flash CS3 is Ok for this tutorial) in a Curl or Spiral Tree. This tutorial doesn't aim to be or cover advanced techniques so a new comer to Inkscape or Flash could find this easy to follow, but maybe some intermediate users (like me) or other users could learn something.

So let's get started...

First open Inkscape and select the Spirals tool, then draw a some big spiral in the page (mine is like 430x430px FIGURE 1)


      FIGURE 1 A Spiral. Notice the two rhombus, you can use it to roll/unroll the spiral.

After that we need to add a new bezier point or node but before that we need to convert the spiral to a path. So select the spiral and then beginning from the menu do Path > Object to Path. Following to that, select the edit path nodes tool (the tool that is just below the Select tool) and click the spiral, you'll notice a series of points along the spiral. Then in the menu over the Edit Path tool select Insert a new node... (FIGURE 2)

FIGURE 2 The Edit Path Tool options (you can also double click to add a new node).

To add the node, click near the last outside node. After that drag the last outside node down keeping it centered.

We need to give the curl (maybe is not a curl but a spiral, but you know I like girls with curls so I'll refer that way :) ) a more stylized shape, so to add the curve click the bottom node and notice a little circle, that circle we'll allow us give a nice curve. Drag the circle and also keep pressed the Control Key to restrict the angle, so we can obtain a vertical or 90 degrees angle. Keep tweaking the nodes and the figure until you obtain a satisfactory result. Tip: Remove nodes if necessary, I also used the Make Selected Nodes Symmetric Tool to smooth the curves (FIGURE 3).


       FIGURE 3 The Curl and his nodes

We are done with the curl!! but we need to export it now, so select File > Export Bitmap in the dialog select Drawing and then click in Export. After the export process, we have a nice curl png file that we can import in Flash, so let's do that.

Open Flash and create a new document, the default dimensions 550x400px are Ok, also set the framerate to 30 frames per second. Select the default Layer (Layer 1) then go to File > Import > Import to Stage. In the import dialog select our just recent created curl png file. The curl appears in the stage.

Now if necessary resize the curl with the Free Transform Tool, remember to keep pressed the Shift key to proportionally constrain the shape. Keep selected the curl and now go to Modify > Bitmap > Trace Bitmap... and select the following values: (FIGURE 4)


FIGURE 4 Trace the imported curl.

Note: When applying the Trace Bitmap to the curl I noticed that a slight stroke is leaved after the trace, we need to remove it because in the next step the result will not be the desired because of that. To remove it, just select the curl and move it to the right or left and you'll notice the stroke, select it and then delete it.

Now if you click the curl with the sub selection tool (white arrow) you notice that is a lot of points or nodes and since later we are going to apply a thing called shape tween that works best if the shape haves few nodes, we need to reduce the quantity of nodes. To do that select the figure with the selection tool (black arrow) and then go to Modify > Shape > Optimize... and select the following values: (FIGURE 5)


FIGURE 5 Optimize the curl shape. If everything is Ok we'll obtain a 98% nodes reduction.

Now create a new layer and move a copy of the curl to that layer. Create a new layer and move it to the bottom, name it stem. In the stem layer draw a stroke or curved line with the pen or brush tool, that will be our stem. After that we need to join the curls with the stem, to do it you'll optionally need to alter the original curl, but because we have a copy or duplicate of the original one in another layer, there is not problem. So by example in the bottom left curl, I wanted to remove a few nodes with the sub-selection tool, to do that just select the nodes you want to delete and then press the delete key (FIGURE 6).


    FIGURE 6 Adding the bottom left curl to the tree.

Removing some nodes often is not enough, so to add a nice and smooth join between the stem and the curl you need to drag some nodes, alter the bezier handles of some nodes or alter the curves in the curl. To do the mentioned things the selection and sub-selection tool will be some of your preferred tools (FIGURE 7).


           FIGURE 7 Joining the curl with the stem.

After adding all the curls and a bit of animation your timeline and the curl tree could look like this: (FIGURE 8)


FIGURE 8 The final timeline and stage.

Hey coche but not too fast, this tutorial is not done yet. Ok so let's see how we can add a little bit of animation. We are going to apply a Flash animation technique called Shape Tweening, this technique also called morphing is useful to alter the shape and color of things. Is important to remember that this technique only can be applied to shapes and not symbols, also like I said before if the change between the two final shapes is too dramatic, the results will not be the desired ones. So we need to maintain the shapes not so complicated and this is achieved using fewer nodes in the shape.

So let's animate the curl, to do that first we need to alter the anchor point. The anchor point is a white circle that appears when you select the shape with the Free Transform Tool, this anchor point is like when you needed to do a circle and don't have a compass, so you cut the side of a box and then do two holes, and in each hole you put a pencil. You kept one pencil stay while moving the other to draw the circle, is easy and effective, I'm sure you tried that nice trick before!

We need to move the anchor point to the left so we can scale the curl and then apply the effect. But before that make a new keyframe around frame 81.

Tip: To make a keyframe just press the F6 key in frame 81 or right click and then insert a new keyframe.

So now in the keyframe 1 move the anchor point and then scale a little bit to the left the curl (FIGURE 9).


FIGURE 9 Moving the anchor point to the left (top) and scaling horizontally the curl (bottom) in frame 1.

We are ready to apply the shape tween so right click in the layer that we are currently working and from the dialog select Create Shape Tween. If everything is Ok a green arrow will appears.

Tip: in Flash 8 to add the shape tween just click in some frame between the keyframes 1 and 81 and then in the properties panel from the Tween combo box list select Shape.

Now to make the animation more smooth we are going to add a keyframe in frame 40, the shape tween now is divided in two. In the first one select a frame and then from the properties panel apply a ease in with value -100, for the second one apply a ease out with value 100. Now we are done! at last!! (FIGURE 10)


FIGURE 10 Adding a smooth animation using shape tweens.

Note: Do You know that Flash has taken many ideas from traditional animation like the acceleration of an object, in Flash is referred to easing. But in traditional animation is called slow in and slow out, but contrary to what people would think slow out is not the same to easing out but easing in and vice versa.

Our final animation:

I don't know if a Curl tree makes a lot of sense but I think it shows some basic techniques in Flash and some approaches to use nice external programs like Inkscape. Also I think that a Curl tree could be used to create a nice menu or something in Flash in where each curl could be a menu item. I hope you liked and thanks for reading!

* This tutorial was inspired in one of the Rore's brushes. Thanks Rore

Posté par coche à 23:44 - Animation - Commentaires [0] - Permalien [#]


Poster un commentaire