Twitter Facebook RSS Logo

Striped Transition Effect Tutorial in Flash

7 Comments

Learn how to create a unique striped box transition effect using advanced masking effects in Flash.


Tutorial Details

Program: Flash CS5

Difficulty: All

Estimated Completion Time: 40 min

Tutorial Assets

The following assets were used during the production of this tutorial.

Source File.fla

In this tutorial, you will learn how to create an advance masking effect of an images. Here we are taking new flash document with action script 2.0. See the reference image below.

Advance Masking Effect for Image Transition!

Step 1: Setting Up Document Properties

Now Select Modify from the menu bar and select Document or You directly can press ctrl + J to open the document properties.

Advance Masking Effect for Image Transition!

Now change the stage dimensions as 285×180 and the FPS is 30, as shown in the Figure below.

Advance Masking Effect for Image Transition!

Step 2: Importing necessary images

First import the downloaded used images from the source. To do that, Go to the File menu > Select Import > Select Import to Library.

Advance Masking Effect for Image Transition!

Step 3: Positioning images on to the stage

Before starting we already have layer 1, now name the layer as Images. Drag the 1.jpg image from the library on to the stage.

Advance Masking Effect for Image Transition!

Align the image to the center of the stage using the align panel. Keep in mind that to align any item to the center of the stage, Check on the “Align to stage” check box.

Advance Masking Effect for Image Transition!

Step 4: Creating masking shape

Now insert a new layer above the Images layer, and name it as Masking.

Advance Masking Effect for Image Transition!

Press Ctrl + F8 to create a new symbol. Type the name Box Animation and select type to Movie Clip.

Advance Masking Effect for Image Transition!

You will enter the Box Animation movie clip. Then create a rectangle shape as given in the reference image below:

Advance Masking Effect for Image Transition!

Step 5: Creating masking animation

Now select the frame and drag the frame to frame 10.

Advance Masking Effect for Image Transition!

Insert new key frames by pressing F6 on frame 15 and 30.

Advance Masking Effect for Image Transition!

On frame 10, transform or resize the rectangle to small and move it to slightly right from the center point as given in the reference image below:

Advance Masking Effect for Image Transition!

On frame 15, move the rectangle left from the center point as given in the reference image below:

Advance Masking Effect for Image Transition!

On frame 30, transform or resize the rectangle to small and keep it to the center point as given in the reference image below:

Advance Masking Effect for Image Transition!

Now Select any frames between frame 10 and frame 30 and create shape tween. To do that, Select the frames > Right click on the selected frame > Select Create Shape tween.

Advance Masking Effect for Image Transition!

Now insert new key frames pressing F6 on frame 75 and 90.

Advance Masking Effect for Image Transition!

Select frame 91 and Press F7 key to insert blank key frame.

Now Select any frame between frame 75 and frame 90 and create shape tween. To do that, Right click on the selected frame > Select Create Shape tween.

Advance Masking Effect for Image Transition!

Step 6: Arranging the masking animation for Transition

Now come to the main time line and select the masking layer.

Advance Masking Effect for Image Transition!

Open the library panel by Pressing Ctrl+L. Then drag the Box Animation movie clip symbol from the library.

Advance Masking Effect for Image Transition!

To open the properties panel, Go to the Window menu > Select the properties. Then select the Graphic from the symbol drop down menu as given in the reference image on the left and Go to the Looping and Select Single Frame from the option drop down menu as given in the reference image on the right.

Advance Masking Effect for Image Transition!Advance Masking Effect for Image Transition!

Now type 35 into the First option.

Advance Masking Effect for Image Transition!

Step 7: Placing the Box Animation symbols over the image

Now move the Box Animation symbol to the top left on to the stage.

Advance Masking Effect for Image Transition!

Here we will cover the image from number of copies of Box Animation symbol. Copy this symbol. To do that, Press Ctrl+C, then Ctrl+V and place each copied symbol as given in the reference image.

To open the properties panel, Go to the Window menu > Select the properties. Then select the Movie Clip from the symbol drop down menu as given in the reference image.

Advance Masking Effect for Image Transition!

Step 8: Randomizing the animation clips

Now select all movie clip symbols and Press F8 to create a new symbol. Type the name Transition and select type to Movie Clip.

Advance Masking Effect for Image Transition!

Now you will enter the Transition movie clip symbol. Select all the symbols and do right click and select Distribute to Layers.

Advance Masking Effect for Image Transition!

Insert new layer and name it as Action.

Advance Masking Effect for Image Transition!

Insert a new key frame on frame 20 by pressing F6. Select frame 20 and press F9 to open the action panel. Type stop(); into the action panel.

Advance Masking Effect for Image Transition!

Now select frame 20 of all layer except of Action layer and Press F5 to insert frame.

Advance Masking Effect for Image Transition!

Here you can rearrange the starting frame of each layer according to you.

Advance Masking Effect for Image Transition!

Step 9: Finalizing the transition

Now come to the main timeline and select the masking layer. You need to apply masking to this layer. To do that, right click > select mask.

Advance Masking Effect for Image Transition!

In the end, we will place other images and give the time period for each image to appear onto the screen. Now insert key on frame 101, 201, 301, and 401 on both layers.

Advance Masking Effect for Image Transition!

Now change other images on the Image layer, where the key frames are inserted. Press F5 on frame 500.

Now press Ctrl + Enter to see you effect. You will find the effect something like this.

Advance Masking Effect for Image Transition!

Posted on February 20, 2012 in Tutorials, tagged , , , by EntheosWeb
Tweet, Share or Comment on this page if you found this tutorial or resource useful!
Subscribe to the RSS feed or to email updates, to get even more great content!

7 thoughts on “Striped Transition Effect Tutorial in Flash

  1. Guys please…. Import images to library from downloaded source files ? “The following assets were used during the production of this tutorial – Source.fla” ? WTF ? There is only .fla so how the f…. can you import images via “Import to library” menu ? You need to open .fla file in Flash, then open second library panel. In first panel you choose source.fla in second panel your file and then you can move images used in tutorial to your project…. Have you ever try to import to library directly from the .fla file ?
    Jesus Christ and that just one mistake from many and it appears in your every Flash tutorial….

Leave a Reply

Your email address will not be published. Required fields are marked *

Featured Templates

Subscribe to New Posts

Enter your email address:

Delivered by FeedBurner