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.
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.
){kind=link}