swfchan: Flash Website Tutorial.swf (info)

Text

LightHouse

Learn

Music On

Music Off

Importing to Flash

Creating Layout

Making Nav. Buttons

Pages

HTML

Final Product

Introduction.

HOME

In this tutorial i will go over how to make a flash
website. Things you need; PhotoShop or PhotoPaint, and
Flash Mx 2004.
I will cover how to make a layout in Photoshop then
take it apart then animate and program in Flash. Their
may be type-oh's in here, please dont mind them. I will
try to explain and use pictures to make this fun
and very easy to learn from. I hope this helps someone
interested in Flash websites. Please note that there are
different ways that you could make a website in Flash
probably even better then my method, but this is the
method I use.

Create Layout

Introduction

Back

Creating Layout

Open up Photoshop, im not going to go over how to
design a layout, im just going over what to do. When
you have a layout you like, (DONT FLATTEN) save it
as a .psd file. i got my layout, this is one is for my SoF2
clan site, Boreas Of Blood.
Click on it for a bigger view.

Now that you have a layout chosen, the first step I take
is to make all of the layers invisible by clicking on the
little eye icon. make it
so all of the layers are
invisible except for the
very first one, and a
couple on top of that,
then save it as a .jpg

Now make more of the top layers visible and save it
as a .jpg and you should have a collection like this
when you are done all of the layers.

Note- you should save them as layout1, layout2 etc.
so it is easier to find the order.
You may ask why are you doing this? Well one of
the reason I like Flash sites, is because it fun to look
at. All of this is for.....

Now for the importing into Flash, and animating the
intro. If you dont want an animated intro then just
skip this part. First open Flash, and go to
File>Import>Import To Library
choose all of the layout layers, or just one main one.
Now open your Library, go to
Window>Library
Now we shall start the Movie Clip for the Intro.

Importing in Flash

MovieClip: is a Symbol that can hold animation
,variables, actions (etc) think of it like another
timeline. We are going to be making a MovieClip
for the intro to this site, so in it will hold the
intro animation.
First you want drag the first layout layer into
your main stage(the white box in the middle)
then right click on the picture and go to
Convert To Symbol

Now do this;

Now double click on the MovieClip, and it will
bring you inside of it. Now convert it to a graphic
same as movieClip but click on the graphic. Now
do what this shows you.
click next to watch video.

If you didnt understand that, here is what I did,
after i coverted it into a graphic i changed the
alpha to 0, alpha is located in the properties of
the graphic. Then I right clicked on frame 10,
and went to Insert KeyFrame, then changed the
alpha to 100, then right clicked in the middle
frames, and went Motion Tween. Now you
should have a nice fading in layer part.

Do this for each layout part in its own layer,
and it should look like this;

Put
stop();
in the last frame of the animation, this will stop
it from looping and keep fading. There we have
the intro done, now on to buttons.

For the buttons, its pretty simple, just make a box
and convert it to a button, double click on it, and
you can change what happens when your mouse is
on it or press.
UP - how it is already
DOWN - when mouse presses on it
OVER - when mouse rolls over it
HIT - when mouse clicks it.

Nav. Buttons

The actionscript for the buttons is pretty easy,
on(release){
_root.gotoAndStop("whateverframe");
}
Change the "whateverframe" to what the frame
is called inwich you want that button to go to.
You use your creativity to make buttons nicer
looking. Now here is how to set up pages.

Pages

Making different pages is easy, all you have to do
is make one frame with your background, and
buttons all set up where you want them, now
just use the text tool, and start writting your
info. put a stop(); in each Page. this way it will
stop on that page. When you click on the frame
you have a page on, go to properties, and change
the <frame label> to "home". that will be your
homepage.

Now remember the button code? well change
the "whateverframe" to "home".
on(release){
_root.gotoAndStop("home");
}
there we have our button, just repeat this for
every new page, always remeber what you call
the frame!

HTML

Copy and paste the code into Wordpad. then
make it into a .html file be renaming it.

Click here for Code

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Your Site</title>
<style type="text/css">

</style></head>
<body bgcolor="#000000">



<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="766" height="760" id="4115" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="bob1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#00000" />
<embed src="bob1.swf" quality="high" bgcolor="#000000" width="766" height="760" name="4115" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>

Copy and paste this, sorry for the size.

change the bob1.swf to whatever
you called your website file.

ActionScript [AS1/AS2]

Frame 1
	_root.bigview._visible = false;

	stop();
Frame 2
	stop();
Frame 3
	stop();
Frame 4
	stop();
Frame 7
	stop();
Frame 8
	stop();
Frame 9
	stop();
Frame 10
	stop();
Frame 11
	stop();
Symbol 10 Button
on (release) {
	_root.play();
}
Symbol 11 MovieClip Frame 1
	_root.stop();
	PercentLoaded = (_root.getBytesLoaded() / _root.getBytesTotal()) * 100;
	if (PercentLoaded != 100) {
		setProperty(bar, _xscale , PercentLoaded);
	} else {
		gotoAndStop ("loaded");
	}
Symbol 11 MovieClip Frame 2
	gotoAndPlay (1);
Symbol 18 MovieClip Frame 12
	stop();
Symbol 19 Button
on (release) {
	_root.gotoAndStop(3);
}
Symbol 24 MovieClip Frame 10
	gotoAndPlay (1);
Symbol 26 Button
on (release) {
	_root.music.gotoAndStop(2);
}
Symbol 30 Button
on (release) {
	gotoAndStop (2);
}
Symbol 36 Button
on (release) {
	gotoAndStop (1);
}
Symbol 37 MovieClip Frame 1
	stop();
Symbol 37 MovieClip Frame 2
	stop();
	stopAllSounds();
Symbol 42 Button
on (release) {
	_root.gotoAndStop(5);
}
Symbol 43 Button
on (release) {
	_root.gotoAndStop(7);
}
Symbol 47 Button
on (release) {
	_root.gotoAndStop("nav");
}
Symbol 51 Button
on (release) {
	_root.gotoAndStop(9);
}
Symbol 55 Button
on (release) {
	_root.gotoAndStop(11);
}
Symbol 59 Button
on (release) {
	getURL ("http://www.geocities.com/boreasofblood/boreaodblood.html", "_blank");
}
Symbol 62 Button
on (release) {
	_root.gotoAndStop("intro");
}
Symbol 67 Button
on (release) {
	gotoAndStop (3);
}
Symbol 75 Button
on (release) {
	_root.gotoAndStop(5);
}
Symbol 79 Button
on (release) {
	this.gotoAndStop(2);
}
Symbol 82 Button
on (release) {
	_root.gotoAndStop(4);
}
Symbol 88 Button
on (release) {
	_root.gotoAndStop(6);
}
Symbol 89 Button
on (release) {
	this.gotoAndStop(3);
}
Symbol 90 Button
on (release) {
	this.gotoAndStop(1);
}
Symbol 94 Button
on (release) {
	this.gotoAndStop(4);
}
Symbol 95 Button
on (release) {
	this.gotoAndStop(2);
}
Symbol 101 Button
on (release) {
	this.gotoAndStop(5);
}
Symbol 102 Button
on (release) {
	this.gotoAndStop(3);
}
Symbol 106 Button
on (release) {
	_root.gotoAndStop(7);
}
Symbol 107 Button
on (release) {
	this.gotoAndStop(4);
}
Symbol 113 MovieClip Frame 40
	stop();
Symbol 114 MovieClip Frame 1
	stop();
Symbol 114 MovieClip Frame 2
	stop();
Symbol 114 MovieClip Frame 3
	stop();
Symbol 114 MovieClip Frame 4
	stop();
Symbol 114 MovieClip Frame 5
	stop();
Symbol 116 Button
on (release) {
	_root.gotoAndStop(5);
}
Symbol 117 Button
on (release) {
	_root.lay.gotoAndStop(5);
}
Symbol 125 Button
on (release) {
	this.gotoAndStop(6);
}
Symbol 138 MovieClip Frame 155
	stop();
Symbol 139 Button
on (release) {
	this.gotoAndStop(7);
}
Symbol 140 Button
on (release) {
	this.gotoAndStop(5);
}
Symbol 142 Button
on (release) {
	this.gotoAndStop(8);
}
Symbol 143 Button
on (release) {
	this.gotoAndStop(6);
}
Symbol 147 Button
on (release) {
	_root.gotoAndStop(8);
}
Symbol 148 Button
on (release) {
	this.gotoAndStop(7);
}
Symbol 150 MovieClip Frame 1
	stop();
Symbol 150 MovieClip Frame 2
	stop();
Symbol 150 MovieClip Frame 3
	stop();
Symbol 150 MovieClip Frame 4
	stop();
Symbol 150 MovieClip Frame 5
	stop();
Symbol 150 MovieClip Frame 6
	stop();
Symbol 150 MovieClip Frame 7
	stop();
Symbol 150 MovieClip Frame 8
	stop();
Symbol 153 Button
on (release) {
	_root.flash.gotoAndStop(8);
}
Symbol 154 Button
on (release) {
	_root.gotoAndStop(9);
}
Symbol 156 MovieClip Frame 1
	stop();
Symbol 156 MovieClip Frame 2
	stop();
Symbol 159 Button
on (release) {
	_root.nav.gotoAndStop(2);
}
Symbol 161 Button
on (release) {
	_root.gotoAndStop(10);
}
Symbol 162 MovieClip Frame 1
	stop();
Symbol 162 MovieClip Frame 2
	stop();
Symbol 167 Button
on (release) {
	_root.gotoAndStop(11);
}

Library Items

Symbol 1 Graphic	Used by:2
Symbol 2 MovieClip	Uses:1	Used by:11
Symbol 3 Graphic	Used by:11
Symbol 4 Bitmap	Used by:5
Symbol 5 Graphic	Uses:4	Used by:11
Symbol 6 Graphic	Used by:10
Symbol 7 Graphic	Used by:10
Symbol 8 Graphic	Used by:10
Symbol 9 Graphic	Used by:10
Symbol 10 Button	Uses:6 7 8 9	Used by:11
Symbol 11 MovieClip	Uses:2 3 5 10	Used by:Timeline
Symbol 12 Font	Used by:13 16 33 40 44 48 52 56 60 65 72 74 76 77 80 83 119 152 157 163
Symbol 13 Text	Uses:12	Used by:Timeline
Symbol 14 Bitmap	Used by:15
Symbol 15 Graphic	Uses:14	Used by:Timeline
Symbol 16 Text	Uses:12	Used by:18 19
Symbol 17 Graphic	Used by:19
Symbol 18 MovieClip	Uses:16	Used by:19
Symbol 19 Button	Uses:16 17 18	Used by:Timeline
Symbol 20 Graphic	Used by:24
Symbol 21 Graphic	Used by:24
Symbol 22 Graphic	Used by:24
Symbol 23 Graphic	Used by:24
Symbol 24 MovieClip	Uses:20 21 22 23	Used by:Timeline
Symbol 25 Graphic	Used by:26
Symbol 26 Button	Uses:25	Used by:Timeline
Symbol 27 Font	Used by:28 32
Symbol 28 Text	Uses:27	Used by:30
Symbol 29 Graphic	Used by:30 42
Symbol 30 Button	Uses:28 29	Used by:37
Symbol 31 Sound	Used by:37
Symbol 32 Text	Uses:27	Used by:36
Symbol 33 Text	Uses:12	Used by:35 36 43
Symbol 34 Graphic	Used by:36 43
Symbol 35 MovieClip	Uses:33	Used by:36 43
Symbol 36 Button	Uses:32 33 34 35	Used by:37
Symbol 37 MovieClip	Uses:30 31 36	Used by:Timeline
Symbol 38 Bitmap	Used by:39
Symbol 39 Graphic	Uses:38	Used by:Timeline
Symbol 40 Text	Uses:12	Used by:41 42
Symbol 41 MovieClip	Uses:40	Used by:42
Symbol 42 Button	Uses:40 29 41	Used by:Timeline
Symbol 43 Button	Uses:33 34 35	Used by:Timeline
Symbol 44 Text	Uses:12	Used by:46 47
Symbol 45 Graphic	Used by:47
Symbol 46 MovieClip	Uses:44	Used by:47
Symbol 47 Button	Uses:44 45 46	Used by:Timeline
Symbol 48 Text	Uses:12	Used by:50 51
Symbol 49 Graphic	Used by:51
Symbol 50 MovieClip	Uses:48	Used by:51
Symbol 51 Button	Uses:48 49 50	Used by:Timeline
Symbol 52 Text	Uses:12	Used by:54 55
Symbol 53 Graphic	Used by:55
Symbol 54 MovieClip	Uses:52	Used by:55
Symbol 55 Button	Uses:52 53 54	Used by:Timeline
Symbol 56 Text	Uses:12	Used by:58 59
Symbol 57 Graphic	Used by:59
Symbol 58 MovieClip	Uses:56	Used by:59
Symbol 59 Button	Uses:56 57 58	Used by:Timeline
Symbol 60 Text	Uses:12	Used by:62
Symbol 61 Graphic	Used by:62
Symbol 62 Button	Uses:60 61	Used by:Timeline
Symbol 63 Bitmap	Used by:64
Symbol 64 Graphic	Uses:63	Used by:Timeline
Symbol 65 Text	Uses:12	Used by:67
Symbol 66 Graphic	Used by:67
Symbol 67 Button	Uses:65 66	Used by:Timeline
Symbol 68 Bitmap	Used by:69
Symbol 69 Graphic	Uses:68	Used by:Timeline
Symbol 70 Font	Used by:71 84 91 96 105 118 120 121 124 141 144 149 151 155 158 160 164 165 168 169 170
Symbol 71 Text	Uses:70	Used by:Timeline
Symbol 72 Text	Uses:12	Used by:75
Symbol 73 Graphic	Used by:75
Symbol 74 Text	Uses:12	Used by:75
Symbol 75 Button	Uses:72 73 74	Used by:Timeline
Symbol 76 Text	Uses:12	Used by:Timeline
Symbol 77 Text	Uses:12	Used by:79 89 94 101 106 125 139 142 147 154 161
Symbol 78 Graphic	Used by:79 89 94 101 106 125 139 142 147 154 161
Symbol 79 Button	Uses:77 78	Used by:114 150 156 162
Symbol 80 Text	Uses:12	Used by:82 90 95 102 107 117 140 143 148 153 159
Symbol 81 Graphic	Used by:82 90 95 102 107 117 140 143 148 153 159
Symbol 82 Button	Uses:80 81	Used by:114
Symbol 83 Text	Uses:12	Used by:114
Symbol 84 Text	Uses:70	Used by:114
Symbol 85 Bitmap	Used by:86 104 112
Symbol 86 Graphic	Uses:85	Used by:87 88
Symbol 87 MovieClip	Uses:86	Used by:88
Symbol 88 Button	Uses:87 86	Used by:114
Symbol 89 Button	Uses:77 78	Used by:114 150
Symbol 90 Button	Uses:80 81	Used by:114 150 156 162
Symbol 91 Text	Uses:70	Used by:114
Symbol 92 Bitmap	Used by:93
Symbol 93 Graphic	Uses:92	Used by:114
Symbol 94 Button	Uses:77 78	Used by:114 150
Symbol 95 Button	Uses:80 81	Used by:114 150
Symbol 96 Text	Uses:70	Used by:114
Symbol 97 Bitmap	Used by:100 111
Symbol 98 Bitmap	Used by:100 110
Symbol 99 Bitmap	Used by:100 109
Symbol 100 Graphic	Uses:97 98 99	Used by:114
Symbol 101 Button	Uses:77 78	Used by:114 150
Symbol 102 Button	Uses:80 81	Used by:114 150
Symbol 103 Bitmap	Used by:104
Symbol 104 Graphic	Uses:85 103	Used by:114
Symbol 105 Text	Uses:70	Used by:114
Symbol 106 Button	Uses:77 78	Used by:114
Symbol 107 Button	Uses:80 81	Used by:114 150
Symbol 108 Graphic	Used by:113
Symbol 109 Graphic	Uses:99	Used by:113 138
Symbol 110 Graphic	Uses:98	Used by:113
Symbol 111 Graphic	Uses:97	Used by:113
Symbol 112 Graphic	Uses:85	Used by:113 115 116
Symbol 113 MovieClip	Uses:108 109 110 111 112	Used by:114
Symbol 114 MovieClip	Uses:79 82 83 84 88 89 90 91 93 94 95 96 100 101 102 104 105 106 107 113	Used by:Timeline
Symbol 115 MovieClip	Uses:112	Used by:116
Symbol 116 Button	Uses:115 112	Used by:Timeline
Symbol 117 Button	Uses:80 81	Used by:150
Symbol 118 Text	Uses:70	Used by:150
Symbol 119 Text	Uses:12	Used by:150
Symbol 120 Text	Uses:70	Used by:150
Symbol 121 Text	Uses:70	Used by:150
Symbol 122 Bitmap	Used by:123
Symbol 123 Graphic	Uses:122	Used by:150
Symbol 124 Text	Uses:70	Used by:150
Symbol 125 Button	Uses:77 78	Used by:150
Symbol 126 Bitmap	Used by:127
Symbol 127 Graphic	Uses:126	Used by:138
Symbol 128 Graphic	Used by:129
Symbol 129 MovieClip	Uses:128	Used by:138
Symbol 130 Bitmap	Used by:131
Symbol 131 Graphic	Uses:130	Used by:138
Symbol 132 Bitmap	Used by:133
Symbol 133 Graphic	Uses:132	Used by:138
Symbol 134 Bitmap	Used by:135
Symbol 135 Graphic	Uses:134	Used by:138
Symbol 136 Bitmap	Used by:137
Symbol 137 Graphic	Uses:136	Used by:138
Symbol 138 MovieClip	Uses:127 129 131 133 135 137 109	Used by:150
Symbol 139 Button	Uses:77 78	Used by:150
Symbol 140 Button	Uses:80 81	Used by:150
Symbol 141 Text	Uses:70	Used by:150
Symbol 142 Button	Uses:77 78	Used by:150
Symbol 143 Button	Uses:80 81	Used by:150
Symbol 144 Text	Uses:70	Used by:150
Symbol 145 Bitmap	Used by:146
Symbol 146 Graphic	Uses:145	Used by:150
Symbol 147 Button	Uses:77 78	Used by:150
Symbol 148 Button	Uses:80 81	Used by:150
Symbol 149 Text	Uses:70	Used by:150
Symbol 150 MovieClip	Uses:79 117 118 119 89 90 120 94 95 121 123 101 102 124 125 107 138 139 140 141 142 143 144 146 147 148 149	Used by:Timeline
Symbol 151 Text	Uses:70	Used by:156
Symbol 152 Text	Uses:12	Used by:156
Symbol 153 Button	Uses:80 81	Used by:156
Symbol 154 Button	Uses:77 78	Used by:156
Symbol 155 Text	Uses:70	Used by:156
Symbol 156 MovieClip	Uses:79 151 152 153 154 155 90	Used by:Timeline
Symbol 157 Text	Uses:12	Used by:162
Symbol 158 Text	Uses:70	Used by:162
Symbol 159 Button	Uses:80 81	Used by:162
Symbol 160 Text	Uses:70	Used by:162
Symbol 161 Button	Uses:77 78	Used by:162
Symbol 162 MovieClip	Uses:157 158 79 159 160 161 90	Used by:Timeline
Symbol 163 Text	Uses:12	Used by:Timeline
Symbol 164 Text	Uses:70	Used by:Timeline
Symbol 165 Text	Uses:70	Used by:167
Symbol 166 Graphic	Used by:167
Symbol 167 Button	Uses:165 166	Used by:Timeline
Symbol 168 EditableText	Uses:70	Used by:Timeline
Symbol 169 EditableText	Uses:70	Used by:Timeline
Symbol 170 Text	Uses:70	Used by:Timeline

Instance Names

"lay"	Frame 5	Symbol 114 MovieClip
"bigview"	Frame 6	Symbol 116 Button
"flash"	Frame 7	Symbol 150 MovieClip
"bar"	Symbol 11 MovieClip Frame 1	Symbol 2 MovieClip

Labels

"intro"	Frame 4
"layout"	Frame 5
"nav"	Frame 8
"loaded"	Symbol 11 MovieClip Frame 3