Flash Website Tutorial – How to Create a Flash Website
Creating a Flash Website
1. Before I begin – for those of you who want an easy way out of this tutorial, you can create a free flash website with Wix that will look like a very professional website. Now for those who are still interested in going through with the tutorial, I will continue. Open flash click new flash document.
2. Open the page properties if its not already opened which it should be Window/Properties/Properties
3. Change the size of the canvas to 800, 600.
4. Click on the background button and change it to #333333
5. After you have done this click the square tool
6. The color of the square should be white so click on the paint bucket tool and choose the color white. the stroke should also be off.. this is what it looks like. the stroke tool is right intop of the paint bucket.
7.Drag and make a square any size we would change that manually in a moment.
8. now change the width, height, x, and y positioning( change the width to 650, the height to 469.2, the x positioning to 398.1, and the y positioning to 299.3.) to change this dimmensions is all in the page properties. you have to click on the square and with it selected you can start making this changes.
9. with the square still selected now make it into a symbol to do this press (F8) a screen will come up what will ask you to name it. Name it “Background Symbol”. make sure the movie clip button is clicked.
10. make a new layer to do tis click on the insert layer button.
11. Select the new layer and click on the square tool again and make another square with the stroke off and the color instead of white make it black. This time with this dimensions.( width: 632.4, height: 450.4, x positioning: 81.6, and y positioning:73.3)
12. Make the new square into a symbol by pressing (F8) and name it masked symbol.
13. after you have made it into a symbol double click into the square this will take you inside the symbol and a new time line. this is just like the time line you were in but now you are inside of a symbol. make a new layer just like you did it before by clickin on the insert layer button. all the art work is in the bottom layer as of right now you can tell because of the little black dot under and on the top layer there is a white dot. the white dot means there is no art work on this layer.
14. Now clck and hold down on “Layer 1″ and with it still clicked drag it intop of “Layer 2″ . remember that all this is happening inside that symbol we made called “masked symbol”.
15. the picture on top shows what it should look like.
16. Right click on “Layer 1″ and then select “Mask”
17. when you do this both layers are goint to be locked you can tell because now the have a little lock next to them. click on the bottom lock to take it off.
18. Select “Layer 2″ find an image you like and now we are going to place in there. the way you do this is you go File/Import/Import to stage. then a search window is goign to come up and you find where your picture is and double click and it will be placed on the stage.
19. Now lock that layer back up by clicking where the lock was. and you should have something that looks kind of like this.
20. Now go tot the main time line. if you remember we were working inside a symbol so now get out of the symbol and go to the main timeline. a simple way to do this i to click somewhere were there is no artwork outside of the canvas, in the grey area.
21. Now lets make some buttons.Start by making a new layer and drag it all the way down so it becomes the bottom layer.
22. Make a square with the square tool.(background color #666666, width 130, height 50, positioning 137.2, y positioning 553.4).
23. Make this square into a symbol and call it “buttons”
24. select the square and copy and paste in the same place. To do this while with the square selected press (Ctrl + C) this will copy it and the press (Ctrl + Shift + V) and this will copy it in the same place now with it still selct it change the x positioning ( x positioning 269.9 )
25. Follow step 24 three more times but each time with a diffrent x positioning. (x positioning 398.8), (x positioning 529.6), (x positioning 660.5) it should look something like this.
26. Add some text to the buttons click on the text tool. is the one witht the letter “A” right intop of the square tool.
27. change the text color just like if you were changing the background color on a square. After click intop of one of the buttons and type “Home” , then click intop of the second button and type “portfolio”, on the third button type ” About” on the fourth type “FAQ” and on the last button type “ontact”
29. Make a new layer intop of the buttons layer to do this select the buttons layer and then click insert layer and it will put a layer intop of it.
30. here we are going to to create a hit areao for the buttons so you can actually click on them. click on the square tool again and create a square with the color white make this square about the same size of the buttons
31. make this square into a symbol but this time instead of making it a movie clip click on the button selection.
32. double click inside this symbol and it will look a little diffrent than a movie clip symbol. i tsays “Up”, “Over”, “Down”, and “Hit”.
33. there is a littel black dot under the text “Up” right click it and dont leg go and just drag it to where is says hit and now the little black dot should be under the text that says “Hit”
34. Go back to the main timeline. and the box should look blue
35. copy and paste it 4 times and drag each one under on button until all of them have one.
36. Now create a layer at the very top click on the square tool and take the stroke off and the bacgound color black have this settings (width: 304.8, height: 429.1, x positioning: 551.5, and y positioning: 297.0)
36. Now select the square and do the following go to the top menu and click on Modify/Shape/Soften fill edges
37. a new screen is goingt come up which si going to ask you “distance” , and “number of steps in both of this put 20 and make sure expand is clicked.
38. The next step is important so pay close attention. if you look where all the layers are to the right there are a bunch of numbers what you need to do is on the number 30 at the top click and drag down to select all the layers and the right click and click insert frame.
39. Create two more layers at the very top.
40. on the very top on the teh time line whre the number 5 is press it dont drag this time and press (F6) do that a the number 10,15, and 20
41. now on the little sircle on the number one frame select it and press (F9) this will bring up the actionscript window. here type the following “stop();”
42.as you can tell now intop of that littel circle there is a letter “a” this means that there is actionscrip on that frame. now do the same on layer 5,10,15, and 20.
43. Ok now press (F6) again on the layers5,10,15, and 20 but this time on the layer right under.
44. we are going to do something a little diffrent this time we are going to name the little sircles instead of inserting actionscript. do this click on the first frame on the circle with nothing on it and then go to the bottom left corner and there is something that says frame there enter the following “home”.
45. Now name all the other little circles this shouuld be the names ( portfolio, about, faq, and contact).
46. ok now on the layer under what you need to do is to Press (F6) also on frames 5,10,15,and 20. after this you will have a litte black dot on each one of those.
47. on the frist frame where the black square was type whatever you want
48. Now type something diffrently on frames 5,10,15 and 20.
49. after you have typed everything you wanted on the diffrent squares now its time to make it all work. what you need to do is to click on the blue square ontop of the “home button” dont double click it just select it. afte you have it selected press (F9) this will bring up the the actionscript window type the following
on(press){
gotoAndStop(“home”);
}
this will make it that when you click on that button it will go to the frame that you named home. follow the same steps on every blue box but where the parentises are intead of having home type in the appropiate name. such as( portfolio, about, faq, and contact.
50. Now you have finished this simple but very nice looking flash site. save your work. and to see it at work press (Ctrl + Enter) to see the swf. hope you enjoyed this tutorial.
51. Alternatively, if you are extremely frustrated with flash and want to save yourself some time, you can create a free flash website with Wix. Create a super good looking, professional flash website without any knowledge of flash.
READY TO TAKE WEB DESIGN SERIOUSLY?
Today, I am giving away Web Design Riches, the ultimate guide on how to run a profitable web design business. Enter your name and email below to get instant access.
kooks (3 years ago)
i got it working but who do u out stuff in it EX. pic’s Vid’s etc
JT (3 years ago)
Pascalman got it right. Nice work. Once you get all the way through the tute and get to the end, you get the message: “Current selection cannot have actions applied to it”
I’m not sure how others didn’t get this error. I also followed the tute religiously and got the error.
Nice tutorial tho. Don’t want to discredit the good work.
Tj (3 years ago)
Would just like to say thanks for the tutorial, it shelped me understand how to use flash 8
Yes if you copy everything it should work .. but it dont xD
But all you have to do is when you are putting in the skript at the end ( number 48 )
on(press){
gotoAndStop(”home”);
}
Change ” to ‘ and it will work
E.g. (‘home’)
Victor Vizcaino (3 years ago)
10X a lot dude! i hade a lil problem with the action script but i was able to figured it out by reading the comments. MY PAGE IS WORKING, now i think im ready to build my business website.
Fadil Khan (3 years ago)
And look at Step 49…
It says:
49. after you have typed everything you wanted on the diffrent squares now its time to make it all work. what you need to do is to click on the blue square ontop of the “home button” dont double click it just select it. afte you have it selected press (F9) this will bring up the the actionscript window type the following…..
I do that and it tells me that the Current selection cannot have actions applied to it.
What should i do?
jenny (2 years ago)
i am working in CS4 and the button can’t have actions applied to it. what do i do?
Rujan (2 years ago)
coool, it works
Thanks Tj
Ben (2 years ago)
Mouse events are permitted only for button instances
on(press){
gotoAndStop(“pagename”);
}
This is my error. I’m working in CS4. I Tried everyones advice and nothing worked. i followed everything on the page but can’t get it to work. I tried it single and double quotes.
Micah (2 years ago)
The left quotation mark is backwards in the original tutorial. I had to change it to a normal left quote and that worked for me.
“pagename”
Maybe that will help.
Ash (2 years ago)
@JT, Tj, and Ben:
You are getting that message because you don’t have the button selected. Sometimes if you have the button’s layer selected it looks like you have selected the button, but you have actually selected the frame in that layer.
Another way to confirm that you have the correct object selected is to check your “Current Selection” in the Actions panel, which is at the top of the bottom-right pane of the Actions Panel. Hope that helps!
Actionscripter (2 years ago)
The title of the tutorial should be “Learn How to Create a Flash Website in Flash 8, Actionscript 2.0″. Anyway, a hint to distinguish Actionscript 2.0 from Actionscript 3.0:
When you see “on(release){” or “button-name.onRelease = function() {“, this belongs to Actionscript 2.0, while “button-name.addEventListener(MouseEvent.CLICK, function-name);” belongs to Actionscript 3.0.
Top 90 Free Flash Tutorial (2 years ago)
[...] 50. Learn How to Create a Flash Website [...]
patrick 88 (2 years ago)
awesome, thank you very much. I have two more questions:
1.how do I get the transparancy of the big square with the text on it like you have?
2. when I press ctrl + enter, it flips through all the different buttons with their respective text squares until I hit one of the buttons. only then does the behaviour work like it should. how do I stop the flipping through at the start?
would be great if you could help me out
noah 55 (2 years ago)
I have the same problem as patrick 88 on 30.mar,2009 ! Would be great if you could fwd the answer to me as well.
Dorothy (2 years ago)
I have a blog on a similar topic. Perhaps we can exchange info?
Micah (2 years ago)
I loved the tut man, now I would like to see another tut describing how to ad transition effects to each page, something simple like the page name i.e “portfolio” comes flying in when you change to that page.
Anyone know of a good tutorial on this…or would like to do one?
Thanks.
jori (2 years ago)
hey I put the “stop();” code in the top layer and in the buttons layer I put the code
“on(press){
gotoAndStop(”home”);
}”
but it’s not working ? When I click on the other buttons it won’t go to that page ? but if I remove the stop(); code it keeps on playing ? i do work with player: 8 and Actionscript: 2.0 ?
martin (2 years ago)
First time i got i few things wrong second worked like a charm
ps : i 2 am using cs4 and thats not your prob mate
martin (2 years ago)
http://absoluteinfinity.hit.bg/portfolio.swf here you go my outcome
Affordable Web Hosting (2 years ago)
This is very nice tutorial and i have learn so many thing from it
favable (2 years ago)
Wonderful tutorial!! I found it a couple of days ago and bookmarked it. Today, when I started working on my site and got stuck, I came here and went through the steps and it came out wonderfully. Did have a bit of trouble with the Actionscript until I read Tj’s post about changing the quotation marks to apostrophes.
Used: Flash MX Pro, Actionscript 2.0
dika (2 years ago)
thanks it’s best tutorial on site
Val (2 years ago)
I’m sorry, but where comes Layer 5 suddenly from?
I don’t know, I don’t have anything to put on it!?
Maby I did something wrong…?
But thank you much for the tutorial, it really works
nastradamus (2 years ago)
nice tutorial but too complex after step 38 because layers are not named here i am having a terrible mix up would aappreciate if any1 cud help me out to identify wot each layer is for
elless (2 years ago)
When you create the second layer (black box) and save as a symbol, you enter the symbol to create another layer (in the symbol) whereby you add an image. Can anyone tell me why I cant see the image? Its there but the black box is on front of it.Ive tried rearranging one baheinf the other but it doesnt work.Please help
Angelic (2 years ago)
I am freaking stuck =(
48 onwards..
they say actions not allowed.
after meddling with it, i managed to putin the code but then it doesnt work even after i change it to ‘ instead ”
For some kind advice please.
Stiv (2 years ago)
awesome!!
Stiv
Followed it, it worked, THANKS MIKE!
AP83 (2 years ago)
Hey, just wondered if anyone might know why the five boxes at the bottom disappear when I click on four of the boxes (portfolio, about, faq, contact – it’s fine when I click home.)
It’s just a wee problem, and so obviously something I’ve done. This is a great tutorial and I appreciate it a lot
AP83 (2 years ago)
No worries, have read through again and sorted it.
Again, super tutorial. Thank you for taking the time to make it.
Obaid (2 years ago)
So cool tutorial
Thanks
jim (2 years ago)
some things arent explained aswell as what they shuld be !!
Bi (2 years ago)
I have been scared of flash sites for so long. The instructions helped me create my first site. Thanks
Jaweed hussain (2 years ago)
you have made it look so easy and simple. Thanks
jon (2 years ago)
After step 26, my text isn’t aligned with the picture why is that? Also i don’t see the black frame as shown any more like step 26 shows it. Can anyone please help?
tats (2 years ago)
does this thing works with flash CS3?
Dee (2 years ago)
Thanks. I’d been a bit stuck there. Some tutorials didn’t explain quite as clear i guess.
MT (2 years ago)
I think, who have problem with Action Script, it is because they just copy-paste codes. because of cut and paste, wrong ascii code of double quotation mark (“) may be copied. Manually retype double or single quotation marks
Santhoshsiva (2 years ago)
Really i say thanks to this site ,bcoz i didn’t flash
right now i confident myself and work within on the flash
Once Again!
Thankyou to all.
MRAP (2 years ago)
This tut is retarded. Couldn’t you have at least spell-checked this POS?
Steps 47 & 48 are missing some key instructions. Are we supposed to just guess at what your little brain actually meant at the time you wrote this?
jota (2 years ago)
I done everything you’ve said, but I don’t know how to publish it, PLZ HELP!!
and by the way, I think he explained most things well, and despite some grammar errors, there are not many problens
Henry (2 years ago)
Great tut! Very Helpful and for that I thank you
rowan (2 years ago)
hmm.. lots of ppl complaining that it dsnt work…
use AS2.0 and it all will, else use different techniques…
also there should be single quotes not double quotes on the AS code.
nice simple tutorial!
Jere (2 years ago)
GREAT tutorial but I have one problem when trying to follow this step by step. At step 37 I must not be doing something right because my black square isnt as transparent as shown here. How can I fix this? I tried to change the settings from 20 to other numbers but that didnt really work well.
Thanks for any help that you can offer.
Jere
Johanna (2 years ago)
Hey guys, I don’t know if it is still interesting for you, but as many of you had the problem that the main menu didn’t move up when you clicked on one of the buttons, I thought to post this message anyway. I had the same problem and it was driving me nuts, but then I realised that there was one curled brace in the wrong position. So the part where the goHome and leaveHome functions are described has to look like this:
//Don’t do anything if we are already on the requested page.
if (currentFrame != frmGoto) {
//Get and remember the Home page’s frame number.
var frmHome:Number = this.getFrame(“home_frm”);
//If our requested page is the Home page, the flying menu
//needs to go home.
if (frmGoto == frmHome) {
mainMenue_mc.goHome();
}
//Else, if we are on the Home page and are leaving, then
//leave home.
else if (currentFrame == frmHome) {
mainMenue_mc.leaveHome();
}
//Go to the requested page.
gotoAndPlay(frmGoto);
}
}
And NOT like this:
//Don’t do anything if we are already on the requested page.
if (currentFrame != frmGoto) {
//Get and remember the Home page’s frame number.
var frmHome:Number = this.getFrame(“home_frm”);
//If our requested page is the Home page, the flying menu
//needs to go home.
if (frmGoto == frmHome) {
mainMenue_mc.goHome();
}
//Else, if we are on the Home page and are leaving, then
//leave home.
}
else if (currentFrame == frmHome) {
mainMenue_mc.leaveHome();
}
//Go to the requested page.
gotoAndPlay(frmGoto);
}
I hope that helps.
Cheers,
Jo
Alex (2 years ago)
Hey, i need help.
As soon as i start it, when i press Ctrl+Enter – all buttons disappear, although hit area works . WHy do buttons disappear? Anyone? Thanks!
thekhiladi (2 years ago)
every thing is allright but at the end the last script
on(press){
gotoAndStop(“home”);
}
show an error, now what shoud i do………………………………….tell me
M.Raza (2 years ago)
Can You Please Tell me about Shortcut Commands for Action Script 2.0
Neil (2 years ago)
Hello Michael/Andy are you the one who made the design of this website? Thanks!
Andy (2 years ago)
We hired a designer to design it in Photoshop, and then I coded it up.
Ceci (2 years ago)
Great tutorial! Im with action script 3.0, im stuck in point 49…..
the script doesnt work in any of the comments from all of you behind…. or keeps rolling over all the texts from the frames, or get stuck in the text of “home”…
one way or another, it doesnt works while i click on the button “home”…
please assistance….
Cheers!
Peter von Adamovich (1 year ago)
Hello Ceci instead use “blabla“ , use “blabla”, in other words check the quotes.
it will work and you dont get error. my keyboard here type qwerty i use :shift + ‘
Bye !!
Khadijah Celestine (2 years ago)
VERY INFORMATIVE AND EASY TO FOLLOW!!!! YOU JUST MADE MY LIFE LOTS MORE FUN!!! WOOO HOOO!!!! I HAD FLASH SITTING HERE FOR YEARS AND HERE I WAS KILLING MYSELF WITH HTML AND CSS. THANKS SOOOOO MUCH!!!
p.s. yes website is blank for now because i dont have one… but i will soon
grzyb (2 years ago)
It’s rather difficult to go thru this “english” without punctuation marks, but OK – it’s good tutorial. But remember – it works only with action script 1.0
grzyb (2 years ago)
so if you are working on flash cs3 (or above, I presume) you have to change settings of your document. When nothing selected go to properties tab (on the bottom of screen) and hit [Settings]. A window will open – there you’ll have to change [ActionScript version] for 1.0
By the way – maybe there is some simple way of converting, upgrading this tutorial into actionscript 3.0? We have to evolve
Christy (2 years ago)
Great tutorial. I have been afraid of approaching Flash web design for so long. I had no idea where to even start, this tutorial was a perfect introduction. I’m now looking forward to expanding my use of Flash!
Christy (2 years ago)
I’m NOW looking forward to expanding my use of Flash!
jeannie (2 years ago)
This is a great tutorial! Thank you so much for the post!
I have one problem. It takes a very long time for the website to load. What should I do to make the website load faster?
jayant (2 years ago)
hi…………………..i wanna build a website……..can u tell me the best and easiest way to build it????not by html or flash…….
dave stevens (2 years ago)
@jayant: this is a Flash tutorial. What sort of answer do you think you’re going to get? Stop. Take yourself to one side for 5 minutes, and think what it is you really wanted to ask…