Make a simple picture browser with flash

Browser

With script control, Flash can do a lot of things. This example will teach you how to use Flash to make a simple picture browser.

Click here to download the source file

1. Create a new Flash document, click the Size button in the Properties panel, and open the document Properties panel to set the scene size to 650px x 450px, with a white background and a frame frequency of 30fps

2. Press the shortcut key Ctrl+r Open the import Panel to import three pictures. As shown in Figure 1, picture image width, height is 640px, 480px. Image image of the wide, high magnification to 2400px, 1600px, and named Image2. The picture imageblu.jpg is obtained by the image.jpg of the picture.

Figure 1

3. Press the shortcut key Ctrl+f8 to create a blur movie clip symbol, press the shortcut key Ctrl+l open the library panel, and drag the picture Imageblur into the scene of the blur symbol. The Blur component in the spot selection scene, press the shortcut key ctrl+k to open the Alignment panel, click the Relative vs Stage button, and then click the horizontal alignment and vertical alignment two buttons, as shown in Figure 2, to make the movie symbol centered in the scene.

Figure 2

4. Press the shortcut key Ctrl+f8 to create a image_view movie clip symbol. Click the Rectangle tool to draw a black rectangular box with a width and height of 136px, with the center of the rectangle and the center of the scene overlapping, as shown in Figure 3.

Figure 3

5. Press the shortcut key Ctrl+f8 to create a image_view2 movie clip symbol. Also click the Rectangle tool and draw a rectangular box with a width and height of 61px.

6. Press the shortcut key Ctrl+f8 to create a view movie clip symbol. Open the Library panel and drag the image image to the scene of the view symbol. Click the image Image, in the Properties panel, set its width and height to 400px, 300px, and the geometry center of the picture and the center of the scene overlap.

7. Create a movie clip symbol named View2, whose layers are structured as shown in Figure 4. In the "Blur instance" layer is the "blur" component. The "image2" layer scene is a image2 picture.

Figure 4

8. Back to "Scene 1". Create five layers, as shown in Figure 5. Drag all components from the library panel to the corresponding layer. In the mask layer is a rectangular block of the same size as the VIEW2 component. Note: The white area in Figure 5 is the entire scene.

Figure 5

Select the movie clip symbol in each layer separately, and in the Properties panel, start the instance name for the symbol. The instance name of the symbol Image_view is viewfinder, as shown in Figure 6. The instance name of the component View1 is image, width, height is 200px, 150px; the instance name of the symbol ImageView is window, the instance name of the component View2 is image2, width, height is 2400px, 1800px.

Figure 6

9. Components and scene setup work done, now click the instance image_view2, press F9 to open the Actions panel, enter the following code.

Onclipevent (load) {
Initializing variables
Danx = _root.image._x-(_ROOT.IMAGE._WIDTH/2);
DanY = _root.image._y-(_ROOT.IMAGE._HEIGHT/2);
Ratio = (_root.image2._width/_root.image._width) * (-1);
Define picture Move Speed
SpeedRatio = 15;
Create a function
function Myclick (MYX, Myy) {
Xdis = ((myx-this._x)/speedratio);
Ydis = ((myy-this._y)/speedratio);
Transparent effect of making a picture
_root.image2.blur._alpha = ((Math.Abs (Xdis) +math.abs (Ydis)) *5);
Moving effects of manufacturing pictures
_root.viewfinder._x = _root.viewfinder._x+xdis;
_root.viewfinder._y = _root.viewfinder._y+ydis;
_root.image2._x = ((_root.viewfinder._x-_root.image._x) *ratio) + (_root.window._x);
_root.image2._y = ((_root.viewfinder._y-_root.image._y) *ratio) + (_root.window._y);
}
}
Onclipevent (mouseUp) {
if (_root.image.hittest (_root._xmouse, _root._ymouse, True)) {
Danx = _root._xmouse;
DanY = _root._ymouse;
}
}
Onclipevent (enterframe) {
Call function
Myclick (Danx, DanY);
}

Well, the whole effect here is done. You can press the shortcut key Ctrl+enter test.