Flash tutorials
Home 3D (2) Actionscripting (65) Animation (100) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (52) Text Effects (38)

Full monitor presentation

17.8.2006, 15:42    Total views: 56856

Have you ever want to create a presentation about yourself or about your company? No problem! Macromedia Flash 8 is the most powerful software for presentations which can provides that and make you happy! This tutorial will teach you how to create advanced full presentation using the picture of monitor and mask effect.



Step 1

Create a new Flash Document, press Ctrl+J on the keyboard (Document Properties) and set the options from the picture below!





Step 2


Download my picture.

Step 3

After you have download my picture, press Ctrl +R on the keyborad (Import to Stage) or choose File > Import > Import to Stage and import that picture.

Step 4

After that press Ctrl+K on the keyborad (Align Panel) and then click on Align to stage icon, after that on Align horizontal center and Align vertical center icon, to precisely center your picture with background. Look at the picture below!





Step 5

Double click on Layer1 to rename its name into a monitor.

Step 6

Insert a new layer and name it display.



Step 7

Lock monitor layer, select the display layer, take the Rectangle Tool (R), under Stroke color choose black, under Fill color choose white, and do like it is shown on the picture below!






Step 8

Insert a new layer and name it mask1. After that using drag and drop technique move mask1 layer beneath display layer. Look at the picture below!



Step 9

Click on the first frame of layer display, and press Ctrl+C on the keyborad (Copy). After that click on the first frame of layer mask1, and press Ctrl+Shift+V on the keyborad (Paste in Place).

Step 10

While your still on the first frame of layer mask1, press F6 on the keyborad thirty times. Look at the picture below!



Step 11

After that, click on every second frame and press delete on the keyborad.



Step 12

Select the display layer and choose right-click and select mask to turn the display layer into a mask. Look at the picture below!





Step 13

Select the mask1 layer, insert a new layer and name it mask2.



Step 14

Click on the thirtieth frame of layer mask2, and press F6. After that Click on the first frame of layer mask1, press Ctrl+C on the keyborad (Copy), go back on the thirtieth frame of layer mask2, and press Ctrl+Shift+V (Paste in Place).

Step 15

While you're still on the thirtieth frame of layer mask2, press F8 on the keyboard (Covert to Symbol) to convert your "display" into a Movie Clip.





Step 16

Click on the fiftieth frame of layer mask2, and press F6. Then select the new made Movie Clip (display), open the Properties Panel (Ctrl+F3), and under Color choose Tint, and set this color: #C51508. Look at the picture below!



Step 17

Go back on the thirtieth frame of layer mask2, and in the Properties Panel under Tween choose Motion.



Step 18

Select the mask2 layer, insert a new layer and name it mask3.

Step 19

Click on the fiftieth frame of layer mask3, and press F6. After that type any text on the position like it is shown on the picture below!

#ads#



Step 20

While your text is still selected, press F8 on the Keyborad (Convert to Symbol), to convert it into a Movie Clip.



Step 21

Click on the seventieth frame of layer mask3, and press F6. Then, set the text at the position like it is shown on the picture below!





Step 22

Go back on the fiftieth frame of layer mask3, open the Properties Panel (Ctrl+F3), and under Tween choose Motion.



Step 23

Click on the ninetieth frame of layer mask3, and press F6.



Step 24

Click on a hundred and tenth frame and press F6. After that set the text on the position like it is shown on the picture below!



Step 25

Go back on the ninetieth frame of layer mask3, and in the Properties Panel (Ctrl+F3) under Tween choose Motion.



Step 26

Now, we're done with the first text animation. You can create a lot of text animation in an equivalent way like we have done the first animation if you like. Now I'll teach you how to create a picture animation and we're done.

Step 27

Select the mask3 layer, insert a new layer, and name it mask4.

Step 28

Hide all layers except mask4 layer, and monitor layer.



Step 29

Click on frame 110 of layer mask4, and press F6.

Step 30

Choose file >Import > Import to Stage, and Import any picture.After that open the Info Panel (Ctrl+I), and set the options from the picture below!



Step 31

Using mouse or by arrows key on the keyboard set that picture at the center of display. Look at the picture below!



Step 32

While your picture is still selected, press F8 on the keyboard (Convert to Symbol) to convert it into a Movie Clip.



Step 33

Click on frame 130 of layer mask4, and press F6. Then click on frame 130 of layer monitor, display and mask2 and press F5.

Step 34

Go back on frame 110 of layer mask4, select the "picture" (new made Movie Clip), open the Properties Panel, under color choose Advanced and set the options from the picture below!



Step 35

Go back on frame 110 of layer mask4, open the Properties Panel (Ctrl+F3) and under Tween choose Motion.



Step 36

Select the display layer, and insert a new layer and name it action.



Step 37

Click on frame 130 and press F6. After that open the Action Script Panel (F9), and paste this script, to stop the animation:

stop();

Now, I have shown you how to create monitor animation for one picture and one text. You can apply this on many text and pictures animation, if you like.

We're done!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 221536

2. Water effect
Total views: 166041

3. Photo slide show
Total views: 153641

4. High-tech city animation
Total views: 151459

5. Special Picture Effect
Total views: 146247

Related links