2 February 2009

Create flying hearts effect.

Download source project t1059.zip (2 kb)

  • Launch Flash Designer and set movie dimensions 500 x 500 (or any desired).
  • Change frame delay to "Stop".
  • Add new frame, change "Frame 1" to "Master Frame (1)"
  • Go to "Frame 1", select "Master Frame (1)" as the background:
Create a heart
  • Go to "Frame 1"
  • Choose "Insert" > "Shape or Line" and select "Heart"
  • Fill it with radial gradient (center color orange, outer color red), resize it to 52x37 pixels
  • Convert it to sprite ("Edit" > "Convert to Sprite")
  • Rename it to "heart" and check "ActionScript Target" under "Item" > "Placement Properties"
  • Move the sprite outside visible area

Create background
  • Go to "Master Frame (1)"
  • Choose "Insert" > "Shape or Line" and select "Heart"
  • Fill it with vertical gradient, top color light red, bottom color dark red
  • Duplicate, enlarge and position both hearts to create the background



Add ActionScript:


Go to "Frame 1", choose "Frame" > "ActionScript" and paste the code:

maxhearts = 100;

var hearts = new Array();

for(i=0;i<maxhearts;i++)
{
hearts[i] = heart.duplicateMovieClip("heart"+i,100+i);

// put it in random place
hearts[i]._x = Stage.width*Math.random();
hearts[i]._y = Stage.height*Math.random();
hearts[i]._xscale = 40+Math.random()*60;
hearts[i]._yscale = hearts[i]._xscale;

hearts[i].yspeed = Math.random()*4+ 1;
hearts[i].increment = -0.025+Math.random()*0.05;
hearts[i].onEnterFrame = function() {
this.radians = this.increment + this.radians;
this._y = this._y - this.yspeed;
this._x = Math.sin(this.radians) + this._x;
if (this._y<-20) {
this._y = Stage.height;
this._x = 0-10+Math.random()*Stage.width;
}
}
}

Hit F9 for preview.

INFO: to place an object in front of hearts, select it, choose "Item" > "Placement Properties" and change the layer to higher value, for example "Layer 3":

 Give your comments if you like this tutorial.. and i hope you like this. :)

3 comments:

  1. very nice thanks a lot for a this tutorials

    ReplyDelete
  2. like it. Is there a way to generate boxes via xml and change the text on each box comes from xml with the same animation?

    ReplyDelete
  3. I did not try it out yet you can try it it at your side...thanks

    ReplyDelete

Follow on Buzz