Flash Tutorial – How to Create a Flash Website
Posted on 18. Mar, 2008 by Web Design in Flash
Creating a Flash Website
1. 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.
158 Responses to “Flash Tutorial – How to Create a Flash Website”
Leave a Reply
Loading ...
Ceci
06. Nov, 2009
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
14. Apr, 2010
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
07. Nov, 2009
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
15. Nov, 2009
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
15. Nov, 2009
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
15. Jan, 2010
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
15. Jan, 2010
I’m NOW looking forward to expanding my use of Flash!
jeannie
19. Jan, 2010
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
26. Jan, 2010
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
28. Jan, 2010
@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…
Ace
28. Jan, 2010
This was a very simple tutorial, which was easy to follow and well explained. As for getting the script to work, grzyb is correct, the actionscript must be changed to 1.0.
Zlatko
29. Jan, 2010
its very simple to convert it in ActionScript 3.0 but it requiers more text to type! First we need to add an EventListener for the buttons and then create a new layer above all others where we will type our actionscript.
lets call the buttons btn1, btn2, btn3, btn4 …. thats the instance names.
the Code….
btn1.addEventListener(MouseEvent.CLICK, homePage);
function homePage(e:MouseEvent):void {
gotoAndStop(“home”);
}
btn2.addEventListener(MouseEvent.CLICK, portfolioPage);
function portfolioPage(e:MouseEvent):void {
gotoAndStop(“portfolio”);
}
btn3.addEventListener(MouseEvent.CLICK, aboutPage);
function aboutPage(e:MouseEvent):void {
gotoAndStop(“about”);
}
………… make it for all buttons! And in the end you will have a working ActionScript 3.0 flash site!
chandu
30. Jan, 2010
Thank you so much for ur simple and easy tutorial,it helps me a lote.am so happy with u r tutorial,
Name (required)
04. Feb, 2010
thank you for the excellent tutorial
sumi
04. Feb, 2010
this is very helpful thankyou for your service
CORY
07. Feb, 2010
WHEN I HIT CTRL+ENTER TO TEST THE MOVIE I GET THIS IN THE BOTTOM CORNER OF THE SCREEN…
**Error** Scene=Scene 1, layer=hitarea, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”home”);
**Error** Scene=Scene 1, layer=hitarea, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”service”);
**Error** Scene=Scene 1, layer=hitarea, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”faq”);
**Error** Scene=Scene 1, layer=hitarea, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”contact”);
Total ActionScript Errors: 4 Reported Errors: 4
Chris
08. Feb, 2010
Hi Cory,
Its a great tutorial but I’m getting the exact same thing – ive tried changing the quotation marks and the frame name turns green and the errors disappear – but it dosent link to anywhere..
did you manage to figure out the problem??
Cheers
Chris
DY-ProX
07. Feb, 2010
Yes the same to me too .. i changed it to Actionscript 1.0 but it’s the same the frame don’t change when we click on buttons
Rebisco
18. Feb, 2010
is this good for sites? isn’t it that flash load slower than ordinary designs?
ralma
21. Feb, 2010
thats very helpful thxx… but i wanna know after i finished designing the project im working on in flash how can i make it a proper website? like how can i transfer it or something?
Jennifer Campos
08. Mar, 2010
I JUST WANTED YOU TO KNOW THAT I AM VERY GRATEFUL TO YOU! YOU ARE SUCH A BLESSING TO ME! I will never be able to finish our groups project if it wasn’t because of your great tutorial ^_^ Thank you very much. I’ve seen other tutorials but the one that you posted was the only one I truly understood (though the english was kinda had me scratching my head a couple of times)still, I really really appreciate you tutorial.
Have a nice day ^_^
You’re the best. God Bless.
with regards to the errors occuring on the actionscipt, try to do this one:
on (release) {
_root.gotoAndStop(‘home’);
}
on (release) {
_root.gotoAndStop(‘luxury cars’);
}
on (release) {
_root.gotoAndStop(‘featured cars’);
}
on (release) {
_root.gotoAndStop(‘contact us’);
}
Hope this helps!
ramesh
10. Mar, 2010
Thank you so much for ur simple and easy tutorial,it helps me a lote.am so happy with u r tutorial,
kavitha
16. Mar, 2010
great tutorial for flash students. can u give this tutorial in video format so it will able to follow very well. u can send to my mail
thanks
kavitha
ndimos
19. Mar, 2010
The “Modify->Shape->Soften Fill Edges..” thing just doens’t work… The square doesn’t become transparent like in the example pic you have on the tutorial. It’s all black with transparent edges. What do you say? Any idea?
Manish Bansal
23. Mar, 2010
Its great but I am having one problem, Plz help me , i am not able to do 46th step (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.)
on pressing F6, one more blank dot is appearing instead of turning black
alice
30. Mar, 2010
Hi guys, I had the same problem as those with the wrong type of quotation marks, but here is the answer i found out;
The error your getting is most likely from when you copy and paste directly from the web page. When you copy and paste from a browser it sometimes uses smart quotes. Simply code into the ActionScript code and be sure all the quotes (”) are not smart quotes (just delete and retype using the quote marks).
This should solve the problem.
Thanks for this brilliant tutorial!!
kuze
03. Jun, 2010
yes indeed that was the problem…
GemPlus
11. Apr, 2010
Nice tutorial… after making this preactice site i noticed that as you navigate through the pages, you cant return to the home page. However this is a rather easy fix.
Step 1 on the top layer (layer 7 ) add one more keyframe (f6)
Step 2 apply the actionscript as stated before “gotoAndPlay(1);”
Step 3 go to layer 6 the text layer , add a keyframe and name it home
this allows the user to go back to the “home ” page without having to reload the website
Przemo
13. Apr, 2010
Hi,
I have got same problem as Chris, when I start movie (ctrl + enter) and press any button nothing happens, i changed to AS1 and still can’t navigate through the pages. pls help
Mutuelle santé
23. Apr, 2010
I found your blog by chance . but i have to say that it’s great flash tutorial. i’m not going i will be always checking for updates.I’m very interested in Flash and all its related subjects.
vinod
26. Apr, 2010
sorry to say this… I think there is something wrong in ur tutorial…
zztop
03. May, 2010
i completely agree. been stuck on 49 for a week! please HELP!!!
zephyr
04. May, 2010
yeah I had the same problem with the code, then realize that he wrote the code on the actual button and not the layer, so that tells me that he made this website using AS2 and not AS3
Skye
04. May, 2010
Nice tutorial. Only thing is once your off the home the buttons dont function. Solved this by copying the “hit instance” buttons to ALL the keyframes on layer 6, this made all buttons work on every page!
crashbangwollop
07. May, 2010
Hi guys… I’m hoping to create a flash website, but not sure how to go about it… I would like to have a photo as my homepage with the links to the other pages on the site (i.e. ‘news, media, contact’ etc) hidden in random objects in the photo, becoming visible only when the mouse moves over them…
Any tips please, progammes etc???
b n k
20. May, 2010
thanks for interesting tutorial.
scripts couldn’t run with Macromedia Flash MX 8.
kindly guide.
website builder
22. May, 2010
Great detailed Tutorial , i use Flash Cms to make animations.
varun
04. Jun, 2010
thanks a lot….
this is my first encounter with Flash
Madhu
05. Jun, 2010
thanks a lot it was a very nice experience
mike
11. Jun, 2010
Hello, maybe someone can help explain the function of the site to me. I am using AS3.0 and have everything working as it should, though I am slightly confused. The information box that we created (step 36) is that supposed to be there at all times? I would like to create a page where that box (flys) up only when one of the buttons is selected. Does anybody have any advice? Today is my first day playing with my new toy (cs4).
Thanks!
mike
11. Jun, 2010
Also, to the publisher. I ENDLESSLY Thank you!! Thank you for taking all of that time preparing the information for us beginners. Good things will come your way! It is a Terrific tutorial, and with extra help posted by Zlatko regarding the transition to as3.0 this tutorial was all-in-one. Cheers!
jai
30. Jun, 2010
Great tutorial …
Kamlesh Shrestha
30. Jun, 2010
This tutorial was very useful for me. i didn’t know whether to jump on to flash. i was confused of either remaining with css or move towards flash. This tutorial rally helped and now i am looking forward for using flash in my websites.
rasto
03. Jul, 2010
please help error
**Error** Scene=Scene 1, layer=Layer 7, frame=139:Line 1: Mouse events are permitted only for button instances
on(press)
Total ActionScript Errors: 1 Reported Errors: 1
tilpo
16. Jul, 2010
@rasta
possibly you have assigned the code to the wrong instance, most likely through a typo.
Can’t judge until seeing the entire code used, especially as i haven’t followed this tutorial.
Daniel Miguel
23. Jul, 2010
Sometimes flash is the only solution for some clients, remember this, some guys will want flash on their website so is good toalways know how to use it
site builder
27. Jul, 2010
flash is the web future – looks and feel much better then just a html site
Name (required)
02. Aug, 2010
thanq my dear……………..
great tut……..
Liz
11. Aug, 2010
I much prefer creating sites that are maybe not so flashy or pretty but offer users the ability to find what they need. Nice post though, very helpful.
John
24. Aug, 2010
That’s a good tutorial! I’ve heard that sites in flash was not good for search engines. The sites developed in HTML and CSS are much better. Is that true?
Thanks!
Doug
26. Aug, 2010
Is there an informative tutorial like this for creating a Flash CS4/AS3.0 website?
Abdul
30. Aug, 2010
am using Flash 8 and try follow ur instructing for Desiging a site using Flash but it Doesn,t workout then i start by opening New Flash Document but my Timeline wasn,t view whenever i click it and is like u jump some of the Instruction plz reply me Urgently