How To Design a Website in Adobe Flash Part One

Hello and welcome to the video on flash tutorial. Thetutorial is about how to design a site in flash tutorial. In this tutorial you can learn setting up layers, creating the background and creating the header as well. so don’t miss the video and enjoy.

Whats up guys? Welcome to another real touch flash tutorial. And today I will be starting first of my falsh flash design a website layout series and this series and in this series I will show you how to make a website layout something similar to this ammm it said you can layout in flash and then export all these little images or to dreamweaver and may be build a tiny site with it this is going to be anything professional because ammm ya you know when I using photoshop and well I shouldn’t say that allow you know wondering why I am not using photoshop well not all of us photoshop I think it’s a complicated program and kind of flash so I am just here to help the people like me and think photoshop is complicated and I am gonna show that you can layout a website export the images and then go and put them into the dreamweaver and put on the work.

So here is the oh sorry here is original the original site a file that I made and as you can see I have everything laid out but lets just go ahead and make a brand new document. We will check the size 900 X 900 alright file, new , I will just say Actionscript so that you can use any version of flash it does not matter. This is macromedia pro 8 okay and that’s what I am normally used to so if you take me to see little bit to find out some area ammm in CS5 I apologize but m used to the old macromedia layout. So anyway here we go here is a fresh document and we gonna first start by laying out our layers so you get down here in to timeline layers just like photoshop you are probably used to that. Let’s go ahead and name this first layer background and we are going to add the new one and name it header just like a normal website has header.

Lets go ahead and put the header at the top because that is at the top put the navbar right under that and then we will then put sidebar. Sidebar come on spell it’s good and we’ll put a content page. This are not pages, these are just elements of your layout and then there will be one more which will be your footer and there is our website laid up. So lets go ahead and just click on the background and start ammm editing this so the background I like to add the gradient to my background I think it gives a really nice ammm design and its part of my web design so what we are gonna do is you gonna click on the the square tool or the rectangle tool site. Go over to your color panel and find linear gradient and I am going to make this color actually let’s make this color ya that’s good and lets make this color a lighter grey and we are going to just make a square here and it does not matter where we are going to add the dimensions of this square.

We are going to make sure that square is 900 X 900 so to fix our canvas okay and we have to move our few pixels. Ammm so like2 pixels over and up alright and now we are going to do is go to our gradient transform tool if you don’t see it you probably have free transform just hold down and click the gredient transform and you are going I am going to have to go up and down it doesn’t really matter what you do I am just kind of showing you how about layout a site and may be just to give you overall view of our flash site and alright I am going to make this gradient very subtle and that’s look going to be and may be it will look good more ya its look pretty good alright. So now we have our background image we are going to go down here to layers and lock that image so we can put our other content on it. And lets go appear to the header so you wanna go to click the header on layer.

And here we gonna go back to our rectangle tool and for now lets just make the header no what now I am not gonna do we are going to make the header a radio gradient. I am gonna show you cool little design trick and we are going to make this color very light a very very light grey. I think or that might be the other or we’ll just make this color grey ok that’s looks good and lets go ahead and make the header it’s alright. What you do have to do is go to your gradient tool once again I love this gredient tool that’s for sure. Okay ha ha good one and now what we are gonna do is just gonna have this gredient picking out her. It gives a really nice effect as we are good in picking up the color looks great its good. So when you do 100% ya ammm as you can see in the first one that I did I am doing this brand new ok I will show how did that.

We are going to I will just kind of will show you how is did that I am going copy this ammma this haeder, it looks great. But just see that howyou make a gredient like that we are going to put this in here for time sake I am gonna show you how I made this font. Basically what you do is you just hit the text tool st and just tabulate as you want and select your font I am here to show tools and you can add as many tools as you want. If you want make it look like mine just for your information I added a drop shadow, set the quality to high and I added a glow and I actually want to set that quality high as well. And that’s how I got that effect and as for the other text I just added a drop shadow and set the quality to high. And that’s how I made the header that’s probably gonna be nope nope we got some time we got some time alright we got 7.30 lets go alright so that’s pretty much the header let’s go ahead and start cracking you know what I like I am done for it now we will finish this tutorial right here right now the background and the header done. In the next tutorial we will pick on the navigation bar the side bar. So thanks for watching guys and stay tuned.

Tags: adobe 9 flash player, flash mp3 player, free flash tutorial, adobe flash player update, adobe flash install, macromedia flash pro 8, how to create flash with macromedia dreamweaver 4

Tags

Flash Tutorials