How To Create A Flash Website With CS5

webdesi…

Oct 03, 2011

Before I begin, for those of you who want an easy way out of this flash website tutorial, you can make a free Flash website with Wix that will look like a very professional website. Now for those of you who are still interested in reading this tutorial on how to make a flash website, I will continue.

Flash websites can be an attractive way to captivate your viewers' attention and make their user experience on your site a little more interactive. Flash websites are different than a normal, text coded website that was developed with HTML, PHP, ASP or another language. You start with a raster stage where you can place objects based on X and Y coordinates and then dictate on what you want the objects to do, or how you want the user to navigate through the Flash site based on a timeline.

In this Flash tutorial I will teach you how to make a very basic Flash website using Macromedia's Flash CS5, CS5 simply standing for Creative Suite, 5th edition. So, let's get started.

1. The first step is going to be creating your workspace in Flash. Begin by opening Flash and clicking "File", at the top of your screen, then selecting "New". A window should pop up similar to the one below asking you what kind of new document you'd like to create. For this Flash tutorial go ahead select "ActionScript 2.0", which is a little easier for beginning Flash developers to work with, then click OK. This should make a blank white square appear on your screen.

2. From here we're going to want to resize our stage to 790px wide by 630px tall. To do this we select our Properties window and click the Edit button next to the Size properties and a new window should pop up similar to this. And, while we're at it, let's change our background color to black.

3. Now that we've got our document sized the way we want it I'd suggest saving it, for simple purposes I just named mine "flash_tutorial". Once you've saved the file let's go ahead and import the "home.jpg" alt="img" image so we can set the background of our Flash site. To do this you click File at the top, hover over Import then select "Import to library". This will pop open a box for you to navigate to the "Site Images" folder and select "home.jpg" alt="img".

Once it imports in to your library go ahead and drag it on to the stage, then, use the alignment tab to center it and align it to the bottom of the stage. If your alignment tab isn't open, go to "Window" on the top bar and select "Align".

4. In order to keep things organized, let's name this layer "bg pic" on the timeline. To do so is as simple as double-clicking "Layer 1" and changing its name. After we've named our background picture layer we'll create another layer for our content. There are a few ways to do this: you can do so from the top menu bar by going Insert - Timeline - New Layer; or by right clicking (if you're on a Windows machine, control click if you're on Mac) over the "bg pic" layer name, this will cause a menu to pop up and you select "Insert Layer".

Go ahead and add three new layers to your timeline and then name them, starting from the top, "navigation", "footer", and "content", with "bg pic" being the layer on the bottom. And finally let's lock the "bg pic" layer by clicking the dot for that layer that corresponds with the lock icon above it, which should be the dot on the right. Your timeline should now look like this:

5. Let's make our Flash website navigation. Click on frame 1 of the "navigation" layer. The color should change from white to gray, this means that anything placed on the stage now goes on the "navigation" layer. We'll begin by selecting the "T"ext tool from our toolbar and creating separate instances for each page link we want on our Flash site. In this Flash design I've planned for six pages, Home, About, Blog, Links, FAQ and Contact. So, let's create six separate text instances for each of these links, resulting in a stage that should look similar to this:

6. Sticking with the "navigation" layer, let's now go ahead and convert all of those text blocks to buttons. To convert a text block to a link you simply click on the text you want to convert, a blue box should now frame your text to let you know it's selected. Then, once it's selected, you right click (or control click for Mac) and choose "Convert to Symbol".

7. Once you've selected "Convert to Symbol" a new menu should pop up asking what kind of symbol you'd like to convert it to and what you'd like to name your symbol. When it comes to naming symbols in Flash I always like to prefix the name with what the symbol is, it helps keep things organized and easy to find in the library once you go from making a simple Flash website to building larger, more complex Flash sites. For buttons I usually use the prefix "bu", so for my "Home" button I would name my symbol, "buHome". About would be "buAbout", Blog becomes "buBlog" and so on. Go ahead and convert all of your text elements to buttons.

8. The hover effect we're going to apply to our buttons is going to be a white color box behind the text and the text changing from white to black. Let's start with the "buHome". In order to give our buttons a nice spacing we're going to start with our "buHome" 20 px in from the left hand margin of the stage and 8 px down from the top of the stage. You can easily adjust this by clicking on the "buHome" button, then going to the Properties window and under "Position and Size" change the X coordinate to "20" and the Y coordinate to "8"

Now, go ahead and double-click the "buHome" button and notice how the timeline changes, that's because now you've briefly exited the timeline of your movie to enter the timeline of your button. You will also notice the text above each frame where numbers were on our main stage, these are the attributes of the button that we can set. We'll start by expanding our timeline from the single "Up" frame it's at now all the way to "Hit" by simply right clicking (or control + click on a Mac) and choosing "Insert Keyframe" from our list of options.

9. Now that we've got a new key frame under "Hit" let's go ahead and define the live area that we want our viewers to be able to click on to follow the link. The easiest way to do this is by breaking our text box down twice, until it's a flat image. You can do this by selecting the "Home" text and hitting Control + B twice (or Command + B twice on a Mac). The first time you break the text apart it breaks down to individual letters, the second time is a flat image and is easier to spread your target hit box over.

Once you've broken the text down, select the rectangle tool, that's two spots below the text tool on your toolbar, and make a rectangle over the word "Home". The "Hit" zone is not visible by the viewer, you're only defining the live are in which they can click to follow the link. That's why when I set my "Hit" area I like to use an obnoxiously bright color so that it sticks out and doesn't blend in with the background colors.

10. Now let's insert a keyframe for our "Down" and "Over" attributes as well. "Down" will remain the same as "Up", but if we don't break them all in to separate keyframes then once we change the "Up" effect, it will carry over to the "Down" effect.

Once you've got all the attributes with their own separate keyframe we can tackle the "Over" effect. To do this we're going to need a new layer so we can place the white hover block behind the text. So, click on "Layer 1" and select "Insert Layer". Once the new layer appears you'll need to drag it below "Layer 1" because we want the color block to appear behind the text. And then we only want it to appear during the "Over" state so go ahead and "Insert keyframe" for the "Over" and "Down" state.

Now we can click on the "Over" state inside of "Layer 2" and draw our box. I think a 20 px marking on the left and right of the word will look nice as well as filling the entire black portion of the Flash website navigation box vertically. In order to do this we'll need a box that's 40 px wider than our text, so if you click on the text you'll see it's 52.85 px wide, meaning our box needs to be 92.85 px wide. The black area of our navigation bar is 37 px tall, which means our box has to be 37 px tall as well. Select the rectangle tool, go to your Properties window, set the fill color to white (#FFFFFF) and no stroke color, then drag out your box. If it needs fine tuning once you dragged it out, all you have to do is click on it to select it, then go to the Properties window and change the Width to 92.85, and the Height to 37. Then to move it in place make sure the X coordinate is set to -20 and the Y coordinate is set to -8.

The final step to making our button is clicking on the "Over" state in "Layer 1", selecting the text, and changing the color under the Properties window to black (#000000) so you're able to read it against our newly formed white box. If you've done everything correctly so far, your button stage should look like this in the "Over" state.

Go ahead and see if you can do the rest of the buttons on your own. Keep in mind that your next button should be spaced 40 px from the right side of your previous button to allow for the hover effect. The simple calculation for this is, Width + X Coordinate + 40. Your Y coordinate should stay at 8 to ensure all your buttons maintain the same Y-axis. And that your "Hover" effect should be 40 px wider than your text, with a 20 px margin on the left and right. The X and Y coordinates of your "Hover" square should always be X: -20 and Y: -8.

How'd you do in creating a Flash website, does your Flash website site match this?

If not, no need to fret. Surely it was a miscalculation on button placement. Here's a little cheat sheet for you.

Home: x = 20
About: x = 112.85
Blog: x = 206.85
Links: x = 289.7
FAQ: x = 379.25
Contact: x = 461.75

And remember, the Y-axis on those should always be 8.

Now would also be a good time to not only save your project, if you haven't done so already, but to export what you've done so far to see if your buttons are working properly. To export your editable .fla file to the .swf format that's readable by web browsers, you can either go to File - Export - Export Movie. Or utilize the shortcut keys and hit Control + Shift + Enter on a Windows machine or Command + Shift + Enter on a Mac.

11. Now lets program those links to go somewhere. Click on "buHome" and then select the "Actions" window. Under the Actions tab, in the top right corner you should see an icon with "Code Snippets" next to it, and then another icon just to the right of that icon, which looks like a magic wand. Make sure you click the wand as it will help you write the ActionScript needed to make the buttons function.

On the left side should be a scroll box. Double-click on "Timeline Control" to get the menu to expand and drop down, then double-click "goto". This should make a menu appear to the right asking more specific questions. First you'll want to click the "Go to and stop" radio button, scene should remain at, under type you'll want to change "Frame Number" to "Frame Label", and then under Frame enter "home". That's it.

Now go ahead and do that for the rest of your buttons, but the "Frame" name should coincide with the link you're programming. For example, when you're developing the code for the About button you would simply write "about" in the box next to "Frame".

12. Working our way down the layers latter of our timeline, next up should be "footer". For this we're just going to create a basic footer with some social media links as a way of closing of the bottom of our site and giving it a little extra aesthetics. But before we dive in to the footer, let's go ahead and lock our "Navigation" layer, since we're done with that and don't want to accidentally screw anything up in that layer.

For our footer we're going to create a black rectangle with a 60% opacity that's 30 px tall and spans the width of our stage. To do this we first want to make sure we're in frame 2 of the "footer" layer. If you're already there, then all you have to do is select the rectangle tool from the toolbar and drag out a rectangle. Once you have a triangle on your stage you can easily edit it to perfection by selecting it, going to your Properties window, and entering the above attributes. Then, once you've got the proper shape size and opacity, you can go to your "Align" window and tell the rectangle to "Align horizontal center" and "Align bottom edge".

13. Now let's add those social media icons to our footer by importing them to our library first. If you don't remember how to do this from step 3, I'll give you a hint. File - Import - Import to Library. And you're going to want to import "email.png", "facebook.png", and "twitter.png".

Once they're in your library go ahead and drag them on to your stage. Where to place them is a personal preference, but I like mine in the bottom right corner. My Y coordinate is set to 606, while my X coordinates are:
Facebook: X= 715
Twitter: X = 740
Email: X = 765

14. If you'd like to link the icons to your social media site the process is quite similar to the navigation buttons we did. Click on the icon you'd like to link and open the "Actions" window. Rather than going to "Timeline Control" this time, we're going to go to "Browser/Network" and select "getURL". This will select a menu similar to this one and you'll want to enter the corresponding URL in to the appropriate box and select what window you'd like the link to open in (the current one, a new one, etc).

15. Now that we're done with the footer layer of our Flash website you can go ahead and lock it and we'll move on to the content. Like the footer, we're going to start by dragging out another rectangle with a black background and opacity of 60%. Only we're going to make this rectangle 355 px wide by 483 px tall and nestle it on the right side of our site at X: 395 Y: 77. Remember, to apply those changes you do so under the "Properties" window.

Once we have our rectangle set at the proper size and in place we're going to polish it up a bit by softening the edges. To do this we select our rectangle, go to "Modify" on our main menu bar at the top of the screen, then select "Shape", followed by "Soften Fill Edges". This should pop up a small new screen asking what distance and number of steps you'd like your edges softened. I think a distance of 10, with 4 steps and expanding should do the trick for us.

16. In order to enter text on top of our rectangle we'll also need to create a text box. Doing this is a combination of what we did to create our buttons and how we create our rectangles. Select the Rectangle Tool from the toolbar and drag out a box on the stage. I allowed for a 10 px margin all around on mine, so my text box is 335 px wide by 463 tall and sits at X: 405 and Y: 87.

Once your text box is created you can enter any text you'd like, I'm just going to enter some Lorem ipsum to fill the spot.

17. The home page on our Flash website is now created and our entire Flash site is almost created. From here we're going to want to create frame labels and our next five pages. Going back up to our timeline, create a new layer at above all your other layers and name it "actions". Once the layer is created click on frame 2 of the "actions" layer then go to your properties window. With "actions" frame 1 still selected, type "home" in to the box labeled "Name:" under "Label" in the "Properties" window. A little red flag looking thing should pop up under frame 1 of "actions". This means that frame 1 is now labeled "home", as this is where our home page lies on the timeline and from now on the "buHome" will point here. And if you expand out the timeline by adding more frames under this keyframe, you'll see that it says "home" next to the flag.

To keep our Flash website from playing straight through every page with out hitting any links, we're going to have to tell it to stop on each frame. With frame 1 of the "actions" frame still selected, go back to the "Actions" window where we programmed out buttons. Also similar to our buttons, we're going to want to use the Timeline Control to tell our site to "Stop". So, go ahead and double-click "stop" so that the site knows to stop at frame 1.

18. To create the next five pages on our Flash website is simple. We start by inserting a new keyframe in frame 2. To do this we need to click on frame 2 of "actions" and drag down to frame 2 of "bg pic", highlighting all of the frames. Then we right click (or Control + Click on Mac) and choose "Insert Keyframe". You'll notice the red progress bar that runs vertically through the timeline has moved to frame 2, that's because we're now working on frame 2 of our timeline.

Since we've already learned how to make a flash website and done all the hard work of creating everything, now it's just a matter of editing it slightly to correspond with the correct page. Since our second link is "About", it would make the most sense to have frame 2 be our "About" page. First things first, let's click on frame 2 of actions, go back to properties and name this one "about". After that we need to tell it to stop here like we did on the home page, otherwise it will just play this one frame before looping back to the home page and stopping there. So, with frame 2 of "actions" selected, go back to the "Actions" window and double-click "stop" under Timeline Control.

Now select frame two of your "content" layer and edit the text so that it coincides with what you want on your About page. Once you've finished that go ahead and unlock the "bg pic" layer and delete that image. After the image is deleted import "about.jpg" alt="img" to your library, drag it on to the stage and align it to the horizontal center and bottom of the stage using the "Align" window and PRESTO! Your page should look similar to this.

Now that you're a Flash website expert, see if you can create the last four pages on your own! Be sure to export it again and test your navigation to see if the links take you to the proper page.