Now: Tutorial for Web and Software Design > Flash > Special Effect > Flash Content
> Moving Lines [Bookmark it]
Moving Lines

First we need to create the Stage. To do this create a new stage. Size: 400 x 250, FPS (Frames Per Second) at 22, Background color does not matter, Although I used White.

image 1

Next thing is to figure how many sides we need. In this tutorial we're using a box, which has 4 sides. So will need 4 separate layers. Each layer will hold a single Line.

By default you have a Layer already there, which is Layer 1. But lets say that first layer is already being used.

So we'll create 4 new Layers.

Press the New Layer button, 4 times.

You should now have layers Named 1, 2, 3, 4, 5.

Select Layer 1 and Rename it 'Used' then Lock it.

image 3

Next Select Layer 5 and rename it Top.

Select Layer 4 and rename it Left.

Select Layer 3 and rename it Right.

Select Layer 2 and rename it Bottom.

image 4

Now that we have the layers for each line done. We can create the lines. First we'll start with the Top Line.

Select the Top layer.

Then select the Line tool

Hold Down Shift and Create a line. (move left to right)

Make it how wide you want the box to be.

Now Select the Line you just made.

Go to EDIT > COPY (CTRL+C)

Now Select the Bottom layer.

image 6

Go to EDIT > PASTE IN PLACE.

Then with it still selected Hold Shift down and Press the Down Arrow key 7 times.

Next will Create the Left and Right Sides

Select the Left layer.

And the Line Tool

When creating this line start at the Top line left side of it.

Hold Down Shift and Create a line. (move top to bottom)

Make it how tall you want the box to be.

image 8

Now Select the Line you just made.

Go to EDIT > COPY (CTRL+C)

Now Select the Right layer.

Go to EDIT > PASTE IN PLACE.

Then with it still selected move the mouse over the line you should then get a Cursor and cross with arrows. This mean you can move the selected item. Move it over to the far right side of the top line. So you should now have formed a box with all 4 Layers. See figure to the right.

image 9

With the Right line still selected

Go to Modify > Group (CRTL+G)

Then Select the Top line

Go to Modify > Group (CRTL+G)

Do the Same with the Left and Bottom lines.

So that all the lines are grouped to themselves.

Next Step we create the Motion Tweens.

In the Timeline of Top, Left, Right and Bottom Layers

Select Frame 25 for each layer.

image 10

Right Click Insert KeyFrame

image 11

So now you should have a timeline that look similar to the image on the right

image 12

Select Top Layer Frame 1

Now on the Stage select the Top Line.

Hold Shift down and Press the Right Arrow.

Move the line until it is off the stage.

image 13

Then Right click on Frame 1 of Top layer. and Select Create Motion Tween.

Now, Do the same for Left, Right and Bottom layers as you did for the Top layer. Except move the other lines as Follows.

Left Line - Upward ( Up arrow)

Right line - Downward (Down arrow)

Bottom line - to the left. (Left arrow)

When your finished with the Step above your Timeline should look like this image:

image 14

Run your Movie Go to Control > Test Movie (CRTL+ENTER)

Notice that when you run it, it continuously runs (loops). to Fix this we can put a stop() action on Frame 25 of the Top Layer.

Advanced Note: If you wanted to use this in bigger Animation you can change this into an MC. One of two ways.

1. Start out by first making a Movie Clip (MC), to do so, go to Insert > New Symbol or by pressing F8. then starting from the beginning and create the box from there. That way the box is made inside (or as) a MC.

2. Copy, Paste Method (Only if the Effect is already done) Select All Layers and there Frames, then Right Click and Select COPY FRAMES, then go to Insert > New Symbol or pressF8 to Create a new Movie Clip. Then on the 1st Frame of the new MC, Right click and Paste Frames.

Experimenting with this tween you can create different effects by simply changing the way something moves or is animated.


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

  • Next Article-Flash:
  • Related Materias
    Motion Animations
    Generating and Publishing 
    Handwriting Flash Movie
    Movie Clips
    Attaching Movie Clips usin
    Creating the Illusion of S
    Flash 8 Environment
    Smooth Scrollbar
    Mouse Follower in Flash
    Movie and Image Preloader 
    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