Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
In this Flash 8 Pro tutorial, I will show you how simply it is to create an interactive image with camera blur/sharpen effects that appear as the user moves her mouse over it.
In this easy and comprehensive lesson, you will see how to:
Below is the finished example of what you are going to achieve at the end of this detailed tutorial. Move your mouse over the various parts of the picture to see the change of camera focus.
Nice effect! The photo is an interesting one - a car wreck in Zagreb.
Before using the drawing tools, you'll first tweak some properties of your document and import the picture for this lesson.
1. Open a new Flash document.
2. Select Modify > Document to open the Document Properties window.
3. Change the Dimensions of your document (see 1 in the image below) so that its width equals 500 pixels and height 600 pixels. This will be enough to accommodate the picture that you're going to download later and import into your Flash document.
Set the speed of your movie (the Frame rate -see 2 below) to 30 fps.
4. Download the image i prepared for this tutorial, save it someplace where you will easily find it and unzip it.
5. Select File > Import > Import to Stage, find the image, select it and click Open. The image should appear on your document's stage.
6. While the image is still selected, check out in the Properties panel that it is positioned on round pixels.
The image's X and Y values (its coordinates on the stage, expressed in pixels) should end with a zero and not any other number. If this isn't the case with your image, change those numbers to zeros manually.
If the image isn't placed on round pixels, it may turn out blurry in your final SWF movie. This is not the blur effect you will be doing in this lesson I'm talking about, but rather the question of how Flash displays objects that are not placed on round coordinates. Since a part of the image (either the foreground or background) will always be in focus, the image itself has to be sharp.
7. Call the current layer background. Make a new layer above it and call it car.
8. Click on the image with the Selection tool (V) to select it. Press Ctrl+C to copy the image.
9. Lock the background layer.
Click on the car layer's first keyframe to select it.
10. Press Ctrl+Shift+V to paste the image in place here. Pasting an object in place in Flash is different from simple pasting. When you paste something in place, that object is placed exactly on the same spot as the original one.
So now you have two copies of the same picture, placed exactly one above the another, in their respective layers. This is a must if you wish to obtain the effect discussed in this lesson. You can't have a realistic focus-changing effect if your images are placed on different locations.
11. Lock the car layer. Make a new layer above it and call it car mask.
12. Zoom in on the image using the Zoom tool (Z). You are going to draw a precise outline of the car, so zooming in on the picture will make your work a lot more easier.
13. Select the Pen tool (P). In the Properties panel, select hairline as type of line and choose a color that will be in good contrast with the image.
14. Position your cursor somewhere on the left bottom edge of the car (see the left image below).
Click and don't release your mouse - just drag it a little bit away from the point where you first clicked. As you can see in the image on the right below, thin blue handles will appear. You can release your mouse button now.
This technique of clicking and dragging is very important if you want to obtain adjustable curves with the Pen tool. If you just click without dragging, you would have obtained straight lines with points which are devoid of handles. You could add the control points with handles later, but why do it afterwards if you can do it now?
You will need curved and not straight lines, because you are going to adjust them later to make them follow the car's outline precisely.
15. Next click just below the car's rear light and again drag your mouse. Release it once the control handles for the second point have appeared.
After you release your mouse button, you will see the first segment of the curve on your scene.
16. Continue clicking-and-dragging until you have reached the other side of the car. Don't be bothered if some segments of your curve go over the car - you will adjust that in a moment. For now, the only important thing is to place the points around the edges of the car.
You can stop once you reach the light on the car's right edge, just like in the image above. You will soon see why. But, first, you must finish the curve so that it follows the outline of the car smoothly. (You call that a car?) ;)
17. Select the Subselection tool (A). Click on the curve to select it for work. The little squares (control points) will appear.
18. Click on a control point to select it for manipulation.
19. Place your cursor over one of the control handles (the small circle at the end of the handle), click on it and start dragging. You will see a thin blue line appear, indicating the new position of the handles. Release your mouse.
As you can see in the image above on the right, the curvature of curves on both sides of the control point have changed. And you certainly noticed that both handles were moving in unison. What you need to do in order to adjust the curves so that they fit the car outline perfectly, is to control only one handle of a control point, not both at the same time.
20. To succeed in doing exactly that, place your mouse over the control handle, press and hold the Alt key, then click your mouse and start dragging the handle. Only the selected handle will move - the other one will stay still.
The picture above shows how just one curve (the one to the left of the selected control point) has changed its curvature. The other one has remained unchanged.
Following the said technique, adjust all the segments of the curve so that it fits the car perfectly. Start from either end of the curve, select point after point, and move each control handle until all of the curve has fallen into place. I have selected the curve on the image below, so that you can better see how it should look in the end.
21. Select the Line tool (N). Click outside the image, on its right (somewhere near the white plastic bag on the picture), hold Shift and start dragging your mouse to the left.
Once you have reached the other side, you can release your mouse and the Shift key.
22. Select the Selection tool (V). Click on the portion of the line that is "inside" the car to select it.
Hit Delete to remove this part of the line.
23. Use the Line tool (N) once again to create three more lines that will encompass the rest of the car and the lower part of the picture. The only important thing you should pay attention to is that all the lines should be connected. You are going to fill this outline with color in a moment, so everything must be connected, with no gaps left behind.
24. Select the Paint Bucket tool (K) and choose a stark color that is well visible in contrast with the rest of the picture. Click anywhere inside the outline to fill it with color.
Fine! The form of the mask is now completed. To turn this shape into a mask, please proceed to the next page.
