Web Design Tutorials: Photoshop, HTML, Flash, PHP

Flash Tutorial – Creating a Unique Splash Page

Preview the Splash Page.

Open flash and make a new document . And give in the setting like below.

Canvas width and height , FPS and BG .With the hex # 1B1C1C

If you look on top you will see the main timeline. With only 1 layer in it.

Double click were its says layer1 and give it the name square.

And now if you press Ctrl+F8 then it will open Up the window to create a new
symbol.

And give it the name square_mc and make it a movieclip.

Now you are working in your Movie clip – Select the rectangle tool and use these settings:

Use this hex code #343434 and no stroke color.

Go back to Scene1 and select the square layer, once that is selected go in the time line and press on frame 17.

Right click and select insert keyframe.

On your right side of the screen you see Library. And the movie clip square_mc.

Drag that on your scene, make sure that you are still in the square layer and
in frame 17.

And place your square on the positions x :313,5 and the y :263

Now right click on frame 17 and select Copy Frames. And paste that frame in
frame 22 , frame 23 and 24.

And now go to frame 55 , right click and Select Insert keyframe. you should
have something like below now.

With frame 55 selected press F9 on your keyboard .The actions panel should pop up.

And give in this code :

stop( );

Its a important code so don’t forget it.

Let go back to frame 17 and select the square. Go to properties and go to Alpha
. Give it 19%.

Now you do the same on the other frames. Only with diffrent setting:.

In frame
22 and 24 give in 100% Alpha.

In frame 23 give it a Brightness of 36%.

Now right click in between frame 17 and 22 in your square layer . And select
Motion Tween.

Thats it for the square part.

Press ctrl+F8 again and make a movie clip called dotline_mc. And make a line
with these settings.

Go back to your Scene and make 2 new layers.Name 1 BottumL and the otehr 1
TopL.

Make a keyframe on the third frame of these 2 layers.

Drag the dotline_mc from the library into the timeline of BottumL and topL.

Settings for bottumL are : x 936 y 329

Settings for TopL are : x -320 y 149

Make a keyframe in these both layer on frame 10. And only change these settings.
bottumL and TopL : x 309

now right click between frame 3 and 10 and select Motion Tween . And you should
have like below.

Press Ctrl+F8 again and name the movieclip text_mc.

Once in the clip give in any text you want . And color doesn’t really matter.
PressCtrl+F8 again and name this text1_mc.

This is for the sub text if you want it.

If you are done with those then go back to the scene . And make 3 new layers
. Name them text , mask and the third 1 name it subtext.

Now add a keyframe in your text time line on frome 28 . And do the same for
the mask. Select the text layer on frame 40 and drag your text_mc on to the
scene.

Now center it horizontally and put it right under the bottom dotted line:

Now add a keyframe in frame 33and move the text Up till its just above the
bottum dotline. Right click between frame 28 and 33 and add motion tween.

Next step is making another movieclip. So you know the drill PeePs. Ctrl+F8
and call it mask_mc. In this movie clip make a rectangle with the size 300×60.

Drag this movie clip onto the time line in your mask layer on frame 28. Now go with your cursor the the left and right click and the layer mask.

And place this right on top of your text_mc.

Again make a new movieclip(Ctrl+F8)And call this logo_move_mc. take any logo
you want . i used a white logo for this.

If you don’t know on how to import a picture then CLICK HERE FOR THAT TUTORIAL

Make another movie clip and call this logo_mc. Drag you logo_move_mc into this
MC and add a keyframe in frame 8.And now with you logo selected you can add
a blur filter.

The logo in the first keyframe scall it downtill the width is about 65px. Click
between frame 1 and 8 and add a motion tween.

Now copy frame 8 into the frames 10 until frame 17. Now in frames 10,11,13,15
and 17 we are gonna swap symbols.

And swap it with logo_move_mc.

Select frame 17 , press F9 and give in this code.

stop();

function moveOn()

{

gotoAndPlay(”9″);

}

setTimeout(this, “moveOn”, 4000);

Now in you movie clip logo_mc add a second layer and give it a keyfame on frame
9. With that still selected go to properties and give in the number “9″ in frame label .

Now the As knows where it should start again when it loops. Go back to the Scene1
and aad a new layer and call it logo_mc.make a keyframe frome frame 41 and drag
your logo_mc into the stage.

And place it in the middle of the square. Again new layer and call it invi_btn.
make a new movieclip and call it enter_btn.

Draw a rectangle of 150×165px. color doesn’t matter. in you invi_btn layer make
a keyframe frome frame 53 and drag the button on the stage and place it right
on top of the logo.

Select the button and go to properties and set its alpha to 0% .And press F9
and give this in for actionscript.

on (release) {

getURL(”http://www.your-desing.be/main”, “_self”);

}

Make a new layer and name it subtext and make
a keyframe of frame 43 .Drag the subtext_mc on to the stage and place it right
below the bottom dotted line.

Another keyframe on 53 . Now the subtext on frame 43 give it 0% alpha . Right
click between 43 and 53 and add a motion tween.

And you are done.

Hope you learned something out of this and if you have questions just let us know and you can post your outcomes to.

CLICK HERE FOR THE SOURCE FILE.

Source: webdesigndev.com

you may also like:

Leave a Reply

Powered by WordPress | Designed by Elegant Themes