How to make a panning website in Flash

icon2
Share!

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 1024×3, 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.

Click here to see the panning web page in action.

Found this tutorial way too hard? Check out  free website builder from Wix, which lets you quickly create a professional Flash website for free without doing any coding.

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 KoHow to make a panning website in Flash
Ask a web design question.

Comments 9

  1. yogesh doddamani

    thanks for this tutorials. i thoguht it is too complicated and needs lots of coding.

  2. Kristina

    This is awesome! I will hopefully be using this tutorial soon for my site. THANKS!!

  3. Meena dhyani

    hi,

    thanks for this tutorial dear, i was looking for this frm a long time. can u pls tell me that what should i do if i want to bounce the content movie a little bit when someone click on home button jst after the contact us button.

    Thanks
    Meena

  4. Mohinder Singh

    Wow ?????????????????
    it’s amazing sir

  5. Marcus Ford

    It took me a minute, but I figured it out. It was easier than I thought! This panning technique is great for beginners like myself.

  6. Carolyn

    It didn’t work at all for me even with two teachers helping. Got a load of syntax errors.

    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;

    }

    }

  7. Hoshi

    GREAT TUTORIALS! But,you obviously REALLY love WIX or you get paid to promote the website! Keep up the tutorials anyhow! This website has the most and BEST tutorials for using flash to create website that I can find! <3

  8. pun sha

    i have a question for the designer of this page, did you add any rectangular box in content layer or exceed the width of document. its not at all working. please help!

  9. murali

    Thanks for the tutorial, It is a very helpful tutorial.

Leave a Reply

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