In this post I will show you how to scroll a mask with AS in just a few simple steps and with a few lines of code.
I wrote this piece of code when working on works.naumow.com/oc.
There’s nothing misterious here. In fact maybe this is something you’ve already seen before but couldn’t tell how it was done. Well, here it is.
Initial Vars:
var left:Number = 200;//SCROLLER X INI POS
var right:Number = 345;//SCROLLER X END POS
var scrollerDistance:Number = 145;//DIFF BETWEEN LEFT AND RIGHT : 200 + 200 - 55
Scrolling value applied to mask:
//((SCROLLER X POSITION - SCROLLER INITIAL POSITION) / HOW MUCH DISTANCE)*MASKED MC WIDTH
maskPosVal = ((scroller1_mc._x-left)/scrollerDistance)*600;
Application:
//STRAIGHT MOVEMENT
mask1_mc._x = maskPosVal;
or
//EASING
xVal = mask1_mc._x;
xDiff = maskPosVal-xVal;
xMove = xDiff/3;
mask1_mc._x = xVal+xMove;
Scroller values are the same, we just need to change the mask movement property, from _x to _y, we also need to change the width value for height value in our formula (*50 in this case), and last, rearrange the masks within the archive.
Scrolling value applied to mask:
//((SCROLLER X POSITION - SCROLLER INITIAL POSITION) / HOW MUCH DISTANCE)*MASKED MC HEIGHT
maskPosVal = ((scroller1_mc._x-left)/scrollerDistance)*50;
Application:
//STRAIGHT MOVEMENT
mask1_mc._y = maskPosVal;
or
//EASING EFFECT
yVal = mask1_mc._y;
yDiff = maskPosVal-yVal;
yMove = yDiff/3;
mask1_mc._y = yVal+xMove;
Tip: When you calculate the right pos, remember to take into account the size of the scroller as well. For example, in my case, the registration point of the scroller mc is on the left, and the scroller width size is 55px. So the right value in this case would be 200 (left pos) + 200 (size of white line) – 55 (the size of the scroller) = 345.
Download the zip file. The code is fully commented plus is very easy to understand. If you have any question or comment, you are welcome to post it.
Suggestion: If you want to learn how to master a soft or script language, my suggestion is that you have to read…. then keep reading… and read even more. Don’t get used to copy / paste. It might solve the inmediate problem but you will never know what you are actually doing.
Good Luck!
Federico :-)
cómo sería para que funcione en vertical?
gracias
Agustin: Acabo de agregar un ejemplo vertical. Si vuelves a descargar los archivos verás que incluí este nuevo ejemplo en el zip.
Saludos, Federico
Hola Federico, no entiendo como manejar esto
var scrollerDistance:Number = 145;//DIFF BETWEEN LEFT AND RIGHT : 200 + 200 – 55
Te cuento mi caso (Scroll vertical):
Yo tengo dentro de la mascara varios movieclips de 200px de alto, la idea es que dependiendo del numero de moviclips, se modifique el area que desplaza el scroll.
Espero tu ayuda. Muchas Gracias.
Damian: Vamos por partes. Primero te explico que significa scrollerDistance.
Por ejemplo, mi scroller arranca en 200 y termina en 400. O sea recorre 200. Pero tengo que tener en cuenta cuanto mide mi scroller, ya que en la posición 200 arranco del margen izquierdo del scroller, y en la posición 400 termino con el margen derecho. Entonces le tengo que restar el ancho del scroller al recorrido. Sino terminaría en 400 con mi margen izquierdo. Por eso, si mi distancia a recorrer es 200 y mi scroller mide 55, la distancia a recorrer será de 145 (200-55). Asi, mi scroller termina en 345 pero como mide 55, el margen derecho termina en 400.
Lo de los movieclips no te entendí. Me podrías explicar un poquito más?
Saludos, Federico
Hola, son varios movieclips de 200px de ancho (la cantidad es variable). Entonces lo que necesito es hacer scroll de todo el conjunto de esos movieclips, por ejemplo 10 mc miden de alto 2000px, entonces necesito que el scroll recorra esos 2000px. Yo estoy tratando de lograrlo modificando esta variable, scrollerDistance, pero no se si es lo correcto.
El ejemplo lo podes ver aca, en la seccion prensa en español.
Saludos.
Damian: Ok, ahora entendí. Bajate movieScroll. Esto es lo que vos necesitas. Esta bastante comentado el código. Fijate si lo entendés y te sirve.
Saludos, Federico
