Create a Simple Intro in Flash inspired from Movies

Posted on December 10, 2013 by Dan Doicaru in Flash Category with Easy Difficulty

In this text and video tutorial you will learn how to create a simple intro in Flash, inspired from movies. Scene will be black with text white and animated with fade in and fade out transitions. There will not be any programming involved in this tutorial.

Step 1 - Document Settings

In this tutorial we will use Adobe Flash CS5. To create a new document go to File - New (CTRL+N) and select Action Script 2.0.

You can change the Scene Size from the Properties Panel (CTRL+F3). Set the Width to 800 pixels, Height to 400 pixels, FPS to 30 and Black Background.

flash-document-settings

Step 2 - Adding Text to Scene

Select the Text Tool (T) and write some text. From the Properties Panel you must have it as a Classic with Static Text. You can use whatever font you want. Also make sure to align the text in the middle from Paragraph Tab and from the Align Panel.

text-settings

Step 3 - Animate Text with Fade in and Fade Out Effect

Now this is the hardest part. We'll need to make the text fading in and out. For example, from frame 1 to 15 will be the fade in effect, from frame 15 to frame 100 will be the text doing nothing (so users can read it) and from frame 100 to 115 will be the fade out effect.

To achieve these effects, you must first convert the text as Movie Clip. To do that, simply right click on it and select "Convert to Symbol", or select the text and press F9.

text-convert-to-symbol

After that you can place Keyframes on the number we said above (15, 100, 115).

insert-keyframe-timeline-flash

To create the fade in effect, select frame 1, select your text object and set Alpha to 0. Repeat the same on the frame 115 where the fade out effect will be.

set-alpha-to-movieclip

To make the animation work, you must create a classic tween between frames 1 - 15 and 100 - 115. To do that, simply right click between frames mentioned and select "Create Classic Tween".

create-classic-tween

To test what you did until now, press CTRL+ENTER or just hit ENTER if you want to play in the timeline. You should have this until now:

simple-flash-intro-demo

You can repeat the same steps to create one more fading text using another layer.

Step 4 - Adding a Mask

Create a new layer in the Timeline, place a keyframe to frame 160 and add a text with 2 rows, aligned to right.

preparing-mask-effect

You can draw a line in the right of the text if you want. Now create again 2 new layers, one for mask and one for the other text. Select the layer for mask and draw a rectangle (using Rectangle Tool) near the "Full HD Tutorials" text. Lock and hide the layer after drawing. You should have this:

masking-text-in-flash

In the "text" layer draw a new text on the frame 190 (using a keyframe). This must have a transition from the left of the white rectangle and going inside him. Make sure to convert this text to a Movie Clip (right click on him or press F8).

Place another keyframe to frame 230 and create a Classic Tween between them. Select frame 190, go to Tweening Tab and change it to 100 (out). If you have problems and you don't understand, just follow the video tutorial above.

How to Create a Simple Intro in Flash - Tweening

Right click on the "mask" layer and select Mask. Make sure to have all the layers visible. Near the layer name there is a Red X, make sure to disable it from both "mask" and "text" layer and let them locked.

Final Results - Create a Simple Intro in Flash

final-results-flash-intro

Download Files

 

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


5 + 9 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.