How do you do this masking technique?

[Push76]

Hi

This is my forum debut so I'm hoping you kind folk out there can help me out?!

Please see link below:

http://www.templatemonster.com/flash-templates/13425.html

Can anyone give me some pointers as to how to achieve the masking effects that are applied once a thumbnail is clicked in the gallery section of this template:

I think it is the same mask that is just dynamically applied to the appropriate graphic/movieclip but how is this done?
Also, somehow the layers are put in the correct order depending on what thumbnail is clicked on.
Should I be using setMask()?
Should I be using linkage of movie clips in my library or should all the movieclips I need to use already be on the stage?

If anyone can help me get started with this I'd really, really appreciate it.

Cheers

Push76

[exactpixel]

Hi and welcome!

Pretty much all you have to do is create a MC with your animation inside of it, apply it(via code or timeline as a mask) to a blank MC (load your image inside there) and tell it to play once loaded.

[Push76]

Thanks ExactPixel

I can create an empty movie clip but what do you mean by "apply it to a blank MC"? Can you give me a code example?

I've been trying to set up a simple example.

My timeline is one frame long with a stop() action on the first frame.
I have 4 layers.
layer 1 for my actions.
layer 2 for image 1.
layer 3 for image 2.
layer 4 for the thumbnail buttons.

Should I put image 1 and image 2 in their own individual movie clips that also contains the mask or should there be one mask that is applied dynamically with actionscript?

Any ideas where I can get some code samples?

[exactpixel]

Ok, Create the mask animation in a movieclip. Then place that MC on the timeline above your image you want to mask. then set the mask by right clicking on the mask mc layer and selecting mask. have your mask animation play when ever you want.


Since this is not an image loaded externally, might as well just mask the layer with the image and not worry about using an empty MC :)

[Push76]

Ok, so I knocked up an example...Unfortunately I couldn't get the setMask() method to do what I wanted it to do so I've done it a different way....I'd be interested to see a code example using the setMask() method or if anyone knows a better way of doing this I'd be interested in seeing it...



I have 5 layers (in this order):



1. Actions.

2. Mask (which includes my "star_mask" movie clip. This movie clip has the instance name "the_photo_mask")

3. New Photo (which is masked by my "mask" layer and includes an empty movie clip with the instance name "new_photo")

4. Last Photo (Not masked. This layer includes an empty movie clip with the instance name "last_photo")

5. Buttons (which includes the thumbnail buttons). There are no actions directly on the buttons.



Other Info:

The main time line is 1 frame long.

I have 3 jpgs sitting in the same folder as the .fla and .swf file. (these are glassesGirl.jpg, brownHairGirl.jpg and windyGirl.jpg)





In the single frame on my "Actions" layer I have the following actionscript:



stop();

var the_last_photo = "GlassesGirl.jpg";



//Load a default image into the bottom layer (the blonde chick in the glasses)
loadMovie(the_last_photo, last_photo_holder);



btnGlassesGirl.onRelease = function(){
the_last_photo = "GlassesGirl.jpg";
loadMovie("GlassesGirl.jpg", new_photo_holder);
the_photo_mask.gotoAndPlay("show");
};


btnBrownHairGirl.onRelease = function(){
the_last_photo = "BrownHairGirl.jpg";
loadMovie("BrownHairGirl.jpg", new_photo_holder);
the_photo_mask.gotoAndPlay("show");
};



btnWindyGirl.onRelease = function(){
the_last_photo = "WindyGirl.jpg";
loadMovie("WindyGirl.jpg", new_photo_holder);
the_photo_mask.gotoAndPlay("show");
};



function loadLastPhoto(photo){
//trace("in loadLastPhoto function. Last Photo = " + photo);
last_photo_holder.loadMovie(photo);
}


Info about the star_mask movie clip

On the 1st frame of this movie clip there is a stop(); action.

The 2nd frame is labelled "show".

The movie clip contains several layers (on each layer there is a star animation of a start slowly growing bigger).

Each star contributes to an animation which covers up an area the size of one of the full size jpg images)



The last frame contains the following actionscript:



stop();
_root.loadLastPhoto(_root.the_last_photo);

So as you can see I haven't used setMask() method. If I want to add more thumbnails I just need to add a function of this format:



btnThumbnailInstanceName.onRelease = function(){
the_last_photo = "PhotoName.jpg";
loadMovie("PhotoName.jpg", new_photo_holder);
the_photo_mask.gotoAndPlay("show");
};

Does anyone have any thoughts on if this is the best/worst way to achieve the technique described in my original post?

Cheers

Push