Flash Creating A Simple Website With Flash

Blackveiled

Formerly, Ban-Lord
Creating A Simple Website​
With Flash!​


(Mini Example: http://banlord.110mb.com (This is my experimental flash website, this is what I'm going to show you how to make, but yours may look better. I'm not good with graphics.)
(Note: Sorry for poor quality in the pictures, Paint wont save stuff right, so i'm using .GIF for now.)
Recommended Skill: At least some knowledge creating graphics and layer setups with Flash.

INTRODUCTION
Ever want to make a website with flash that has those neat little looks and catchy animations? This won't teach you how to make the neat graphics with flash, but it can help you get the scripting correct.


SETTING UP THE WEBSITE
1. Goto File > New > Flash Document
2. Now goto File > Publish Settings then change the .swf file to: myWebsite.swf, and anything else.



3. Now goto Modify > Document... Then change the WidthxHeight setups.

I'm going to choose 400x400.
OPTIONAL: You can also choose a background color.
SUGGESTED: It is suggested to change the set FPS to 30-50 also.


4. Create a new Layer and name it ActionScript


CREATING THE GRAPHICS
1. User-friendly websites, often have boxed up text boxes and such. So, create a banner, put your website name on it.
2. Now goto Window > Common Libraries > Buttons, Then you will get a list of folders, use the button called Button Bar > bar <color>.

NAVIGATION
1. Some websites, you notice have their navigation categorized and such. Well heres how you do it.
2. Name the button, Navigation.
3. Change the properties of the button from, Button to Movie Clip.
4. Now, create a box, with two arrows pointing down, .. Convert to Symbol > Button
5. Now goto the Navigation Movie Clip, and add a layer called ActionScript

6. Now add the following code to the first frame:
Code:
[COLOR="Blue"]stop[/COLOR]();
7. Now add a new Keyframe to both the ActionScript frame and frame with the clip. Now place the button you created on the first frame, and then place it on the next frame.
8. Now create a new button, same type as your movie clip, and then place it on the second keyframe of your Graphic.
9. Now press the button with the arrows on it, or whatever you chose, and add the following script:

Code:
[COLOR="blue"]on[/COLOR]([COLOR="blue"]rollOver[/COLOR]) {
		[COLOR="blue"]_root[/COLOR].<Instance Name>.[COLOR="blue"]gotoAndStop[/COLOR](2);
}
[COLOR="blue"]on[/COLOR]([COLOR="blue"]rollOut[/COLOR]) {
		[COLOR="Blue"]_root[/COLOR].<Instance Name>.[COLOR="blue"]gotoAndStop[/COLOR](1);
}
Tip: Instance names are the names that you place on the object on the main pages. Click the movie clip, look at the bottom left of the Properties panel, and look for the text box that says <Instance Name> in it. Also take note, if the instance name isn't set correctly, the script WILL NOT work.


10. Now on place that same script, on the same button with the arrows on the second keyframe.
11. Now, on the button that will come up on the next keyframe, place this script on it.

Code:
[COLOR="Blue"]on[/COLOR]([COLOR="blue"]release[/COLOR]) {
		[COLOR="blue"]getURL[/COLOR]([COLOR="SeaGreen"]"http://"[/color],[color="SeaGreen"]"_blank"[/color])
}
[COLOR="blue"]on[/COLOR]([COLOR="blue"]rollOver[/COLOR]) {
		[COLOR="blue"]_root[/COLOR].<Instance Name>.[COLOR="blue"]gotoAndStop[/COLOR](2);
}
[COLOR="blue"]on[/COLOR]([COLOR="blue"]rollOut[/COLOR]) {
		[COLOR="blue"]_root[/COLOR].<Instance Name>.[COLOR="blue"]gotoAndStop[/COLOR](1);
}
This code below, will switch the frames you want to move to.
Code:
[COLOR="Blue"]on[/COLOR]([COLOR="blue"]release[/COLOR]) {
		[COLOR="blue"]_root[/COLOR].[COLOR="blue"]gotoAndStop[/COLOR](24);
}
	[COLOR="blue"]on[/COLOR]([COLOR="blue"]rollOver[/COLOR]) {
		[COLOR="blue"]_root[/COLOR].<Instance Name>.[COLOR="blue"][COLOR="blue"]gotoAndStop[/COLOR][/COLOR](3);
}
[COLOR="blue"]on[/COLOR]([COLOR="blue"]rollOut[/COLOR]) {
	[COLOR="blue"]_root[/COLOR].<Instance Name>.[COLOR="blue"]gotoAndStop[/COLOR](1)
}
12. Now place the navigation bar onto your website, and then test to see if it brings down a menu. If it doesnt, you may need to place the Instance Name path you set to your script. Also, if it doesn't animate correctly, you may have done something wrong.

TIPS
Here are some tips to making your website look nice, and be more USER-FRIENDLY.

Add a preloader - Some users sometimes use 56k internet connections, and if they visit your website and its lagging and the flash doesn't load, then they will just guess its glitched and leave.

Use Custom Art - Custom Art will make your website stick out!

If you see something on the tutorial and don't understand it, tell me and I will re-change that section of the tutorial.

RESOURCES
http://flashkit.com/ <--- You can find scripts, preloaders, and art, and a great flash support forum.
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Ghan Ghan:
    We did!
  • Ghan Ghan:
    The old shoutbox wasn't supported anymore. We updated xenForo, so it had to be replaced.
  • jonas jonas:
    let's see if everyone finds it... the nice thing about the shoutbox was I could check on it even while logged out, but the existence of this one is hidden when you're not logged in
  • Ghan Ghan:
    We can fix that.
  • Ghan Ghan:
    Chat should show on the sidebar when not logged in now.
  • Ghan Ghan:
    (You'll still need to log in to post messages)
  • Ghan Ghan:
    Test!
  • tom_mai78101 tom_mai78101:
    I must be in a test server.
  • tom_mai78101 tom_mai78101:
    Nice, Twitter tweets embedding now works
  • Wizard Wizard:
    Yup.
  • Ghan Ghan:
    Excellent.
  • Ghan Ghan:
    @tom_mai78101 Hello there.
  • Ghan Ghan:
    Tagging works in the chat too.
  • tom_mai78101 tom_mai78101:
    @Ghan Missed it.
  • Wizard Wizard:
    Still fixing things here and there. Added widgets to the portal, will make it match the ones here on the forum index tomorrow.
  • Ghan Ghan:
    The venerable World Editor Tutorials site has been converted to HTTPS at last.
  • jonas jonas:
    cool
  • jonas jonas:
    and I can even edit my messages, nice
  • seph ir oth seph ir oth:
    GENERAL CHIT CHAT, YOU ARE A BOLD ONE
  • Ghan Ghan:
    Hello there
  • The Helper The Helper:
    this new chatbox is great and the forum software update is great too
    +1
  • The Helper The Helper:
    upgrade has fixed forum registration spam problem
  • tom_mai78101 tom_mai78101:
    Something tells me we might be able to customize the chatbox a bit, considering that there's a gap under every message.
  • Wizard Wizard:
    Going to deploy a fix soon, just had to take some time for myself this weekend.

    Members online

    No members online now.

    Affiliates

    Hive Workshop
    Top