Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Use Poly-line Tool to Create Hatching Egg
Your Ad Here

Use Poly-line Tool to Create Hatching Egg


This tutorial was written for the Flash Designer software, which allows you to create flash animations in a much easier way than by using Macromedia Flash. You may get Flash Designer here.

Image 1: The Hatchling

In this tutorial you'll find the trick needed to color a polyline object, crack it, split it, and making the two pieces have the same break line.

The Tools

image 1

Image 2: Tools List

image 2

Image 3: The Color Picker Tool

image 3

Image 4: The "Frame">"Select Item" Dialog Box

An Egg You Can Crack

pen a new document: (choose: "File">"New" or press [Ctrl]+[N])... Size the frame if desired (choose: "Frame">"Frame Size...")... I used a width of 250 and a height of 200... Choose "OK"...

Choose the circle tool then choose "Item">"Line and Fill">"Line Color" or press [Ctrl]+[L] and choose the line color for your egg (I used Black from the "Predefined Colors" drop-down menu)... choose "OK"...

Choose "Item">"Line and Fill">"Line Width" and choose the width of the line (I used 1-px)...

Choose "Item">"Line and Fill">"Fill Color" or press [Ctrl]+[F] and choose the color for your egg (I entered 00CCFF in the hexadecimal box which is the blue of some birds eggs we used to find as kids)... choose "OK"...

In the frame click at your choosen top-left coordinate for the egg... Drag the cursor to the bottom-right coordinate drawing out an oval... release the button to complete the egg...

image 4

Image 5: The Egg

Breaking The Egg

Choose "Frame">"Duplicate" and select "After current frame"...

Choose the magnifier tool magnify the frame (either choose 400% from the magnifiers menu or click inside the frame twice)...

Select the polyline tool and draw a straight line left-to-right across the egg...

Right-click on the right node and choose "Insert" popup menu and you'll see a new node in the middle of the line...

Note: If you only get a "Delete Point" option right-click on the other node.

Repeat by right-clicking the node again and inserting another node making 4-nodes...


image 5

Image 6: Inserted Nodes

image 6

Image 7: Moving A Node

Choose the "Node Edit Tool then click & drag the two middle nodes to the top outline of the egg placing each one where you want to start a crack in the egg...

Select the polyline tool and click in the middle of the left node and drag another straight line to the right node...

This time right-click the left node and choose "Insert" repeating what you did before to get two middle nodes...


image 7

Image 8: Second Line Preparation

Choose the "Node Edit Tool" and click & drag the new middle nodes to the bottom outline of the egg where you want the cracks to end...

Repeat These Steps Until You Have Rounded All Six Lines

Right-click one of the nodes and choose "To Curve" (a colored node will appear)...

Click this colored node and drag the cursor out until the straight-line curves to cover the original eggs outline...

image 8

Image 9: Curving A Line

image 9

Image 10: The Original Egg Is Covered

Note: You can also move this colored node back and forth along the line to vary the shape of the curve.

Note: The line changes color as it aligns on top of the eggs outline.

Do the rest of the lines the same way until you completely cover the original eggs shape...

End Of These Repeating Steps

Once you have the outline of the egg covered press [F5] for the Selection Tool and click somewhere in the frame away from the egg to unselect everything...

Choose "Frame">"Select Item", select the ellipse from the dialog box and choose "OK"...

Press [Ctrl]+[X] or choose "Edit">"Cut" to delete the original egg from this frame...

These Steps Will Be Repeated To Your Own Satisfaction

Choose the Node Edit Tool and click inside the egg (all the nodes will appear)...

Right-click the top-right crack node and choose "Break" then do the same with the bottom-right crack node...

Choose "Edit">"Break Apart" and you'll see the color disappear...

image 10

Image 11: The Break


image 11

Image 12: The Break Apart

Press [F5] and click away from the egg to unselect everything...

Click the right end of the egg outline and drag it away and to the right...

image 12

Image 13: The Separation

Note: This is where having the enlarged view comes in handy.

Choose the Polyline Tool and click the top end node of the right piece dragging a short line from top end of the right side outline down and at an angle...

Without moving the cursor release the button then click and drag another short line at a different angle repeating this step until you connect to the bottom end node, you'll see the color fill this piece...


image 13

Image 14: Preparing To Close

image 14

Image 15: The Closure

Press [F5] and drag the right piece to reassemble it to the rest of the egg...

Click on the left outline so you get a selection box around it and unselect the right piece...

image 15

Image 16: Reassembling

image 16

Image 17: Edit The Left

Choose the Polyline Tool and click on the node at the top of the crack...

Trace over the crack line releasing the button and pressing it again over each angle until you join the bottom node when the rest of the egg will color in...

image 17

Image 18: Completing The Left Crack


image 18

Image 19: The Cracked Egg

Duplicate the frame "After current frame" Press [F5] and unselect everything...

Select the right end and drag it away to the right...

Choose "Item">"Rotate">"90 CW" then reposition the piece to a place where it may have landed after being kicked off...

Press [F9] to see a preview of your work...

Press [Esc] to exit the preview...

Congratulations... You have cracked your vitual egg

You can repeat these steps with the left side nodes and any two nodes that are opposite eachother on the same piece.



Author's URL: Selteco.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Internet & computing Flash is a vector-based moving graphics format created by Macromedia for the publication of animations on the World Wide Web. More Flash & Swish: Most Popular Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

Add comments to "Use Poly-line Tool to Create Hatching Egg"

Only registered users can write comment

No comments yet...