47

Making a Splash Page in Adobe Flash

splashpageflash
Share!

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.

Get Free Email Updates!

Sign up now and receive an email when we publish new content.

We will never give away, trade or sell your email address. You can unsubscribe at any time.

About the Author

Iggy Ko

Facebook Twitter Google+

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

Iggy KoMaking a Splash Page in Adobe Flash

Comments 47

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

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

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

  4. Dr!ver.

    yep you are right.

    i will change it for flash 8 tomorrow.

    Sorry for the mistake.

    Dr!ver.

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

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

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

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

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

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

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

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

  13. jprodigy

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  28. flash animation

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

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

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

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

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

Leave a Reply

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