Flash Tutorial - Boom Boom effect

Uncategorized No Comments

In this easy tutorial made for Flash 8 I will show you how to create very attractive boom boom effect using the picture. You don”t have to use action script code to make this tutorial. You just have to use some special flash tips and tricks and mask. Let”s go!



Step 1

First of all, find any picture which you like to use for this tutorial. You can also if you like, save my picture.



Step 2

Open a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the dimensions of your document as the dimension of picture. Select white as background color and set your Flash movie”s frame rate to 45 fps. Then, click ok.



Step 3

Choose file > Import > Import to stage (Shortcut key: Ctrl+R) and import any picture into a flash stage.

Step 4

While the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.



Step 5

While the new made movie clip is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 6

Double click on layer 1 to rename its name into a picture1. Afte that, click on frame 10 and press F6 key.

Step 7

Go back on the first frame. take the Selection Tool (V) and click once on the picture (movie clip) to select it. fter that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced on it, click on Settings button set the following options and click ok.



Step 8

Right-click anywhere on the gray area between frame 1 and frame 10 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 9

Create a new layer above the layer picture1 and name it mask1

Step 10

After that, take the Oval Tool (O) and draw a little circle like it is shown on the picture below.



While the circle is still selected, repeat step 5 to aligned it with the background.

Step 11

After that, while the circle is still selected, press Ctrl+G key (Group) to group a circle.

Step 12

Click on frame 10 of layer mask1 and press F6 key. After that, take the Free Transform Tool (Q) and enlarge the circle a little. See the picture below.



Step 13

Repeat step 8.

Step 14

Select mask1 area layer and convert it to a mask by right-clicking on the mask1 area layer and selecting Mask. See the picture below.



Step 15

Create a new layer above the layer mask 1 and name it picture2.

Step 16

After that, go on the first frame of layer picture 1 and press Ctrl+C key on the keyboard (Copy). Then, select frame 5 of layer picture2, press F6 key and after that Ctrl+Shift+V key (Paste in place).

Step 17

Select frame 15 of layer picture 2 and press again F6 key. Then, take the Selection Tool (V) and click once on the picture to select it. After that, go to the Properties Panel, and for Color menu choose None. See the picture below.



Step 18

Choose again right-click anywhere on the gray area between frame 5 and frame 15 on the timeline and choose Create Motion Tween from the menu that appears.

Step 19

Create a new layer above the layer picture2 and name it mask2.

Step 20

Go back on the first frame of layer mask1 and press F6 key. Then, select frame 5 of layer mask2, press F6 key and after that Ctrl+Shift+V key (Paste in place).

Step 21

Select now frame 15 of layer mask and press F6 key. Then, while the circle is still selected, take the Free Transform Tool (Q) and enlarge it a little more, if we compare it with the step 12.



Step 22

Repeat step 18.

Step 23

Now, repeat step 14.

with the first two example. Repeat this steps until you don”t fill with circle the all picture. After that, go back, decrease the circle until you don”t came to the end.

Have a nice day!

Download source file (.fla)

Flash and AS Tutorial - Fades picture sample by little action script

Uncategorized No Comments

See this step by step tutorial and learn how to create fades picture sample in flash using a little Action Script. You will also learn:

1. How to import an image in Flash,
2. How to convert a bitmap image into a symbol,
3. How to apply Alpha on image and more.



Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 320 pixels and the height to 240 pixels. Select white as background color. Set your Flash movie”s frame rate to 16 fps (Frames per Second) and click ok.



Step 2

Download the sample images for this tutorial that you”ll use to quickly create this tutorail.

Step 3

Choose File > Import > Import to Library . In the file explorer window that appears, find a three images ( img1, img2…). Then, press and hold down Shift key and select them all. After that, click Open. If you now open your Library (Ctrl+L), you will see them. See the picture below.



Step 4

While the flash library it still open,take the Selection Tool (V) and move the first image from the Library on the stage.

Step 5

While the image is still selected go to the Align Panel (Window > Align). Then, do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 6

After that, while the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Graphic Symbol. See the picture below.



Step 7

Click on frame 15, 30 and 45 and press F6 key.

Step 8

Go back on frame 1, take the Selection Tool (V), click once on the image to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Do that also for frame 45.

Step 9

Right-click anywhere on the gray area between the frame 1 and 15 and frame 30 and 45 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



After that, click on frame 46 and press F7 key (Blank keyframe).



Step 10

Double click on layer 1 to rename its name in image 1. After that, create a new layer above the image 1 layer and name it image 2.

Step 11

Click on frame 30 of layer image 2 and press F6 key. After that, move the second image from the flash library on the stage.

Step 12

While the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Graphic Symbol.



Step 13

Repeat step 5.

Step 14

Click on frame 45, 60 and 75 and press F6 key.

Step 15

Go back on frame 30 and repeat step 8. Do that also for frame 70.

Step 16

Right-click anywhere on the gray area between the frame 30 and 45 and frame 60 and 75 on the timeline and choose Create Motion Tween from the menu that appears.See the picture below.



Step 17

Click on frame 76 and press F7 key.

Step 18

Create a new layer above the image 2 layer and name it image 3.

Step 19

Click on frame 60 of layer image 3 and press F6 key. After that, take the Selection Tool (V) and move the another (third) image from the flash library (shortcut key: Ctrl+L) to the stage.

Step 20

While the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Graphic symbol.See the picture below.

Step 21

Repeat step 5.

Step 22

Click on frame 75, 90 and 105 and press F6 key.

Step 23

Go back on frame 60 and repeat step 8. Do that also for frame 105.

Step 24

Right-click anywhere on the gray area between the frame 60 and 75 and frame 90 and 105 on the timeline and choose Create Motion Tween from the menu that appears.

Step 25

Go back on layer image 1, click on the first frame and press Ctrl+C key on the keyboard (Copy). After that, click on frame 90 and press F6 key. Then, press Ctrl+Shift+V key (Paste in Place).

Step 26

After that click on frame 105 and press again F6 key.

Step 27

While you”re still on frame 105, take the Selection Tool (V), click once on the image to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 100%.



Step 28

Right-click anywhere on the gray area between the frame 90 and 105 on the timeline and choose Create Motion Tween from the menu that appears.

Step 29

It”s time for a liitle script, so create a new layer above the all layers and name it action. See the picture below.



Step 30

Click on frame 15 of layer action and press F6 key. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this keyframe “restart”. See the picture below.





Step 31

Click on frame 105 of layer action and press again F6 key. After that, go to the Action Script Panel (F9) and enter the following action script code inside the actions panel:

gotoAndPlay(”restart”);




Have a nice day!

Download source file (.fla)

« Previous Entries

One of the most unique, up-and-coming, uses of Flash is within the foreign real estate sector. Real Estate marketers, keen on providing a visually stimulating and comprehensive sales experience for their customers, often call on flash designers to create intricate visual portfolios of real estate offerings. Unlike other verticals, in the condo, hotel, and rental world Flash website intros and intense imagery are acceptable, if not rule of thumb. Text doesn't sell a nice vacation condo to a buyer. Instead, a clear, inviting, exciting layout of the property, beach view, and condo floor plans united inside a short Flash .swf file will catch a prospective buyer's attention, draw them in, and hopefully convert them into a sales lead.

Probably one of the most stunning and sought after vacation spots in the world right now is Costa Rica, a small Latin American nation located in beautiful Central America. Costa Rica has the best of both worlds: sweeping beach scapes of sand and palm trees from both the Caribbean and Pacific Ocean can be found within a short hour flight from the main international airport in capital city San Jose.

The pristine nature of many beach communities has spawned a new tourism based economy that has developers scrambling to build new a Costa Rica hotel on this devine beach property. The Costa Rica vacation rental market is competitive and becoming full of excellent opportunities for savvy buyers.

This is where Flash comes in. Most Costa Rica vacation condos can't be sold over the phone. Instead, it takes graphics, eye appeal, and excitement to capture a buyer. The same goes with Costa Rica beach condos which need graphical imagery to convince customers of their beauty and value over the internet. A typical Costa Rica vacation rental can range from $500 per week to $1500. On the top end, Costa Rica vacation luxury rentals start at $1500 and run gambit to over $2500. The money spent, however, is well worth it. Costa Rica beach condos go fast and advance reservations are required. So, if you know anyone who is interested in this wonderful, exciting get-away, tell them now!

As a result, traditional Costa Rica vacation rental and Costa Rica vacation hotels have had to create a very strong IT and Web design department, in addition to the standard walk-in real estate office. This fact is soley due to the global nature of the web: customers can't always visit first, so they chose to take a virtual tour instead. Thus, Costa Rica beach Condo developers count on a strong percentage of their sales being web-generated, in addition to standard brick and mortar operations.

What do these Flash designers use? In addition to stock photography, architectural layouts, and imagery, Flex and Action Script are employed to provide a 3 dimensional, "virtual tour" of these Costa Rica vacation rentals. The action script provides the programmer with the opportunity to fully animate condo tours, such that a prospective customer can feel as if he or she is actually inside the space they want to rent. In turn, because of the strong need of Flash, local web designers in Costa Rica have experienced high job growth and new employment opportunities. As always, foreign tourism teamed with local internet talent produces a dynamic, rich new economy that can literally change a country overnight. Considered a pioneer in employing such designers, most Costa Rica real estate groups prefer tradition website design. These flash-friendly companies generally emanate from the western side of Costa Rica, offering Jaco Beach real estate and accomodations.