Buttons to switch between clips

[Ken Lui]

Hello,

I am not an experienced Flash user. I need to include a swf file on my client's web page. The swf file includes 4 movie clips appearing one by one. Each clip links to their designated page. I want to have small buttons to let viewers to click and switch to the clip they want. When click, the still shot (may be the last frame) of the clip appears. Please refer to http://www.dell.com for an example. Can anyone advise step by step on how to do that?

Thanks in advance!

ken.

[SineQuaNon]

This is too complicated for me to try and explain, so I just did a mock up for you. I tried to keep it as simple as possible since you said you don't have much experience with Flash.

View the SWF here (the animated color boxes are clickable)
Download the FLA here

Here's the code I used:

var myUrlArray:Array = Array("http://www.google.com/", "http://www.msn.com/", "http://www.yahoo.com/", "http://www.digg.com/");
var myCounter:Number = 0; //since arrays start at element[0], for simplicity sake, start the counter at 0 as well

// click button and show webpage

_root.main.onRelease = function() {
     getURL(myUrlArray[myCounter]);
};

// button controls

_root.myControls.btnPrev.onRelease = function() {
	// prevents the counter from being less than 0
	if (myCounter <= 0) {
		myCounter = 0;
	} else {
		myCounter--; //subtract 1 from itself
	};
	_root.main.prevFrame(); //backup the timeline 1 frame
};
_root.myControls.btnNext.onRelease = function() {
	// prevents the counter from being more than 3
	if (myCounter >= 3) {
		myCounter = 3;
	} else {
		myCounter++; //add 1 to itself
	};
	_root.main.nextFrame(); //advance the timeline 1 frame
};

Hope this is helpful. If you need a more detailed explanation of things, just let me know.

[Ken Lui]

Thanks so much SineQuaNon! But the FLA file could not be download...

[Ken Lui]

Hey I managed to download the FLA file now. I will explore it to modify. Thanks again SineQuaNon!

[SineQuaNon]

Welcome!

[Ken Lui]

I actually need to have 4 separate buttons. Each button click and link to their movie clip. Could you advise how to change the 2 arrows to 4 buttons. If you could prepare another example FLA file, that would be great!

[SineQuaNon]

Sure, easy enough. Same basic principle, but instead of telling _root.main to move forward or back 1 frame using nextFrame() and prevFrame(), you tell it to go to a specific frame using gotoAndStop();

View the new SWF here
Download the new FLA here

Here's the new code. I could have done some semi-fancy stuff with arrays to cut down on the repetitive code ("if you're copying and pasting, you're doing it wrong"), but I wanted to keep it simple for your sake.

var myUrlArray:Array = Array("http://www.google.com/", "http://www.msn.com/", "http://www.yahoo.com/", "http://www.digg.com/");
var myCounter:Number = 0; //since arrays start at element[0], for simplicity sake, start the counter at 0 as well

// click button and show webpage

_root.main.onRelease = function() {
     getURL(myUrlArray[myCounter]);
};

// button controls

_root.myControls.myButton1.onRelease = function() {
	myCounter = 0; //remember arrays start at element[0]
	_root.main.gotoAndStop(1);
};
_root.myControls.myButton2.onRelease = function() {
	myCounter = 1;
	_root.main.gotoAndStop(2);
};
_root.myControls.myButton3.onRelease = function() {
	myCounter = 2;
	_root.main.gotoAndStop(3);
};
_root.myControls.myButton4.onRelease = function() {
	myCounter = 3;
	_root.main.gotoAndStop(4);
};

[Ken Lui]

Great! Thanks a lot SineQuaNon!

[Ken Lui]

Is there any way to make the 4 clips appear one by one instead of just showing the first clip? I don't need to loop them. They can just appear once. Thanks again for your help! :sweatdrop:

[SineQuaNon]

To not show the first clip when it loads, insert a blank keyframe on frame 1 of "_root.main" (shifting everything over 1 frame) and then modify the gotoAndStop(); commands.
To stop them from looping, add a "stop();" command at the end of the animation.