To take a quick peek at what you’ll be creating, go to www.jwright.info | Download Source Files

Getting Started: Setting up our flash website Project

Before I begin – for those of you who want an easy way out of this tutorial, you can create a free  flash website with Wix that will look like a very professional website. Now for those who are still interested in going through with the tutorial, I will continue.

Open up Adobe Flash CS3 and create a new Flash Project. File–>New–>Flash Project.
Click Ok. Name your project jwright.info.flp.

Tip: I like to create a folder as one central location for all of my files (e.g.
a folder named jwright.info) to keep everything together.

Next, select File–>New–>Flash File (ActionScript 3.0). Click Ok.
It’s a good idea to go ahead and save your project. Let’s do so. File–>Save (or Ctrl+S). Name the new Flash file jwright.info.fla.

Now we can add our Flash file to our project. Right click on the project file and
click Add File… as shown below. If you do not see you Project Panel, open
it up by selecting Window–>Project (or Shift+F8) from the main toolbar.

Add the file jwright.info.fla to the project.

Setting up the Timeline

Let’s start by setting up the layers that make up our site. Click the Insert Layer
Folder button for the timeline. Rename this folder Pages by right
clicking the folder and choosing Properties or by double clicking the folder.

Follow the similar procedure for adding a new folder for each page we will need: Start, Home, Profile, Resume, Contact, Portfolio, and Respect. Also,
create a folder called Master.

Here’s a look at what you should now have in your timeline. Ensure that each page
folder is a subfolder of Pages. You can do this by dragging the layer into
the proper place. (You may delete the default layer Layer1, if it’s still
listed.)

Oh boy, we’re rockin’ now! Let’s insert a new layer in the Master folder.
Click the Insert Layer button found near the the Inser Layer Folder button.

Name the new layer Splash. Again, be sure that the Splash layer is
inside of the Master folder.

Follow the same steps to add the rest of our Master layers: Main Menu, House,
Logo, Arrows, Copyright, and of course Splash.

Here’s a stunning view of our timeline so far.

Okay, now in each page folder (excluding Master) insert two layers named Content and Actions like so.

Now, we want to add the keyframes for our website. Essentially, each page has a
keyframe used to display the page we need. Then we can navigate to each requested
page via frames.

Insert a keyframe on each page layer in sequence. Example: The Start page’s
keyframe goes on frame 1; The Home page’s keyframe goes on frame 2; etc.
Like so. To insert a keyframe, right click on the desired frame and choose Insert
Keyframe (or select the frame and hit F6).

A couple more things before the real fun begins.

Create two more layers (not in any folder) named Frame Labels and Actions.

We’ll place a lot of our ActionScript for the site in the Actions layer later
on. We’re going to use the Frame Labels layers for our site navigation. So,
let’s setup our Frame Labels.

Actually, let’s first define a Frame Label. Simple, simple. A Frame Label is really
just a way we can use an identifier for our page instead of always accessing a page
by its frame number. It’ll make more sense in a minute–bear with me.

Select the first seven frames on the Frame Labels layer. Then, convert them
to keyframes (F6). Here’s a look.

We need to give these Frame Labels a name. Select the first frame (frame 1) and give
it a name in the Properties panel. Let’s call it start_frm. This naming
convention is consistent with our page layer names.

You should now see little flag in the first frame. Repeat these steps to name the
rest of our Frame Labels. Here’s a look at what you should have when all are named.

Well done ladies and gentlemen. Moving on…

Creating the Main Layout

On the Properties panel, Window–>Properties–>Properties (or Ctrl+F3), click
the size button. This will display the Document Properties form.

Set the Dimensions width to 885.15 px and the height to 578 px. Set the Background
color to White (#FFFFFF), the Frame rate to 32 fps (frames per second),
and the Ruler units to Pixels.

Ready for our first graphic? Me too. First, let’s lock all of the layers but the
one we need– the Splash layer.

Secondly, from the Tools toolbar, Window–>Tools (or Ctrl+F2), select the Rectangle Primitive Tool (or R). Change the stroke color to #EBEBEB, and
set the fill color to #FFFFFF via the color pickers on the Properties panel. Set
the corners rounded to 18.

Here’s a shot of the properties panel for some help.

Now draw a primi rectangle 787.1 (width) by 468.4 (height) on the stage. Note: Ensure
the Splash layer is selected.

It’s Movie Clip time. Select your primi and hit F8. This will pop up the Convert
to Symbol form. Name it SplashMc and select Movie clip as the type. Click Ok.

This Mc looks pretty sad. Let’s spice it up! Select Window–>Properties–>Filter.
Select our SplashMc and hit the Add Filter button on the Filters panel
and select Drop Shadow.

Next set the drop shadow’s properties shown below.

Let’s align this bad boy! Open up the align panel Window–>Align (or Ctrl+K).
Select your Mc and click Align horizontal center and then Align vertical center.

Now that it’s centered beautifully, let’s move it down a little. About six hits
on the down arrow on your keyboard. My X,Y coords for this Mc is now 442.6,307.2;
however, I’ve seen these X,Y’s vary a little from computer to computer. Not sure
why, but that’s life I guess.

The copyright. First, lock the Splash layer and unlock the Copyright layer. Create a new Text Box using the text tool (T). Type in Copyright © 2007-2008
jwright.info. All Rights Reserved. Note: You can find the copyright symbol on your Windows start menu. Start–>All Programs–>Accessories–>System
Tools–>Character Map. (That is, if you have a PC with Windows.)

Again, use the Align tool to center the copyright horizontally and then align on
the bottom edge. So far, so good. Right? Here’s our stage.

Next, our navigation arrows. Let’s look at how to make an arrow button. I’m not
going into this a great deal as I want to focus on the “programming a flash site”
as opposed to “creating each little graphic for a flash site.” Michael’s got some
great tutorials for graphics. I’ll leave that to the pros.

To make a button, open up the Library (Ctrl+L). You should see the SplashMc we created earlier. Click the New Symbol… in the bottom left of the Library
panel. Name the button ForwardBtn and be sure to select Button. Click Ok.

As a side note here, it’s a good idea to create some folders in the library to organize
everything. One for MovieClips, one for Buttons, etc.

Back on the stage now, place your arrow button center stage. Add a new keyframe
in the Over frame. Make the button how you want it to look when you hover
over it–I just changed my fill color to white. Then again for the Down frame.

Follow the same steps for your back button. Be sure to name it BackwardBtn.

Let’s go back to the main stage by clicking Scene1 as shown below.

From the Library, drag your two buttons onto the Arrows layer. Using the
Align tool, align the backward arrow on the left edge and the forward arrow on the
right edge.

To align the arrows vertically we’re going to use Rulers. We don’t want to just “Align vertically” because our SplashMc is not aligned vertically. Remember?
We moved it down some? We want the arrows to be aligned with good ol’ splashy.

Bring up the rulers by selecting View–>Rulers (or Ctrl+Alt+Shift+R). Select
the SplashMc on the Splash layer (you may need to unlock it). Drag
a ruler guide down from the horizontal ruler, intersecting the center point of splashy.

Now select both arrows and intersect them with your ruler guide, like so.

On to the logo. Use whatever logo you’d like. Place it on the Logo layer.

You may do the same for the little house button on the upper right. Place it on
the House layer.

Our main layout so far.

The Flying Menu

Although the main menu is definitely a part of our main layout, it deserves its
own section. This, my friends, is the most difficult part of the site; however,
it’s just a bit tedious–nothing earth shattering. Let us begin!

To get started, create a new symbol (just like you did for the arrow buttons). Name
it MainMenuMc and select Movie clip as the type. Click Ok.

Secondly, let’s setup or Mc’s timeline. Create a new folder called Menu Items and insert five new layers into the folder. Name them Profile, Resume, Contact, Portfolio, and Respect respectively (no pun intended).

On the Contact layer, place a new Text Box with the text contact.
This text should be black, 15pt font, Arial, with a letter spacing of 1. See below.

Convert the Text Box to a button. Select it, hit F8, select type Button,
name it ContactBtn click Ok. Double click the new symbol to edit it.
Insert a new keyframe in the Over frame and change the text color to #999999.

Now let’s set up some guide lines. From the ContactBtn‘s center point, drag
two vertical guides to the left of the button. One spaced 100 units away and
the other spaced 200 units away from the button’s center point. Do the same to the
right of the button. Also, drag a horizontal guide intersecting the button’s center
point.

Here’s a clarifying example.

Next, create the other four buttons just like the ContactBtn we just made: ProfileBtn, ResumeBtn, PortfolioBtn, and RespectBtn. Then, place those
buttons on the intersecting guides like the following. Be sure to place each button
on the proper corresponding layer.

No, we’re not done with the menu yet, but we need a reference point for the rest of
it. So, let’s go ahead and place our menu (from the Library) on our main stage on
the Main Menu layer–centered vertically and centered horizontally in respect
to splashy.

Double click the MainMenuMc to return to edit mode. Drag a horizontal guide
to where you want the menu to fly to.

Next, insert a new layer and call it Dummy. Copy and paste all five buttons
into this dumb layer. Align them horizontally on the guide we just made. Trust me
on this one. Here’s a look see.

This is going to be how we set up our destination point for our menu items when
they fly into place. If you can think of a better way, awesome. Go for it.

Space each button about 3 little units away from the button to its right. Use the
guide lines to help.

Now intersect some guides on each dummy menu item’s center point. Be careful not
to confuse these guides with the ones for our real menu.

Okay, now hide the dummy layer. We could delete it now as we won’t need it anymore,
but just in case we need to return to it–it’s there. Hide by selecting the layer
and clicking the dot on the dummy layer under the Show/Hide All Layers button.

On to the flight plan. Let’s draw some motion guides. First, select the Respect layer. Click the Add Motion Guide button.

Using the Line tool (N), draw a line from the RespectBtn‘s center point to
it’s corresponding flight destination. Be sure to draw the guide on the the Repect layer’s motion guide layer.

Follow the previous steps for the rest of the buttons.

Here’s what you should end up with.

Go ahead and lock each guide layer so that we don’t accidentally select it.

Now for some animation! All right. Insert a frame (not keyframe) on frame 20 for
each layer (excluding Dummy). Right click on frame 20 on the profile layer
and select Create Motion Tween. Carefully select the ProfileBtn button
and drag it up to its destination point.

This will create your flying tween. Here’s the results.

You can drag the red timeline slider back and forth (or use the ‘,’ (comma) and
‘.’ (period) keys) to see your tween in action.

Proceed to do the same for the rest of your menu item buttons.

So that’s the up flight plan. What about it’s descent? Well, I’m glad you asked.
This is simple. Select frame one on each layer, right click on the selection. Choose Copy Frames.

Now select frame 20 for each layer and select Paste Frames, like so.

Well, that was the descent. Check it out using the slider to see your animated menu
in all its glory! (Go ahead and delete the dummy layer if you’d like.)

Almost done with the menu!

Time for some ActionScript! We need to add some timeline control for our menu. Insert
a new layer named Timeline Control. Select frame 20 in the new layer and
hit F9. Like magic the ActionScript panel opens. Simple stuff here. Just type
stop(); This will stop the menu at the top of the flight plan when it’s
played.

Do the same for frame 40 so that the menu will stop at the bottom of its flight
plan. Notice the little a denoting the frame has some ActionScript. Here’s
a glance.

We need a way to control the menu from the main timeline. So, the solution? We need
to create two functions. First, add another layer in the MainMenuMc timeline
called Actions.

Add the following ActionScript to the Actions layer.

function goHome():void { gotoAndPlay(20); } function leaveHome():void { gotoAndPlay(1); }

We’ll be able to use these two functions to control our main menu.

Congrats! That’s the end of our main menu. That wasn’t too bad, right? Great job!

Navigation Control

Now that we have our flying menu, logo button, and our little house on the stage button, let’s put ‘em
to good use. We’ll be using a good bit more ActionScript (AS) from here on out. Excited?

The first thing we need to do is make sure that our Master layer displays throughout the timeline. To do so,
insert a frame into frame 8.

The next thing we need to do is to name our menu. Select the MainMenuMc symbol and set it’s Instance Name
to mainMenu_mc. Now, let’s add a couple lines of ActionScript to the Actions layer that’ll run when the
flash file first loads.

///////////////////////////////////////////////////////////////////// // Startup. ///////////////////////////////////////////////////////////////////// stop(); mainMenu_mc.stop();

The Startup block serves no purpose but to identify the associated lines of code–essentially keeping our
code looking pretty and easy to find.

If you have not done so yet, go back into your MainMenuMc symbol and
assign Instance Names to our menu item buttons. Try to stick with the same naming convention. Like, name the
ProfileBtn profile_btn, etc.

Notice how we use the _btn postfix for Buttons and the _mc postfix for Movie Clips. This will
tell the AS compiler to generate intellisense (What’s that? See below.) for your object. Kinda like Visual Studio,
Dreamweaver, and other programming IDEs.

In order to handle the onclick events of our navigational buttons, we need to setup some event handlers.
Add the following lines of AS to the Actions layer. I’ll explain the navigationClicked part in a second.

///////////////////////////////////////////////////////////////////// // Event Setup. ///////////////////////////////////////////////////////////////////// mainMenu_mc.profile_btn.addEventListener(MouseEvent.CLICK, navigationClicked); mainMenu_mc.resume_btn.addEventListener(MouseEvent.CLICK, navigationClicked); mainMenu_mc.contact_btn.addEventListener(MouseEvent.CLICK, navigationClicked); mainMenu_mc.portfolio_btn.addEventListener(MouseEvent.CLICK, navigationClicked); mainMenu_mc.respect_btn.addEventListener(MouseEvent.CLICK, navigationClicked);

So what in the world did we just do? It’s called event handling programming. I’m sure
you’re familiar with it, but it’s basically just saying that function “X” gets called
when the user clicks button “B”–pretty basic.

So, we have hooked up our main menu’s navigational buttons to a function called navigationClicked
that we are about to define. Now, any time one of those buttons are clicked, this function will be executed.

Here’s what you should have in your Actions layer for the main stage thus far.

I know it’s getting a little more complicated, but hang in there and take your time.

Next, we need to define our navigationClicked function. Here’s the stubbed out function.
We’ll add more to this function in a minute. Copy and paste this code under your other code in the
Actions layer.

///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function navigationClicked(Event:MouseEvent):void { }

This next batch of AS (the body of the navigationClicked function) is a
little long; however, it’s not too complicated. I’ll try to explain it well as we go along.

We need to determine what page to go to based on what button was clicked. Remember the Frame
Labels we discussed earlier? Here’s where we’re going to use them. Bascially, we’re going
to associate each button with a Frame Label via a common switch statement.

function navigationClicked(Event:MouseEvent):void { //We'll use this to store the Frame Label's name. var frmLabel:String = ''; //Determine what Frame Label to use based on which //button was clicked. switch (Event.target) { case mainMenu_mc.profile_btn : frmLabel = "profile_frm"; break; case mainMenu_mc.resume_btn : frmLabel = "resume_frm"; break; case mainMenu_mc.contact_btn : frmLabel = "contact_frm"; break; case mainMenu_mc.portfolio_btn : frmLabel = "portfolio_frm"; break; case mainMenu_mc.respect_btn : frmLabel = "respect_frm"; break; case logo_btn : frmLabel = frmLabel = "home_frm"; break; case home_btn : frmLabel = "home_frm"; break; } }

Okay, so now we know what Frame Label we need to use. (You may be asking what about our
LogoBtn and HouseBtn. We’ll get to that in a minute.)

In order to display the page we’ll use the built-in AS function gotoAndPlay(frame:Number). We have
a Frame Label which is a string; however, we need the frame’s number. Let’s write a little function
to retrieve that number. Here ya go.

///////////////////////////////////////////////////////////////////// // Helper Functions. ///////////////////////////////////////////////////////////////////// function getFrame(frameName:String):Number { var frame:Number = 1; //Loop through all Frame Labels to find our requested frame. for (var i = 0; i < currentLabels.length; i++) { if (currentLabels[i].name == frameName) { frame = currentLabels[i].frame; break; } } return frame; }

All we are doing here is looping through all of our Frame Labels (via the built-in currentLabels property)
and comparing the name we found in our switch block to the label we’re currently looping on.

We can now add the following two lines to the bottom of our navigationClicked function.

var frmGoto:Number = this.getFrame(frmLabel); gotoAndPlay(frmGoto);

Here’s our function so far.

function navigationClicked(Event:MouseEvent):void { //We'll use this to store the Frame Label's name. var frmLabel:String = ''; //Determine what Frame Label to use based on which //button was clicked. switch (Event.target) { case mainMenu_mc.profile_btn : frmLabel = "profile_frm"; break; case mainMenu_mc.resume_btn : frmLabel = "resume_frm"; break; case mainMenu_mc.contact_btn : frmLabel = "contact_frm"; break; case mainMenu_mc.portfolio_btn : frmLabel = "portfolio_frm"; break; case mainMenu_mc.respect_btn : frmLabel = "respect_frm"; break; case logo_btn : frmLabel = frmLabel = "home_frm"; break; case home_btn : frmLabel = "home_frm"; break; } //Find the frame number based on our Frame Label. var frmGoto:Number = this.getFrame(frmLabel); //Go to the requested page. gotoAndPlay(frmGoto); }

Well, let’s test out what we have so far. Select Debug–>Debug Movie (Ctrl+Shift+Enter) from
Flash CS3′s main menu. This will compile and run your Flash file. If you’ve missed anything, the
compiler will show you an error.

Here’s what you should see.

Feel free to click some buttons, but you really won’t be able to see the pages changing since all
of our pages are blank. Let’s skip ahead a little and change that. That way we’ll know our menu
is working.

First, select the frame in your Content layer under the Start page.

Secondly, place a Text Box, with text-aligned right, by the HouseBtn symbol, like so.

Next, follow those same steps to place a label (in the same place) on the Content layers of each page.
Then change the text to represent each page.

Tip: You can select the Text Box you just made on your Start page, select the frame for the Content layer on
the Home page, and select Edit–>Paste in Place (or Ctrl+Shift+V). This will paste the Text Box
in the exact same place as your Start page.

You will also need to add the following one line of AS to each of the Actions layers for each page–except the Start
page.

stop();

This will ensure that your Flash movie will stop on the requested frame. If not, we would be hitting the requested
frame and then the movie would continue to play out the rest of the movie.

As for the Start page, we need to add the following line of AS. We’re bascially going to
just skip the start page. The reason is simple. I may want to, at a later time, change my home page to something
different and make the current home page a welcome page. But, for now we’ll just use our home page as our welcome.
Basically, we’re just trying to keep our site as maintainable as possible.

gotoAndPlay(2);

Again, notice the little ‘a’ on each frame containing AS code.

Before we debug again, let’s add a couple of lines of AS to our navigationClicked function.

We’re going to put our gotoAndPlay(frmGoto); line of AS inside of an if statement.
Here’s the function now.

function navigationClicked(Event:MouseEvent):void { //We'll use this to store the Frame Label's name. var frmLabel:String = ''; //Determine what Frame Label to use based on which //button was clicked. switch (Event.target) { case mainMenu_mc.profile_btn : frmLabel = "profile_frm"; break; case mainMenu_mc.resume_btn : frmLabel = "resume_frm"; break; case mainMenu_mc.contact_btn : frmLabel = "contact_frm"; break; case mainMenu_mc.portfolio_btn : frmLabel = "portfolio_frm"; break; case mainMenu_mc.respect_btn : frmLabel = "respect_frm"; break; case logo_btn : frmLabel = frmLabel = "home_frm"; break; case home_btn : frmLabel = "home_frm"; break; } //Find the frame number based on our Frame Label. var frmGoto:Number = this.getFrame(frmLabel); //Don't do anything if we are already on the requested page. if (currentFrame != frmGoto) { //Go to the requested page. gotoAndPlay(frmGoto); } }

Go ahead and debug now to see your changes in action. Notice how the page label
by the HouseBtn symbol changes as you go from page to page.

Next, let’s set up our LogoBtn and HouseBtn buttons. After you assign an Instance Name
to your buttons, all you need to do is attach the click event of those buttons to our navigationClicked
function. Forget how? That’s cool. Here’s a
refresher.

logo_btn.addEventListener(MouseEvent.CLICK, navigationClicked); home_btn.addEventListener(MouseEvent.CLICK, navigationClicked);

So now we need to add those guys to our switch statement. After you do that, feel free
to debug again to check it out.

case logo_btn : frmLabel = "home_frm"; break; case home_btn : frmLabel = "home_frm"; break;

How about that flying menu? It’s time to put it to work! Remember those two functions we made, goHome();
and leaveHome();? That’s how we’re going to control the menu from our navigationClicked function.
Let’s have a look how.

All we need to do to implement our flying menu is make a couple of modificaitons to our if statement
in our navigationClicked function. Below are the changes. Be sure to read the commented lines to
understand what we’re trying to accomplish.

//Don't do anything if we are already on the requested page. if (currentFrame != frmGoto) { //Get and remember the Home page's frame number. var frmHome:Number = this.getFrame("home_frm"); //If our requested page is the Home page, the flying menu //needs to go home. if(frmGoto == frmHome) { mainMenu_mc.goHome(); } //Else, if we are on the Home page and are leaving, then //leave home. else if(currentFrame == frmHome) { mainMenu_mc.leaveHome(); } //Go to the requested page. gotoAndPlay(frmGoto); }

We’ve only got two buttons to go. Our ForwardBtn and BackwardBtn buttons.

To get started with those fellas, assign them Instance Names and hook them up to our
navigationClicked function as we’ve done several times previously.

It’s a tad tricky to get our forward_btn and backward_btn buttons to cycle the
pages appropriately. I think it will be much clearer if I just give you the code and have you
read through the comments–instead of dissecting the functions line by line.

The main function here is getSequencedFrame(forward:Boolean). This function accepts a
Boolean value indicating if the next page is requested or the previous. Then, the function
will determine the Frame Label of the requested page.

Here’s the two functions you’ll need. Just copy and paste them into your Helper Functions section.

function getFrameLabel(frame:Number):String { var frmLabel:String = ''; //Loop through all Frame Labels to find the requested Frame Label. for (var i = 0; i < currentLabels.length; i++) { if (currentLabels[i].frame == frame) { frmLabel = currentLabels[i].name; break; } } return frmLabel; } function getSequencedFrame(forward:Boolean):String { //Used to remember the Frame Label of our page. var frmSequence:String = ''; //If we're looking for the next page in sequence... if(forward) { //If our current page is that last page... if(currentFrame == this.getFrame("respect_frm")) { //...then, we need to go Home. frmSequence = "home_frm"; } else { //...else, we just need to go to the next frame. frmSequence = this.getFrameLabel((currentFrame + 1)); } } //...else, we're looking for the previous page in sequence. else { //If we're on the first page (remember, we skipped our Start page)... if(currentFrame == this.getFrame("home_frm") || currentFrame == this.getFrame("start_frm")) { //...then, we need to go to the last page. frmSequence = "respect_frm"; } else { //...else, we just need to go to the the previous frame. frmSequence = this.getFrameLabel((currentFrame - 1)); } } return frmSequence; }

Almost there! Just add this code to your switch statement and you’re done.

case backward_btn : frmLabel = this.getSequencedFrame(false); reak; case forward_btn : frmLabel = this.getSequencedFrame(true); break;

Congrats folks! You’ve just completed the hardest part of
jwright.info.

From here on out, let’s make each page its own section. That way it will be easier for you
to stop and pick up again later if need be.

The Home Page

First things first. Let’s spice up our Home page! Make sure that the following symbols go on the
Content layer of our Home page layer.

Create a new Text Box and type in JAMESWRIGHT or use your own name for kicks. Use Arial, 28pt font, and
letter spacing of 33. Now, convert this Text Box to a Movie Clip called NameMc. Also, while we’re there,
give it an Instance Name of name_mc.

You may use my logo if you’d like or your own–as long at it’s a Movie Clip with an instance name of logo_mc.
Drop it onto the Home page as well.

I also made a little footer called DetDriDetMc with an Instance Name of ddd_mc.

Here’s a look at our Home page.

Go ahead and test it out! You can debug like before, or hit Ctrl+Enter to run test mode.

Pretty cool, huh? Well it’s about to get better. Let’s add some fade transitions. Since we’re going to be
using the same transitions on multiple pages and other Movie Clips, we need to put the transition code
into its own class. Here’s how.

Select File–>New–>ActionScript File. Click Ok. Save the file in the same directory as your
Flash files named utils.Fader. Two things are crucial here. The location of the file and the naming of
the file. It must be in the same directory because this is how your AS code will reference this file. Also, the
name signifies the package (a.k.a namespace) to be used.

Add the following code to your new utils.Fader.as file.

package utils { //Import the needed packages. import fl.transitions.Transition; import fl.transitions.TransitionManager; import fl.transitions.Fade; import fl.transitions.easing.*; import flash.display.MovieClip; //Fader class definition. public class Fader { //This function will apply a "fade in" effect for any given Movie Clip. public static function fadeIn(mc:MovieClip):void { //Use the TransitionManager to fade in the movie clip. TransitionManager.start(mc, {type:Fade, direction:Transition.IN, duration:1, easing:Strong.easeIn}); } //This function will apply a "fade out" effect for any given Movie Clip. public static function fadeOut(mc:MovieClip):void { //Use the TransitionManager to fade in the movie clip. TransitionManager.start(mc, {type:Fade, direction:Transition.OUT, duration:1, easing:Strong.easeOut}); } } }

Click here to read more about the TransitionManager.

Now, go ahead and add this AS file to your Flash project as we did in the beginning of the tutorial.

Next, add this code to your main Actions layer. This will allow you to be able to use your Fader
class on the main timeline.

///////////////////////////////////////////////////////////////////// // Includes and Imports. ///////////////////////////////////////////////////////////////////// import utils.Fader;

To implement your Fader class, simply add these line of AS to your Actions layer for your Home page.

utils.Fader.fadeIn(logo_mc); utils.Fader.fadeIn(name_mc); utils.Fader.fadeIn(ddd_mc);

Great! Now you can test it and check out the cool fade effect! That’s all for the Home page!

The Profile Page

The first thing we need to do is create a new Movie Clip (Remember, you can do this from the Library panel). Then we want
to place a graphic on the MC that kinda looks like a tab from a tabbed document. Place the tab on its own layer called
Tab. Again, you can find this graphic and others in the package supplied with the tutorial.

Secondly, we need to create some buttons–just some simple buttons that tell our readers a little bit about us.
All you need to do is create a new button, as you’ve done before, and place some text in it. Nothing new here.
Here’s a little snapshot of one of my buttons.

You can create whatever you want here, but if you want to stick with me here, create a button for each Who, What,
When, Where, and Why section that looks like the following. These buttons should be placed in their own
layer, named Buttons.

Go ahead and give each button an Instance Name. For example, I named my WhoBtn button
whoCap_btn–since these buttons are like captions.

Now for some pretty cool effects! Let’s create some “popups” for each button we just made. To do so, first create
a new movie clip called WhoPopupMc. These are real simple to make. Essentially, all you need is two layers:
Text and Window.

On the Text layer, simply place the WhoBtn you just made from the Library. Then, on the Window
layer place a Rectangle, fill color #333333 and stroke color #FFFFFF, that is a little bigger than your button. You
will also need to create another little button used to close the popup. Feel free to make that button whatever
you like. I just used a little circle. Here’s a look!

Be sure to give your CloseBtn an Instance Name called close_btn.

Now that you know how to do that, create a “popup” for each button.

Once you have created all of your popups, place each popup on its own layer on your ProfileTabMc
symbol and assign Instance Names to your popups. Here’s what I ended up with.

Next, you’ll need to insert another layer called Actions to your ProfileTabMc symbol. On this layer
let’s add some AS event handlers for our buttons. Here they are to save you some time and typing.

///////////////////////////////////////////////////////////////////// // Event Setup. ///////////////////////////////////////////////////////////////////// whoCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whatCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whenCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whereCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whyCap_btn.addEventListener(MouseEvent.CLICK, showPopup); whoPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup); whatPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup); whenPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup); wherePup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup); whyPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup);

Before we define our event handler functions, we need to add some AS to help us control which popup is
currently showing. So, how do we do that? Again, nothing new here. We’re just going to write a simple
switch statement to set a variable called currentPopup.

All that’s going on here is we are determining which button was clicked and then setting a Movie Clip variable
to the popup we need to display. Here’s the code.

///////////////////////////////////////////////////////////////////// // Variables. ///////////////////////////////////////////////////////////////////// var currentPup:MovieClip = null; ///////////////////////////////////////////////////////////////////// // Helper Functions. ///////////////////////////////////////////////////////////////////// function setCurrentPopup(e:Event):void { //Set the current popup based on which caption was clicked. switch(e.target) { case whoCap_btn: currentPopup = whoPopup_mc; break; case whatCap_btn: currentPopup = whatPopup_mc; break; case whenCap_btn: currentPopup = whenPopup_mc; break; case whereCap_btn: currentPopup = wherePopup_mc; break; case whyCap_btn: currentPopup = whyPopup_mc; break; } }

Next, we need to define our event handler functions showPopup and closePopup.

I know I say this alot, but, this shouldn’t be too complicated. Just a couple basic event handlers. We’ll
also want to add some cool fading effects here as well, so we’re going to import the utils.Fader
class.

///////////////////////////////////////////////////////////////////// // Includes and Imports. ///////////////////////////////////////////////////////////////////// import utils.Fader; ///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function closePopup(Event:MouseEvent):void { //If the current popup has been set, fade it out. if(this.currentPopup != null) utils.Fader.fadeOut(currentPopup); } function showPopup(Event:MouseEvent):void { //Set the current popup. this.setCurrentPopup(Event); //If the current popup has been set, fade it in. if(this.currentPopup != null) utils.Fader.fadeIn(currentPopup); }

To see your changes, you’ll need to go back to the main timeline and add your new ProfileTabMc symbol
to your Content layer in the Profile page section. You can use the Free Transform tool (Q) to make
it fit to your stage accordingly if the size of your symbol isn’t just right.

You can preview you profile page now if you’d like (Ctrl+Enter).

You’ll probably notice that your popups start out being visible. To fix this issue let’s add some more AS to
the ProfileTabMc‘s Actions layer. This AS block will tell the popups to not be visible on startup.
After you add this code to your MC, test it out and see the cool effects!

///////////////////////////////////////////////////////////////////// // Startup. ///////////////////////////////////////////////////////////////////// whoPopup_mc.visible = false; whatPopup_mc.visible = false; whenPopup_mc.visible = false; wherePopup_mc.visible = false; whyPopup_mc.visible = false;

You like? Cool. Well, only one more tweak before we move on to the next page. If you notice, when you click any
of your buttons, the corresponding popup displays. That’s what it should do; however, even after a popup displays
you can still click another button. This is not a desired behavior. Let’s come up with a way to stop this. Here’s
what I have.

My proposal is to make a layer that will cover up the other buttons while a popup is being displayed. So, go back
into your ProfileTabMc symbol and copy the tab–just the tab part, not the buttons. Next, paste that tab into
a new symbol. Call it TabCoverMc. One small touch, change the graphic’s Alpha property to 80% in fill color
picker.

After you create that symbol, drag it into your ProfileTabMc symbol on a new laber called TabCover. Be
sure that the layer is above the Buttons layer and below the Popups layer. Here’s the result.

Now you can give the TabCoverMc symbol an Instance Name of tabCover_mc. We also want this symbol
to be hidden on startup. So, let’s hide it just like our caption buttons.

tabCover_mc.visible = false;

When the user clicks a caption button to see a popup, we can now cover up the other buttons with the new TabCoverMc
symbol in our showPopup and closePopup functions. Here are the modified functions.

///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function closePopup(Event:MouseEvent):void { //Fade out the tab cover. utils.Fader.fadeOut(tabCover_mc); //If the current popup has been set, fade it out. if(this.currentPopup != null) utils.Fader.fadeOut(currentPopup); } function showPopup(Event:MouseEvent):void { //Set the current popup. this.setCurrentPopup(Event); //Fade in the tab cover. utils.Fader.fadeIn(tabCover_mc); //If the current popup has been set, fade it in. if(this.currentPopup != null) utils.Fader.fadeIn(currentPopup); }

To finish off this section, add a fade effect to the ProfileMc symbol in your Actions layer. This
will fade in your ProfileMc symbol when the page is displayed.

Take a look at the Profile page now. It’s a beauty! Great job!

The Résumé Page

The Résumé page won’t take long at all. First create a new Movie Clip call ResumeMc.
Inside of the MC, you’ll need to either copy and paste my résumé or use your own. One little thing,
make sure to check the Check Box marked Export for ActionScript.

Well that was simple enough. Now, let’s use it. Next you’ll need to create another Movie Clip called
ResumeScollerMc. Inside of this MC you’ll need a ScrollPane from the Components panel. You
can find that under Window–>Components (or Ctrl+F7). Once you locate the ScrollPane, drag one
onto your ResumeScrollPaneMc.

This is a really neat control. Since our résumé is too long to fit on splashy, the ScrollPane component will
scroll our ResumeMc symbol up and down. All we need to do is to set a couple of the ScrollPane’s
parameters to tell it which MC we want it to scroll.

To view the ScrollPane’s parameters, select Window–>Properties–>Parameters. Then select your ScrollPane
and you should see its parameters listed on the Parameters panel.

The only parameter you should need to set is the source parameter. Set that to the symbol we want to
scroll–ResumeMc. This is the reason you needed to check Export for ActionScript when making the
ResumeMc symbol. In a nutshell, since we’re not adding this directly to our stage, the AS compiler needs
to know what MC to scroll.

You may now drag the ResumeScrollerMc onto the main timeline on the Content layer of the Resume
page. Also, add a fade effect to the ResumeScrollerMc symbol in your Actions layer. You can do this
the same exact way you did the ProfileMc symbol’s fade effect.

More than likely, you’re going to notice that your scrollbar does not look like mine. If that’s the case, you can
actually edit the ScrollPane component–just like a Movie Clip. Pretty awesome, huh?! Just locate the ScrollPane
in your Library (probably under Component Assets), right click, and choose Edit.

You should see something like the following. Double click the ScrollBar Skins symbol.

Now, you can edit any of the skins you see before you. Here’s what mine look like after I’ve tweaked them.

That’s it for the Resume page! On to the Contact page.

The Contact Page

The Contact page really does not need much explanation. You’ve already done this multiple times.

But, just for kicks, here you go. All you need to do is create a new Movie Clip called ContactMc
that contains your contact information. Simple stuff really. Then you can give it an Instance Name
and use the utils.Fader class to fade in the MC when the Contact page’s frame is hit.

That’s it!

The Portfolio Page

My Portfolio page definitely needs some work. But we’ll walk through what we have anyway. It’s
basically just using two buttons that will open a new window.

All I did to create my buttons was take a screen shot of a couple websites I’ve been working on. Then I imported
them into my Library and dropped them on a button. Then, on the Over frame of the button, I made the
image a little bigger and added a caption at the bottom. Here’s the first button for reference.

After you create your two buttons, simply drop them onto your main stage.

Next you can add a little heading if you’d like.

Select your three items–the heading and the two buttons. Next, hit F8 and convert those
three things into one Movie Clip so we will be able to add our fade effect. I called my new MC PortfolioMc.

We’re almost done! Let’s add a little bit of AS to open up a new browser window when a button is clicked. Double click
your PortfolioMc symbol to take it into Edit mode. Next, add a new layer called Actions. In that layer
paste the following code.

css_btn.addEventListener(MouseEvent.CLICK, cssClicked); mlt_btn.addEventListener(MouseEvent.CLICK, mltClicked); function cssClicked(event:MouseEvent):void { //Create a new URL request. var url:URLRequest = new URLRequest("http://www.clixsoftwaresolutions.com/"); //Open up the URL in a new window. navigateToURL(url, "_blank"); } function mltClicked(event:MouseEvent):void { //Create a new URL request. var url:URLRequest = new URLRequest("http://www.mylooptracker.com/"); //Open up the URL in a new window. navigateToURL(url, "_blank"); }

I know what you’re thinking. Yes, we could’ve used another switch statement, but for just two buttons
I opted to just use two functions. Good catch though!

Finally, just add your utils.Fade.fadeIn(portfolio_mc) function call into the Portfolio pages’s
Action layer on the main timeline, and you’re done!

Note: If you debug your movie now and try to click one of your buttons on the Portfolio page, you will
probably see the following warning. No worries, it’s supposed to do that. If you test your movie (Ctrl+Enter) or
deploy your movie–it should work like a charm!

The Respect Page

Ahhhhhh, at last. The final page. Well, in my opinion, I’ve saved the best for last. I love this little scroller,
and the best part is that it’s not too hard to achieve this awesome effect.

Start out by making a new Movie Clip called RespectStageMc. On the first layer in our MC we want to introduce
something new to jwright.info–masking. You’ll see the power of masking real soon.

Secondly, place a rectangle centered on the page on a layer called Scroll Area. Set its fill color to #999999
with no stroke. Don’t worry about size quite yet. Next, go back to your main timeline and add the MC to the Content
layer on your Respect page.

Now, you can go back into your MC and adjust the size of your rectangle to be the exact width of splashy.
(Remember him?) Make sure that your MC is centered with your navigational arrow buttons before you resize anything.

Let’s add a little more to our MC. Let’s place a darker rectangle (#333333) above and below our Scroll Area layer.

Next, add a heading.

On to the thumbnails! Again, feel free to use the thumbnail buttons I’ve already made, or you can make your own. The concept
is pretty much like what you did on the Portfolio page–just a little smaller. Here’s what one of mine looks like.

After you get all of your thumbnails made, place them all centered, and spaced evenly, on a single layer called
Thumbs in your MC.

Next, you’ll need to go back into that MC and paste this code. No real need to explain here. We’re just popping up a new
browser window and loading the site that was clicked.

///////////////////////////////////////////////////////////////////// // Includes and Imports. ///////////////////////////////////////////////////////////////////// import flash.net.navigateToURL; import flash.net.URLRequest; ///////////////////////////////////////////////////////////////////// // Event Setup. ///////////////////////////////////////////////////////////////////// advanced_btn.addEventListener(MouseEvent.CLICK, gotoSite); henz_btn.addEventListener(MouseEvent.CLICK, gotoSite); kalou_btn.addEventListener(MouseEvent.CLICK, gotoSite); studio_btn.addEventListener(MouseEvent.CLICK, gotoSite); crystal_btn.addEventListener(MouseEvent.CLICK, gotoSite); deepBlue_btn.addEventListener(MouseEvent.CLICK, gotoSite); wolf_btn.addEventListener(MouseEvent.CLICK, gotoSite); freedom_btn.addEventListener(MouseEvent.CLICK, gotoSite); ///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function gotoSite(Event:MouseEvent):void { var url:URLRequest = null; switch (Event.target) { case advanced_btn : url = new URLRequest("http://www.2advanced.com/"); break; case henz_btn : url = new URLRequest("http://www.henzstudio.com/"); break; case kalou_btn : url = new URLRequest("http://www.kalou.ch/fr/"); break; case studio_btn : url = new URLRequest("http://www.studiopiro.com/index2.htm"); break; case crystal_btn : url = new URLRequest("http://www.crystalmedia.co.yu/"); break; case deepBlue_btn : url = new URLRequest("http://www.deepblue.com/"); break; case wolf_btn : url = new URLRequest("http://www.wolfpeak.net/"); break; case freedom_btn : url = new URLRequest("http://www.freedomoftheseas.com/"); break; } if (url != null) { navigateToURL(url, "_blank"); } }

After you’ve done that, select all of your thumbs and convert them into one single Movie Clip called ThumbsScrollerMc.
You’ll see why in just a minute.

As you can see right now, the thumbnails are running off of the stage to the left. If you test your movie you’ll
see them there as well. This is not what we want. We want the thumbnails to disappear as they move off of splashy.

To achieve this effect we need to use a technique called Masking. To mask the thumbnails, insert a new layer
above your Thumbs layer called Scroll Mask. Right click on the new layer and select Mask.

On this layer you’ll need to create a rectangle the same exact size as the one on your Scroll Area layer. May I suggest that
you just copy and paste-in-place that rectangle from the Scroll Area layer. You will need to change its
fill color alpha value to 10%. This is just so you can see what’s behind the mask.

If you test your movie now, you’ll notice how the only thumbnails that display are the ones that are directly behind the mask.

Now, the cool part. To be able to scroll left and right, you’ll need a left and right arrow. I just used the arrow buttons
we used on our main timeline and placed them on a new layer. I also added a little white border around the arrows.

Here’s the code you’ll need to scroll your ThumbScrollerMc named thumbs_mc.

///////////////////////////////////////////////////////////////////// // Includes and Imports. ///////////////////////////////////////////////////////////////////// import fl.transitions.Tween; import fl.transitions.easing.Regular; ///////////////////////////////////////////////////////////////////// // Event Setup. ///////////////////////////////////////////////////////////////////// left_btn.addEventListener(MouseEvent.CLICK, scrollLeft) right_btn.addEventListener(MouseEvent.CLICK, scrollRight) ///////////////////////////////////////////////////////////////////// // Event Handlers. ///////////////////////////////////////////////////////////////////// function scrollLeft(Event:MouseEvent):void { //Shift the MC left 150 units. var myTween:Tween = new Tween(thumbs_mc, "x", Regular.easeOut, thumbs_mc.x, (thumbs_mc.x - 150), 1, true); } function scrollRight(Event:MouseEvent):void { //Shift the MC right 150 units. var myTween:Tween = new Tween(thumbs_mc, "x", Regular.easeOut, thumbs_mc.x, (thumbs_mc.x + 150), 1, true); }

Essentiall, we are just shifting the ThumbsScrollerMc left and right when the user clicks an
arrow button. Test it out!

The only thing left to do is to add the fade in effect on the main timeline for the RespectStageMc
symbol. Great work!

Conclusion

Well congrats fellow Flashians! You now know how to create flash websites and have successfully completed the entire
jwright.info website!

Feel free to also look at the HTML file included in the package to see how the .swf file is displayed in the
browser.

I know this tutorial was a little long–maybe the longest you’ve ever done. But the content covered in this
walk through should give you a great foundation for developing your own Flash site. Keep up the good work! By the way, if you feel like this is too much work, you can create a free professional flash website with Wix.

Note: If you are very new to photoshop or web design you may have some trouble with this tutorial. Here is the end result: Start by making a new canvas around 950×950 pixels. Fill it with light gray. Select the top with the Rectangular marquee tool and fill it with a darker grey like so: On the dark gray layer go to Layer- Layer Style- Gradient Overlay and use a gradient like this: Now select the pencil tool and a 1px brush. Make a line above the light gray layer. To keep it straight you can hold shift. Make a new Layer and select the Rectangular Marquee Tool and make a selection like below. Now select the Gradient Tool. If you can’t see it right click on the Paint Bucket Tool and it should appear. Select the 2nd gradient option and make sure that the foreground color is white. Hit OK then drag your mouse down like below: Here we have the result quite nice no? I feel the white is abit strong so i lowered the opacity a little bit. Make a new layer and select the Pencil Tool again with a 1px brush. Draw a white line like below: This gives it a cool kinda “ingraved” effect. Off to the navigation! Select the Rounded Marquee Tool with a radius of 5 and make a selection like below: Fill it with white and it should look something like this: Cut of the lower part of the button with the Rectangular Marquee Tool. Make the color of the button just a bit darker so it doesn’t stand out too much. Go to Select- Load Selection then go to Select-Modify-Contract and select 2px. Then Select the Gradient Tool again and now make sure the foreground color is black. Drag down just like before. Should look something like this? Getting better right? Lower the opacity of the gradient layer to suit your taste. Now make a new group called button. Click on the layers while having ctrl pressed down. Now click and drag them into the button folder. Now go to Layer- Duplicate group and move all the buttons around the way you like. I decided I am going to modify one of the buttons and make it a rollover button. Click the button group you want to edit and select the FIRST layer in that group. Go to Layer-Layer Style-Color Overlay and pick an orange color. Slap some text in thoose babies and no way…it’s starting to look like a navigation! Select a dark gray color for the text. It should look something like this now… Make a new layer and using the Rectangular Marque Tool make a black shape like below. Select the FIRST layer in the rollover button group and go to Select- Load Selection. Using the Gradient Tool set on white to transparent make a gradient. Set the layer Blending Mode to overlay to give it a more orangish color. I’ve also just putt in some text. Select the text layer and go to Select- Load selection and move the selection up by about 1-2 pixels. Select the Gradient Tool and on a new layer drag up. Set the layer to overlay. Here’s the result: I have duplicated the gradient layer to give it a stronger transition from yellow to orange. Select the text layer again and go to Select- Load Selection and move it up by 1-2 pixels. Now select the Gradient Tool, but we won’t use from white to transparent now we will use black to transparent. Drag it up on a new layer and it should look like something below: Select the Rectangular Marquee Tool and erase the webdesign black gradient part, since we only want the black gradient layer to be on the “dev” text. Looks quite good, no? Now just slap in the url font tahoma size 11 and no AA. Make a selection with the Polygonal Lasso Tool like so: Select the brush tool around 70px it has to be a soft brush! and brush the inside of the selection Erase any neccesary bits and it sohuld look like this: Duplicate the layer and move it around a bit… Duplicate it again and move it around… Erase any bits that stick over the navigation or over the banner part… Move the 3brushed layers below the text layer so it doesn’t cover the text. Select the Rounded Marquee Tool with a radius around 3-5px, make a selection and fill it with a dark gray color. With the Polygonal Lasso Tool make an arrow shape so the whole part looks like a bubble. Go to Layer-Layer Style-Stroke and stroke it with a 1px light gray color Just some text again, went with a bit more playful font Going to start the work on the content now. Select the Rounded Marquee Tool with the same radius as before and make a light gray box. Make an arrow like shape again with the Polygonal Lasso Tool. Go to Layer-Layer Style-Stroke and use the settings below: Duplicate the box layer and move it up and fill it with a dark gray color. Should look something like this: Go to Select-Load Selection and move the selection down by 1px. Select the Gradient Tool and make sure you’re foreground color is white then drag it down just like before. Should look something like this…its slowly getting there, huh? I move the gradient layer by 1pixel to the right. Now cutt it in the middle like so using the Rectangular Marquee Tool Duplicate it and go to Layer-Transform-Flip Horizontal. Now cutt the “highlighted” part of the gradient using the Rectangular Marquee TOol and now the gradient should be simetrical Move the gradient layer and the dark gray layer below so the top of the light gray layer box sticks out on the top by about 2px.Also move these layers above the light gray box. Now using the Rectangular Marquee Tool cut the remaining dark gray layer. Now select the light gray box and go to Layer-Layer Style-Outer glow and use these settings Slap some text in it Make a new layer and use the 1px brush with the Pencil Tool and make a line like below Decrease the opacity of the layer to whatever you think looks good Some more content text nothing special… Nove move the whole box area above close to the banner.
Duplicate the whole box area. I suggest you putt these layers in a Group and then duplicate the group( Layer- Duplicate Group) and move the layers down Now on the second layer hide the outerglow effect and the stroke effect on the light gray layer by clicking the eye in the layers box
Duplicate that layer and move it down to make the whole box bigger. Now merge the 2layers and turn on the outer glow and stroke effect. VOILA our box is bigger Some more text to not make it so empty. Make a new layer on the right side with the Rectangular Marquee Tool and fill it with dark gray. Go to File-New and make a new canvas 30×30 pixels. We’re going to make a sweet pattern. Make a shape like below with the Polygonal Lasso Tool. Then go to Edit- Define Pattern Now back to out design psd. Make a selection with the Rectangular Marquee TOol and go to Edit-Fill and select Pattern. Find out pattern that we made and hit ok. Decided to remove the brush detail we made in the banner, because it just wasn’t working…. Decided a Light gray color would fit nicer. Repeat the same step on the right side of the navigation Back to our content boxes…. Select the Brush Tool and use a soft brush around 100 pixels with black color. Brush the right side of the bar then cut of the unneccessary parts with the Rectangular Marquee Tool. Go to Layer-Transform-Flip horizontal. Make sure this new layer is below the text layer so it doesn’t cover it up.Set it to overlay and play with the opacity. Then move it down to the second box so they are identical. Went for a bit of personal detail with the lamp in the webdesigndev text…made the icon myself a while ago. These kind of things make your design special. I’ve darkened the whole background to make the content boxes pop. Select the light gray layer of the content box and select the Gradient Tool from white to transparent. drag it up from the arrow towards the text. Should look just slightly modified. Ive duplicated the white gradient we did a couple of times to make the effect stronger. Now make a selection with the Rectangular Marquee Tool like shown below and with the Gradient Tool drag it from your mouse down to the text. Your box should look like this Duplicate all these effects and apply them to the second box Decided to stick a picture in the second box to make the design abit less dull Now we start working on the right column…using the Rounded Marquee Tool make a shape like below Decrease the opacity to suit your needs. Make another shape using the Rounded Marquee Tool and go to Layer-Layer Style-Gradient Overlay and use these settings Now go to Stroke and use these settings: Duplicate the first bar layer and move it 1px up.Go to the first BAR layer and go to Select-Load Selection then select the duplicated layer and hit delete. Now move the duplicated layer down abite and go to Layer-Layer Style-Color overlay to make it a light gray color. This makes the box pop out. Make another shape with the Rounded Marquee Tool this will be for our text in the right column. Fill it with a darker gray color so it looks kind of ingraved Duplicate the layer and move it 1px down. Now go to the original layer and go to Layer-Layer Style-Color Overlay and use a light gray color so a tiny gray stroke should appear only at the bottom of the box. Decrease the opacity abit so it doesn’t stand out too much. Slap some text in the box… Duplicate the whole box and move it down. Decided to give it abit more and made a doted line on the side of the column. This isn’t hard to do just takes alot of time. Go to the first banner layer and go to Layer- Layer Style-Gradient Overlay and use these settings: Wow its starting to look like a good design now! Starting on the footer area. Made a selection with the Rounded Marquee Tool and filled it with our pattern. Then go to Edit-Transform-Flip vertical. A light gray color to match the banner pattern color. Now just below the pattern layer make a new layer and fill it with the same color the main content is filled with. Starting to putt some text in it. Copyright is very important because you never know when your work might get stolen. Some personal touches to the content area. Using the Rounded Marquee Tool. Nothing we didn’t learn by now. Filled it with some actual content about webdesign dev and Michael Dunlop. And here it is. If you managed to finish this tutorial I’m sure you can become a great webdesigner. By the way, if you feel frustrated with designing, or just want an easy way out, you can always create a free website with Wix. Remember every photoshop tool even the most basic ones can be great when used right.

This is the finished result:

Ok, here we go. Make a new canvas around 900×900 pixels. Fill it with this color:

Now select the Brush Tool with opacity around 60% and flow around 40. Start laying down the basic shape of your part.

My result:

Don’t worry about how its not smooth at this stage yet. Its just to get an idea how your result will look like.

At this stage i cleaned up the outer shape of our interface. You can do this with the Eraser Tool (if you have a wacom it helps alot)

or you can do it with the Pen Tool, but make sure you select 0 feather and tick anti alias to give it smooth edges.

As you see the outer edges are cleaned up now.

Now select the Smudge Tool with a round hardbrush
and strenght around 20%. Start smudging the interface.

Try not to smudge on the edges, becouse it will give them a blurry look. My result:

At this stage i cleaned up the inset. I just used Polygonal Lasso Tool and gave it some depth with a black brush.

Duplicate the inset bit and move it above and to the right. Decrease the opacity of the layer to suit your taste.

My result:

Now erase the parts that go out of the first inset that we created. You do this by selecting the first inset (select-load selection)

then select the second inset layer and go to select-inverse then just hit delete.

My result:

I selected the Dodge Tool with 3px airbrush. Started making strokes at the corners of our inset. Make sure your strokes are even, if not

you can also smudge them abit. Just experiment.

Made a 3px airbrush highlight of our gray interface part. You have to make sure it flows with the interface part your working on.

I duplicated all the layer we had now and moved them right above the background layer. Then i used the Move Tool to position

them under the top interface part.

Ok now i selected both of the gray bits layers and then go to image-adjustments-brightness and contrast.

Play with the settings. It varies alot, just experiment till you come out with something good.

Now duplicate the whole inset of the top interface part. And move with the Move Tool like shown below:

Do the same step all over.

Now select the Pen tool and add an anchor point to make a slight curve to your selection. Right click-Make Selection.

This is a screenshot on how i did it:

This is my result:

Now duplicate the inset once again and move it just a little above the rest.

Now decrease the opacity of the layer to around 20% so that it gives a look like its ingraved.. My result:

Now duplicate all the parts we have till now and to go Edit-Transform-Flip horizontal. Then use the Move Tool to position the part correctly.

Select the Brush Tool with opacitiy 60% and flow 40% this is when i started laying down the basic content shape.

I cut off a part with the Polygonal Lasso Tool. Just to make the shape flow better. Don’t worry about the parts not being simetrical yet.

Now make a selection with the Rounder Marque Tool with radious around 30px.

Now select the Polygonal Lasso Tool and make sure you click the square like i shown below. It will cutt off a part of the selection.

This is what you should’ve had if you made everything good.

Filled the selection with a very very dark gray color.

Used Polygonal Lasso Tool to make a feel like its ingraved into the template. Erase the bits you don’t need with the Pen Tool.

Okay, you can also do this step with the burn tool if its better for you but i like the brush tool better. Select a dark gray color and brush around the edges

of the interface like so.

Select the Dodge Tool again with a 3px airbrush. Brush around the corners of the ingraved bit. Like so:

Duplicate the highlights to the other side. My result:

Adjusted the Brightness and Contrast and made the ingraved bit slightly darker.

Cleaned the shape up with the Polygonal Lasso Tool becouse the highlights looked really messy.

My result:

Select the Rounded Marque Tool with radius around 30 px and fill it with any color (doesn’t matter, becouse we will give it a gradient).

Now go to Layer-Layer Style-Gradient overlay. And use a gradient like this.

Hit OK.

Duplicate the layer. Go to Select-Load Selection. Then go to Select-Modify-Contract and select around 5 pixels.

Then go to Select-Inverse and hit delete.

Go to Gradient Overlay again and use a gradient like this:

Then select Inner Glow and use these options:

This is my result after all the above effects that we did.

Now insert some text to the banner area and go to Gradient Overlay again. This time use something like this:

This is how my text looks. I tried to gave it a kinda chrome feel.

I changed the font size. You do this by simply clicking on the text and choosing a bigger size.

Then we
make a reflection with a blue color and cutt off the unneded parts. I used an ordinary hard brush.

Use the same technique on the other side and on the bottom. You can also try and experiment with diffirent blending modes of the template.

I added a blue outer glow to the banner area. Just experiment with the options and see what you can come up with. Its nothing hard.

Started making the navigation and used the Rounded Marque Tool to give it a slightly rounded feel.

Now go to Layer-Layer Style-Gradient Overlay and use these settings on every button.

Or you can make 1 button and then just duplicate it, it will also duplicate the effects of the layer.

This is my result after the gradient overlay:

Inserted some text. The font is visitor it works really good with small sizes.

I cutt out the parts of the navigation that were looking out of the ingraved part. You can make the selection with the Pen Tool

or you can just use Eraser Tool like i said before.

Started laying down the basic shape of the “tube like thingy”. Use Brush Tool with around 40 opacity and 40 flow.

Select the smudge tool at around 20% strenght and start smudging your shape. I also gave it more contrast. Go to

Image-Adjustments-Brightness and Contrast and select aronud 20 contrast.

Cleaned up the shape using the Pen Tool. Make sure you tick anti-alias or you will have choppy edges.

Now make a black circle with the Pen Tool. This really gives it a touched up feel plus more contrast to the template.

Cleaned up the shape abit more and gave it a bigger curve.

Go to Image-Adjustments-Brightness and Contrast and increase the brightness just abit to make it fit the rest of the template.

Now we are going to make a big vent. Start by making a shape with the Polygonal Lasso Tool like so:

Select the Eraser Tool with a big airbrush. Start erasing parts around the edge of the shape.

This may take some tries to get it right.

My result:

Now duplicate that layer 4 times and move each of them down abit. This is my result, pretty nice huh?

At this step i duplicated the tube thingy and went to Edit-Transform-Flip Horizontal and moved it to the other side.

I noticed that the blue banner didnt quite fit the rest of the shape. So I selected the layer and went to Edit-Transform-Distort and

moved the corners abit more to each side so that it flows better.

I selected the vent layer and deleted it so taht it leaves a tiny stripe and gives it a better look in my opinion.

Now duplicate the tube thingies and move them like so. If they cover the part where the navigatino is, use the Pen Tool to cutt that part off.

At this stage i meant one more vent. Its the same technique so i won’t explain this step again.

Select the Dodge Tool with a 40px airbrush and lightly brush under the banner.

I also cleaned up the shape for the content with the Pen Tool.

I duplicated the 4 parts as you can see then go to Edit-Transform-Flip vertical and use the Move Tool to move them to the bottom of the template.

Select the Rounded Marque Tool and radius around 30px and make a selection for the content box.

Fill it with a dark gray color. My result:

Now make sure your selection is still opened, if not go to Select-Load Selection. Then go to Select-Modify-Contract and select 3pixels.

Then go to Image-Adjustments-Levels and make make the content box darker.

Now select the Single Row Marque Tool and make a selection like this. You have to select the Black inset layer that we made at the beginning of the tutorial.

Now go to Edit-Copy. Make a new layer and go to Edit-Paste. Then go to Edit-Transform-Scale and drag it down this should give you something

like below.

Now clean the shape up using the Pen Tool. This is my result:

Now do the same on the other side so it doesn’t touch the content box.

My result:

Now duplicate the layer and go to Filter-Pixelate-Fragment. Play around with the layer Blending Modes.

Now select the whole part and go to Select-Load Selection. Next go to Select-Modify-Expand and select 3 pixels. Now select the layer that we just roughly

brushed out before (the big gray part) and go to Image-Adjustments-Levels and darken it abit. My result:

Then go to Select-Modify-Contrast and select 3px. Now select the Burn Tool and a big airbrush and burn around the edges of

the content box.

Now select the big gray layer again. Make sure you dont have any selections opened. Select the Dodge Tool with a 40px airbrush

and dodge around some parts like this:

Cleaned up some shadows here and there with the Pen Tool to give it much more flow.

Select the Brush Tool and a blue color. With a 10px airbrush just click once to make a glowing dot. Duplicate it and use the Move Tool to position it.

Duplicated the bits that we created to make things simetrical.

Now select the Pen Tool and make a shape like this so that it flows with the vent that we created.

I used the burn and dodge tool to make a bar that is shown below. Just use a round airbrush and see what you can come up with.

Insert some text. I used verdana size 11 on bold.

Now we are going to start working on our footer.

Make a shape with the Pen Tool and duplicate it on the other side.

This is the shape i will go with:

Make a new layer and select the Burn Tool. now with a hard brush at around 20 opacity and 60 flow try to make something like below.

This will really give it that 3D kick that we are going for.

Now select the Dodge Tool with a 2px airbrush. Make a highlight at the edge of the ingraved bit.

My result:

Duplicate the part that we have and move it to the other side.

Select the brush tool opacity 40% and flow 40% and start developing the shadows and highlights. Don’t worry about it being clean just yet.

Now bring out the Smudge Tool at around 20% strenght. Start smothing the shadows.

I decreased the opacity of the layer and cleaned out the unnecesary parts with the Pen Tool.

Duplicate the layer and go to Edit-Transform-Flip Horizontal and move it to the other side. This is my result:

Make 2 shapes like below. I used Pen Tool and to fade the start of the part in i used Eraser Tool with a 40px airbrush.

Continue making shapes to give it an ingraved feel. My result:

Make 2 highlights with the Dodge Tool and a 2px airbrush.

Started developing the shapes abit more. Just used the Brush Tool at 60% opacity and 40% flow

Cleaned up the shape and i used the Dodge Tool to highlight the edges. My image so far:

Now make 2 tiny highlights like we made before. Select the Brush Tool and just click. Then duplicate the layer and use the Move Tool to move it to the

other side.

Select the Brush Tool and a 20px airbrush. I am gonna make some selections for the footer that we made. You can also play with the

Blending Mode of the layer at this stage, but i didn’t.

Use the Brush Tool and an airbrush to give the template some more eye-candy. This step is basicly optional, but i really like to

give it some extra feeling. You could also make some smoke or lasers or such. Just play around and you can come up with something

really cool.

Duplicate the layer and use the Move Tool to position it. Then go to Edit-Transform-Flip Horizontal and move it to the other side of

the template.

Insert some text. I putt in “PS” becouse the site name is PhotoshopSpot.com. Just give it a blue outer glow and hit ok.

My result:

Now select the banner text layer and duplicate it. Go to Filter-Blur-Motion Blur and select around 100. Make sure your angle is horizontal.

Set the layer to overlay or color dodge (it depends on your taste).

Putt in some dummy text. I used verdana size 11 on bold.

Now make a new layer and select a slightly darker gray. Just fill a part in the content box like i did.

Now we are going to make the whole template ingraved in. Select the Brush Tool with a big airbrush and brush around the corners with a darker

color then in the background.

My result:

Clean the drop shadow up with the Pen Tool.

My result:

I decided it didn’t look quite right. So i gave the drop shadow all around the template. It looks alot better then before.

Duplicate the drop shadow and go to Edit-Transform-Flip Horizontal and use the Move Tool to position it correclty.

This is the last 100 step!

Duplicate all of the layer and go to Layer-Merge Layers. Now go to Filter-Scetch-Chrome and play with the settings. It depends on

which color and how much contrast your template has. Set the layer to soft light and use the Eraser Tool to remove the unneded parts.

If you have finished the tutorial i have to congratulate you becouse not many people have the patience to follow 100 images.

Hope you learned something.

Well, for this tutorial we’ll be recreating a simple and professional website design, a business-themed website template, to be exact!

1. Document & Background

Obviously the first thing we’ll want to do is create a new document in Photoshop! I used a standard document size of 1000 x 900 pixels, but we won’t be using the entire size of the document. Now we want to make a nice, suitable background for the design.

Start with the background by filling the canvas with a dark-ish grey-blue color (or any color you like). For this I used #4c535b. Next, we need to find a simple pattern we can blend into the background. For this you can find some nice patterns over at SquidFingers. Fill a new layer with your chosen pattern then erase away the pattern except for one corner:

Next, lower the opacity for your pattern layer to around 10-20% and change the layer mode if you want something more unique. For the layer mode I usd Luminosity.

That’s a pretty neat effect right there! That’s all we’ll be doing for the background, unless you have a good idea for something more.

2. Navigation Bar

For the navigation area, find and get out the Rounded Rectangle Tool and set the settings for the tool like I’ve shown here:

OK, after you’ve got the settings, draw a rounded rectangle onto the canvas (after you’ve made a new layer). Now cut the bottom part of your rounded rectangle off, so it has a flat surface on the bottom.

Please note: it doesn’t matter what color you used for the navigation bar shape. Next, apply the following layer modes to your newly-made layer:

• Inner Shadow
• Gradient Overlay

And now we have a result like this:

I finished off with the navigation bar effects by adding a slight hightlight to the top of the bar (use one pixel) and also a shine kind of thing at the bottom of the bar.

If you’re unable to add these, don’t worry about them, they’re not important. Lastly for the navigation bar we need to add text! Start by getting the text tool and writing out your navigation buttons using the font you like.

You’ll want to make plenty of space between each of your links, so that there’s room for a nice divider. You may also want to apply a Drop Shadow to the text to make it stand out a little bit more.

To finish this part of the tutorial off we’ll add some simple dividers inbetween our links. Start by getting out the Pencil Tool and making a new layer. Using the smallest brush available (1 px) brush a few dots onto the canvas, like I’ve done here:

Duplicate your divider and move it along so it’s inbetween the other links. Do this as many times as it takes then merge them all together. To finish off, apply a simple Drop Shadow to the now-single dividers layer.

3. Base Area

Now this is a really easy part. All you have to do is create another rounded rectangle shape underneath your navigation layers. What you have to do though is hide the top part of your ‘base’ shape underneath the navigation bar, otherwise delete the top part. Like this:

Very easy! Finish off by adding your copyright notice underneath.

The perfect font for this is ‘Arial’ and it comes with Windows. Use a size of 11 pt, all caps.

4. Header / Banner

Find a nice stock photo from a website such as iStockPhoto for the banner image.

Copy your stock photo onto the canvas and crop it to the width of your ‘base’ layer. After you’ve resized it and cropped it (something around 130 pixels in height will do) you might want to make some adjustments to the picture, possibly to make it stand out better.

To finish off with the header, add some text/a logo that you may want to come up with! I just used some basic text for the business name and slogan beneath it:

To make your text stand out better on a photo better you may want to add an outer glow using a dark color from the background. The two fonts that you can see in the above image are NeoSans, and Myriad Pro.

5. Content Area

Alright, we need to add some text and maybe some interesting images inside of the content area, this is to explain ‘what we do’ and some other stuff. Start by making a heading with the text tool.

Alright, add some dummy text below the heading, then a stock photo if you think it will look good!

Obviously, since this is just a dummy text, I’ve added in some random text *cough*

6. Client Login

Every web host website should have a client login area, if not a link that leads to the client login area. Start by getting the Rounded Rectangle Tool out and make a shape onto your canvas, around 220 x 105 pixels is a good size.

The color isn’t particularly important, but use a dark grey for it. Change the fill for this layer to 10%, then apply the following layer styles:

• Gradient Overlay
• Stroke

Add the necesary text and all that, including some boxes that you’re meant to put the text in, and this is what I’ve got:

Obviously it would take me a while to explain every detail about adding all of that stuff, so please download the PSD at the end of the tutorial and you can see all of the layers!

7. Special Deal Button

Just for a nice touch we’ll add in a button to the sidebar that will state what sort of hosting deals are going on. Start by making another rounded rectangle, or duplicate the one you used previously.

As you might observe, the shape also has a dark gradient inside of it, the colors used were #3f3f3f and #292929. Now add in some text for your banner.

As you can see, the font used in the above image is Myriad Pro, various weights & sizes. Mess around with some different fonts and sizes and you’ll get something nice.

I thought it was still a little boring, so I added in a few extras:

1. Add in a dark star shape, lower the opacity to blend it into the main shape
2. Add a nice highlight to the top of the rectangle shape
3. Finish off by adding another dark gradient to the bottom of the shape

8. Testimonials

What site would be complete without testimonials? Let’s start by making another rounded rectangle in the sidebar area, use the color #c3c3c3 for making this shape.

After you’ve made the shape, copy the layer style from the client login box and paste it onto your new box.

Now, using Arial as your primary font, add in some random filler text, and a name underneath, like so:

Now duplicate all of your testimonial layers and move them down a little bit so you have two.

Complete

Well, we’re done for this tutorial! I hope you enjoyed it, if you have any questions please feel free to leave a comment below, but be sure you’ve checked out the PSD file before you ask a question!