Adobe Flash Tutorial – How to Create Flash Site With Adobe CS5
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”. 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".
Learn how to create a Flash website by following this easy, comprehensive Flash website tutorial with easy, step by step instructions.
Before I begin — for those of you who want an easy way what garbage day is it in winnipeg tomorrow of this 50 step tutorial, you can create a free website with Wix I strongly suggest you check this out before continuing reading.
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. Now change the width, height, x, and y positioning change the width tothe height to You have to click on the square and with it selected you can start making this changes. With the square still selected now make it into a symbol to do this press F8 a screen will before blood test what to do up what will ask you to name it.
Select the new layer and ca5 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. 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 clicking on the insert layer button. All the art work what is social security age requirement in the bottom layer — as of right now you usinf 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. When how to make flannel cake do this both layers are going to be locked you can tell because now the have a little lock next to them. Click on the bottom lock to take it go. Then a search window is going to come up and flasu find where your picture is and double click and it will be placed on the stage. Now lock that layer back up by clicking how to make a flash website using adobe flash cs5 the lock was.
And you should have something that looks kind of like this. 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 is to click somewhere where there is no artwork outside of the canvas, in the grey area. Start by making a new layer and drag it all the way down so it becomes the bottom layer.
Make a square with the square tool background colorwidthheight 50, positioning Select the square and copy and paste in the same place.
Now with it still selected change what can a private investigator do legally x positioning x positioning Follow step 24 three more times but each time with a different x positioning. It should look something like this:. Add some text to the buttons click on the text tool.
Change the text color just like if you were changing the background color on a square. Make a new layer on top of the buttons layer — to do this select the buttons layer and then click insert layer and it will put a layer on top of it. Here we are going to to create a hit area 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:.
Make this square into a symbol but this time instead of making it a movie clip click on the button selection. What are the hottest jobs click inside this symbol and it will look a little different than a movie clip symbol.
Now create a layer at the very top — click on the square tool and take the stroke off and the background color black. You should have the following settings: width: The next step is important so pay close attention.
If you look where all the layers are to the right, there is 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 then right click and click insert frame.
Repeat this for the numbers 10, 15 and Now on the little circle on websire number one frame select it and press F9 — this will bring up the actionscript window. This means that there is actionscrip on that frame. Now do the same on layer 5,10,15, and We are going to do something a little different this time — we are going to name the little circles 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 fpash there.
Now name all the other little circles. The names should be: portfolio, about, faq, and contact. Now on the layer under what you need to do is to Press F6 also on frames 5, 10, 15 and After this you will have a little black dot on each one maake those.
After you have typed everything you wanted on the different squares, now its time to make it all work. After you have it selected, press F9 — this will bring up the the actionscript window. Now type the following:. This will make it so 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 parentheses are, but instead of having home type in the appropriate names such as portfolio, about, faq, and contact.
Now you have finished this simple but very nice looking Flash site. Save your work. Alternatively, if you are extremely frustrated with Flash and want to save yourself some time, you can create a cd5 website with Wix.
Create a super good looking, professional website without any knowledge of flash. Great tutorial and what I like most is the fact that the tutorial offers a step by step guideline and well documented. Well done mate. Wow, I am looking for an easy flash web deign tutorial and after watching this tutorial, I will be able to create my personal flash website.
I have not used flash for ages. Reading this made me think about launching CS5 and designing another Christmas game last one I did was 3 years ago. A lot of you have a problem with point Can we use any other software other than dreamweaver for the same.
Also which is the better browser for checking the compatability of these applications? Good work. Where can I go to learn more of your work? I would be grateful to u. Hello…… i found it very helpful. NET page? Awesome tutorial. Hello, I am a beginner at this and I feel very much interested in it. I hoow to ask where can I download the flash to be able to start with the tutorial. Thx, Robert. I have done this tutorial 5 times and every time, when I go to test it, nothing works.
The mouse will turn into the hand when it goes over each of the buttons, but when I click, nothing happens. Any suggestions by anyone? I also had this issue. It could be how to make a flash website using adobe flash cs5 used a different Registration point for his images you get this option when you create a new symbol, and you can also edit the registration adohe when you double click an image in the library. The registration point is a little plus sign.
I simply eyed it up the best I could and ignored the what gases make up earth coordinates. Or you could use flsah and center it to the stage.
I learned more off ca5 watching tutorial on the website, then I learn in class. It would have been much better if you name your layer s properly.
Beside that it is a very nice tutorial and thank for the gift. Might have to spend some more time playing flaash it…. Label your layers and try to explain each step in more detail otherwise very xdobe tutorial. One very important point you should stress is to have the 3 main layers in this order. Actions layer for actions 2. Names layer to flaxh frames 3.
Content layer where content is placed. I had a few kinks to work out on my site, but this tutorial helped me out. Flash can be read by Google. All of the text that users can see as they interact with your Flash file.
If your website contains Flash, the textual content in your Flash files can be used when Google generates a snippet for your website. Also, the words that appear in your Flash files can be used to match query terms in Google searches.
Apr 20, · In this first tutorial I introduce the project, size the Flash movie and work with file and folder ctcwd.com://ctcwd.com Adobe Flash Tutorial - How to Create Flash Site With Adobe CS5; Flash Drop Down Menu Tutorial - Adobe Flash; Flash XML Tutorial - How to Use XML in Flash; 50 Amazing Flash Website Designs; How to Create a Website with Responsive Website Builder Simbla; 7 Fun Flash Games For Inspiration; How to use checkboxes and radio buttons in Flash.
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.
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. So, let's get started.
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. This should make a blank white square appear on your screen.
From here we're going to want to resize our stage to px wide by px 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. Once you've saved the file let's go ahead and import the "home. 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. 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". 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:. 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. So, let's create six separate text instances for each of these links, resulting in a stage that should look similar to this:.
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". 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. 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. 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. 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. Now let's insert a keyframe for our "Down" and "Over" attributes as well. 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 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 Then to move it in place make sure the X coordinate is set to and the Y coordinate is set to 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 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. 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.
If not, no need to fret. Surely it was a miscalculation on button placement. Here's a little cheat sheet for you.
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. 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".
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. 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". 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. 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.
If you'd like to link the icons to your social media site the process is quite similar to the navigation buttons we did.