# how to make image slider like this

**muciz**- Born
- Posts: 2

**mahjik**- Novice
- Posts: 33
- Loc: Las Cruces, NM USA

well, its simple in concept, a little more complex to get looking that good. here is what i would do

you make all the 'pages' of the image side by side into one big image like on a roll of film. this is inside of a movie clip. name the clip instance when you drag it onto the stage. i.e. 'myPic_mc'

the blue background / box moves separate from this so put it in a separate movie clip, and dont forget to name its instance. i.e. 'myBox_mc'

below these images put your navigation buttons on a separate layer

when a button is pressed you slide(tween) the image and blue box to the appropriate position

place a mask over these layers if you don't want them to extend from one side of the movie to the other.

for the navigation, its a little more complex

on their site, "the website" is pic1, "the idea" is pic2, "the team" is pic3, "the prize" is pic4, so on.

you could make a whole bunch of tweens, for example one to go from pic 3 to pic 1, pic 2 to pic4, etc. but this would be alot more work than using actionscript

place the pics so the _y coordinates are where you want them, and then all you have to do is figure out what their ._x should be for each pic.

when a button is clicked it sets a variable, i.e. 'targetX' that is where the movieClip._x should be for that pic.

the onEnterFrame function slides the pic until it is where it is supposed to be, and then deletes itself.

make 'targetX' a property of each movieClip, and then they both can use the same function for their onEnterFrame function.

example code on a button

each button would set targetX to the appropriate x position for the pic and box

here is the code for the onEnterFrame function, called movePic

ok, so this is some pretty ugly code, but hopefully you get the point.

the if statement tells it to move if its not where its supposed to be, else it deletes itself cuz its done.

the if statement for when it does move checks to see which direction it needs to move, and then either increments or decrements the _x position.

if you only have a couple pics, making tweens for each possible move is no big deal, but with more than that, or if you wanna add more later all you have to do is add another button and program its on(release) to set targetX and get the onEnterFrame running.

this doesnt speed up or slow down just moves one pixel at a time. change the increment(++) to += 2 or 5 or whatever to move it faster. the same with the decrement. you can program easing in and out using math, if you are interested, here is one way to do it.

1. when you first start moving from one position to another, store the original _x position, so you can use the original distance between starting and ending points once you have already started moving the _x closer to its target.

add this to the on(release)

repeat for myBox_mc or any other clip you want to move this way

2. I won't go into the higher math theory involved, cuz i don't really understand it, other than to say, the cosine and sin functions that are commonly used for drawing circles, also work great for easing

first, figure out how fast you want the clips to move on average. 5 pixels every onEnterFrame = about 60 pixels a second at 12 frames per second.(5 x 12 = 60)

without easing you would simply add or subtract 5 pixels each time and then you are there.

ok, so back to math theory. imagine drawing a circle. if you start directly to the right of its center and then draw down to directly below it, think of how the x and y positions are changing.

at first, the _y is dropping like a stone as you move down, and then at the end it doesnt change much at all (easing out)

at first the x position hardly moves at all, and then shoots to the left like a rocket at the very end (easing in)

the cos(angle) * radius = x position of the circle,

the sin(angle) * radius = y position of the circle.

what does this do for us?

instead of moving 90 degrees around part of a circle, we are moving from oldX to targetX, so...

so instead of moving from 0 to 90, our _x positions are going to move from oldX to targetX. but in order to use our math functions, we have to create a variable that moves from 0 to 90. but how fast do we move this variable from one to another?

simple, remember 5x12 = 60. we want to move an average of 5 pixels per frame. you can change this, in fact lets call this number, 'speed'.

so distance moved / speed = number of times the onEnterFrame needs to be called. speed * time = distance, right??

and you thought you would never use math!

so distance moved is targetX - oldX. better use Math.abs on it to keep it positive.

so once again, how much do we increase our theoretical angle each onEnterFrame? distance moved (90 degrees) / time = distance.

time is the number of frames we just figured out above.

so... lemme write it out for you

set these up as properties of each item thats gonna move, so the onEnterFrame doesnt have to do this math every time its called, and then within the onEnterFrame function

ok, so one more thing before we get really dirty hands, remember the * radius part of the cos (angle) * radius = _x position. we need that radius, but for us, the radius is really the distance between the starting and end points. ok, once again, here we go. if the center of the circle is at 0,0 what is the position of the point on it directly to the right of the center point? it is (radius, 0).

the point directly below it? (0, radius)

the first coord(x) moves from radius to 0, the second coord(y) moves from 0 to radius, as the angle moves from 0 to 90.

so if oldx is our 0 and targetX is our radius, then use eiother cos or sin to move between them, we are done!

so, we initialized our movingAngle to 0 above, now heres the onEnterFrame code for this

so, wow thats pretty cool, or insanely difficult to understand.

the last line of code bears explaining.

our radius is (targetX - oldX). moving from 0 to radius, or from oldX to targetX, same thing.

cos can be replaced with sin above

one more note about cos and sin. as angle moves from 0 to 90, cos moves from 1 to 0, and sin moves from 0 to 1. thats why you multiply them by radius to get the x and y corrdinates on a circle.

oh, and one more one more thing... what if we want to move to negative radius, or whatever. don't worry about it. remember our radius = (targetX - oldX). if targetX > oldX its positive and we move to the right, otherwise its negative and we move to the left.

digest this, and lemme know if you have any questions. and hopefully it was worth reading even if it wasn't what you really had in mind.

i wrote all this code right here, and it probably has tons of bugs and stuff, so keep your eyes open. and if you have an advanced math degree, please be gentle in your response. my ego can't take too much abuse.

you make all the 'pages' of the image side by side into one big image like on a roll of film. this is inside of a movie clip. name the clip instance when you drag it onto the stage. i.e. 'myPic_mc'

the blue background / box moves separate from this so put it in a separate movie clip, and dont forget to name its instance. i.e. 'myBox_mc'

below these images put your navigation buttons on a separate layer

when a button is pressed you slide(tween) the image and blue box to the appropriate position

place a mask over these layers if you don't want them to extend from one side of the movie to the other.

for the navigation, its a little more complex

on their site, "the website" is pic1, "the idea" is pic2, "the team" is pic3, "the prize" is pic4, so on.

you could make a whole bunch of tweens, for example one to go from pic 3 to pic 1, pic 2 to pic4, etc. but this would be alot more work than using actionscript

place the pics so the _y coordinates are where you want them, and then all you have to do is figure out what their ._x should be for each pic.

when a button is clicked it sets a variable, i.e. 'targetX' that is where the movieClip._x should be for that pic.

the onEnterFrame function slides the pic until it is where it is supposed to be, and then deletes itself.

make 'targetX' a property of each movieClip, and then they both can use the same function for their onEnterFrame function.

example code on a button

**Code**: [ Select ]

on (release) {

myPic_mc.targetX = -1354;

myBox_mx.targetX = -1422;

myPic_mc.onEnterFrame = myBox_mc.onEnterFrame = movePic;

}

myPic_mc.targetX = -1354;

myBox_mx.targetX = -1422;

myPic_mc.onEnterFrame = myBox_mc.onEnterFrame = movePic;

}

- on (release) {
- myPic_mc.targetX = -1354;
- myBox_mx.targetX = -1422;
- myPic_mc.onEnterFrame = myBox_mc.onEnterFrame = movePic;
- }

each button would set targetX to the appropriate x position for the pic and box

here is the code for the onEnterFrame function, called movePic

**Code**: [ Select ]

function movePic (){

if (this._x != this.targetX)){

if (Math.max (this._x,this.targetX) == this.targetX){

this._x ++;

} else {

this._x --;

}

} else {

delete this.onEnterFrame;

}

}

if (this._x != this.targetX)){

if (Math.max (this._x,this.targetX) == this.targetX){

this._x ++;

} else {

this._x --;

}

} else {

delete this.onEnterFrame;

}

}

- function movePic (){
- if (this._x != this.targetX)){
- if (Math.max (this._x,this.targetX) == this.targetX){
- this._x ++;
- } else {
- this._x --;
- }
- } else {
- delete this.onEnterFrame;
- }
- }

ok, so this is some pretty ugly code, but hopefully you get the point.

the if statement tells it to move if its not where its supposed to be, else it deletes itself cuz its done.

the if statement for when it does move checks to see which direction it needs to move, and then either increments or decrements the _x position.

if you only have a couple pics, making tweens for each possible move is no big deal, but with more than that, or if you wanna add more later all you have to do is add another button and program its on(release) to set targetX and get the onEnterFrame running.

this doesnt speed up or slow down just moves one pixel at a time. change the increment(++) to += 2 or 5 or whatever to move it faster. the same with the decrement. you can program easing in and out using math, if you are interested, here is one way to do it.

1. when you first start moving from one position to another, store the original _x position, so you can use the original distance between starting and ending points once you have already started moving the _x closer to its target.

add this to the on(release)

**Code**: [ Select ]

myPic_mc.oldX = myPic_mc._x;

repeat for myBox_mc or any other clip you want to move this way

2. I won't go into the higher math theory involved, cuz i don't really understand it, other than to say, the cosine and sin functions that are commonly used for drawing circles, also work great for easing

first, figure out how fast you want the clips to move on average. 5 pixels every onEnterFrame = about 60 pixels a second at 12 frames per second.(5 x 12 = 60)

without easing you would simply add or subtract 5 pixels each time and then you are there.

ok, so back to math theory. imagine drawing a circle. if you start directly to the right of its center and then draw down to directly below it, think of how the x and y positions are changing.

at first, the _y is dropping like a stone as you move down, and then at the end it doesnt change much at all (easing out)

at first the x position hardly moves at all, and then shoots to the left like a rocket at the very end (easing in)

the cos(angle) * radius = x position of the circle,

the sin(angle) * radius = y position of the circle.

what does this do for us?

instead of moving 90 degrees around part of a circle, we are moving from oldX to targetX, so...

so instead of moving from 0 to 90, our _x positions are going to move from oldX to targetX. but in order to use our math functions, we have to create a variable that moves from 0 to 90. but how fast do we move this variable from one to another?

simple, remember 5x12 = 60. we want to move an average of 5 pixels per frame. you can change this, in fact lets call this number, 'speed'.

so distance moved / speed = number of times the onEnterFrame needs to be called. speed * time = distance, right??

and you thought you would never use math!

so distance moved is targetX - oldX. better use Math.abs on it to keep it positive.

so once again, how much do we increase our theoretical angle each onEnterFrame? distance moved (90 degrees) / time = distance.

time is the number of frames we just figured out above.

so... lemme write it out for you

**Code**: [ Select ]

movingAngle = 0;

framesNeededToMove = (Math.abs(targetX - oldX) / speed);

angleIncrementAmount = 90 / framesNeededToMove;

framesNeededToMove = (Math.abs(targetX - oldX) / speed);

angleIncrementAmount = 90 / framesNeededToMove;

- movingAngle = 0;
- framesNeededToMove = (Math.abs(targetX - oldX) / speed);
- angleIncrementAmount = 90 / framesNeededToMove;

set these up as properties of each item thats gonna move, so the onEnterFrame doesnt have to do this math every time its called, and then within the onEnterFrame function

ok, so one more thing before we get really dirty hands, remember the * radius part of the cos (angle) * radius = _x position. we need that radius, but for us, the radius is really the distance between the starting and end points. ok, once again, here we go. if the center of the circle is at 0,0 what is the position of the point on it directly to the right of the center point? it is (radius, 0).

the point directly below it? (0, radius)

the first coord(x) moves from radius to 0, the second coord(y) moves from 0 to radius, as the angle moves from 0 to 90.

so if oldx is our 0 and targetX is our radius, then use eiother cos or sin to move between them, we are done!

so, we initialized our movingAngle to 0 above, now heres the onEnterFrame code for this

**Code**: [ Select ]

function movePic (){

if (Math.abs (this._x - this.targetX < speed)){

// it is close enough to set it right on and be done.this cos/sin thing can end up being off just a tad bit, and don't wann keep running onEnterFrame functions when we dont need to.

this._x = this._targetX;

delete this.onEnterFrame;

} else { // ok, time to move since we aren't there yet

this.movingAngle += this.angleIncrementAmount;

this._x = (this.oldx + (this.targetX - this.oldX) * Math.cos(this.movingAngle);

}

}

if (Math.abs (this._x - this.targetX < speed)){

// it is close enough to set it right on and be done.this cos/sin thing can end up being off just a tad bit, and don't wann keep running onEnterFrame functions when we dont need to.

this._x = this._targetX;

delete this.onEnterFrame;

} else { // ok, time to move since we aren't there yet

this.movingAngle += this.angleIncrementAmount;

this._x = (this.oldx + (this.targetX - this.oldX) * Math.cos(this.movingAngle);

}

}

- function movePic (){
- if (Math.abs (this._x - this.targetX < speed)){
- // it is close enough to set it right on and be done.this cos/sin thing can end up being off just a tad bit, and don't wann keep running onEnterFrame functions when we dont need to.
- this._x = this._targetX;
- delete this.onEnterFrame;
- } else { // ok, time to move since we aren't there yet
- this.movingAngle += this.angleIncrementAmount;
- this._x = (this.oldx + (this.targetX - this.oldX) * Math.cos(this.movingAngle);
- }
- }

so, wow thats pretty cool, or insanely difficult to understand.

the last line of code bears explaining.

our radius is (targetX - oldX). moving from 0 to radius, or from oldX to targetX, same thing.

cos can be replaced with sin above

one more note about cos and sin. as angle moves from 0 to 90, cos moves from 1 to 0, and sin moves from 0 to 1. thats why you multiply them by radius to get the x and y corrdinates on a circle.

oh, and one more one more thing... what if we want to move to negative radius, or whatever. don't worry about it. remember our radius = (targetX - oldX). if targetX > oldX its positive and we move to the right, otherwise its negative and we move to the left.

digest this, and lemme know if you have any questions. and hopefully it was worth reading even if it wasn't what you really had in mind.

i wrote all this code right here, and it probably has tons of bugs and stuff, so keep your eyes open. and if you have an advanced math degree, please be gentle in your response. my ego can't take too much abuse.

**muciz**- Born
- Posts: 2

thank you so much mahjik,

your explanation it's really help me, and I've made a lilttle test with fla file, but I have some difficulty to understand with this script

function movePic (){

if (this._x != this.targetX)){

if (Math.max (this._x,this.targetX) == this.targetX){

this._x ++;

} else {

this._x --;

}

} else {

delete this.onEnterFrame;

}

}

where should I put it in ? Do I have to make a new mc ?

I'm so sorry , I really a new beginner in flash script thing, and I still learn

can you help me more ?

to make easier, here's the fla file that I've been working on it you can download at http://www.dj-ai.com/tes.fla

thank you big time

Muc

your explanation it's really help me, and I've made a lilttle test with fla file, but I have some difficulty to understand with this script

function movePic (){

if (this._x != this.targetX)){

if (Math.max (this._x,this.targetX) == this.targetX){

this._x ++;

} else {

this._x --;

}

} else {

delete this.onEnterFrame;

}

}

where should I put it in ? Do I have to make a new mc ?

I'm so sorry , I really a new beginner in flash script thing, and I still learn

can you help me more ?

to make easier, here's the fla file that I've been working on it you can download at http://www.dj-ai.com/tes.fla

thank you big time

Muc

**mahjik**- Novice
- Posts: 33
- Loc: Las Cruces, NM USA

the function movePic is called an anonymous function. it can be used by any number of clips. just define it on frame one of your timeline - put the code right on that frame.

then when you create/declare your movieclips that you want to use this code as their onEnterFrame function, you assign the function name - which is a reference to the actual function- to the onEnterFrame of the clip, as so...

notice that i am not calling the movePic function. it has no () after it. i am assigning it as myMovie_mc's onEnterFrame function.

you can assign as many clips to use this function, and since it is written using 'this' instead of specifically naming what clip it works on, it will work for any clip that assigns it to its onEnterFrame function.

hope that helps

then when you create/declare your movieclips that you want to use this code as their onEnterFrame function, you assign the function name - which is a reference to the actual function- to the onEnterFrame of the clip, as so...

**Code**: [ Select ]

attachMovie ("mySymbol","myMovie_mc", depth);

myMovie_mc.onEnterFrame = movePic;

myMovie_mc.onEnterFrame = movePic;

- attachMovie ("mySymbol","myMovie_mc", depth);
- myMovie_mc.onEnterFrame = movePic;

notice that i am not calling the movePic function. it has no () after it. i am assigning it as myMovie_mc's onEnterFrame function.

you can assign as many clips to use this function, and since it is written using 'this' instead of specifically naming what clip it works on, it will work for any clip that assigns it to its onEnterFrame function.

hope that helps

Page **1** of **1**

To Reply to this topic you need to LOGIN or REGISTER. It is free.

## Post Information

- Total Posts in this topic: 4 posts
- Users browsing this forum: No registered users and 17 guests

- You
**cannot**post new topics in this forum - You
**cannot**reply to topics in this forum - You
**cannot**edit your posts in this forum - You
**cannot**delete your posts in this forum - You
**cannot**post attachments in this forum