101

Creating a Flash Portfolio Website

flashportfolio
Share!

Learn How to Create a Portfolio Website Using Adobe Flash

To take a quick peek at what you’ll be creating: 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 website with Wix that will look very professional and allow you total customization (I strongly suggest you check this out before reading the tutorial). 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 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! And don’t forget, if you feel like this is too much work, you can create a free professional website with Wix.

Get Free Email Updates!

Sign up now and receive an email when we publish new content.

We will never give away, trade or sell your email address. You can unsubscribe at any time.

About the Author

Iggy Ko

Facebook Twitter Google+

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

Iggy KoCreating a Flash Portfolio Website

Comments 101

  1. Scott

    Nice, length isn’t a problem if the detail is good, and this will no doubt go a long way to helping people.

  2. Bams

    Thanks so much for this step by step amazing tutorial. I’ve never seen one so detailed and so interesting.

    I just have one question : why the hell are you using so weird dimensions like 885.15 px x 578 px ??!!! (instead of standard 640*480 or 1024*768)

    Thanks again and goodbye !

  3. Luffy

    Thanks, i really enjoy doing it step by step… ^_^ now i can explore from what i learned.

    God bless always!

  4. James

    Great tutorial. Is there source files as I’m having troble at the navagation stage. Finding it hard to follow.

    Thanks

    James

  5. jwright

    Bams,

    Basically, those dims are just what looked good to me. Feel free to change ‘em up to fit your needs. Thanks!

    James,

    Sorry buddy, I thought the files were linked up. I’ll ask the webmaster to post them. Thanks!

    -jwright

  6. Will

    Hi James,

    Great flash portfolio tutorial. I’ve got over half way through, however i’m having a bit of trouble with the boolean bit. Everything else works fine before i put the sequence in. Any help would be greatly appreciated. Heres’s the Actions code so far. Cheers, Will

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

    /////////////////////////////////////////////////////////////////////
    // Event Setup.
    /////////////////////////////////////////////////////////////////////
    logo_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    home_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    forward_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    backward_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    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);

    /////////////////////////////////////////////////////////////////////
    // Helper Functions.
    /////////////////////////////////////////////////////////////////////
    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(”portfolio_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 = “portfolio_frm”;
    }
    else
    {
    //…else, we just need to go to the the previous frame.
    frmSequence = this.getFrameLabel((currentFrame – 1));
    }
    }

    return frmSequence;
    }
    }
    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 home_btn :
    frmLabel = “home_frm”;
    break;
    case logo_btn :
    frmLabel = “home_frm”;
    break;
    case backward_btn :
    frmLabel = this.getSequencedFrame(false);
    break;
    case forward_btn :
    frmLabel = this.getSequencedFrame(true);
    break;
    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;

    }

    //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)
    {
    //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);
    }
    }

  7. Nomadone

    On the part in this tutorial where you select frame 20 for each layer and select Paste Frames. it can be misleading the wording should be move the play head to frame 20 and highlight all frames in 40 then paste frames. other then that great tutorial.

  8. ithurtswhenipee

    As someone who has made many a tutorial for other applications, It is best to not skip steps. A tutorial is there to tell the user exactly what to to. You can’t asume that they know to do every little thing “in between” steps. If the audience is someone that knows these things, then it is not a tutorial, it is as set of instructions.

  9. Karen Wondergem

    Help! I am totally new to this and was doing great until I got to the Actions layer and the actionscript. I keep getting errors, when I preview the site the menu is flying up and down, and these are the actionscript errors I get:
    1083: Syntax error: case is unexpected.case mainMenu_mc.profile_btn :

    I get this error for all the buttons, logo, home. Can anyone help? I really want to finish this as practice and I am hoping I didn’t bite off more than I can chew becasue I am not familiar with actionscript at all. Thanks!

  10. vessi_fil

    Sorry my question must be really stupid, but when i load the swf the mainMenu_mc don’t stop and continue to loop even it has the stop(); in the ActionScript. Why is that?

  11. Priya Mistry

    I’ve been following this great tutorial step by step. Unfortunately when I debug the movie, I get this error message:
    1084: Syntax error: expecting rightbrace before end of program.

  12. Pat

    well I am having similar problems to other people I was having the problem of the flying menu not stopping at the top and bottom and people told me to start over so I did. this time I am getting this error
    #1010: A term is undefined and has no properties.
    it is refereeing to navigationClicked

    can someone help us!!

  13. Patrick

    sorry if I came off rude I didn’t understand how it worked I thought it was like a forum and no one was getting help with there problems so please take another look at my request

    I am doing it a little differently (just different names really)

    TypeError: Error #1010: A term is undefined and has no properties.
    at E_Portfolio_fla::MainTimeline/E_Portfolio_fla::frame1()[E_Portfolio_fla.MainTimeline::frame1:42]
    Debug session terminated.

    I think it means the navigationClicked

    /////////////////////////////////////////////////////////////////////
    // Event Setup.
    /////////////////////////////////////////////////////////////////////
    mainMenu_mc.Home_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    mainMenu_mc.Academics_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    mainMenu_mc.Vocational_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    mainMenu_mc.Extracurricular_btn.addEventListener(MouseEvent.CLICK, navigationClicked);

    navigationClicked isn’t in blue
    then it is defined here

    /////////////////////////////////////////////////////////////////////
    // Event Handlers.
    /////////////////////////////////////////////////////////////////////
    function navigationClicked(Event:MouseEvent):void
    {
    //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.Home_btn :
    frmLabel = “Home_frm”;
    break;
    case mainMenu_mc.Academics_btn :
    frmLabel = “Academics_frm”;
    break;
    case mainMenu_mc.Vocational_btn :
    frmLabel = “Vocational_frm”;
    break;
    case mainMenu_mc.Extracurricular_btn :
    frmLabel = “Extracurricular_frm”;
    break;
    }
    //Find the frame number based on our Frame Label.
    var frmGoto:Number = this.getFrame(frmLabel);

    //Go to the requested page.
    gotoAndPlay(frmGoto);
    }

  14. Mehdi_A

    Thanks Michael for this detailed tutorial.
    Let me go directly on my problem. I don’t like the skin of browsers, so I looking for a new way to present my website in a different manner. this is my exactly question:
    Can I use flash to make a frame (or a simple window) and present my website in it? an more explanation, I don’t like to have somethings like address bar, menu bar, buttons and other UI features of a explorer. Is it possible with flash?

  15. choked

    great dude… now anyone with a bit of imagination can make a flash website… :)
    nice, helpful, detailed tutorial. congrats

  16. jwright

    Hello all. Sorry for the delay in getting back.

    It’s kind of hard to pinpoint the problem, so I’ll start out by suggesting doing Ctrl + Shift + Enter to compile your code and debug. If you just Test your movie you will not see any actual errors, while debugging your Movie will show you syntax issues.

    I’m guessing there maybe a bracket missing somewhere. If that’s not it, we’ll take a closer look.

    Thanks all!

  17. andy

    I’m new to flash and webdesign, are all of the links on this page embedded on one page, or will clicking on the home link send me to something like blank.com/home
    if not, is these a way to do that?

  18. AJ

    Great tutorial, thank you.
    The code for the navigation has a problem with the quotation marks. So while debugging, retype the “” and it will work. Also, this line has this “” instead of ”
    var frmSequence:String = ”;

  19. Dianne

    I am thrilled with this tutorial. I started from the beginning – printing it all out by copy/paste into WordPerfect. I got stuck a third of the way.

    So I took another tack: I made a website from the original and deconstructed it to suit my needs – different links, colors, graphics, typeface and changed the way the “resume” worked. This way, I wasn’t just copying code, I was learning what the code meant and where it belonged. The only thing I haven’t done is construct the scroller for myself. I used what was there.

    I have limited experience with AS 2 and this was a huge leap.

    I can’t thank you enough for this tutorial. Even though some of the concepts are still a bit rough to me, it has given me the courage to go forward.

  20. AgonyBoy

    Whatcha mean with “Make the button how you want it to look when you hover over it”??? I haven´t even created a button that I can see!

  21. sak

    I also get this error -
    1083: Syntax error: case is unexpected.case mainMenu_mc.profile_btn :
    Does anyone know how to fix this error?
    Thanks!

  22. Effie

    I’m stuck at the creating arrows part. When I first created the ForwardBtn, how do you change the color of the button to white after creating a keyframe in the Down section? Do I just use the fill color tool on the left side of the page? I created both the Forward and Backward buttons, but they just do not show – why is this so? I can’t continue to build the site, so frustrating!

  23. Effie

    I solved the problem above somehow. Now I’m faced with another problem. After creating all my ContactBtn, ProfileBtn, etc. You said to double click on MainMenuMc to return to edit mode. However, when I do that, my screen doesn’t show all that I’ve done like yours, instead, it’s blank. Hence I wouldn’t know where to drag my guide to where I want my menu to fly to. Please help!

  24. Effie

    Hi, may I know how do you add an instance name to the ContactMc? I tried selecting all the text in my ContactMc but it only allows me to change stuff like font size, no option for me to add an instance name.

  25. s

    Hello, please help. I’m currently really stuck at the Popup part (and I was getting so excited!!) It’s the scripting, I think.

    There are lots of syntax errors and such.

  26. Philby

    cheers, thanks for a decent tutorial. I only needed to use the respect part of your tutorial and its lookin pretty nice thank you very much. I was wonderin though if you knew of a way to get the scrolling images to repeat – so that when you get to the end you dont have to click back to get to the beginning cos I dont really like it suddenly being blank. Any help or ideas would be greatly appreciated

  27. Andrew

    I’m having the same problem Effie first had with creating the ForwardBtn, as I am not having any button appear. When you say “place your arrow button center stage”, I can’t find anything to place!

    Please Help!

  28. Alex

    I’ve compiled the first major part of the website, being the into menu and actionscripting to get the buttons and whatnot. I don’t get any errors when i debug movie but i do get an error once i click on the arrows to move the pages back and forth between the pages. Any fixes?

    TypeError: Error #1006: getFrameLabel is not a function.
    jwright_fla::MainTimeline/getSequencedFrame()[jwright_fla.MainTimeline::frame1:144]
    jwright_fla::MainTimeline/navigationClicked()[jwright_fla.MainTimeline::frame1:36]

    frmSequence = this.getFrameLabel(currentFrame – 1);
    This line causes the problem, same with the + 1 line

  29. carolyn

    This is by far the best tutorial I have found! I’m trying to use it to build my own photography website. My mainMenu_mc contains a list of buttons including galleries_btn…which I want to open another list of buttons with all the galleries. I’m having trouble getting the galleries MC to load the frame number. I have spent the last 4 months working on figuring this out so I can get my website up and running. Can you please email me and maybe I can send my source file to figure out where i’ve gone wrong? carolynspranger@gmail.com
    Thanks!

  30. Eddie Gear

    Hi there,

    I should say WOW! that was indeed an extensive tutorial. I like the way you present your information. Good Job, I guess I’ve learnt something for today.

    Cheers,
    Eddie Gear

  31. confused

    Hi Theres one thing that keeps confusing me i normally build my websites in dreamweaver but i want to build my new site in flash..do i just build the files then put them in dreamweaver for them to be seen on line?
    thanks

  32. Brian M

    I love this tuorial. I absolutly love it. But I am making my own webstie and need some help. How did you get the menu links to open up a new page right there. Like when you click contact it goes to a contact right in that window. What AS did you use to make it do that. Because I cant get my Buttons to link right and my website is all screwed up.

  33. Max

    Gotta say! Took some work, but this is a great tutorial and there should be more like it. I used this as a basic framework to figure out flash website building and then modified it accordingly. However, as I get to the end I find myself with even more questions on things I would like to know how to do…such as how to add a music player to my flash page and a interactive calendar. I would greatly appreciate any advice you could give me on including those two features.

  34. Minneapolis Web Design & SEO - Desaraev

    Thanks for sharing. Great tutorial. I’m still a little skeptical about flash portfolios though, just from an seo standpoint, but REALLY appreciate the tips.

  35. George

    Sorry for being such a newb but I am having trouble at this point.

    “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.”

    Can you please explain to me where this ‘menu’ from the library came about to exist? I’ve created the folder for the MenuItems and inside I’ve got a layer for each button. But, I can’t seem to figure out what you mean by ‘place our menu (from the Library) on our main stage.’

    HELP!!

  36. Richard

    Hmm, i’m having trouble understanding where this Résumé comes from. Nothing in that tutorial shows it… Whats with that?

    I’ve also downloaded the source files, and I don’t see it on the page in Flash CS4.

  37. Billy

    thanks for the tutorial…I’m getting these errors…

    1172: Definition utils:Fader could not be found.
    1120: Access of undefined property Fader.

    does anyone know how i could fix these….
    bpaint3@yahoo.com

    Thanks in advance

  38. jwright

    Billy,

    Check to see if the utils.Fader file is in the same directory as your .fla file. That may be the issue.

    -James

  39. Rambo

    The statement of “Select the first seven frames on the Frame Labels layer” is an issue I am facing. I am sure it must be a simple question, but do you know how to select the first seven frames in the frame of Frame Labels?

    Need help?

  40. RJ

    this tutorial worked amazingly, I was wondering tho for the respect page, what would the code be to click on the thumbnail and have that appear in a popup, almost like the profile page. I took off the web links to each piece on the slider. I just need to kno how to make it appear in a pop up.

  41. Craig H

    Hey I did the entire tutorial succesfully except for a couple minor glitches. The profile page will work, but none of the other pages will work when clicked on. However they are all labeled like “contact_frm” and “contact_btn” and one of the pages works when clicked on “profile_frm” but none of the others. the pages work when i use the sliding arrow but not when clicking on the mainmenu.mc hopefully someone can help me solve this problem!

    1. melon

      hi there,

      This is no doubt interesting and meaningful tutorial, thanks so much first of all, i really appreciated it.

      However, I follow the content step by stey, i think there’s probably something wrong in the AS part, because many errors happened… would you please kindly go thru and updated them for us?

      Thanks a lot!!

      Melon

  42. eCk

    i have some problems with the Motion tween for MainMenuMC..
    i can’t drag the ProfileBtn to its destination.

  43. David

    I am having trouble following through can anyone send me the complete list of codes to be pasted in the main actions layer. I write this mostly because i fear i am doing something wrong because my preview keeps looping. on top of that my utils.fader isn’t really working as well and is giving me the error 5000 saying “5000: The class ‘utils.Fader’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.

    can anyone help me

    1. Leighton

      Hi David,

      I have just gone through this tutorial and are having the same problem, in regards to the error message “The class ‘utils.Fader’ must subclass ‘flash.display.MovieClip’ since it is linked to a library symbol of that type.”

      I was wondering if you figured out how to fix it

      cheers

  44. denton

    Great Tutorial Michael!

    I too had problems getting the Main menu to tween properly at first so I deleted MainMenuMc and started again – works great now.

    Some people might also be having problems if they’re using CS4. The above tutorial was written fro CS2/CS3 I think, and to do the same type of tweening, you have to use Classic Tween (not Motion Tween).

    If all else fails, have a look at the source files at the top of the page.

  45. Tony

    James I too am stuck as George, who wrote on Apr 2 , is. Your wording does not make it clear EXACTLY what needs to be done and what we are trying to do at this point in your tutorial. Maybe it will come to me if I experiment a bit.Your enlightening words though would be appreciated.
    Thanks
    Tony

  46. Gary

    After adding the event handlers and helper functions, I Select Debug–>Debug Movie (Ctrl+Shift+Enter) from
    Flash CS3’s main menu. I keep getting this error

    TypeError: Error #1010: A term is undefined and has no properties.
    at jright_fla::MainTimeline/jright_fla::frame1()

    I’m not sure what my problem is.

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

    /////////////////////////////////////////////////////////////////////
    // 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);

    /////////////////////////////////////////////////////////////////////
    // Event Handlers.
    /////////////////////////////////////////////////////////////////////

    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);
    }

    /////////////////////////////////////////////////////////////////////
    // 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;
    }

  47. Porsche

    The MainMenu only moves correctly when the home_btn and logo_btn are clicked. The MainMenu stays on the stage when the others are clicked. How can I get the other buttons to push the Main Menu to the upper right hand corner?

    1. Mel

      I am having this problem as well! When I click the buttons they do not fly up to the right hand side, it’s only when the Home and Logo buttons are clicked.

      HELP!!

  48. andrea

    all of my menu buttons work and change to that page, but contact stays at the home page from startup menu, and when i am on another page like portfolio and then click from there on contact it takes me back to the home screen and moves the menu back to the center.

    what could be causing this? thanks.

  49. Rick

    I am almost complete with the porfolio website, however I keep coming to this error:

    “Utils:Fader definition could not be found.”

    The utils.fader.as file is in the same directory as my .fla file, but I just cant seem to debug the movie and see the effects.

    thanks for your time in helping me

    1. Reid

      I’m getting the same;

      Attemping to launch and connect to Player using URL C:\Users\Marketing\Documents\Reid\Flash\reidbutler.swf
      [SWF] C:\Users\Marketing\Documents\Reid\Flash\reidbutler.swf – 44821 bytes after decompression
      TypeError: Error #1009: Cannot access a property or method of a null object reference.
      at fl.transitions::TransitionManager$/start()[C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\ActionScript 3.0\Classes\fl\transitions\TransitionManager.as:204]
      at utils::Fader$/fadeIn()[utils.Fader.as:17]
      at reidbutler_fla::MainTimeline/reidbutler_fla::frame1()[reidbutler_fla.MainTimeline::frame1:173]

    2. Reid

      I’m getting the same;

      TypeError: Error #1009: Cannot access a property or method of a null object reference.
      at fl.transitions::TransitionManager$/start()
      at utils::Fader$/fadeIn()
      at reidbutler_fla::MainTimeline/reidbutler_fla::frame1()

  50. effie

    hi james, was wondering how do you link a button to one of the pages of the site? i would like to have a button on the profile page to be linked to the resume page. could u offer some help? hope you see this soon as it’s rather urgent. thanks.

  51. CHRIS T.

    Hi, first of all great thing you’re here.

    I am about half way through, but I keep getting error messages when you ask to debug ( I’m on the 2nd debug). I don’t think I’m getting the full function of what I should be seeing thus far. What am I doing wrong? Also should I take out the instructions from the code? I was told I don’t need them. Can that cause the error messages. Thanks for all you’re doing. it’s very much appreciated.. really!

    **Error** Scene=Scene 1, layer=Actions, frame=1:Line 13: The class or interface ‘MouseEvent’ could not be loaded.
    function navigationClicked(Event:MouseEvent):void

    **Error** Scene=Scene 1, layer=Actions, frame=1:Line 18: The class or interface ‘MouseEvent’ could not be loaded.
    function navigationClicked(Event:MouseEvent):void

    **Error** Scene=Scene 1, layer=Actions, frame=1:Line 54: The class or interface ‘MouseEvent’ could not be loaded.
    function navigationClicked(Event:MouseEvent):void

    **Error** Symbol=MainMenuMc , layer=Actions, frame=1:Line 1: A type identifier is expected after the ‘:’.
    function goHome():void

    **Error** Symbol=MainMenuMc , layer=Actions, frame=1:Line 6: A type identifier is expected after the ‘:’.
    function leaveHome():void

    Total ActionScript Errors: 5 Reported Errors: 5

  52. sibble

    Excellent tutorial! I ran into a couple minor problems here and there, but that’s because I’m using CS4, so that’s to be expected. From this tutorial, I learned the main concept and creation of designing a website in Flash.

    Thanks!

  53. Mehedi Hasan

    Nice share !!!! And also its a very helpful for new user and also for advance user :)

    Thanks
    Mehedi
    PHP Developer Bangladesh

  54. Ash

    I haven’t gone through the whole tutorial, since I just wanted a shadowbox-esque effect for my gallery. However, I wanted to point out a few things to note in case you are trying to do this part of the tutorial.

    In the Event Handler section, whoPup_mc, whatPup_mc, etc. should be whoPopup_mc. Likewise, var currentPup should be var currentPopup.

    I don’t know if the author did this as a security device to assure you’re actually reading the tutorial and not copying & pasting directly, but I wanted to enlighten those that were struggling.

  55. Pat

    Mad tutorial man!

    I was just wondering how to put a limit on the distance that you can scroll on the respect page. Otherwise you could just keep scrolling on to infinity!

  56. Jinz

    i have abit of problem as its my first time doing flash.. after this section [stated below]

    “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.”

    all my flash did was to ‘FLASH’ and move about.. like non-stop? is it correct or did i screwed up somewhere? i follow every instruction and names given though.

  57. eric

    hey, i’m slowly working through the tutorial. Running into some of the same problems as others. Did send James and email so hopefully he responds soon. Main problem I have is that I would like to review the actual source files. For some reason I can not open the ones that are included at the top of this page. Does anyone here know why? I am running Flash 8 on my Mac. Either that or I’m running Flash MX 2004. I think I have both on my Mac, but none of the open the source files included in this tutorial. Any help from anyone would be appreciated.

    Thanks again for such a wonderful tutorial. I hope to finish it by this weekend? Great starting point for me in flash, even if I did already know some stuff. I now know action script. I think I’ll start my project over.

  58. hmetivier

    I am going through this, and I thought I was doing things fine, but I’m not sure that is true.

    1. I’m at the point where you say to add instance names to my buttons, but when I click on them, the only thing that comes up is label name…

    2. Then at the Second actionscript point where you say to put actionscript under the actions layer that is under the mainmenumc… And it doesn’t match up to your photos. Maybe someone or you could help.
    matthew.scott2005@gmail.com

        1. Christen

          I am stuck at the same spot. Are you using CS4? I absolutely cannot figure out how to do this to continue. HELP!

  59. RJC

    I have to give you a lot of props. This is one wicket tutorial because it probably answers everything what most books don’t cover in a easy to follow format. Thanks for putting it all into perspective from formating and organizing on building a site in Flash.

    In addition, all the ideas and techniques are common ones that can be used in all the sites. Glad you were able to provide such a great tutorial. I really hope I see more of your stuff as this must be one of the most complete Flash tutorials on building a complete website.

    I hope you’ll cover a bit more on the last “RESPECT” part so that the carousel will actually come back to point of origin.

    Thanks!!!

  60. Dave Christian

    Sir,
    Greetings from the country of Philippines! im interested to

    learn flash through internet because i dont have money to study

    Adobe Flash in University School. im starting learning adobe

    flash but i dont have any idea where to start. Some of my friends

    told me starts with the basics like tweening and etc, and some

    of my friends told me to straight learn Step by Step Flash web

    tutorials without learning the basics because some of the basics

    were’nt useful in building flash website.Im currently working as

    freelance graphics artist which i used only Adobe photoshop

    and illustrator and im planning to learn adobe flash to build my

    own Flash website to show my portfolio’s online and information

    about me.

    Thanks and God bless!

    Respectfully yours,
    Dave Christian Agagon

  61. Shicko

    I’ve been looking for a solution everywhere to Limiting the infinite scrolling on the respect page,

    Anyone have any solutions yet?

  62. Luise

    James,

    I just wanted to say- You are awesome!
    It´s so nice go through every step when
    one enthusiastic teacher is helping you.
    Thank you!

  63. Michael

    Hi,
    First of all, great tutorial, I am using it for my portfolio. I do have a little question about it though.

    How could I color the buttons to indicate the site that is visited? I was thinking that I could indicate it by a line underneath the word, ad I could put that line in the individual frame. But I was wondering if there would be a way to display the text in a different color??

    Thank you!!!

  64. Tyler

    Or, you could learn real AS3 and make one that loads in multiple SWFs and uses XML which allows for easier customization.

  65. Flash CMS Website

    It’s a really great tutorial, Michael!
    It might have taken a lot of time to describe all the steps. So, today I’ll spend all my day on creating a portfolio.

    Thanks.

  66. mrstex

    your tutorial is great.. but even tough i followed it in every part my menu doesn’t flies when I click on the buttons… and I don’t understand why.. can u help me?

  67. sheetal

    Need help. I am using CS4.
    I’m getting this error-
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at fl.transitions::TransitionManager$/start()
    at utils::Fader$/fadeIn()
    at reidbutler_fla::MainTimeline/reidbutler_fla::frame1()

  68. Justin Parente

    Love this tutorial, but I’m at a block in the extensive AS. I made sure my AS looks exactly as yours, so when I go to Debug, I get the following compiler errors:

    Scene 1, Layer ‘Actions’, Frame 1, Line 45. 1120: Access of undefined property logo_btn.

  69. Jesus

    Awesome tutorial. Thanks!

    I do need some help with a small but essential problem.
    The problem is at the very beginning of the tutorial. The motion tween we created for the flying menu is supposed to be static in the beginning, when a button is clicked it flies to the top and vice versa. My problem is that even with the AS in the timeline control and the actions layers it keeps going from top to bottom nonstop. Same thing happens with the text boxes we placed next to the house that change according to what button is selected. It keeps changing nonstop as the movie plays. This occurs even after I wrote in the AS to stop it. Any idea what might be happening?

    Thanks.

  70. jc

    Awesome tutorial.

    Thanks

    I am having some trouble with the utils.Fader file. It says that It cannot locate the file. How can I ensure that I am saving the file to the correct directory. Can you please clarify this process?

  71. earthflyer

    Excellent tutorial.

    I done this in CS4 and all went well.

    The only problems I had during the tutorial is understanding how you explained things but soon figured it out.

    This will be give me a good understanding how I can go about building a Photo Gallery website for myself, thats my next goal.

    Thanks

    earthflyer

  72. Jigsaw_

    Hello there! I’m thinking to start produce a flash website with the help of this tutorial!
    But i think i see a lot of replies referring to several problems? anyone knows if this actually works??
    So I dont waste my time… cheers!

  73. Seth

    So i saw some errors in the ActionScript code posted. I cleaned it up a bit, and here is the complete code that goes in the ‘actions’ frame.

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

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

    /////////////////////////////////////////////////////////////////////
    // Event Setup.
    /////////////////////////////////////////////////////////////////////
    backward_btn.addEventListener(MouseEvent.CLICK, navigationClicked)
    forward_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    logo_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    home_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
    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);

    /////////////////////////////////////////////////////////////////////
    // Event Handlers.
    /////////////////////////////////////////////////////////////////////
    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 backward_btn :
    frmLabel = this.getSequencedFrame(false);
    break;
    case forward_btn :
    frmLabel = this.getSequencedFrame(true);
    break;
    case logo_btn :
    frmLabel = “home_frm”;
    break;
    case home_btn :
    frmLabel = “home_frm”;
    break;
    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;
    }

    //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)
    {
    //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);
    }
    }

    /////////////////////////////////////////////////////////////////////
    // 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;
    }

    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;
    }

  74. Chris

    Hello! This is an amazing tutorial. I am using it to aid me in my own personal website. I am having a problem. I didn’t make a new project file at the beginning of the tutorial. Instead, I just made a new flash file. I am on the step where I have to add the Fader to the project but didn’t make the project so I can’t add it. Is there a way I can add it without starting all over?

  75. Jen

    Really I have no clue how to begin to process this, but really need to understand because I taking a class using action script. I can’t open the file. I was hoping for a tutorial that walked me through the process.

  76. Gareth

    Hi there, i have used this tutorial extensively to help with one of my projects!

    I am using the thumb scroller class / script / whatever you wish to call it and I need the scroller to stop scrolling once it has reached the end of the movie clip, is there any way to do this?? I have searched all over the net and cant seem to find a solution that doesnt involve XML :/

    I really need an answer ASAP please!!!

  77. Rob

    Hi, I have used this tutorial to build my own portfolio site, it all works pretty much fine until i added a different welcome with just one bit of text in the centre of the page (which effectively is just one huge button to take you to the Start Page in the above tutorial which has the flying menu in the ‘start’ position in the centre of the Splash).

    Since adding a page before the flying menu, when i click ny new ‘huge button welcome page’ and effectively go to my frame 2 in the sequence (which is actually frame 1 for the above tutorial) The flying menu has already ‘flown’ up to the top right corner…

    i know this is probably a stupid small error and easy fix but i just cant manage it since i am new to Flash. Any have any idea of what i need to do to the existing Action Script to have the flying meun start on the second frame instead of the first?

    cheers

    Rob

  78. Julio Sitges

    Much appreciated. Although, im using CS4 and i´m having some trouble with the utils.fader. The exact error is 1061: Call to a possibly undefined method fadeIn through a reference with static type Class.

  79. julio Sitges

    Cannot access a property or method of a null object reference.
    at fl.transitions::TransitionManager$/start()
    at utils::Fader$/fadeIn()
    at jsitges_fla::MainTimeline/frame2()

    same error as before but this is it in a simple post.

Leave a Reply

Your email address will not be published. Required fields are marked *