You
might have seen a lot of panning websites in Flash. In these sites if
you click on a link, the page automatically scrolls to that content.
This effect looks great and is better than just plain old webpages. But
believe it or not this effect is extremely easy to make. It's so easy
that you can make a simple website in one day. In this tutorial I am
going to show you how to make this effect in Flash. Before you begin
this tutorial you must know the basics of movieClips, Buttons and
ActionScript 3.0.
Before I begin, if you want a very easy way out of this tutorial, check out free website builder from Wix, which lets you create a professional Flash website for free.
Start
off by making a new ActionScript 3.0 document in Flash. Press ctrl+J
and set the stage size to the size of your choice, I am giving it the
size of 1024*600.Now we need to create the buttons. 
I will make just a
simple rectangular button. But you can make a button as complicated as
you want.
You
can see in the screenshot below that I have placed three instances of
my button on stage and I have put text on all three. I have also given
the buttons instance names of home_btn , about_btn and contact_btn so
that we can use the buttons in the actionscript.
Now
it's time to make the content of the webpage. The content of this page
would actually be one long stip so that whenever we click on any of the
buttons, the strip can be move to left or right to bring that content in
the screen window. So I will just make a new movieclip with the content
corresponding to the three buttons. Again I will not make anything
fancy, just some simple text for each page. Remember that we will make
our movieclip of the width 1024x3, since the width of each window is
1024 and there will be three windows. As for the height you can make it
according to your will. You can see in the screenshot below that I have
placed the movieclip with all the content the stage. I have also divided
the buttons and content into layers so that the fla file is more
manageable. I have also named the content movieclip as content_mc so
that we can use it in the ActionScript 3.0
Now its time for the code part. Create a new layer to put the ActionScript and add the following code in it.
import fl.transitions.Tween;
import fl.transitions.easing.*;
home_btn.addEventListener(MouseEvent.CLICK,panContent);
about_btn.addEventListener(MouseEvent.CLICK,panContent);
contact_btn.addEventListener(MouseEvent.CLICK,panContent);
function panContent(evt:MouseEvent){
var buttonName:String = evt.target.name;
switch(buttonName){
case "home_btn":
new Tween(content_mc,"x",Strong.easeOut,content_mc.x,0,1,true);
break;
case "about_btn":
new Tween(content_mc,"x",Strong.easeOut,content_mc.x,-1024,1,true);
break;
case "contact_btn":
new Tween(content_mc,"x",Strong.easeOut,content_mc.x,-2048,1,true);
break;
}
}
Let
me explain the code to you now. The first two lines import the Tween
and Easing classes so we can Tween our movieclip with the help of
actionscript. In the next three lines we are adding event listeners for
click events on our buttons. Whenever a user clicks on any of the
buttons, the panContent function would be dispatched. In the panContent
function, the first line is strong the name of the button that called
the event in the variable buttonName. The next code block is a switch
statement on the buttonName variable. So, for each button the switch
would perform a different function. For each case in the switch we are
using
new Tween(movie clip name, attribute of movieclip to be
tweened, the easing function,starting point, ending point,time, is time
in seconds?);
For movie clip name, we always put content_mc
because that is the clip we want to tween, for attribute we put "x"
because we want to tween x position of content_mc, the easing function
Strong.easeOut makes the tween go from fast to slow from start to end of
the tween, for starting point of tween we always enter the current
position of the movieclip, for ending point we set the negative of the x
value for the specific content. E.g. The "About" content starts from
x=1024 so we set the tween to go to -1024.If content_mc is placed at
-1024 then the 1024 would be just at the start of the screen hence
putting About section in view. For the time parameter, I put 1 and for
the last parameter I put true which means that the time parameter is in
seconds.
Now in order to publish this page in HTML, we have to set
the publish settings for HTML. We want our content to be in the center
of the screen so we choose the following settings.
If
you publish the flash now and run the html then you might see
everything to be fine, but if you have a screen size of width greater
than 1024 then you would see extra bits of the content movieclip as in
the screenshot below.
But the fix for this is really easy, you just need to apply a mask over the entire stage on the content layer.
Now
if you publish and run the html, everything would be perfect. You can
use this method to create interesting webpages very fast. You can
innovate in this method to your will to make it even more attractive.
