Slide Effect Help

[rubic07]

Hello,
I'm trying to create a movie clip with images that will slide from one image to another using next and previous buttons. I want a sliding effect.
For example on this site: http://www.squaredeye.com/
The right side large image you can slide the image by using the arrows. That's exactly what I want...but in flash. Any ideas or tutorials??

[dplows]

There's probably fancy ways in actionscript to create this, but I'd just animate the transitions between each, add a stop actions on the first frame AND at each slide, create the buttons, tell the buttons to nextFrame() and prevFrame() when you press them.

This is probably the easiest way to create this effect. Plus, it's nice because you can always just add pictures later and even adjust timing without much hassle.

Let me know if you'd like a detailed tutorial of this technique.

[rubic07]

Yeah, if you don't mind posting a tutorial on how to do this? I'd appreciate it! Thanks

[dplows]

ActionScript 2:

Notice how, in the link to the example, all of the images/slides are the same size. Create a few of those before you begin.

1. Convert each image/slide to it's own Movie Clip, so that you can go always go back and adjust them if needed....as well as other useful reasons.

2. You only need 2 layers for now, Actions & Container. On frame1, add a stop action to the frame on your actions layer. Then, place all of your Movie Clips on the stage, on the Container layer. Line them up horizontally, edge-to-edge. Select them all and convert to a Movie Clip named "container".

3. On the Container layer, Insert A Keyframe > move the Container Movie Clip to the left so that the next slide is now in place on the stage > Right click in between the two Keyframes and choose "Create Motion Tween". You should have the animation from slide 1 to slide 2 now. Repeat this process for 2 -3, 3-4, 4-5 ....... (don't worry about the reverse!)

4. We need to create buttons to go to the next and previous slide. Make a new layer called Buttons. Create 2 buttons, one for Next and one for Previous. These can be Movie Clips OR Buttons, just place them on the stage give one an instance name of "next_btn" & "prev_btn" (no quotes) for the other.

5. All that's left is to add some actions to a few frames on the Actions layer.
a) Add a stop action to every frame where the slide will be static (still), you should already have one on the first frame from step 2.
b) Now here's where the magic happens. If we test the movie now, the slides will just play and over. So add this code to the frame 1 on the Actions layer:

stop();//already have this stop action, just add the below
this.onEnterFrame = function(){ 
	if(rewind == true){ 
		prevFrame(); 
	} 
} 
next_btn.onPress = function(){
	rewind = false;
	play();
}
prev_btn.onPress = function(){
	rewind = true;
}

I'd explain the code, but it's pretty self-explanatory if you take a look at it.

Let me know if you need clarification on anything.

Be creative!

[dplows]

You'll notice if your on the last slide and you press the Next button, then it just jumps to frame 1. To fix this....

1. Animate the Container movie clip all the way to the right, back to the 1st slide (to give that rewind effect like in the example). Use about as many frames as you used for all the other transitions, to make it look speedy.

2. This step is important. On the last frame of this transition, go to your actions layer and add the following code (instead of a stop action like you would normally do):

gotoAndStop(1);

This will allow it to loop forward seamlessly, if you do it right.

**Tip: Add Easing in between each transition. Click in between 2 keyframes (of an animation) > Go to your Properties Panel > Drag the 'Ease' slide OUT (+) 100. This will make the transition smoother.

[rubic07]

Thanks dplows for your help! I'll check this out and let you know if I get this working.

[rubic07]

Great! I got this working but just the Next button. When I press the Previous button it's always sliding to the first image. For example...when I'm on image 3 and press the "previous" button, the images slide all the way to image 1, not image 2. Any ideas?