Welcome to flash tutorials from our ohana media. The tutorial we are about to go through will help us learn the technique of masking. If you remember, in our previous tutorial on BG detection, we had hidden the unwanted portions of the desert background by creating a rectangular mask. Only the part inside the rectangle could be viewed. Masks are layers that allow you to view what is underneath through some sort of a hole. That is a drawing.

Simply put, if we want a particular part of an image, or layer to be seen by the viewer, we use a mask shape that shows just that portion and hides everything else. We are now going to utilize this technique to achieve various effects. First, we learn how to mask an image. For this. Let's create a new file and important in image. For now, we'll take this beautiful image for masking.

Once we imported, let's align it to the center of this stage. For this, press Ctrl plus k on your keyboard to bring up the aligned tab. Here, in the Align section, click the center buttons that align it to the vertical and horizontal centers of the stage area. Okay, our objective here is to learn how to choose which part of an image is visible and which part is hidden. Now, to make work easier, we'll align the work area itself to a corner. Press Ctrl press Shift plus W. You will see that the work area has aligned itself to the left top of the visible area.

Next, on the timeline, go to the hundred frame and press f5 to create a frame. Let's save the file first. We'll name it masking image Click on Save. All right. Now, let's click the Insert layer button at the bottom of the layer stack. We are going to use this layer to create our mask.

Before you begin to work on this layer, make sure you see the lock icon in front of the image layer. If it's not on, then click to enable it. Now, you can work on the new layer without disturbing the image. Select the rectangle tool from the toolbar and draw a rectangle at any color to fill it up. Now, we'll turn the rectangle into a symbol. To do this, select the rectangle and press f8 to bring up the Convert to Symbol dialog box.

Name it as symbol one. Observe that we have kept the graphic radio button on now click OK. From now on, we are going to animate this rectangle itself. Now, since it is a symbol to animate it, we must use the motion twin. Let's begin then First, click on Fifth and 15th frame one by one, and press f6. To create keyframes there. Right click between the two keyframes and select create motion tween.

While you're at the fifth frame, look at the property tab, we see the color option. Click on the drop down arrow and select alpha. Here we can set the transparency. drag this slider to zero to make the rectangle completely transparent. Now lock the layer with the rectangle. Right click on the layer and select mask.

You can see that only the part covered by the rectangle is visible now. Everything else is invisible. Let's deselect the mask. See what happens, we remove the mask, then we again apply it. Observe that on the first frame, the rectangle has a solid fill. On the fifth frame, we made it completely transparent.

But when we converted it to a mask, the filtered completely invisible on all frames. Let's remove the alpha we gave on the property tab and select None. Let's see the effect again, the effect is the same. So what does this mean? This means that whether the mask object is filled up or transparent, makes no difference to the effect. The mask technique uses the shape of the object and ignores the field.

Let's move to the next step. we deleted the first keyframe of the rectangle object. We want to gradually introduce the rectangle mask on the fifth frame. So select the fifth keyframe on the timeline. Press Ctrl plus alt plus s to bring up the scale and rotate dialog box. scale the rectangle down to say 20%.

Repeat the previous step. The rectangle is now oddly visible. Let's place the rectangle near the center of the Sun here. Okay. To see the mask effect, lock the mask layer. Drag the timeline seeker to preview the effect.

The mask is scaling up. All right, now unlock the mask layer again, to animate the mask a bit further. We want the mask to stay constant for a while. So we'll create another keyframe on the 24th frame. Press f6 and then another at the 35th frame. On the 35th frame will move the position of the rectangle to the left to show the trees in the distance.

Let's scale the record angle down a bit by using the free transform tool. You can press Ctrl plus to zoom into the screen and rescale the rectangle for better framing. Okay done. Now zoom out again. Now, right click between the new keyframes and select create motion tween. Lock the rectangle mask layer to see the masking effect.

Observe that as the rectangle moves, it shows only parts of the image that live within its boundaries. Again, unlock the rectangle layer to edit it more. Let's scale it horizontally and vertically to fit both the sun and the small trees. Long delayed again to see the effect as it grows in scale and dimensions, it again shows just the image part lying inside its shape. Okay, unlock the rectangle layer again. This time, let's go to the 15th frame and press f6 to create a keyframe again, move the rectangle object to the bigger trees now.

Scale them up a bit. We want the mask to hold its earlier position. So we created another keyframe on the 68 frame and are making the changes there. rescale the rectangle vertically to take in the tall trees. Okay, now, lock the layer to see the masking effect. let's preview it from the first frame.

First, it scales up, then moves left, and finally shows the tall trees. Note again that everything outside the rectangles boundaries is invisible. Give keyframes on the 82nd and 95th frames by pressing f6 unlock the rectangle layer to edit it. Remember that the frames we are selecting for animation are just to give an example you can choose any other frame you want. We can make some final changes to our mask on 95th frame. Let's choose the outline mode for this layer so we can see exactly which part of the image we are showing.

Will now scale the rectangle to take in the entire image age to age. Lock the rectangle layer to see the mask in action. let's preview the entire masking animation to see how in the beginning, we see no image. Then the mask grows up and shows one part we hold for a moment, then another part becomes visible, we hold again. And finally, we see the complete image. Press Enter on the keyboard and preview the file.

To understand how we used the masking technique for the image. We just learned how to mask an image. Now, move to using the masking technique to create some interesting lighting effects. In this part, we'll see how to animate a focus of light highlighting various parts of an image. Open a fresh file in Flash first, and use the import to stage function. To import the image of this awesome bike.

Select the image and press Ctrl plus k On your keyboard to bring up the Align tab. Here in the Align section, click the center buttons that align it to the vertical and horizontal centers of the stage area. For easy working, let's align the work area to a corner. Press Ctrl plus shift plus W to push the work area into the left top corner will scale the image so that the viewer can see the parts that will be the focus of our masking light. Use the scale and rotate dialog box To do this, press Ctrl plus alt plus S. Okay, all set. Now we are not going to move the image.

So locate in the layer stack. We want a 50 frame animation. So click on the 58th frame on the timeline and press f5 Now we are going to need another layer that will have the mask but before That, we need to trace the parts of the bike that we want to highlight. For this, we use the concept of group, press Ctrl plus G to create a group and use the line tool to begin tracing the parts one by one. Remember, to keep the stroke size of your line tool to one in the property tab, we're simply going to trace the outlines of these parts. This is because the effect of a light focus is most dominant on the outline.

We'll try to be as accurate as possible. Line tool, Pencil Tool selection tool and sub selection tools are the tools we generally use for tracing. The more proficient you become in these tools, the better you speed and the quality of your output. Perfect experience will know the level of accuracy required for tracing For this tutorial, you will observe here that we are skipping the parts of the image that are shadowing. We are tracing the parts that are brighter. That is parts that have highlights.

Now that you have begun the hard work, you can save the file. We'll name the file masking light effect. We'll speed up the tracing now. Do observe how we are utilizing keyboard shortcuts of tools to access them speedily. It is very important that you get the hang of the shortcuts, it will increase your working speed. We are tracing very intricate details of the bike for the best effect.

The more detailed and accurate you're tracing, the more interesting the end effect. After the backside, we worked on the bikes handle the wheel, the indicators Okay, let's zoom out and see the effect. Double click outside the work area to come out of the group. Click on the first frame of group layer and press f8 to bring up the Convert to Symbol dialog box. Keep the name symbol one for now and the registration point in this Enter. Note that the graphic radio button is active.

Click ok. Double click on the symbol to enter it. Once inside, click on the 30th frame on the timeline and press f5. To add a frame. Click the Insert layer button in the layer stack. On the new layer.

Use the rectangle tool to create a vertical rectangle. Now add a gradient to the rectangle. For this, access the color tab from the windows menu. In the color tab, access the drop down menu under the type option, select linear. Here we have created a gradient with four handles. Each handle is filled with white color.

Now observe the alpha values just below the RGB values. The first handles alpha value or opacity value is zero percent. That means the white color here is hundred percent transparent The second hundred percent, the third hundred percent, and the fourth handle has zero percent alpha again. Okay, the rectangle is filled with our gradient. Now select the rectangle and press f8 to bring up the Convert to Symbol dialog box. Name the symbol as symbol two with the graphic option on and registration point in the center.

Good. Here's what we are planning to do. We want to define the path for the light focus to fall on our objects, but a dynamic effect, we'll first rotate the shape a bit, almost parallel to the parking angle of the bike, like that. And now we'll animate it on the timeline of layer two, click on the fifth frame and press f6 to insert a keyframe. On the 20th frame. we drag the symbol to the extreme right showing the age In the position we are looking for, if you observe the objects be traced at the left extreme or short in height.

As we go to the extreme right, there are more objects and their height has increased. So, as the symbol goes from left to right, we needed to scale up to. So we use the free transform tool to scale the symbol vertically, and adjust its position. We'll also broaden the symbol a little. So now the symbol is not just moving, it is also scaling up between the fifth and 20th frame, right click and select create motion twin. Drag the timeline seeker to see if the movement is satisfactory.

All right, at 25 frames per second, the animation would be too fast. Let's increase the duration of the animation by five frames. To do this, click on the keyframe on 20th frame and simply Drag and drop it onto the 25th frame. Now let's hold at the end of the animation a little longer. To do this, select the 15th frames of both layers and press f5. let's preview it by dragging the timeline Sica.

Okay, this looks alright. Now, click on the lock icon at the top of the layer stack to lock both delays. Now observe closely we want the traced bike objects about this symbol. So we are going to change the order of layers. Simply click on layer one, hold it, drag the layer above layer two and drop it you can see that the objects are now above the symbolic layer. To achieve our light effect, we need to work a bit on the traced objects.

These are outlines remember that masks only work on solid fields. They do not affect outlines. That means we have to convert all these outlines into fields. But our stroke size for these lines is just one and that's not enough. So we need to increase the stroke size. To do this, select all the outlines by pressing Ctrl plus a, then go to the property tab and enter the value to press Enter.

Now the stroke would be visible enough. Next, again, select all the outlines and go to the Modify menu. Select the shape tab and click on convert lines two fills. Now the lines have transformed into fields. Now, not both delays by clicking on the lock icon at the top of the layer stack. To see the fields switch on the outline mode for layer one.

Now, select the layer and right click on it. Click on mask to see the effect slowly dragged it timeline seeker from left to right. Now double click outside the work area to come on the main stage. Drag the timeline seeker to the right and left to preview the final effect. In this part of the tutorial, we saw how we can create an interesting highlight effect by using the masking technique. Double click on layer two and rename it as light effect.

Rename the bike image layer as bg. You can also slow down the highlight effect by entering the symbolic again, simply unlock the light effects layer and double click on the stage. To enter the symbol. Go to Layer two on the timeline. Click on the keyframe on 25th frame. Drag it to say the 30th frame and drop it there.

Now exit the symbol again and come to the main stage. Press the Enter key to preview you will see The highlighting effect is now slower and much clearer. This kind of effect is often used in engineering presentations and websites. Do practice this technique to get command over the principles behind it. We have now come to the final part of our masking tutorial. In this session, we'll learn how masking can help in animating water inside a static bitmap image.

Here's what we are aiming at. Using the masking technique, we can easily create this effect without too much animation and at lightning fast speeds. Let's begin with a fresh file. Now, we need to import an image that has water in it. This file is perfect for our lesson. Let's first place the file in the center of our work area.

As we have seen before, we need the aligned tab here, press Control plus K to access the tab keep the object selected. Now, in the Align section, click the center buttons. The image is now to the vertical and horizontal centers of the stage area. Next, lock the layer so the position doesn't get disturbed. We now need to specify the length of our animation. To do this, click on the hundred frame and press f5 Now, click on the Insert layer button at the bottom of the layer stack.

Select the rectangle tool from the toolbar and draw a rectangle to cover the water part of the image. This is where we are going to need movement. Select the outline of this rectangle and deleted. Okay, here comes a very important step in this tutorial. Using the selection tool, select a thin horizontal patch from the rectangle. We are going to color this patch blue Now, click outside The staging area.

Again select the blue patch and drag it downwards. Leave some red area in between and place it again. Observe what has happened. When we drag the blue patch, we created a blank area between the two red areas. We are going to repeat this step till we have a set of parallel read areas with blank patches in between. Since we wanted equal sized blank patches, we use this method.

Another way to do this is to simply select the horizontal areas with the selection tool and then deleted. In this case, however, the deleted patches might not be regular. We recommend that when you do this tutorial on your own, try experimenting with irregular blank patches. It will help you learn the concepts better. Select the first keyframe on layer two and scale up the entire set to reach the bottom. To save the file as watermarking with the red patches selected, press f8 and convert the selection into a graphic symbol.

Name it mask. For the time being, I declare with red patches. Next step, click on Insert layer tab in the layer stack to create a new layer about the image layer. Now, create a duplicate layer of the original background image. For this, unlock the image layer, simply click on the first keyframe on the image layer and hold down the Alt key. Drag it to the first frame on the blank layer and drop it there.

Now release the Alt key. You have a duplicate image layer, log the original image layer again. We are now going to scale down this layer just a little bit. Press Ctrl plus alt plus s to bring up the scale and rotate dialog box and enter the value 95%. Using the free transform tool, extend the duplicate image horizontally, so its width is the same as the original one. When we duplicate an image for masking effect, we need to create a slight difference in the proportion of the two images.

Let's see the slight difference we have created here by hiding and unhiding the two layers one by one. Now log the duplicate layer as well. Moving on, we want to add movement to the water. Also remember that this animation will play in a loop. So to avoid jerks at the end of the clip, we'll have these two extreme frames same go to the hundred frame and press f6 to add the keyframe. Okay, come to the 15th frame, press f6 to add a keyframe here as well select the keyframe now.

Hold down the Ctrl key to scale the read object vertically downwards. Select the keyframe on the timeline, right click on it and select create motion twin to see what we have got. Press Enter you will see that the red patch is scaling up and then scaling down done. Now go to the hundred frame. Remember that the first 10 hundred frame is same. So when the animation loops, it will show a jerk at the end.

So, for a smooth loop on the red patch layer, click on the 99 frame and press f6 to create a keyframe. To delete the hundred frame from all layers. Select them together and press Shift f5 Now, select the layer with the red patch. Right click on it in the layer stack and select mask. let's preview the effect by dragging the timeline seeker. Do you see the water animating?

Press the Enter key to preview the entire animation. If you want to see the animation in a loop, go to the control menu and select loop playback. Press the Enter key again to see the animation play in a loop. If you have any doubts, you can play this session again. You will master this in no time. You must have seen such animations in online greetings.

Now you know how to create such effects yourself. See how simple it is just by creating a duplicate layer and changing its position a bit. And using the easy masking technique. We can achieve such fantastic results in Flash. So go on, search out images like these on the internet and try to create your own water animations. We enjoyed bringing you this tutorial on the techniques of masking We hope you liked it too.

We recommend you practice these techniques a lot. We'll be using them often in the coming tutorials to achieve even better effects. A big thanks from Aroha media. Keep watching