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.
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 :
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...
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.
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