Stay Focused...


Our first example will demonstrate the impact that focus has in a scene. Consider the two images below. The first is sharp and clear, whereas the second is blurry and less distinct. In this exercise, you'll create a lens icon that can be dragged over the blurry image to pull the focused image forward.

click to expand
  1. Select File > New (CTRL/CMD+N) to create a new movie. Next, click on the Size button in the Property Inspector to edit the movie properties. Set the movie dimensions to the dimensions of the two source images. In this particular example, called focus1.fla in the sample files, you'll be working with two 400x300 images.

    click to expand
  2. Create four layers . Select the bottom layer and import your blurred image by selecting File > Import... or by pressing CTRL/CMD+ R (you can use focus1_blurred.jpg from the sample files). The image should be centered on the stage by default.

  3. Select the second layer from the bottom and import your clear image ( focus1_clear.jpg ) by pressing CTRL/CMD+R again.

  4. On the third layer from the bottom, create a solid black circle. Select this circle and convert it to a movie clip symbol with Insert > Convert to Symbol (F8). Name the symbol c1 , and then in the Property Inspector give it the instance name c1 .

    click to expand
  5. Convert the third layer from the bottom into a mask layer by choosing Mask from the timeline layer menu (right-click/CMD-click).

    click to expand
  6. On the top layer, create a circle the same size of the circle in step 4 but with a thick black border and a clear fill color . Select the circle, convert it to a symbol (F8), and name the symbol c2 . Then in the Property Inspector, name the instance c2 .

    click to expand
  7. Select frame 1 on the timeline. Open the Actions panel by selecting Window > Actions (F9) and insert the following code:

      this.onEnterFrame = function () {   c1._x = _xmouse;   c1._y = _ymouse;   c2._x = _xmouse;   c2._y = _ymouse;   };  

This code defines a method for the onEnterFrame event that will be invoked continuously at the frame rate of the movie. Each time this function is invoked, you will change the position of the mask, c1 , and the outline of the mask, c2 , so that they follow the mouse's position.

  1. Now test the movie by selecting Control > Test Movie (CTRL/CMD+ENTER). As you move the mouse, notice how the clear portion of the scene really seems to be pulled forward. Even in this very simple example, focus creates a sense of depth and dimensionality.

    click to expand
  2. One obvious enhancement to this example would be to magnify the contents of the circular lens. Accordingly, scale the image on the second layer from the bottom so that it is 50% larger. For best results, create a larger version of the image in a graphics manipulation application, such as Adobe Photoshop, rather than scaling it in Flash. Select the image and convert it to a symbol (F8). Name the instance i1 .

  3. Add the following ActionScript to your existing code from step 7:

     this.onEnterFrame = function () {     c1._x = _xmouse;     c1._y = _ymouse;     c2._x = _xmouse;     c2._y = _ymouse;  i1._x = _xmouse - (_xmouse/400)*i1._width + i1._width/2;   i1._y = _ymouse - (_ymouse/300)*i1._height + i1._height/2;  }; 
  4. This new code changes the position of the clear image, i1 , so that the mouse's relative position in the blurry image corresponds to the same relative position in the clear image.

  5. This time when you test the movie (found as focus1b.fla in the sample files), the circle really does magnify the blurry image. It appears that the circular lens you created really is focusing the picture.

    click to expand



Flash 3D Cheats Most Wanted
Flash 3D Cheats Most Wanted
ISBN: 1590592212
EAN: N/A
Year: 2002
Pages: 97

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net