PDA

View Full Version : Challenge (eye candy) - Fire


retrotron
07-18-2003, 01:35 AM
Maybe this is a good idea, maybe not.
In lieu of pom's great water threat, we could do one on fire too.
25 lines, and be sure to post an example.

I'll start with a simple one:

>> see it (http://www.cfhosting.it/jt/extras/fire1.swf) (about a 450 x 450 viewing area)


function removeClip(clip) {
clip.removeMovieClip();
} // end removeClip()
function setFlame() {
for (var j = 0; j<20; j++) {
_root.createEmptyMovieClip("flame"+i, theDepth++);
_root["flame"+i]._x = _root["flame"+i]._y=250+(Math.random()*3);
_root["flame"+i].beginGradientFill("linear", [0xFF9900, 0xFF6600], [Math.random()*150, Math.random()*150], [0, 255], {matrixType:"box", x:0, y:-40, w:10, h:20, r:(45/180)*Math.PI});
_root["flame"+i].curveTo(-8, -3, 0, -33);
_root["flame"+i].curveTo(10, 5, 0, 0);
_root["flame"+i].endFill();
_root["flame"+i]._xscale = _root["flame"+i]._yscale=Math.random()*95;
_root["flame"+i]._alpha = Math.random()*80;
_root["flame"+(i++)].onEnterFrame = function() {
if (this._yscale>1) {
this._x -= Math.sin(this.count++)*(Math.random()*10);
this._y -= Math.random()*5;
this._xscale -= Math.random()*5;
this._yscale -= Math.random()*10;
this._alpha -= Math.ceil(Math.random()*1);
} else {
delete this.onEnterFrame;
removeClip(this);
} // end if (this._yscale > 1)
} // end onEnterFrame()
} // end j loop
} // end setFlame()
flameInterval = setInterval(setFlame, 10);

pom
07-18-2003, 07:33 AM
Should I start now the Wind Challenge? :D

And by the way that's very nice, Retrotron.

retrotron
07-18-2003, 11:43 AM
Ha ha, yeah, eventually we might get the water, fire, wind, and earth eye candy, and then we can wallow in our full orbed orientation to pagan cosmic AS syncretism. Mu ha ha ha ha ha!

pom
07-27-2003, 06:44 PM
Let's try and get this battle going...
Freely inspired from deliMIter: use a dark background and a fps of 24makeFlame = function () {
var cl = this.createEmptyMovieClip ( "flame" + i, i++ ) ;
cl.lineStyle ( random ( 10 ) + 20 ) ;
cl.lineTo ( .45, .15 ) ;
cl._x = 50 + random (15) - 7 ;
cl._y = 100 ;
cl.phi = Math.random() * Math.PI - Math.PI / 2 ;
(cl.col = new Color (cl)).setRGB ( cl.c = 0xff0000 ) ;
cl.onEnterFrame = function () {
this._y -=3 ;
this._x += 3 * Math.cos ( this.w + this.phi ) ;
this.w += .5 ;
if ( this.c < 0xfffc00 ) this.col.setRGB (this.c += 0x000f00 ) ;
this._alpha < 5 ? this.removeMovieClip() : this._alpha -= 2 ;
this._xscale = this._yscale -= 2 ;
}
}
setInterval ( this, "makeFlame", 30 ) ;pom :)

retrotron
07-27-2003, 08:03 PM
That's pretty intense . . . makes me think of deep sea vents . . . hmmm . . . you may have bridged the water/fire thread. ;)

Jesse
07-28-2003, 12:35 AM
That's awesome POM. Great work

pom
07-28-2003, 09:24 AM
If someone wants to add some smoke with the remaining of the lines... :) <-- edit: looks like it's a smiley-free zone...
edit2 : 1789 posts, vive la France!!

JGizmo
07-28-2003, 10:33 AM
Hi pom, I played with your codes and added some smoke, hope you don't mind.
makeFlame = function () {
var cl = this.createEmptyMovieClip("flame"+i, i++);
cl.lineStyle(random(10)+20);
cl.lineTo(.45, .15);
cl._x = 200+random(15);
cl._y = 400;
cl.smoke = false;
cl.phi = Math.random()*Math.PI-Math.PI/2;
(cl.col=new Color(cl)).setRGB(cl.c=0xff0000);
cl.onEnterFrame = function() {
if (!this.smoke) {
this.col.setRGB(this.c += 0x000600);
this._alpha -= 1;
this._y -= 3;
this.w += .5;
this._xscale = this._yscale -= 1;
this._x += 3*Math.cos(this.w+this.phi);
if (this.c>=0xfffc00) {
this.smoke = !this.smoke;
this.col.setRGB(0xcccccc);
}
} else {
smokeit(this);
}
};
};
smokeit = function (name) {
name._y -= 20+random(20);
name._x += 5*Math.cos(name.w+name.phi);
name._xscale = name._yscale =100+random(300);
name._alpha<5 ? name.removeMovieClip() : name._alpha -= 5;
};
setInterval(this, "makeFlame", 30);
John

snapple
07-28-2003, 02:33 PM
This is from looking at retrotron's code (sorry just felt like playing instead of thinking), it's a lot more simple and gives a really nice flame / realistic flickering effect:

*bg=0x000000, fps=12*


function makeFire(){
for(i=0; i<40; i++){
_root.createEmptyMovieClip("flame"+i,i);
_root["flame"+i].beginFill(0xFF3300);
_root["flame"+i].curveTo(-15, -3, 0, -43);
_root["flame"+i].curveTo(15, 5, 0, 0);
_root["flame"+i].endFill();
_root["flame"+i]._yscale = Math.random()*195;
_root["flame"+i].onEnterFrame = function(){
if (this._yscale>1) {
this._x -= Math.random()*10;
this._y -= Math.random()*5;
this._alpha -= Math.ceil(Math.random()*250);
}
}
}
}
setInterval(makeFire, 20);


I have a question.

I was going to use beginGradientFill (but i dont fully understand it), i understand all of the parameters apart from the matrix one - what i understand is that it is an argument that allows for transformation, i know you can have 3X3 or box - and that box is easier, but what exactly does it do and why do i need it ? I thought that the string value "radial" or "linear" would do the job ???

Many thanks indeed, regards - snapple :)

Jesse
07-28-2003, 07:30 PM
Jesse owns up to not understanding the color matrix in beginGradient fill also. I've seen a tutorial ont his which, while I appreciate the author's efforts, was not really any help at all. I don't know of any good ones, so if anyone can teahc me a bit, I'll write one. Or someone could write one for us ;)

snapple
07-28-2003, 08:52 PM
I found (and still am finding) this really, really helpful:

http://www.macromedia.com/support/flash/action_scripts/actionscript_dictionary/actionscript_dictionary510.html

Hope it is of help, it spends a little time on 3X3 (which i knew to stay away from), but it does talk about box too.

Or was this the one you did not find to be too helpful ?

This is how i understood it (i have tried to line up the comments over the corresponding actions):


for(i=1;i<2;i++){
_root.createEmptyMovieClip("box"+i, 100+i);
//_root["box"+i].beginGradientFill: type [colors][alpha of color] [amount of blur] [% of color width] [color divide angle]
_root["box"+i].beginGradientFill("linear", [0xFF9900, 0xFF6600],[100, 100], [0, 225], {matrixType:"box", x:10, y:-40, w:10, h:10, r:45});
_root["box"+i].moveTo(-100, -30);
_root["box"+i].lineTo(100, -30);
_root["box"+i].lineTo(100, 30);
_root["box"+i].lineTo(-100, 30);
_root["box"+i].endFill(-100, -20);
_root["box"+i]._x=60;
_root["box"+i]._y=25;
}


Regards, snapple :)

retrotron
07-28-2003, 11:20 PM
I like your flame code, snapple. You're right, it flickers, much like a real flame.

farafiro
07-30-2003, 02:03 AM
Originally posted by Jesse
Jesse owns up to not understanding the color matrix in beginGradient fill also. I've seen a tutorial ont his which, while I appreciate the author's efforts, was not really any help at all. I don't know of any good ones, so if anyone can teahc me a bit, I'll write one. Or someone could write one for us ;) Why Jesse??
what's wrong with it??

pom
08-02-2003, 10:10 AM
Gradient fills are cool... // Dégradé
with ( _root.createEmptyMovieClip( "grad", 1 ) ) {
colors = [ 0xFF0000, 0xffac00, 0xffff00 ];
alphas = [ 100, 60, 30 ];
ratios = [ 0, 0xa0, 0xFF ];
matrix = { matrixType:"box", x:0, y:25, w:100, h:100, r:(45/180)*Math.PI };
beginGradientFill( "radial", colors, alphas, ratios, matrix );
lineto(0,100);
lineto(100,100);
lineto(100,0);
lineto(0,0);
endFill();
}
// Flame
with (_root.createEmptyMovieClip( "flame", 2 ) ) {
beginFill ( 0 ) ;
moveTo ( 50, 100 ) ;
curveTo ( 0, 50, 50, 0 ) ;
curveTo ( 100, 50, 50, 100 ) ;
}
grad.setMask ( flame ) ;

pom
08-02-2003, 11:09 AM
// generateRandom
function genRand (a) {
return random (a) - a / 2 ;
}
// Dégradé
with ( _root.createEmptyMovieClip( "grad", 1 ) ) {
colors = [ 0xFF0000, 0xffac00, 0xffff00 ];
alphas = [ 100, 60, 30 ];
ratios = [ 0, 0xa0, 0xFF ];
matrix = { matrixType:"box", x:0, y:-50, w:100, h:100, r:(45/180)*Math.PI };
beginGradientFill( "radial", colors, alphas, ratios, matrix );
lineto(0,-100);
lineto(100,-100);
lineto(100,0);
lineto(0,0);
endFill();
grad.onEnterFrame = function () {
this._yscale = 130 + 30 * Math.sin( n+=.05 ) ;
}
}
// Flame
_root.createEmptyMovieClip( "flame", 2 ) ;
_root.onEnterFrame = function () {
flame.clear() ;
top = {x:50, y:-100} ;
left = {x:2, y:-20} ;
right = {x:98, y:-20} ;
flame.beginFill ( 0 ) ;
flame.moveTo ( 50, 0 ) ;
flame.curveTo ( left.x+genRand(5), left.y+genRand(5), top.x+genRand(10), top.y+genRand(5) ) ;
flame.curveTo ( right.x+genRand (5), right.y+genRand (5), 50, 0 ) ;
grad.setMask ( flame ) ;
}26 lines but I could have put the colors, alpha and ratios directly in the gradient fill, so I hope you'll forgive me...

pom
08-02-2003, 11:32 AM
JGizmo >> Nice smoke! :) Here's mine:makeFlame = function () {
var cl = this.createEmptyMovieClip("flame"+i, i++);
cl.lineStyle(random(10)+20);
cl.lineTo(.45, .15);
(cl.col=new Color(cl)).setRGB(cl.c=0xff0000);
cl._x = 200+random(15);
cl._y = 400;
cl.w = Math.random() / 5 + .1
cl.amp = (random (20) + 5) * ( random (2) ? 1 : -1 ) ;
cl.onEnterFrame = function() {
this.col.setRGB(this.c += 0x000600);
this._alpha -= 1;
this._y -= 3;
this._x = 200 + this.amp * Math.sin( this.a += this.w ) ;
this.amp *= .99 ;
this._xscale = this._yscale -= .5;
if (this.c>=0xfffc00) {
this.col.setRGB(0xcccccc);
this.onEnterFrame = smokeit;
}
};
};
smokeit = function () {
this._y -= 2 + random(5);
this._xscale = this._yscale += 10 ;
this._alpha < 5 ? this.removeMovieClip() : this._alpha -= 3;
};
setInterval(this, "makeFlame", 20);I changed the fire code a bit too.

snapple
08-02-2003, 11:56 AM
Top stuff as usual pom.

Love the timing of the smoke - whole effect looks great.

snapple :)

pom
08-10-2003, 06:02 AM
By the way, if you want a really realistic flame, here's a code by Marchdabeachy which he posted on Bit's forums (I hope you don't mind, Marsh) : // marchdabeachy
offsetX = 275;
offsetY = 100;
left = 0;
right = 0;
top = 0;
leftGoal = 0;
rightGoal = 0;
topGoal = 0;
rate = .2;
decay = .9;
shapes = ["15|30", "10|50", "5|70", "0|100"];
for (var i = 0; i<shapes.length; i++) {
var name = "flame"+i;
createEmptyMovieClip(name, i);
_root[name]._x = offsetX;
_root[name]._y = offsetY;
_root[name].offset = parseInt(shapes[i].split("|")[0]);
_root[name].fade = parseInt(shapes[i].split("|")[1]);
}
createEmptyMovieClip("heat", i);
heat._x = offsetX;
heat._y = offsetY;
checkEdge = function (cur, side, dist) {
change = 0;
if (cur>side) {
change -= Math.random()*dist;
} else if (cur<-side) {
change += Math.random()*dist;
}
return change;
};
onEnterFrame = function () {
// change edge goals
leftGoal += Math.random()*6-3;
leftGoal += checkEdge(leftGoal, 10, 3);
rightGoal += Math.random()*6-3;
rightGoal += checkEdge(rightGoal, 10, 3);
topGoal += Math.random()*8-4;
topGoal += checkEdge(topGoal, 15, 4);
leftAccel = (leftGoal-left)*rate;
leftVeloc += leftAccel;
leftVeloc *= decay;
left += leftVeloc;
rightAccel = (rightGoal-right)*rate;
rightVeloc += rightAccel;
rightVeloc *= decay;
right += rightVeloc;
topAccel = (topGoal-top)*rate;
topVeloc += topAccel;
topVeloc *= decay;
top += topVeloc;
// make flames
for (var i = 0; i<shapes.length; i++) {
with (_root["flame"+i]) {
clear();
colors = [0xFCE39C, 0xF4AC35];
alphas = [_root["flame"+i].fade, _root["flame"+i].fade-20];
ratios = [70, 255];
matrix = {matrixType:"box", x:-50, y:50, w:100, h:200, r:0};
beginGradientFill("radial", colors, alphas, ratios, matrix);
lineStyle(1, 0x000000, 0);
moveTo(0-left+right, 0-top-_root["flame"+i].offset*2);
curveTo(40+_root["flame"+i].offset+right, 180, 0, 200);
curveTo(-40-_root["flame"+i].offset-left, 180, 0-left+right, 0-top-_root["flame"+i].offset*2);
endFill();
}
}
// adjust heat
with (_root.heat) {
clear();
colors = [0x986932, 0x986932];
alphas = [70, 0];
ratios = [20, 255];
matrix = {matrixType:"box", x:-20-left/2, y:120-top, w:40+right/2, h:120+top, r:0};
beginGradientFill("radial", colors, alphas, ratios, matrix);
lineStyle(1, 0x000000, 0);
moveTo(-50, 0);
lineTo(50, 0);
lineTo(50, 200);
lineTo(-50, 200);
lineTo(-50, 0);
endFill();
}
duplicateMovieClip(_root["flame"+(shapes.length-1)], "shapeMask", shapes.length+1);
heat.setMask(shapeMask);
}; All right, it's not 25 lines, but wow!

snapple
08-10-2003, 12:05 PM
Wow, i could feel the heat.

That was trulty amazing - you couldn't get more realistic.

just can't beleive it.

snapple :)

JGizmo
08-10-2003, 03:30 PM
Damn, Marchdabeachy's code is HOT!

JGizmo
08-14-2003, 11:24 PM
Sorry, I cheated with jpg =(

http://www.wdheaven.com/version3/expt061.swf

John

retrotron
08-15-2003, 01:24 AM
Nice JGizmo. How'd you do the flame?

Yeah, marshdabeachy's is pretty darn sweet.

JGizmo
08-15-2003, 09:07 AM
retrotron, the flame made up from strips of masked jpeg and adding motion to it.

John

retrotron
08-15-2003, 10:03 AM
Cool, that's what I thought but couldn't quite tell. I don't suppose you could post the .fla?

JGizmo
08-15-2003, 01:37 PM
The file is 440k, thought it would be big to post it here, however the engine is all in one framerow = 1;
column = 60;
total = row*column;
c = 0;
picW = 200;
picH = 280;
step = 1.3;
for (i=0; i<column; i++) {
for (j=0; j<row; j++) {
this.createEmptyMovieClip("mc"+c, c);
var shape = this["mc"+c];
shape._x = shape.x=192.5+j*picW/row;
shape._y = shape.y=75+i*picH/column;
shape.attachMovie("mc", "pic", 1);
shape.pic._x = 0-j*picW/row;
shape.pic._y = 0-i*picH/column;
shape.createEmptyMovieClip("mask", 2);
shape.mask.attachMovie("mask", "mask", 1);
shape.mask._width = picW/row;
shape.mask._height = picH/column;
shape.pic.setMask(shape.mask);
///////////////////////////////////////////////////////
shape.xoffset = total-(c+8)+Math.sin(c*Math.PI/180);
shape.onEnterFrame = function() {
d += this.xoffset/step;
this._x = this.x+Math.sin(d*Math.PI/180)*this.xoffset;
};
c++;
}
}
stop();
Put this in mind, I was thinking doing other thing when I wrote this engine but end up with different idea along the way. You will need to create an mc and embed an image inside it with top left corner at (0,0), try it urself.

John

pom
08-16-2003, 06:48 AM
That's sweet! Why don't you try to draw the flame with the drawing API? I'm sure you can cram it inside 25 lines :D

JGizmo
08-16-2003, 09:02 AM
Pom, you are more expert than I am, I would pass that job on to you! =)

betaruce
08-19-2003, 01:08 PM
i've one here that made with drawing api

http://betaruce.xeonic.com/flash_swf/flame_3.swf

sorry seems cnanot find the code now

if anyone needs it tell me and I'll try to find it out

betaruce
08-19-2003, 01:13 PM
o i got it!

mc = createEmptyMovieClip("flame", 1);
mc._x = Stage.width/2;
mc._y = Stage.height/2;
mc.lx = -40;
mc.rx = 40;
mc.tx = 0;
mc.ly = mc.ry = -30;
mc.ty = -120;
mc.onEnterFrame = function() {
with (this) {
lx += (lx<-50) ? 5 : (lx>-30) ? -5 : Math.random()*2-1;
rx += (rx>50) ? -5 : (rx<30) ? 5 : Math.random()*2-1;
tx += (tx>10) ? -5 : (tx<-10) ? 5 : Math.random()*2-1;
ly += (ly<-40) ? 5 : (ly>-20) ? -5 : Math.random()*2-1;
ry += (ry<-40) ? 5 : (ry>-20) ? -5 : Math.random()*2-1;
ty += (ty<-130) ? 5 : (ty>-110) ? -5 : Math.random()*2-1;
clear();
lineStyle(1, 0, 0);
beginGradientFill("radial", [0x000033, 0xFFFF99, 0xFFFFCC], [40, 90, 80], [0, 130, 255], {matrixType:"box", x:-40, y:-120, w:80, h:270, r:0});
moveTo(0, 0);
curveTo(lx, ly, tx, ty);
curveTo(rx, ry, 0, 0);
}
}