How to swich between 2 contents of the Loader V3 using the MCTE V3
home » flash components » user interface » loader pro v3 » how to swich between 2 contents of the loader v3 using the mcte v3 »
1. The Loader Pro V3 has a handy feature that allows you to switch between 2 images or movieclips (internal or external).
2. Before continuing with this tutorial please read the Loader Pro V3 tutorial.
3. First open a new Flash document and drag an instance of the Loader Pro V3 on the stage. If you don’t have the Loader installed on your system, please do so before continuing this tutorial. If you need help installing the Loader component, please read this tutorial. Don’t forget to name the loader instance name. I’ve called it “myLoader”
4. I’ve used 2 pictures img1.jpg and img2.jpg saved inside the “images” folder to show the transition from one to the other. My time line consists in 2 layers: one for the loader and another one called actions where I’m going to type some coding:
5. Add another layer to the timeline and call it button. With that layer selected drag a button from the Components panel :
I've also added the "Click to Switch Images" label and “myButton” instance name to the button.
6. On the actions layer type the following code :
import flash.events.MouseEvent;
myLoader.source = "images/img1.jpg";
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(evt:MouseEvent):void {
myLoader.source = "images/img2.jpg";
}
The code sets the first source path for the loader and then changes that path for the one through img2.jpg on the button release.
7. Set the loader’s transitionType field to "fade" :
8. Now compile your movie (Ctrl+Enter). The first image should load and when you press the button, it should change to the second image :
9. Now let’s go even further and drag the MCTE component on the stage over the loader. The MCTE should automatically assign it’s _targetInstanceName as myLoader.
10. I've also installed the Flip Pattern pack so I’ve set the patternName field to "customPattern" and on the customPattern field I’ve typed “Flip”. This is how my component inspector for the MCTE looks like:
11. The only thing left to do is to set the transitionType field to MCTE on the loader’s component inspector:
12. Compile your movie again. After the movie loads the first image should flip once and when you press the button should flip to the second one. As you can see the MCTE V3 applied the Flip pattern to the Loader's content without having to write any extra actionscript, all you had to do was to change the source of the Loader Pro V3.
