Making A Panning Website In Flash


Advertisements

You may have noticed quite a few panning websites in Flash. They are like ordinary websites, but with a smoother user interface. When you click on a link in the website, the page scrolls right to the content automatically, instead of loading a webpage with the content. This is referred to as panning. It is easy to implement this effect in a website.
You can create a simple website with panning effect easily in Flash. This tutorial requires you to know about movieClips, Buttons, and ActionScript 3.0. It gives you simple instructions to give a panning effect on a simple website in Flash.

Getting started

  • Step 1: Create a new ActionScript 3.0 document in Flash
  • Step 2: Now press Ctrl+J
  • Step 3: Set the stage size of your preference. In this tutorial, we will be using the size of 1024×600. Now you need to create buttons.

Creating buttons

  • Step 1: Use the insert options in Flash to create a button. You can create a button of your design. In this tutorial, we will use rectangular buttons.
  • Step 2: Create as many buttons as you like and give them instance names so that they can be used in ActionScript 3.0. That is, home_btn, about_btn, contact_btn for the three buttons in the image below.

    Clicking on any of the 3 buttons in the image, should immediately show the content with a panning effect. For this, a strip of content is a better option. So when you click a button, the strip will scroll sideward to show the content. For this, you need to create a movieclip.

Movieclip

  • Step 1: Create a movieClip with the width of 1024 (the width of the window)
  • Step 2: Give the height of the clip of your preference and name the movie clip as ‘content_mc’

Code

  • Step 1: Create a new layer for ActionScript so as to provide the codes
  • Step 2: Copy and paste the code that follows
    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;
    }
    }

    Note: The first two lines of the code import Tween and Easing classes for the movie clip. The next three lines are event listeners, so that the button responds for click events. Whenever a user clicks any of the buttons, the event function will be executed. The rest of the code is for the pan function. That is, for click events, this pan function will be executed. The ‘Switch’ would perform a different function for each button.

Now the page needs to be published.

Publishing the page in HTML

  • Step 1: Select Publish Settings and go to the HTML tab in the dialog box
  • Step 2: Select ‘Flash Only’ for template and make sure the checkbox right below it is unchecked
  • Step 3: Give 100 x 100 percent dimensions after selecting ‘Percent’
  • Step 4: In Playback, check ‘Display menu’ and ‘Loop’ checkboxes
  • Step 5: Select ‘High’ for quality, ‘Window’ for Window mode and ‘Default’ for HTML alignment
    Step 6: Select ‘No Scale’ for Scale
  • Step 7: Choose ‘Center’ for both Horizontal and Vertical Flash alignments
  • Step 8: Check the ‘Show warning messages’ checkbox and then click OK button
  • Step 9: Now ‘Publish’ the flash and run the HTML. If your screen size is over 1024 pixels in width, then you will see additional content in the panning strip, instead of just seeing ‘Home’. To avoid this,
  • Step 10: Apply a mask over the Content layer from the Options

Conclusion

The effect is added to the webpage. Click on any of the three buttons in the webpage after running it to see the strip scrolling sideward to show the content. You can tweak this method creatively to make it more attractive.

imira

imira

A research and content development firm based in India providing solutions for various corporate firms, academic institutions and online portals.
Advertisements