Home >> Flash Tutorials >> Making a Splash Page in Adobe Flash
Making a Splash Page in Adobe Flash

Making a Splash Page in Adobe Flash

Creating a Unique Splash Page In Adobe Flash

Preview the Splash Page.

Before I begin – for those of you who want an easy way out of this tutorial, you can create a free, professional website with Wix – I strongly suggest you check it out before going forward. Now back to the tutorial:

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 150x165px. 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.

By the way, if you felt like this tutorial was too much work or you can’t get it to work, you can create a free professional website with Wix.

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

CLICK HERE FOR THE SOURCE FILE.

Ultimate Designer Toolkit

About Iggy Ko

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

47 comments

  1. SV Creation

    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

  2. Rawpinions

    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

  3. Dr!ver.

    What do you mean Rawpinions .

    let me know.

    Dr!ver.

  4. Vzar

    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]

  5. Dr!ver.

    yep you are right.

    i will change it for flash 8 tomorrow.

    Sorry for the mistake.

    Dr!ver.

  6. Vzar

    ya you are the man!

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

  7. ybx

    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.

  8. haniefa

    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.

  9. Dr!ver.

    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.

  10. haniefa

    problem solve

    thank you.

  11. Dr!ver.

    Np , hope i glad i could help.

    Dr!ver.

  12. haniefa

    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.

  13. Dr!ver.

    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.

  14. Dr!ver.

    And the file for Flash8 should be Uploaded.

    Dr!ver.

  15. haniefa

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

  16. Dr!ver.

    yep it should go to your sub_text layer.

    Can we ss the out come ?

    Dr!ver.

  17. rajsh

    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.

  18. Dr!ver.

    What you mean Rajsh ?

    Dr!ver.

  19. Jack

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

  20. Dr!ver.

    I think i explained it in the mail right ?

    Dr!ver.

  21. jprodigy

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

  22. Chucky

    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.

  23. Ray

    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

  24. Dr!ver.

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

    Dr!ver.

  25. shameera

    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

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

    please help me out!!!!

  26. cracker

    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?

  27. kauka

    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

  28. Coach Matty

    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

  29. dd

    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?

  30. Bobby

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

  31. Khaled

    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

  32. Kakayla

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

  33. Sean

    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?

  34. wtf

    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

  35. flash animation

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

  36. Miker

    U didnt say anything about the size of the big rectangule at the beggining.. and for me didnt worked at all— next time, but good try

    Thanks

  37. Sandeep

    I am new to flash. I don’t know where to start the flash. Actually I need flash to give a live look for my sites. So could you suggest me where to start.

  38. Jules

    Great tutorial. Thanks a lot. You guys really rock.

  39. Pamela

    I loved this tutorial. The only problem I seem to be having, is that when I publish, it only publishes the Flash file, not the HTML file, the Flash sort of freezes. Any help here please?

  40. Anlael

    Muchas gracias, he aprendido algo nuevo.

  41. wisconsin union theater schedule

    Another a very good writeup by the author hope to read more very soon.

  42. Stephen

    Hi I was wondering if it is possible for you to explain how to create a flash banner, one that might start from let to right containing text and updates. Something pretty much like you would find on Sky News at the bottom of the screen.?

  43. Jean

    Apprecaited this!

  1. Pingback: Tutorial | Making a Splash Page in Adobe Flash « Flash Enabled Blog

  2. Pingback: Flash Tutorial | Making a Splash Page in Adobe Flash | Lemlinh.com

  3. Pingback: Young Entrepreneur Miscellaneous Ramblings - June 24th 2008

  4. Pingback: 35 Amazing Free Adobe Flash Tutorials to Start Building Full Flash Websites - aComment.net

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Making a Splash Page in Adobe Flash