 |
||
Free Tutorials Send by
Email
Free Web Design Newsletter
Opportunities to Win Free
Prizes
Subscription to our RSS
Feed |
Learn How to Create a Flash Website
Posted on 18. Mar, 2008 by Michael 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.
85 Responses to “Learn How to Create a Flash Website”
Leave a Reply
-
Giveaway: 2 Sets of 500 Business Cards
-
Creating a Flash Portfolio Website
-
25 Examples Of Rebranding Logos From Old To New
-
30 Most Influential People In Web Design
-
30 Top Web Design Blogs To Read Daily
-
Dainis Graveris: that's one impressive list, but yeah, I would orde...
-
Michael Kozakewich: Okay, I'm wondering where Bowman is. #0? So amazin...
-
praveen: This list is ridiculous! How could you ever forge...
-
Sumeet Chawla: Great list but i think Chris Coyier should have be...
-
Aaron: But I strongly agree with the author on Collis as...
Loading ...
35 Amazing Free Adobe Flash Tutorials to Start Building Full Flash Websites - aComment.net
18. Nov, 2008
[...] 25- Learn How to Create a Flash Website [...]
Nick
22. Nov, 2008
Just change the settings to the first picture
Player: 8 Action script:2
Change it by clicking the settings button
Nick
22. Nov, 2008
Also, you can integrate XML into it so It can be easily edited.
Nick
kooks
23. Nov, 2008
i got it working but who do u out stuff in it EX. pic’s Vid’s etc
JT
27. Nov, 2008
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
30. Nov, 2008
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
16. Dec, 2008
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
15. Jan, 2009
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
28. May, 2009
i am working in CS4 and the button can’t have actions applied to it. what do i do?
gargi
01. Feb, 2009
hi the tutorial was disgusting .not well explained at all and full of spelling mistakes .not a single clean clear instruction .the exercise turned out to be a blunder
Rujan
15. Mar, 2009
coool, it works
Thanks Tj
Ben
18. Mar, 2009
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
15. Apr, 2009
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.
Actionscripter
20. Mar, 2009
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
27. Mar, 2009
[...] 50. Learn How to Create a Flash Website [...]
patrick 88
30. Mar, 2009
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
05. May, 2009
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.
MemBlog
30. Mar, 2009
Is there any way to get alerts when you post a new blog?
MemBlog’s last blog post..Charging for your blog
Free Business Website
09. Apr, 2009
Couldn’t be written any better. Reading this post reminds me of my old room mate! He always kept talking about this. I will forward this article to him. Pretty sure he will have a good read. Thanks for sharing!
Dorothy
14. Apr, 2009
I have a blog on a similar topic. Perhaps we can exchange info?
Micah
15. Apr, 2009
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
24. Apr, 2009
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
24. Apr, 2009
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
24. Apr, 2009
http://absoluteinfinity.hit.bg/portfolio.swf here you go my outcome
Affordable Web Hosting
29. Apr, 2009
This is very nice tutorial and i have learn so many thing from it
favable
03. May, 2009
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
12. May, 2009
thanks it’s best tutorial on site
Val
15. May, 2009
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
15. May, 2009
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
26. May, 2009
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
08. Jun, 2009
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
13. Jun, 2009
awesome!!
Stiv
Followed it, it worked, THANKS MIKE!
AP83
26. Jun, 2009
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
26. Jun, 2009
No worries, have read through again and sorted it.
Again, super tutorial. Thank you for taking the time to make it.
Obaid
26. Jun, 2009
So cool tutorial
Thanks