The example below uses masking to create a transition between two photographs. Despite a different effect the code is exactly the same as in Example 1. The only difference is that we placed on the Stage another photograph -- a beach photo -- behind the lab photo. Hence, whatever portion of the lab photo is masked and not visible, the background beach photo behind is visible. Clearly, instead of using a slider, you can make the transition automatic via Event.ENTER_FRAME or TimerEvent.TIMER. We animate a mask programatically with EnterFrame in Example 4.
- Flash CS3 file as3_masking_2.fla
Download the well-commented fla file for the swf displayed above.
Configuring the Slider Component
Since we don't have to discuss the code for this example, let's have a look at configuring the slider component. As we mentioned in the code comments on the previous page, in order to use the slider, you have to drag a copy of it from the Component panel to the Stage or to the Library.
Go to the top, choose the menu Window --> Components, click on Components. The Components panel opens. Select and open User Interface folder. Highlight the Slider and drag it onto the Stage.
When your copy of the slider is selected, the Properties panel shows its properties. Adjust the width to what you want. In our example, it is 300. Give your slider an instance name, in our case 'photoSlider'. Then click Parameters tab:
You need to change two parameters from their default values: liveDragging to true, and maximum to 300.
There are many other things you can change about your slider. You can also easily edit its apperance. But that will be a topic of an upcoming tutorial in Basic section of our site. For now let's focus on the properties that we need in our masking applets. Adjusting the parameters is not enough for your slider to function. As you saw in the code on the previous page, two classes need to be imported:
Now your slider is ready to respond to events. In particular, to SliderEvent.CHANGE that we use in our code.