Making a Splash Page in Adobe Flash

Free Tutorials Send by Email

Free Web Design Newsletter

Opportunities to Win Free Prizes

Subscription to our RSS Feed

Posted on 15. Jun, 2008 by Michael in Flash

Creating a Unique Splash Page In Adobe Flash

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.

You now may want to move onto to Learning How to Create a Flash Website

CLICK HERE FOR THE SOURCE FILE.

39 Responses to “Making a Splash Page in Adobe Flash”

Tutorial | Making a Splash Page in Adobe Flash « Flash Enabled Blog

17. Jun, 2008

[...] View tutorial and download support files No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]

Reply to this comment
SV Creation

18. Jun, 2008

Nice tutorial view here step by step that how to make a animation no any problem in that i am also provide a flash tutorial website

Reply to this comment
Rawpinions

19. Jun, 2008

I tried a simple one but the url didn’t work for me. Will try again…

Thanks for the tutorials!

Rawpinions’s last blog post..Random Blah

Reply to this comment
Dr!ver.

22. Jun, 2008

What do you mean Rawpinions .

let me know.

Dr!ver.

Reply to this comment
Vzar

23. Jun, 2008

The source file (.fla) above cannot be read by Flash 8, it said : “Unexpected file format”

Vzar’s last blog post..N-Gage Theme For Nokia N Series[N95 N96 N80 N81 N82 N76 N73]

Reply to this comment
Dr!ver.

23. Jun, 2008

yep you are right.

i will change it for flash 8 tomorrow.

Sorry for the mistake.

Dr!ver.

Reply to this comment
Vzar

24. Jun, 2008

ya you are the man!

Vzar’s last blog post..N-Gage Theme For Nokia N Series[N95 N96 N80 N81 N82 N76 N73]

Reply to this comment
ybx

26. Jun, 2008

It was looking great until I got to this part:

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

I don’t have “Alpha” listed on the properties. This is what I’m looking at: http://i61.photobucket.com/albums/h55/ybx/webpage10.jpg

Any help would be greatly appreciated.

Reply to this comment
haniefa

30. Jun, 2008

hi..
i’m new with flash.

i’m having problem at the earlier stage.

at keyframe 17 ,copy the frames and paste it at keyframe 22 23 24.

then change the alpha level for each frame.

My problem :
When i change alpha level at keyframe 17 the othr frames will have the same effect.

why?

please help me.
Thank you.

Reply to this comment
Dr!ver.

30. Jun, 2008

You have to select the square . Click on the little dot in the midle of your stage . Then you will have other properties.

You now see the properties that you can choose for the frames.

Dr!ver.

Reply to this comment
haniefa

30. Jun, 2008

problem solve

thank you.

Reply to this comment
Dr!ver.

30. Jun, 2008

Np , hope i glad i could help.

Dr!ver.

Reply to this comment
haniefa

01. Jul, 2008

1)
what are the difference between the ’sub_text’ layer at the first 3 layer and the new layer(sub_text) after invi_btn layer.?

2)
on (release) {

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

}

if i want to shange the url to

eg. (”http://www,nur_haniefa.com/main”,”_?”)

what should i write to replace “_self”

Thank you.

Reply to this comment
Dr!ver.

02. Jul, 2008

Maybe i look over it but i see only 1 subtext .

or you mean the layer and the movie clip.

And leave it to “_self”. Self means that it load the site in the same page.

if you want to load it in another page then replace it with this.

“_blank”

Dr!ver.

Reply to this comment
Dr!ver.

02. Jul, 2008

And the file for Flash8 should be Uploaded.

Dr!ver.

Reply to this comment
haniefa

03. Jul, 2008

thank you for ur explanation.

for my 1st question,
from ur instruction:

make 3 new layers
Name them text , mask and the third 1 name it subtext.

then
for the last part,

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.

btw,i’m finished doing this tutorial.

thanks again..

Reply to this comment
Dr!ver.

03. Jul, 2008

yep it should go to your sub_text layer.

Can we ss the out come ?

Dr!ver.

Reply to this comment
rajsh

14. Jul, 2008

hi..
i’m new with flash.

i’m having problem at the earlier stage.

plz give basic of flash tutions please help me.
Thank you.

Reply to this comment
Dr!ver.

16. Jul, 2008

What you mean Rajsh ?

Dr!ver.

Reply to this comment
Jack

26. Jul, 2008

Hi
I have flash 8 and when i set alpha on slide 17 i’m not sure how to set the percentage, could anybody explain?
Thanks…..

Reply to this comment
Dr!ver.

31. Jul, 2008

I think i explained it in the mail right ?

Dr!ver.

Reply to this comment
Flash Tutorial | Making a Splash Page in Adobe Flash | Lemlinh.com

06. Aug, 2008

[...] View tutorial and download support files [...]

Reply to this comment
jprodigy

12. Aug, 2008

it says file cannnot opn unexpected file format.. when i try to open the tut file with my flash 8

Reply to this comment
Chucky

16. Aug, 2008

Hey, I tried this tutorial and everything went well until the button. When I try to add the actionscript I get a message saying “Current selection can not have actions applied to it”? How do I fix this? Thanks in advance for any help.

Reply to this comment
Ray

30. Aug, 2008

help..
im on this part
“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 i dont what u mean by swap the symbol…err…i know its on the properties but its all on logo_move_mc now

Reply to this comment
Dr!ver.

01. Sep, 2008

make sure that you selected the movieclip when you want to add the code.

Dr!ver.

Reply to this comment
shameera

12. Sep, 2008

i was following your instructions till this part and came across a problem,please help me out!

“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. ”

i did exactly till the part pressing ctrl+F8 and creating a movie clip named dotline_mc
but once i created that i’m in a page like this

http://i217.photobucket.com/albums/cc209/prettylol8/flashdoc.jpg

how do i create tha dotted line part? i dont c it in the properties.

please help me out!!!!

Reply to this comment
Young Entrepreneur Miscellaneous Ramblings - June 24th 2008

17. Sep, 2008

[...] Making a Splash Page in Adobe Flash [...]

Reply to this comment
cracker

20. Sep, 2008

hi i want to know how to save when i did on 17 frame 19 alpha and try to do in 22 alpha 100 it made in all frames how to save in selected frame it?

Reply to this comment
kauka

20. Sep, 2008

hi i want to know how to save perameters in on selected frame? because when i do in 17 frame 19 alpha and i try to do in 22 alpha 100 it did in all frames 100 flame

Reply to this comment
Coach Matty

17. Nov, 2008

I made a couple of aesthetic changes that shouldn’t affect it; but, when I run it flash; ctrl+enter I get: Scene=Scene 1, layer=invi_btn, frame=53, Line 1 Mouse events are permitted only for button instances

Reply to this comment
35 Amazing Free Adobe Flash Tutorials to Start Building Full Flash Websites - aComment.net

18. Nov, 2008

[...] Making a Splash Page in Adobe Flash – “In this tutorial I will show you how you can make a simple but unique splash page in adobe [...]

Reply to this comment
dd

02. Dec, 2008

Instead of the button goto a specific URL how can I make it to go to my website index page? What is the code for that? Do i have to make it work with labels?

Reply to this comment
Bobby

11. Dec, 2008

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.???

Reply to this comment
Khaled

20. Jan, 2009

Thanks a lot for this nice tutorial.
I got some errors, when started work with logo. Especially
you did not write about (logo_gfx). but by using the source file, I got it.

Thanks a lot

Reply to this comment
Kakayla

05. Mar, 2009

Please, can you PM me and tell me few more thinks about this, I am really fan of your blog…gets solved properly asap.

Reply to this comment
Sean

17. Mar, 2009

what are the settings for the stage to start the project off – the beginning settings and the movie clip settings I can’t see – what are they?

Reply to this comment
wtf

04. Apr, 2009

well it’s all GREAT until you tell me to try and give action script to a fucking symbol/movie clip
how the hell do you expect me to know what to do with that screenshot of logo_gfx
you can’t just skip steps
if i follow your directions STEP BY STEP i end up trying to swap logo_move_mc with logo_move_mc
wtf
can you fix your mistakes cuz i don’t know what the fuck to do

Reply to this comment
flash animation

01. May, 2009

Great stuff. Nice to read some well written posts. A long way between them.

Reply to this comment