Photo gallery in flash

Shooting the Missiles Using Action Script on Flash 3.0


Step 1: Open a new document in flash. Set the stage color as black.
Step 2: Choose Window > Properties from the main menu bar to open the PROPERTIES panel.
Step 3: Expand the Properties section in the panel and choose the Edit button to enlarge the Document Settings window. Next, set the width to 550 px and height to 450 px in the PROPERTIES panel, as shown in Figure below. Choose the Ok button.

image-2285

 

 

 

 

 

 

 

 

Step 4: import an image to perform the action script. Choose File > Import > Import to stage from the main menu bar and Import the unzipped images file. The three files will be imported to the stage, as shown in Figure below.

image-2286

 

 

 

 

Step 5: Perform some actions to this image. From the timeline create new layer to the name them as figure follows

image-2287

 

 

 

 
Step 6: Now we will use some action script. To make the thumbnails function and to rotate them around the main image.
Code 1:

image-2288

Code 2:

image-2289

Code 3:

image-2290

Code 4:

image-2291

Code 5:

image-2292

Code 6:

image-2293

Code 7:

image-2294

Tags: , , , , ,

Shake Effect on Action Script Using Flash 3.0

Step 1: Open a new flash file. Choose Window > Properties from the main menu bar to open the PROPERTIES panel.
Step 2: Expand the Properties section in the panel and choose the Edit button to enlarge the Document Settings window. Next, set the width to 550 pixels and height to 300 pixels in the
PROPERTIES panel, as shown in Figure below. Choose the Ok button.

image-2266

 

 

 

 

 

 

Step 3: Now we need to draw an oval for masking. Select the Oval tool from tools. Draw an circle in the document.

image-2267

 

 

 

 

 

 

 

Step 4: Fill the color (#99FFFF) inside the oval. And name the document on left-top as shake effect on Action Script.

image-2268

 

 

 

 

 

 

 

 

 

Step 5: Place the button on the document and give instance name it Reset as figure shown below.

image-2269

 

 

 

 

 

 

 

 

Step 6: Create a timeline for layer 1 and name it as player.

image-2270

 

 

 

 

Step 7: Create another layer for controlling effects and named it as controls. And for frame select the rectangle tool from toolbar.

image-2271

 

 

 

Step 8: Create a fourth layer for Performing Action Script.

image-2272

 

 

 

 

Step 9: Type the following Action Script in Layer-4(Action Script).

image-2273

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 10: Import shake effect images to library. Images name should be same as in library and script. Go to library panel and right click on each image. Choose Properties à Linkage. Check the “Export for Action script” option. And run the program.

Tags: , , , , ,

Floating Gallery Using Flash Cs4


Step 1: open a new flash file. Set the width to 600 pixels and the height to 540 pixels. For this pictorial we need 8 images. We have to resize them with 330*330 for the main image and 75*75 thumbnail images. Name the images image-0 to image-7 and thumb-0 to thumb-7 and then import them into the library (File-> import->import to library).

image-2172

 

 

 

 

 

 

 

 

Step 2: By using oval tool (O) to creating a dark grey circle (#323232) circle, without an outline by using dimensions and positions below. I have reduced the magnification in Flash to 50%, so that it’s easier to see.

image-2173

 

 

 

 

 

 

 

 

 

 

Step 3: To convert the oval into an MOVIE CLIP (Movie Clip Symbol) called “background”, by pressing F8.

image-2174

 

 

 

 

 

 

 

 

Step 4: Convert this Movie Clip into another one called “gallery” and then, from the properties panel, give it the instance name “gallery”. After that action script will be used to give the gallery some functionality and the instance names given to the MOVIE CLIP’s will be used to reference them.

image-2175

 

 

 

 

 

 

 

Step 5: Double click on the “gallery” movie clip and then on the “background” movie clip. Name the layer with the dark oval “background 1”. Create the second layer called “background” and with the lighter grey (#505050) oval on this layer.

image-2176

 

 

 

 

 

 

 

 

 

 

 

Step 6: From the properties panel, set the dimensions and positions, as shown below.

image-2177

 

 

 

 

 

 

 

 

 

 

 

Step 7: Next, drag image 0 onto the “images” layer as shown below. Convert the image to a Movie Clip (F8) called “image0”, selection “export for action script”. This will allow the image to be attached with action script, using the “identifier” as a reference.

image-2178

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 8: Convert the Movie Clip again (F8) into another Movie Clip called “image Holder”.

image-2179

 

 

 

 

 

 

 

 

Step 9: Use the Oval Tool to create an oval on the mask layer, setting it to have the dimensions and positions as shown below. Right click on the mask layer and choose “mask”.
Fig (a):

image-2180

 

 

 

 

 

 

 

 

 

 

 

 

 

Fig (b):

image-2181

 

 

 

 

 

 

 

 

 

 

Step 10: The circle should now be masking the image, as shown below.

image-2182

 

 

 

 

 

 

 

 

 

 

Step 11: Now we are going to create a temporary guide which will be used to place the thumbnails. Create a new layer called “guide” and see the Oval Tool to create a circle with just the stroke color and no fill. Set the dimensions and positions as figure shown below.

image-2183

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 12: Convert the ring into a Movie Clip (F8) called “guide”.

image-2184

 

 

 

 

 

 

 

 

Step 13: Double click on the MOVIE CLIP, create a new layer and draw a line, using the dimensions and positions as figure shown below.

image-2185

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 14: Create a vertical line on another new layer as figure shown below.

image-2186

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 15: Now copy the 2 lines onto a single new layer.

image-2187

 

 

 

 

 

 

 

 

 

 

 

Step 16: Open the transform panel and set “rotate” to 45 degrees.

image-2188

 

 

 

 

 

 

 

 

Step 17: Now, create a new MOVIE CLIP (Insert > New Symbol) called “thumb0” and create 2 layers called “image” and “mask”. Drag the thumbnail thumb_0 on to the “image” layer, placing it at the position shown below.

image-2189

 

 

 

 

 

 

 

 

 

 

Step 18: Create a circle on the “mask layer”

image-2190

 

 

 

 

 

 

 

 

 

 

Step 19: Right click on the “mask” layer and chose “mask”.

image-2191

 

 

 

 

 

 

 

 

Step 20: Convert the mask into an MC (F8) called thumbMask. You can reuse this MC for the other thumbnails.

image-2192

 

 

 

 

 

 

 

 

 

Step 21: Create a dark grey (#404040) circle on a layer below the image and mask, using the positions and dimensions shown below.

image-2193

 

 

 

 

 

 

 

 

 

 

 

Step 22: This will also be reused for the other thumbnails, so convert it to an MC called “thumbBG”. So, that’s the 1st thumbnails created, now create the other 7, using steps 18 – 23.

image-2194

 

 

 

 

 

Step 23: Next, create a layer called “thumbs” and drag thumb0 MC onto the stage, positioning it at the top over the guide. From the properties panel, give it the instance name “thumb0”.

image-2195

 

 

 

 

 

 

 

 

 

 

 

 

Step 24: Convert thumb0mc into another MC called thumb Holder. Set the registration point (circled in red) to the center. To rotate the thumbnails with action script, the thumb Holder MC will be rotate so that each thumbnail doesn’t have to be rotated individually. Setting the registration point to the center makes sure the MC will rotate from the center.

image-2196

 

 

 

 

 

 

 

 

 

 

Step 25: Add all 8 of the thumbnails where the lines intersect with the ring. Place thumb1 at the second point, thumb2 at the 3rd, and so on.

image-2197

 

 

 

 

 

 

 

 

 

 

Step 26: When all the thumbnails have been added, go back to the Gallery Movie Clip and give the thumb Holder MC the instance name “thumb Holder”.

image-2198

 

 

 

 

 

 

 

 

 

 

Step 27: Then the image Holder MC and delete the image MC inside of it. This is because we will be adding the image dynamically with action script.

image-2199

 

 

 

 

 

 

 

 

 

 

Step 28: Now we are going to create a gallery with rotating thumbnails. We will now use some action script. To make the thumbnails function and to rotate them around the main image.
Step 29: Code Explanation:
Line 1: A stop() function to stop it from looping
Line 2: A variable to hold the number of images in the gallery
Line 3: A boolean variable which is used to pause / unpause the gallery

image-2200

 

 

Step 30: Code Explanation:
Line 6 – 7: A for loop is created to assign each thumbnail a property containing the name of it’s corresponding image. The “i” in the loop will start off at 0 and increment by 1 (i++), while i is below 8 (i Line 8: Now that we are storing “thumb4” in “t”, we give it the property “image” and assign it to hold image4 (“image”+i)

image-2201

 

 

Step 31: Code Explanation:
Line 9: An onPress function is create for each thumbnail
Line 10: The last displayed image will be held in current, so we use this function to remove it before the new one is attached (line11), upon pressing the thumbnail
Line 11: We use the t.image property to attach the image to “imageHolder” MC. t.image is refered to as this.image because it’s being called from withing an onPress function.
Line 12: When a thumbnail is rolled over with the mouse, the gallery will be pause (see next step), but when the thumbnail is pressed, we want them to start rotating again, so we set “pauseGallery” to equal false.

image-2202

 

 

 

Step 32: Code Explanation:
Line 14 – 16: “pauseGallery” is set to equal true when the thumbnail is rolled over.
Line 17 – 20: “pauseGallery” is set to equal false when the thumbnail is rolled out.

image-2203

 

 

 

 

Step 33: Code Explanation:
Line 21: When the gallery start image0 is attached to be displayed.
Line 22: An onEnterFrame function is created which will execute any code inbetween the braces {} repeatedly, at the frame rate (30) of the movie.
Line 23: Another loop is used to rotate each thumb counter clockwise with 0.5 degrees. This needs to be done because when the thumbnail holder is spinning round (line 27) the thumbnails will stop being upright.
Line 25: Last we rotate the thumbHolder by 0.5 degreess. You can change the value of this and line 27 to increase or decrease the speed of the rotation.

image-2204

 

 

 

 

 

Step 34: the final code is

image-2205

Tags: , , , , , , , ,

Flash Rotating Globular Photo Gallery

Step-1 Open a new document in flash. Set the background color as black.

Step-2 Create an empty dynamic text box in layer-1 and give the instance name as “box1”. Like that create another empty dynamic text box in the same layer and give instance name as “box2”.

flash-rotating-globular-gallery-1
image-813

Step-3 Collect pictures which you want to put in gallery. Here I have chosen 46 pics. Each image should be in 400X300 pixels for large image and 70X53 for small image.

Step-4 Save large image as pic1, pic2, pic3 …… pic46 and small image as small1, small2 ….. small46.

Note that all your flash documents and images should be in same folder.

Step-5 Import small images to library by File à import à import to library.

Step-6 To view your imported image press Ctrl+L. Library panel will appear on the right hand side. Make a right click on image then go to properties. It will look like below.

	Rotating Globular Gallery
image-814

Step-7 Properties panel box will appear. Check on Linkage à Export for actionscript and give class name as image name without .jpg extension.

Rotating Globular Gallery
image-815

Step-8 Like that do for all 46 images.

Step-9 Create a new layer then select key frame-1 and press F9 to open the actionscript panel and download the  code here then paste inside the panel.

Ctrl+ Enter to run the program.

 

Tags: , ,

Photo album or navigation in Flash

Everyone can do photo gallery by using flash with the help of this tutorial.

1. Select the photos which you want to add in your photo gallery. I had taken 6 photos for this gallery.

2. Open a new document in Flash. The size of the document is according to your photos size.

3. Arrange the photos one by one as like below in Layer-1:

Photos
image-405

Change it to movieclip by pressing F8 and name it as image_mc in properties box. It would be look like as follows,

changed into Movie clip
image-406

4. Make double click on the image_mc movieclip and create layer-2 to draw a rectangle of a size of one photo for masking and change it to group by Ctrl + G. Right click on layer-2, click mask option.

Masking photos
image-407

5. Get out of the movieclip, so now we are in main scene, Layer-1. Name the layer-1 as image. It would be like,

Masked - main scene
image-408

6. Place one dynamic text box below the image for description about your photos and name it as info_txt in a layer-2. I named the layer-2 as description.

Dynamic text for description
image-409

7. Create buttons in layer-3 and name it as buttons, for each photo on the top of the image from the pre-defined buttons by Window –> Common libraries –> Buttons.

Buttons for photo gallery
image-410

8. Convert each button into movieclip and name each one as the1_btn, the2_btn, the3_btn, the4_btn, the5_btn, the6_btn, in the properties box.

9. Create layer above the button layer for actionscript. Write following script in layer-4 , frame-1.

stop();
var pos:Array = [0, 320, 640, 960, 1280, 1600];
var theInfo:Array = [“Sea shore”, “Water Falls”, “Moon in the night”, “Green Lake”, “Nature’s beauty”, “Red Flower”];
var numOfPix:Number = 6;
var w:Number = _level0.the1_btn._width;
var h:Number = _level0.the1_btn._height;
var speed:Number = 10;
var theTgt:Number = 0
//~~~ The text Format ~~~
var theFmt:TextFormat = new TextFormat();
theFmt.align = “center”;
theFmt.color = 0xffffff;
theFmt.font = “theFont”;
theFmt.size = 20;
theFmt.bold = true;
//
_level0.info_txt.selectable = false;
_level0.info_txt.setNewTextFormat(theFmt);
//
for (i=1; i<=numOfPix; i++) {
_level0[“the”+i+”_btn”].createTextField(“theNum_txt”, 1, 0, 0, w, h);
_level0[“the”+i+”_btn”].theNum_txt.text = i;
_level0[“the”+i+”_btn”].theNum_txt.setTextFormat(theFmt);
}
//
for (i=1; i<=pos.length; i++) {
_level0[“the”+i+”_btn”].n = i;
_level0.info_txt.text = _level0.theInfo[0];
_level0[“the”+i+”_btn”].onRelease = function() {
_level0.theTgt = _level0.pos[this.n-1]*-1;
_level0.info_txt.text = _level0.theInfo[this.n-1];
};
_level0[“the”+i+”_btn”].onEnterFrame = function() {
_level0.thePix_mc.panorama_mc._x += (_level0.theTgt-_level0.thePix_mc.panorama_mc._x)/_level0.speed;
};
}

Click the below to see the Flash photo gallery

Click here to download the source Globe rotation

Tags: , ,

Request a Free SEO Quote