Striped Transition Effect Tutorial in Flash

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.

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.

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

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.

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.

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.

Step 4: Creating masking shape

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

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

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

Step 5: Creating masking animation

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

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

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:

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

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

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.

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

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.

Step 6: Arranging the masking animation for Transition

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

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

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.

Now type 35 into the First option.

Step 7: Placing the Box Animation symbols over the image

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

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.

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.

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

Insert new layer and name it as Action.

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.

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

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

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.

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.

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.

Creating a Rotating 3D Planet in Flash

In this tutorial, you will learn how to create a realistic 3D earth rotating effect using masking effect 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

 

 

Here we are taking new flash document with action script 2.0.

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.

Now change the stage dimensions as 546×370 and the FPS is 30, as shown in the Figure below. To start with the tutorials download the source.zip file that will provide you with the necessary files to be used in the tutorial.

Step 2: Importing necessary images

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

Step 3: Positioning images on to the stage

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

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.

Step 4: Creating the earth map

Now insert a new layer above the bg layer, and name it as Globe.

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

You will enter the Map movie clip. Drag the Planet1_map image from the library.

Now copy and paste this map image and place them close to each other.

Then select images and press ctrl + g to group into one.

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.

Now press Scene 1 to back to the main timeline.

Step 5: Creating the Globe

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

Now create an oval using oval tool as given in the reference image below:

Open the propertied panel. To open the properties panel, Go to the Window menu > Select the properties. Now go to the POSITION AND SIZE. Break the link by pressing on the link icon. Set the W: 200 and H: 195.

Now insert a new layer below the oval layer and name it as map.

Press the outline icon to see the map below it.

Drag the map symbol from the library on to the map layer.

Here you may see the outline of the oval. Now place the map symbol right aligned to the oval and it should be vertically center align.

Step 6: Creating the map animation

Now select the frame 100 of oval layer and press F5 to insert a new frame. Then select the frame 100 of map layer and press F6 to insert a new key frame.

Press the outline icon of the map layer to see the outline of the map.

Here you will see a line in the center of the map symbol in the outline view. Now move the map symbol to the right side till the center line reach to the right edge of the oval. Do not move the map symbol in the vertical direction.

Now select any frame between the frame 1 and 100 of map layer and create Classic Tween. To do that, right click > select Create Classic Tween.

Step 7: Creating the Globe Animation

Now select the oval layer and apply mask to it. To do that, right click > select mask

Now press Scene 1 to back to the main timeline.

Step 8: Placing the globe on to the stage

Now drag the globe movie clip symbol from the library on to the Globe layer.

Place the globe anywhere on the stage.

Step 9: Finalizing the globe or Apply depth to the globe

Select the globe and open the properties panel. To open the properties panel, Go to the Window menu > Select the properties. Go the FILTERS, and click on the new to apply filter.

Select the Glow from the filters menu.

Set the values, Blur X = 15, Blur Y = 15 Strength = 190%, Quality = High color #3366ff for values, see the reference image below

Again click on the new to apply new filter. Select the Drop Shadow from the filters menu.

Set the values, Blur X = 50, Blur Y = 50 Strength = 180%, Quality = High Angle = 0, Distance = 20 px Inner shadow will be check marked for values, see the reference image below.

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