Now: Tutorial for Web and Software Design > Flash > Action Script > Flash Content
> Use Poly-line Tool to Create Hatching Egg [Bookmark it]
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.


[Bookmark][Print] [Close][To Top]
  • Prev Article-Flash:

  • Next Article-Flash: None
  • Related Materias
    Examples of ActionScript 2
    Attaching Movie Clips usin
    Creating the Illusion of S
    Create Flying Hearts Effec
    Mouse Follower in Flash
    Movie and Image Preloader 
    Flash Game (Exclusive Tuto
    Opposeable Mouse Effect
    Simple Particle Effect
    Use FSCommand With the Bro
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial