Syndicate

Flash Jam Site

Featured Articles

Bounce Effect


Bounce Effect

Using Flash you can create a Bouncing effect of the ball. To do this, just follow the steps given below:

1. Open a new Flash document, choose the oval tool and draw a circle on to the stage.

    

2. Select the Ball using the selection tool, click Modify –> Convert to Symbol.

    

3. Name the Symbol ball and choose Movie Clip as its behavior.

    

4. Click scene 1, name the 1st Layer ball. Insert another Layer and name it actions.

    

5. Click the 40th Frame on the ball Layer and Insert Frame.

6. Click the 40th Frame of the actions Layer and Insert Frame.

    

7. Click the actions layer, Right Click Frame 1 –> Actions

    

8. Type the following action script:

import mx.transitions.Tween;

import mx.transitions.easing.*;

new Tween(ball_mc,”_y”,Bounce.easeOut,ball_mc._y,329.0,3,true);

new Tween(ball_mc,”_x”,None.easeNone,ball_mc._x,450,3,true);

9. Save your Work and Test Movie.

    

Download .fla File of Bounce Effect

Download .swf File of Bounce Effect

Comments (0)

Creating a Flash Button


Creating a Flash Button

Creating a Flash button is very simple. Just follow the steps given below:

1. Drag an oval or a rectangular tool from the Tools window on to the stage.

    

2. Select a Blue fill for the button and place on the stage.

    

3. Select the button by double clicking on it, click Modify –> Convert it to symbol. Suitably name the button and choose Button as its behavior. Click Ok.

    

4. Double click the button to bring the button to the symbol edit mode.

    

5. Choose the Over column from the timeline for Button and right click and choose Insert KeyFrame in the over state.

    

6. With the Over state selected, double click the circle and fill color from the Properties window.

    

7. Choose Down column, Insert KeyFrame in the Down State and fill color.

    

8. Click Control –> Test Movie.

    

Download .fla File of Flash Button

Download .swf File of Flash Button

Comments (0)

Matrix


Matrix

You can create a Matrix effect using Flash. To create these effects just follow the steps:

1. Open a new Flash Document and set the stage size to 640px X 480px.

2. Change the Frame rate to 55 fps and the background color to black.

    

Creating the Matrix elements

3. Select the text tool A, and change the Text to Dynamic, Select Anti alias for Animation,

    

4. Click the text tool and type a. Click on the text, click Modify–>Convert to Symbol.

    

    

5. Name the symbol 1 and choose Movie clip as its Behavior.

    

6. Insert a text box, type a letter. I have used Bookshelf Symbol 7. Increase its zoom to 800%.

    

7. Select the text you typed and click the letter click Modify–>Break Apart.

    

Keyboard Shortcut: Ctrl+B.

8. Create as many movie clips you wish and place it in a folder. To create these movie clips just follow the steps from Step 4 to 7.

9. Click Insert–>New symbol. Name the symbol matrix_mc and choose Movie Clip as its behavior.

    

10. Click Insert–>New symbol. Name the symbol matrix_btn and choose Button as its behavior.

    

11. Create another layer and name it Text as shown below:

    

12. Insert text �Matrix� in the layer Text using the text tool and Insert a KeyFrame in the Up event, In down event insert a Frame.

    

    

13. Drag the Movie clip matrix_mc to the layer.

    

14. Insert KeyFrames in Up, Down, and Over events on Layer 3.

    

15. Go back to the Main Time Line, create another layer and name it actions.

    

16. Drag and drop the matrix button on to the stage and type its instance name as matrix_btn.

    

17. Right click Frame 1–>actions, and type the following action script:

    

import flash.filters.*;

import flash.geom.Rectangle;

var hex_rot:Array = [”0A”, “33″, “FF”, “0A”, “E6″, “CC”, “00″];

var hex_gruen:Array = [”99″, “CC”, “33″, “0A”, “0A”, “CC”, “CC”];

var hex_blau:Array = [”7A”, “FF”, “FF”, “E6″, “0A”, “CC”, “00″];

var matrix_id:Number = 0;

function matrix (clip:MovieClip, matrix_string:String)

{

var matrix_obj:Color = new Color (clip);

var farbe:Number = Number (”0x” + matrix_string);

matrix_obj.setRGB (farbe);

}

function createText ()

{

var gm:Number = this.getNextHighestDepth ();

var matrix_movie:MovieClip = this.createEmptyMovieClip (”matrix_movie_mc” + gm, gm);

var mat:Number = 10 + random (30);

matrix_movie.glow_matrix_varListe = new Array ();

for (var i = 0; i <= mat; i++)

{

var clip_id:String = String (1 + random (48));

var gm:Number = matrix_movie.getNextHighestDepth ();

var matrix_var:MovieClip = matrix_movie.attachMovie (clip_id,”matrix_var_mc” + clip_id + “_” + gm, gm);

matrix_var._y = matrix_movie._height + 4;

matrix_var.cacheAsBitmap = true;

if (random (100) < 20)

{

matrix_movie.glow_matrix_varListe.push (matrix_var);

}

if (i == mat)

{

matrix_movie.glow_matrix_varListe.push (matrix_var); }

matrix (matrix_var, hex_rot + hex_gruen + hex_blau);

}

var skal_wert:Number = random (150);

matrix_movie.cacheAsBitmap = true;

matrix_movie._x = random (Stage.width);

matrix_movie._y = -matrix_movie._height * skal_wert / 100 - 10 - random (100);

matrix_movie.tempo = 4 + random (10);

matrix_movie._xscale = 1 + skal_wert;

matrix_movie._yscale = matrix_movie._xscale;

matrix_movie.skal_wert = matrix_movie._xscale;

setzeBlur (matrix_movie, 0, 1, 3);

setzeGlow (matrix_movie.glow_matrix_varListe);

matrix_movie.bewegen = function()

{

this._y += this.tempo;

if (this._y >= Stage.height)

{

this._parent.createText ();

this.removeMovieClip ();

clearInterval(matrix_iv);

}

};

var matrix_iv:Number = setInterval(matrix_movie, “bewegen”, 30);

}

function setzeBlur (matrix_movie:MovieClip, blurXfaktor:Number, blurYfaktor:Number, blurQualitaet:Number):Void

{

var blurX:Number = blurXfaktor + Math.random ();

var blurY:Number = blurYfaktor + Math.random ();

var quality:Number = blurQualitaet;

var blur:BlurFilter = new BlurFilter (blurX, blurY, quality);

var blurListe:Array = new Array ();

blurListe.push (blur);

matrix_movie.filters = blurListe;

}

function setzeGlow (glow_matrix_varListe:Array):Void

{

for (var i = 0; i < glow_matrix_varListe.length; i++)

{

var matrix_movie:MovieClip = glow_matrix_varListe;

var matrix_movieDuplikat:MovieClip = matrix_movie.duplicateMovieClip (”duplikat_mc” + i, i);

matrix (matrix_movie, “FFFFFF”);

var zufalls_wert:Number = Math.random ();

var color:Number = 0xFFFFFF;

var alpha:Number = .2;

var alpha2:Number = 1;

var blurX:Number = 4 + zufalls_wert * 2;

var blurY:Number = 8 + zufalls_wert * 32;

var blurY2:Number = 8 + zufalls_wert * 8;

var strength:Number = 4 + random (16);

var strength2:Number = 6;

var quality:Number = 3;

var inner:Boolean = false;

var knockout:Boolean = false;

var glow_original:GlowFilter = new GlowFilter (color, alpha, blurX, blurY, strength, quality, inner, knockout);

var glow_duplikat:GlowFilter = new GlowFilter (color, alpha2, blurX, blurY2, strength2, quality, inner, knockout);

var glowListe_original:Array = new Array ();

var glowListe_duplikat:Array = new Array ();

glowListe_original.push (glow_original);

glowListe_duplikat.push (glow_duplikat);

matrix_movie.filters = glowListe_original;

matrix_movieDuplikat.filters = glowListe_duplikat;

}

this.cacheAsBitmap = true;

Stage.align = “TL”;

Stage.scaleMode = “noscale”;

function setzeStage()

{

matrix_btn._x = Stage.width - matrix_btn._width - 5;

matrix_btn._y = Stage.height - matrix_btn._height - 5;

var rahmen:Rectangle = new Rectangle (0, 0, Stage.width, Stage.height);

this.scrollRect = rahmen;

}

this.onResize = function ()

{

setzeStage();

};

Stage.addListener (this);

setzeStage();

function setzeMatrix (maxmatrix_var:Number)

{

for (var i:Number = 1; i < maxmatrix_var; i++)

{

createText ();

}

}

setzeMatrix (80);

matrix_btn.onRelease = function ()

{

matrix_id++;

if (matrix_id == hex_rot.length)

{

matrix_id = 0;

}

};

18. Save your work and Test Movie.

    

When you click the Matrix button, the color changes.. here�s the screen shot:

    

Download .fla File of Matrix

Download .swf File of Matrix

Comments (0)

Photo Masking


Photo Masking

Masking a Photo is very simple using Flash. Just follow the steps given:

1. Import a color photo that needs to be masked and its Black and White version onto the stage.

2. Add a new layer, move the color photo top the new layer.

3. Add another new layer and name it �Mask�.

4. Draw a rectangle using the rectangle tool over the picture. The rectangle drawn should possess height more than the picture and width approximately 100.

5. Convert the photo to a symbol by clicking Modify –>Convert to Symbol.

6. Choose Graphic as its behavior.

7. Right click the layer �Mask� and select Mask from the pop-up menu.

8.Save your work and Test Movie.

    

Download .fla File of Photo Masking

Download .swf File of photo Masking

Comments (0)

Creepy House Animation


Creepy House Animation

In this tutorial you will learn to create an animation that would resemble a creepy house. Go ahead using this tutorial.

1. Open a new Flash Document, set the stage size to �Default� and choose background color to black.

    

2. Rename Layer 1 as moon, using the oval tool draw a circle and color it light yellow. This depicts the moon,

    

3. Select the moon using the selection too, click Modify–>Convert to symbol

    

4. Name the symbol moon and choose graphic as its behavior.

    

5. Create a new layer, and name it �house�, on the stage draw an image of a house and fill color of your choice.

    

6. Select the image, click Modify–>Convert to symbol

    

7. Name the symbol house and choose Movie clip as its behavior.

    

8. Click Frame 30 on moon layer and Insert Frame.

    

9. To create the lightning effect, Draw this as shown below and convert this into a movie clip.

    

10. Make lightning drawing visible and invisible in turns.

11. Move the KeyFrame in frame 1 in “lightning”layer to frame 10.

12. Insert KeyFrame in frame 12.

13. Add KeyFrame again in frame 14, 16, and 18.

14. Add frame by selecting frame 19 and press F5

15. Select KeyFrame in frame 12, and click lightning instance in stage.

16. In Properties panel, use Color=Alpha and value=0%.

17. This will make the instance transparent in frame 12. Repeat the same process with frame 16.

    

18. The house needs to be made darker when there”s no lightning. Click the �house� layer. Create KeyFrame in frame 10, 12, 14, 16, 18, and 20.

19. Select KeyFrame in frame 1, select instance in stage, and in Properties panel use Color=Tint, color=Black, and value=70%. You will get darker image. Repeat the same process with frames 12, 16, and 21.

20. To create the rain animation, use the line tool.

21. From the Properties panel, change line color to white.

22. Create a new layer and name it lightning.

23. Draw several diagonal lines like image below. Make sure your drawing is large enough compared to the stage boundary.

24. Use Erase tool at several part of lines and rub out parts of the lines as shown:

    

25. Select the lines you just drew, and covert it into a graphic symbol and name it water.

    

26. Again select the lines and convert it into a movie clip and name it rain.

    

27. Insert KeyFrames on the Frame 1, 2 and 3 in the Rain movie clip on Layer 1.

    

28. Your final timeline will look this way:

    

29. Save your work and Test Movie.

    

    

Download .fla File of Creepy House Animation

Download .swf File of Creepy House Animation

Comments (0)

Where is Action Script and Flash taking us, particularly in the world of interactive website media, Web 2.0, and newfangled social interenet boom? According to Flash programmer Jim Berringer, as the web continues to grow and reach new demographic groups, Flash will play an extremely important role. Writes Berringer, "The thing about flash is that good designers and Action Script coders can make websites extremely user friendly. Whereas in the past, one had to have an 'introductory' course to the workings of the internet, Flash driven websites are simple: point, click, interact, have fun!". Increasingly, Flash is becoming the choice application for e-commerce, including the highly successful e-wallet www.payspark.com, (run by CSC247) that gives its users the ability to send and receive money, along with an ATM card for withdrawal privileges around the world. Payspark caters mostly to the Euro-gaming community, with focus on the online casinos market vertical. USA clients are not allowed, due to recent legislation enacted by the US Congress now 12 months ago. By far, however, www.payspark.com feeds most of its clients to online casinos. Flash casino and poker platforms are nothing new, but a consolidated flash deposit, play, and withdrawal method is. In effect, the USA is really missing the boat: in the fall, when NFL Betting drives most sports betting operations, USA customers must jump through hoops and clear hurdles imposed by the banking community. Instead of hampering these transactions, the banks should lobby Congress for the right to process money per the will of their clients. Writes Tim Hathaway, a Libertarian think-tank member, "People are being deprived of basic rights to gamble online if they want to. Speaking personally, I love NFL Betting from fall up until the Super Bowl. And why not? It's my right to spend my money as I see fit. Its time for the government to take a more laissez faire approach and leave me alone." Football is not the only sport where betting is popular: in the winter and during the famed "March Madness" college sports season, basketball betting is hugely popular. This means that e-wallets like www.payspark.com need to have solid Flash programming and latency year 'round - because of the importance of financial transaction safety and security. In the end, most people feel the USA legislation only hurts the US economy. According to Dan Lander, a liberal activist, "If I want to play online blackjack it's my business...but, the government can regulate this industry, tax it fairly, and we'll see strong growth in the jobs sector for web hosting, programming, IT, and management."

Oldies, but Goodies!

Image Transition

The Transition of an Image

Create an image and give it a transition effect using Flash. To do so, just follow the steps given below:

1. Open a new Flash Document. Set the stage size to 400 X 300 pixels and the Frame rate to 30 fps.

    

2.Insert some images on to the library by clicking File –> […]

Feather Writing

Feather Writing

This tutorial helps you create a wonderful Feather writing effect. Follow the steps below:

1. Open a new Flash Document, set the stage size to 477 px X 200 px and the Frame rate to 12 fps.

    

2. Type text on the stage as shown below:

    

3. Select the text, Right Click–>Break Apart,

    

    

4. While the text […]

Glowing Text Effect

In this Flash tutorial you will learn how to make text glow (this effect will also work for anything drawn in Flash). The glowing edges around the text will ease in and ease out in this animations. Topics include: soften fill edges, alpha control, and basic tweening. No actionscript involved […]

Bubble Effect

Bubble Effect

You can create a rising bubble effect using Flash. Just follow the steps given below:

1. Open a new Flash document, set the background color to black and change the following document settings by clicking Modify –> Document

    

2. Click Insert –> New Symbol

    

3. Name the symbol Float 0 and […]

Dark flash preloader - Flash Programming

This tutorial will show you how to create dark flash preloader with percent using the action script code.You will also learn, how to design dark preloader, how to convert it into a Movie Clip symbol, how to apply action script code on it and more. Example: Step 1 Create a new flash […]

Flash Jam Site Authors

More Information

Our Friends