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 50 step tutorial, you can create a free website with Wix (I strongly suggest you check this out before continuing reading). Now let’s continue with the tutorial.
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 website with Wix. Create a super good looking, professional flash website without any knowledge of flash.
Ultimate Designer Toolkit: 60,000+ Premium Design Items, Only $49!
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.
Related Posts
Subscribe to RSS Feed
Create a Simple Flash Website Tutorial - WebStockBox (5 years ago)
[...] Link : Create a Simple Flash Website Tutorial [...]
web designings (5 years ago)
great job you have given us good tutorial it is simply supurb great work you clearly explained it
Microsoft Assistance (4 months ago)
I would like to know if there are more detailed tutorials, sort of like a step to step guide…
Anon (5 years ago)
flash websites are not a good idea for seo and get pretty annoying if you need to get to a certain part of the site fast. but they sure look nice.
anand1 (5 years ago)
I have been using CMS for my website building but after having this tutorial i might be using it for my Personal Webpage. Yes its not good for SEO but one can use it for Pesonal webpage design.
Tutorials Room (5 years ago)
Hi , good tutorial, it was chosen for the main page of http://www.tutorialsroom.com and flash tutorials. Please feel free to submit more of your good tutorials using this link: http://www.tutorialsroom.com/tutorials/submit_tutorials.html
Lawrence Huff (5 years ago)
I liked your tutorial. It is the best I have seen for introducing someone to flash website design. However, I had a couple of problems and would like to ask a question. Let me start by saying I am using Flash CS3. There were a couple of problems with your location designations. But, it was nothing that couldn’t be found and fixed. However, when I get to the end of the tutorial and you say to click on the button and press F9 to bring up the action script window my window simply says “Current selection cannot have actions applied to it”. Am I missing something? I have done this tutorial twice to see if I didn’t follow a step. All the steps are there. I just can’t get it to work. Please help.
Thanks
indianshadow@sbcglobal.net
mark (5 years ago)
thanks.
frahir (5 years ago)
Hi, very good tutorial indeed. it’s the first time that i use Flash and i have a problem with the end of the tutorial, exactly the same as describe by Lawrence : when i click on the blue square on top of the “home button” and i press F9, then the console says : “Current selection cannot have actions applied to it” ??? could you help me please ?
thanks a lot.
mark (5 years ago)
23. Make this square into a symbol and call it “buttons”, did you mean convert it into a symbol? what kind of symbol, a button, a movieclip or a graphic? am a bit confused, it is a great flash tutorial, though.
Joe (5 years ago)
I had the same problem,“Current selection cannot have actions applied to it” it has to do with the new 3.0 version of ActionScript. To fix the problem, just go to File > Publish Settings, select the Flash tab, and change the version of ActionScript back to AS2 or 1.
More info at: http://www.quip.net/blog/2007/flash/making-buttons-work-in-flash-cs3
Jay Matharu (5 years ago)
I went through and followed all the steps religiously, but the navigation isn’t working. When I test the movie a box comes up saying the following error message:
**Error** Scene=Scene 1, layer=Hit Area, frame=1:Line 3: Syntax error.
gotoAndStop(”home”);
**Error** Scene=Scene 1, layer=Hit Area, frame=1:Line 3: Syntax error.
gotoAndStop(”tuition”);
**Error** Scene=Scene 1, layer=Hit Area, frame=1:Line 3: Syntax error.
gotoAndStop(”media”);
**Error** Scene=Scene 1, layer=Hit Area, frame=1:Line 3: Syntax error.
gotoAndStop(”contact”);
**Error** Scene=Scene 1, layer=Hit Area, frame=1:Line 3: Syntax error.
gotoAndStop(”links”);
Total ActionScript Errors: 5 Reported Errors: 5
August Hafvenström (5 years ago)
Nice tutorial. Easy to read, easy to follow.
Keep up the good work!
Jonas (5 years ago)
If u have trouble with the last part check if you have action script 3.0. Because it wont work with that, I just changed to action script 2.0 and it worked like a charm. Thanks for the tutorial!
kyle smith (5 years ago)
at the end of my website making adventure. i have noticed allot of errors not are not on my behalf but, on the behalf of YOURS!!!!!!!!!!!. this project took me hours upon sleepless hours. i led myself to insomnia and starvation upon creating this flash site. i look forward to the next tutorial i hope it takes me half the time that this pathetic waste of yours and my time = )ily Kyle smith
Sebastian (4 years ago)
Not a bad tutorial, but grammar and punctuation are in serious need of cleanup. It was hard to go through the entire tutorail without reading some steps over and over, only because there was but a single coma in the entire paragraph.
Lu (4 years ago)
wonderful. but I can’t make it work, I tride to change to action script 2.0 as Jonas suggested but the buttons don’t work, somebody can help me?
Anuja (4 years ago)
Thanks. I finally got this from ur tutorial. U have explained very well.
SanDeepThi (4 years ago)
Good Tutorial really helpful for small website needs.
Thanks & Regards,
SanDeepThi.com
New Project Announced: Webdesigndev.com (4 years ago)
[...] website is packed with some of the most detailed tutorials on the internet such as How to create a flash website and Designing a Website In Photoshop. Producing this kind of content is very expensive but I have [...]
jyothi v kumar (4 years ago)
hai this is very nice
tnks ya…
SteveO (4 years ago)
i did all this and i get these errors
**Error** Scene=Scene 1, layer=buttonAreao, 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=buttonAreao, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”breed”);
**Error** Scene=Scene 1, layer=buttonAreao, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”studsnqueens”);
**Error** Scene=Scene 1, layer=buttonAreao, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”available”);
**Error** Scene=Scene 1, layer=buttonAreao, 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: 5 Reported Errors: 5
Ambalika (4 years ago)
Hello,
These tutorials are simple awesome! But, here, right now, I need a help, badly. I am a web designer.There is a requirement. I need to put up the years like 2007 – 2008 in a slot machine. And,whenever, I selecting a year like 2005 – 2006, the slot would change according to the requirement.
Is it possible?I think it is…
Kind Regards,
Ambalika Dey
siri (4 years ago)
its awesome and easy tut
thanks
bye
Kohana (4 years ago)
“**Error** Scene=Scene 1, layer=buttonAreao, 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”);”
That error is from copy&paste. Just go back to each button, press F9, and then redo the ” in all of the codes. You’ll see that the target names such as home, portfolio, etc., turn green once you replace the “‘s.
This tutorial was relatively hard to follow. I got lost a few times, but found my way back… somehow. Interesting try, but I think it should be cleaned up.
Paul Brown (4 years ago)
Good tutorial, let down by poor grammar and spelling, and dreadful use of English – professional content, amateur presentation.
Basant Sain (4 years ago)
Good tutorial, really helpful for small websites
Thanks & Regards
mohsin khan (4 years ago)
well great!!! i was just looking for such a tutorial to get started… great again…
Scott (4 years ago)
yeah i get this to??? am i doing somthing wrong??? “This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
SM (4 years ago)
Hi,
you have done great job,..easy & Good tutorial, really helpful for fresh designers for small websites,
I need some advanced flash site like, dynamic image loading, add content text dynamically, I am using flash 8 , how to creating please help me, i am searching this types tutorials,please publish dynamic flash site tutorials/tutorial url
Thanks & Regards
raj
virendra (4 years ago)
I am very very thankful to you, because i am from a very small city of india and there is no one teach flash like you, you tutorial is a gold for me i can’t express in words
THANKS ALOT
Cody (4 years ago)
IT doesn’t completely work but I did learn some from it. Good job except for the squished images.
kikkeli (4 years ago)
code dont work error error error error
Davey (4 years ago)
I did everything you did by every word. Although some parts were not clear.
I did everything and was very excited to see the final product. A box came up talking about errors. So i did what people have been told to do in these comments, like going into publish settings and changing it to 2 or 1 which i did, plus changing the quotation mark things to a different one you used and yes it made the writing green this time, thats all good, but the buttons just don’t work evern though i don’t get any error box’s popping up.
Anybody know what i could do to make it work?
Raged (4 years ago)
This worked perfectly first time.
It gave a great understanding of flash and after finishing it I found out lots of short cuts you missed.
you only need to put the frames in depending how many buttons you have,
when setting the script to stop.
you could easily just copy it in the AS window.
Also I never bothered with the Co-ords you gave.
again like people said, the sentences was hard to read sometimes.
apart from that great tutorial thanks a lot! =D
Nilosking (4 years ago)
Hi davey, try analyzing this one!
“This is the author’s original version”
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.
“This is actually correct although;”
instead of typing home, try typing 1 which is the keyframe pointing to home button
check this one:
on(press){
gotoAndStop(1);
}
…. and so on for the rest (portfolio, about, faq, contact)
5 10 15 20
in addition, you won’t be able to see the effect, unless you placed a text on each every transition of the black frame!.
if still can’t figure it out, try reading the basics of element masking for flash mx on the help file, this will help you alot! =)
leonel (4 years ago)
hai
i am leo
this tutorial useful in my thank’s a lot……….
pascalman (4 years ago)
Problem:
“Current selection cannot have actions applied to it”
Solution:
- select each blue rectangle at a time
- in Properties panel set a button name (where you read “”): btnHome for the 1st rectangle, btnPortfolio for the 2nd one, btnAbout (3rd), btnFaq (4th) and btnContact (5th)
- add a new layer and rename it: “Actions – Buttons”
- with nothing selected, go to frame 1 of this layer, press F9 and add this code:
import flash.events.MouseEvent;
btnHome.addEventListener(MouseEvent.CLICK, homeClick);
function homeClick(Event:MouseEvent):void {
gotoAndStop(“home”)
}
btnPortfolio.addEventListener(MouseEvent.CLICK, portfolioClick);
function portfolioClick(Event:MouseEvent):void {
gotoAndStop(“portfolio”);
}
btnAbout.addEventListener(MouseEvent.CLICK, aboutClick);
function aboutClick(Event:MouseEvent):void {
gotoAndStop(“about”);
}
btnFaq.addEventListener(MouseEvent.CLICK, faqClick);
function faqClick(Event:MouseEvent):void {
gotoAndStop(“faq”);
}
btnContact.addEventListener(MouseEvent.CLICK, contactClick);
function contactClick(Event:MouseEvent):void {
gotoAndStop(“contact”);
}
1databyte (4 years ago)
Hi,
this a good informative introduction into Flash web design, although towards the end you got a bit vague with your instruction, everything was still clear enough to get through the tutorial
cheer 1 databyte
Josh (4 years ago)
Paul Brown is an asshole. This tutorial was great. Yes there were some grammar complications but if you can read and speak english you’ll be fine. Apparently Paul Brown had some problems reading.
hasti (4 years ago)
I liked your tutorial. It is the best I have seen for introducing someone to flash website design. However, I had a couple of problems and would like to ask a question. Let me start by saying I am using Flash CS3. There were a couple of problems with your location designations. But, it was nothing that couldn’t be found and fixed. However, when I get to the end of the tutorial and you say to click on the button and press F9 to bring up the action script window my window simply says “Current selection cannot have actions applied to it”. Am I missing something? I have done this tutorial twice to see if I didn’t follow a step. All the steps are there. I just can’t get it to work. Please help.
Thanks
Josh (4 years ago)
When I try to test my movie when I’m all finished this is what it says,
“**Error** Scene=Scene 1, layer=buttons, frame=1:Line 1: Mouse events are permitted only for button instances
on(press){
Total ActionScript Errors: 1 Reported Errors: 1
Can anyone help me?
Josh (4 years ago)
Thanks for the help Nilosking!!
Kristine (4 years ago)
Nice, simple, quick to run through tutorial. BUT…I have a problem.
Not exactly the same as the others, but in the same area. I had the problem with changing from AS3.0 to AS2.0..fixed it. So I copypaste your code(Im lazy) into my actionscript window on the first blue square and PAUW my program shuts down. I dont even get the time to save or write something different. I’ve tried not being lazy and write the code myself. Same problem. It crashes the program.
zzic (4 years ago)
Many People are getting this error message:
——————————————-
**Error** Scene=Scene 1, layer=buttonAreao, 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=buttonAreao, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”breed”);
**Error** Scene=Scene 1, layer=buttonAreao, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”studsnqueens”);
**Error** Scene=Scene 1, layer=buttonAreao, frame=1:Line 3: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
gotoAndStop(”available”);
**Error** Scene=Scene 1, layer=buttonAreao, 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: 5 Reported Errors: 5
————————————
The problem is because of the quotation marks
change it to this instead:
gotoAndStop(‘home’)
NOT
gotoAndStop(”home”)
Change ” to ‘
Nilesh (4 years ago)
it’s nice to helpful for basic learning the website
D-Man (4 years ago)
Very nice tutorial totally amazing!!
subhashis mohapatra (4 years ago)
it’s a easiest way to make websites.
Sharon (4 years ago)
How do I get this Product to make this website
Ela (4 years ago)
Hi, first of all thank u very much for posting this tutorial. I am trying to do it too. But I have a problem with 19th step, when I import the picture on the stage it stays at the back of that rectangular, how come? Can u help me pls?
35 Amazing Free Adobe Flash Tutorials to Start Building Full Flash Websites - aComment.net (4 years ago)
[...] 25- Learn How to Create a Flash Website [...]