ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
Full Screen Scroller
http://www.actionscript.org/resources/articles/634/1/Full-Screen-Scroller/Page1.html
Amen KAMALELDINE

Amen is an industrial informatics engineer. he studied the first four years of his education in Faculty of Engineering in Lebanon. He went to France to Continue his studies by doing the fifth year of engineering and the master TIS (Technologie Information et Système) in the same time at UTC (Université de Technologie de Compiègne). He also work as a freelancer in flash development field. He is always interessted in the new multimedia technologies.

 
By Amen KAMALELDINE
Published on June 30, 2007
 
Time: 45 minutes
Difficulty Level: Intermediate
Requirements: Flash 8
Topics Covered: This tutorial will show you how to integrate a scroller for your full browser flash site, we will discuss how you disable the default scroller browser and how to make a flash full browser area...

Introduction

I first want to appologize to the persons who i couldn't answer their questions regarding my previous tutorials.
In this tutorial we will create a full screen (browser) scroller which my friend asked me about and he suggest to make a tutorial about it. I hope it will be handy and usefull in your Flash projects, we will discuss some html(and css) stuff before we get into flash. Ok so the example on what you are going to create is showed below

Scroller Example :



(you can also use ur mouse scroller)


And for better testing you may download the source at the bottum of this page and run the .swf and to modify the content (stars) just play with the size of the swf and see how the scroller interact
and also for better functionality you may view it at my site here :
www.flashreply.com

NOTE: this tutorial will use the tweenEffects Class.
Now lets get started with html stuff...


Html Stuff
Ok so now our main objective is to disable the html scroller and set the padding and margin of the content for our page to 0px if you know how to do this already you can skip to the next page.

To disable default scroller browser all you have to do is to define this style for your page. Right after the head tag insert
[as]
<style type="text/css">
         body { margin: 0px; padding: 0px; overflow: auto; }
  </style>
[/as]

this will indicate that the body of our page will have 0px as padding and margin
and the overflow style is to disable the vertical and horizontal scroller

thats it for the html thing lets go to the next page to digg into the flash stuff

Preparing the Flash Movie

So here we will prepare our flash movies on the stage.

First, create a shape (i chose a star) and convert it into a movie name it "obj" and check the Export for ActionScript this will be the replacement of the content and it will be dynamiclly attached into our container movie clip.

Second, create a rectangle shape 100x100px and convert it into a movie name it bg and give it the instance name bg_mc. Then convert this instance into another movie clip name it container and set its instance  to container_mc.
all the converts must have the registered point at the top left of the movie clip.

third, create three layers "script", " scroller", "content"
in the content place the container_mc movie clip
scroller leave it blank we will use it in the next page
and in the script layer insert this code
[as]
//--Stage aligned top left
Stage.align = "TL";
//--Stop the stage from scaling with the browser window.
Stage.scaleMode = "noScale";
//--Create a listner that checks to see if the browser window is resized
sizeListener = new Object();
sizeListener.onResize = setStage;
function setStage() {
 var w=Stage.width;
 var h=Stage.height;
 container_mc.bg_mc._width=w-100;
 container_mc.bg_mc._height=Math.random()*10*h;
 container_mc.init(20);
 container_mc._x=50;
 container_mc._y=0;
 scroller_mc._x = w-1;
 scroller_mc._y = 0;
 scroller_mc.bg_mc._height = h;
// we will explain this in the next page
 scroller_mc.updateScroll(container_mc._height+50);
}
Stage.addListener(sizeListener);
setStage();
[/as]

this code hase a listner for the resize event of our movie so when the movie is resized the function setStage will be called i think the code is understandable we are just aligning stuff and redimension them.

Now in the container Movie clip create a new layer where we will put the code for the randomly attached content which will be the code below:
[as]
holder_mc = this.createEmptyMovieClip('holder', this.getNextHighestDepth());
function init(n) {
//remove the old stars holder
 holder_mc.removeMovieClip();
//create a new one
 holder_mc = this.createEmptyMovieClip('holder', this.getNextHighestDepth());
//attach the shapes
 for (i=0; i<n; i++) {
  depth = holder_mc.getNextHighestDepth();
  temp = holder_mc.attachMovie('obj', depth, depth);
  temp._x = random(this._width-100);
  temp._y = random(this._height-100);
 }
}
[/as]

let go to the next page to code our scroller.


Scroller Code

Here is our main work. lets start with the steps below
Alignement will be to the top right

1. Create a new rectangel 15x100px with black color and convert it to scrolBG MovieClip with the instance name bg_mc

2. Create a same width height rectangle with a green color and convert it to scroll movieClip with the instance name scroll_mc

3. Select the previous created MovieClips and convert them into a movie clip name it scroller align them to the top right and set each one on a layer make sure the bg layer is below the scroller layer

4. create a new layer and set this code :

[as]
//current hieght
var cheight;
//coef between the container height and the scroller height
var coef;
var enable;
//you will need to read previous tutorial :)
te = new tweenEffects();
//this will handle the easing stuff we will use the onEnterFrame thing
var ease = this.createEmptyMovieClip('ease', this.getNextHighestDepth());
//hide the hand cursor
scroll_mc.useHandCursor = false;
//set the on press function
scroll_mc.onPress = function() {
//permit the draging between bounds
 scroll_mc.startDrag(false, 0, 0, 0, Stage.height-this._height);
//setting the update function for the easing
 ease.onEnterFrame = update;
//and disable it(  i dont know what is this for we will discover later )
 enable = false;
};
scroll_mc.onRelease = scroll_mc.onReleaseOutside=function () {
//on release stop the draging
 scroll_mc.stopDrag();
//i still dont know i forgot :D
 enable = true;
 //delete this.onEnterFrame;
};
//this  will be called on the resize event
function updateScroll(h) {
//set the new height
 cheight = h;
//if the stage height is greater than the content height hide the scroller
 if (h<=Stage.height) {
  this._visible = false;
  return;
 }
//if not set it to true
 this._visible = true;
//init the coef
 coef = Stage.height/h;
//animate the scroller height
 te.changeHeight(scroll_mc,Stage.height*coef);
//set the y to 0
 scroll_mc._y = 0;
//start the easing
 ease.onEnterFrame = update;
//ok what in the name of god this enable is for !!!!
 enable = false;
}
function update() {
//inverse the coef sor the final y for the contained will be the real height
 coef2 = 1/coef;
//get the final y
 yf = -scroll_mc._y*coef2;
//perform easing for the container_mc
 _root.container_mc._y += (yf-_root.container_mc._y)/6;
//if it get where we demand delete the easing function
 if (Math.abs(yf-_root.container_mc._y)<0.01 && enable) {
  delete this.onEnterFrame;
 }
}
// Creating the listener object
var mouseListener = new Object();
// Create onMouseWheel function
mouseListener.onMouseWheel = function(delta) {
 scroll_mc._y -= delta*3;
 if (scroll_mc._y<0) {
  scroll_mc._y = 0;
 }
 if (scroll_mc._y+scroll_mc._height>Stage.height) {
  scroll_mc._y = Stage.height-scroll_mc._height;
 }
 ease.onEnterFrame = update;
};
// Registering the listener to the Mouse object
Mouse.addListener(mouseListener);
_root.setStage();
// i guess u can delete the enable variable its not used for anything i think
//it was from the previous programming style for the scroller :)
[/as]


ok you're done i hope this tutorial will helps you. Thanks for reading and
Happy Fashing