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.

View all articles by Amen KAMALELDINE

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 :

//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 :)



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