Flash websites can be an attractive way to captivate your viewers\u2019 attention and make their user experience on your site a little more interactive. A flash website is 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.<\/p>\n

In this Flash tutorial I will teach you how to make a very basic Flash website using Adobe Macromedia\u2019s Flash CS5, CS5 simply standing for Creative Suite, 5th edition. So, let\u2019s get started.<\/p>\n

1. The first step is going to be creating your workspace in Flash. Begin by opening Flash and clicking \u201cFile\u201d, at the top of your screen, then selecting \u201cNew\u201d. A window should pop up similar to the one below asking you what kind of new document you\u2019d like to create. For this Flash tutorial go ahead select \u201cActionScript 2.0\u201d, 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.<\/a><\/p>\n

2. From here we\u2019re 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\u2019re at it, let\u2019s change our background color to black.<\/p>\n

<\/a><\/p>\n

3. Now that we\u2019ve got our document sized the way we want it I\u2019d suggest saving it, for simple purposes I just named mine \u201cflash_tutorial\u201d. Once you\u2019ve saved the file let\u2019s go ahead and import the \u201chome.jpg\u201d 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 \u201cImport to library\u201d. This will pop open a box for you to navigate to the \u201cSite Images\u201d folder and select \u201chome.jpg\u201d.<\/p>\n

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\u2019t open, go to \u201cWindow\u201d on the top bar and select \u201cAlign\u201d.<\/p>\n

<\/a><\/p>\n

4. In order to keep things organized, let\u2019s name this layer \u201cbg pic\u201d on the timeline. To do so is as simple as double-clicking \u201cLayer 1\u201d and changing its name. After we\u2019ve named our background picture layer we\u2019ll 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 \u2013 Timeline \u2013 New Layer; or by right clicking (if you\u2019re on a Windows machine, control click if you\u2019re on Mac) over the \u201cbg pic\u201d layer name, this will cause a menu to pop up and you select \u201cInsert Layer\u201d.<\/p>\n

Go ahead and add three new layers to your timeline and then name them, starting from the top, \u201cnavigation\u201d, \u201cfooter\u201d, and \u201ccontent\u201d, with \u201cbg pic\u201d being the layer on the bottom. And finally let\u2019s lock the \u201cbg pic\u201d 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:<\/p>\n

<\/a><\/p>\n

5. Let\u2019s make our Flash website navigation. Click on frame 1 of the \u201cnavigation\u201d layer. The color should change from white to gray, this means that anything placed on the stage now goes on the \u201cnavigation\u201d layer. We\u2019ll begin by selecting the \u201cT\u201dext tool from our toolbar and creating separate instances for each page link we want on our Flash site. In this Flash design I\u2019ve planned for six pages, Home, About, Blog, Links, FAQ and Contact. So, let\u2019s create six separate text instances for each of these links, resulting in a stage that should look similar to this:<\/p>\n

<\/a><\/p>\n

6. Sticking with the \u201cnavigation\u201d layer, let\u2019s 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\u2019s selected. Then, once it\u2019s selected, you right click (or control click for Mac) and choose \u201cConvert to Symbol\u201d.<\/p>\n

<\/a><\/p>\n

7. Once you\u2019ve selected \u201cConvert to Symbol\u201d a new menu should pop up asking what kind of symbol you\u2019d like to convert it to and what you\u2019d 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 \u201cbu\u201d, so for my \u201cHome\u201d button I would name my symbol, \u201cbuHome\u201d. About would be \u201cbuAbout\u201d, Blog becomes \u201cbuBlog\u201d and so on. Go ahead and convert all of your text elements to buttons.<\/p>\n

<\/a><\/p>\n

8. The hover effect we\u2019re 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\u2019s start with the \u201cbuHome\u201d. In order to give our buttons a nice spacing we\u2019re going to start with our \u201cbuHome\u201d 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 \u201cbuHome\u201d button, then going to the Properties window and under \u201cPosition and Size\u201d change the X coordinate to \u201c20\u201d and the Y coordinate to \u201c8\u201d<\/p>\n

Now, go ahead and double-click the \u201cbuHome\u201d button and notice how the timeline changes, that\u2019s because now you\u2019ve 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\u2019ll start by expanding our timeline from the single \u201cUp\u201d frame it\u2019s at now all the way to \u201cHit\u201d by simply right clicking (or control + click on a Mac) and choosing \u201cInsert Keyframe\u201d from our list of options.<\/p>\n

<\/a><\/p>\n

9. Now that we\u2019ve got a new key frame under \u201cHit\u201d let\u2019s 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\u2019s a flat image. You can do this by selecting the \u201cHome\u201d 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.<\/p>\n

Once you\u2019ve broken the text down, select the rectangle tool, that\u2019s two spots below the text tool on your toolbar, and make a rectangle over the word \u201cHome\u201d. The \u201cHit\u201d zone is not visible by the viewer, you\u2019re only defining the live are in which they can click to follow the link. That\u2019s why when I set my \u201cHit\u201d area I like to use an obnoxiously bright color so that it sticks out and doesn\u2019t blend in with the background colors.<\/p>\n

<\/a><\/p>\n

10. Now let\u2019s insert a keyframe for our \u201cDown\u201d and \u201cOver\u201d attributes as well. \u201cDown\u201d will remain the same as \u201cUp\u201d, but if we don\u2019t break them all in to separate keyframes then once we change the \u201cUp\u201d effect, it will carry over to the \u201cDown\u201d effect.<\/p>\n

Once you\u2019ve got all the attributes with their own separate keyframe we can tackle the \u201cOver\u201d effect. To do this we\u2019re going to need a new layer so we can place the white hover block behind the text. So, click on \u201cLayer 1\u201d and select \u201cInsert Layer\u201d. Once the new layer appears you\u2019ll need to drag it below \u201cLayer 1\u201d because we want the color block to appear behind the text. And then we only want it to appear during the \u201cOver\u201d state so go ahead and \u201cInsert keyframe\u201d for the \u201cOver\u201d and \u201cDown\u201d state.<\/p>\n

Now we can click on the \u201cOver\u201d state inside of \u201cLayer 2\u201d 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\u2019ll need a box that\u2019s 40 px wider than our text, so if you click on the text you\u2019ll see it\u2019s 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.<\/p>\n

The final step to making our button is clicking on the \u201cOver\u201d state in \u201cLayer 1\u201d, selecting the text, and changing the color under the Properties window to black (#000000) so you\u2019re able to read it against our newly formed white box. If you\u2019ve done everything correctly so far, your button stage should look like this in the \u201cOver\u201d state.<\/p>\n

<\/a><\/p>\n

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 \u201cHover\u201d 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 \u201cHover\u201d square should always be X: -20 and Y: -8.<\/p>\n

How\u2019d you do in creating a Flash website, does your Flash website site match this?<\/p>\n

<\/a><\/p>\n

If not, no need to fret. Surely it was a miscalculation on button placement. Here\u2019s a little cheat sheet for you.<\/p>\n

Home: x = 20
\nAbout: x = 112.85
\nBlog: x = 206.85
\nLinks: x = 289.7
\nFAQ: x = 379.25
\nContact: x = 461.75<\/p>\n

And remember, the Y-axis on those should always be 8.<\/p>\n

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

11. Now lets program those links to go somewhere. Click on \u201cbuHome\u201d and then select the \u201cActions\u201d window. Under the Actions tab, in the top right corner you should see an icon with \u201cCode Snippets\u201d 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.<\/p>\n

On the left side should be a scroll box. Double-click on \u201cTimeline Control\u201d to get the menu to expand and drop down, then double-click \u201cgoto\u201d. This should make a menu appear to the right asking more specific questions. First you\u2019ll want to click the \u201cGo to and stop\u201d radio button, scene should remain at, under type you\u2019ll want to change \u201cFrame Number\u201d to \u201cFrame Label\u201d, and then under Frame enter \u201chome\u201d. That\u2019s it.<\/p>\n

Now go ahead and do that for the rest of your buttons, but the \u201cFrame\u201d name should coincide with the link you\u2019re programming. For example, when you\u2019re developing the code for the About button you would simply write \u201cabout\u201d in the box next to \u201cFrame\u201d.<\/p>\n

<\/a><\/p>\n

12. Working our way down the layers latter of our timeline, next up should be \u201cfooter\u201d. For this we\u2019re 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\u2019s go ahead and lock our \u201cNavigation\u201d layer, since we\u2019re done with that and don\u2019t want to accidentally screw anything up in that layer.<\/p>\n

For our footer we\u2019re going to create a black rectangle with a 60% opacity that\u2019s 30 px tall and spans the width of our stage. To do this we first want to make sure we\u2019re in frame 2 of the \u201cfooter\u201d layer. If you\u2019re 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\u2019ve got the proper shape size and opacity, you can go to your \u201cAlign\u201d window and tell the rectangle to \u201cAlign horizontal center\u201d and \u201cAlign bottom edge\u201d.<\/p>\n

<\/a><\/p>\n

13. Now let\u2019s add those social media icons to our footer by importing them to our library first. If you don\u2019t remember how to do this from step 3, I\u2019ll give you a hint. File \u2013 Import \u2013 Import to Library. And you\u2019re going to want to import \u201cemail.png\u201d, \u201cfacebook.png\u201d, and \u201ctwitter.png\u201d.<\/p>\n

Once they\u2019re 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:
\nFacebook: X= 715
\nTwitter: X = 740
\nEmail: X = 765<\/p>\n

<\/a><\/p>\n

14. If you\u2019d 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\u2019d like to link and open the \u201cActions\u201d window. Rather than going to \u201cTimeline Control\u201d this time, we\u2019re going to go to \u201cBrowser\/Network\u201d and select \u201cgetURL\u201d. This will select a menu similar to this one and you\u2019ll want to enter the corresponding URL in to the appropriate box and select what window you\u2019d like the link to open in (the current one, a new one, etc).<\/p>\n

<\/a><\/p>\n

15. Now that we\u2019re done with the footer layer of our Flash website you can go ahead and lock it and we\u2019ll move on to the content. Like the footer, we\u2019re going to start by dragging out another rectangle with a black background and opacity of 60%. Only we\u2019re 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 \u201cProperties\u201d window.<\/p>\n

Once we have our rectangle set at the proper size and in place we\u2019re going to polish it up a bit by softening the edges. To do this we select our rectangle, go to \u201cModify\u201d on our main menu bar at the top of the screen, then select \u201cShape\u201d, followed by \u201cSoften Fill Edges\u201d. This should pop up a small new screen asking what distance and number of steps you\u2019d like your edges softened. I think a distance of 10, with 4 steps and expanding should do the trick for us.<\/p>\n

<\/a><\/p>\n

16. In order to enter text on top of our rectangle we\u2019ll 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.<\/p>\n

Once your text box is created you can enter any text you\u2019d like, I\u2019m just going to enter some Lorem ipsum to fill the spot.<\/p>\n

<\/a><\/p>\n

17. The home page on our Flash website is now created and our entire Flash site is almost created. From here we\u2019re 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 \u201cactions\u201d. Once the layer is created click on frame 2 of the \u201cactions\u201d layer then go to your properties window. With \u201cactions\u201d frame 1 still selected, type \u201chome\u201d in to the box labeled \u201cName:\u201d under \u201cLabel\u201d in the \u201cProperties\u201d window. A little red flag looking thing should pop up under frame 1 of \u201cactions\u201d. This means that frame 1 is now labeled \u201chome\u201d, as this is where our home page lies on the timeline and from now on the \u201cbuHome\u201d will point here. And if you expand out the timeline by adding more frames under this keyframe, you\u2019ll see that it says \u201chome\u201d next to the flag.<\/p>\n

To keep our Flash website from playing straight through every page with out hitting any links, we\u2019re going to have to tell it to stop on each frame. With frame 1 of the \u201cactions\u201d frame still selected, go back to the \u201cActions\u201d window where we programmed out buttons. Also similar to our buttons, we\u2019re going to want to use the Timeline Control to tell our site to \u201cStop\u201d. So, go ahead and double-click \u201cstop\u201d so that the site knows to stop at frame 1.<\/p>\n

<\/a><\/p>\n

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 \u201cactions\u201d and drag down to frame 2 of \u201cbg pic\u201d, highlighting all of the frames. Then we right click (or Control + Click on Mac) and choose \u201cInsert Keyframe\u201d. You\u2019ll notice the red progress bar that runs vertically through the timeline has moved to frame 2, that\u2019s because we\u2019re now working on frame 2 of our timeline.<\/p>\n

Since we\u2019ve already learned how to make a flash website and done all the hard work of creating everything, now it\u2019s just a matter of editing it slightly to correspond with the correct page. Since our second link is \u201cAbout\u201d, it would make the most sense to have frame 2 be our \u201cAbout\u201d page. First things first, let\u2019s click on frame 2 of actions, go back to properties and name this one \u201cabout\u201d. 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 \u201cactions\u201d selected, go back to the \u201cActions\u201d window and double-click \u201cstop\u201d under Timeline Control.<\/p>\n

Now select frame two of your \u201ccontent\u201d layer and edit the text so that it coincides with what you want on your About page. Once you\u2019ve finished that go ahead and unlock the \u201cbg pic\u201d layer and delete that image. After the image is deleted import \u201cabout.jpg\u201d to your library, drag it on to the stage and align it to the horizontal center and bottom of the stage using the \u201cAlign\u201d window and PRESTO! Your page should look similar to this.<\/p>\n

<\/a><\/p>\n

Now that you\u2019re 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.<\/p>\n

If you\u2019re feeling like Flash is just too complicated, then I recommend using the free drag and drop site builder from Wix<\/a>, which allows you to quickly create a professional website for free.<\/p>\n

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Flash websites can be an attractive way to captivate your viewers\u2019 attention and make their user experience on your site a little more interactive. A flash website is … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[2618,5],"tags":[],"aioseo_notices":[],"yoast_head":"\n