PDA

View Full Version : challenge - moving flames as


orange gold
06-03-2007, 05:22 AM
ok you have to make moving flames that look realistic glows would help that move, contest begins now, it has to be all done in actionscript

orange gold
06-03-2007, 06:13 AM
alright this will help you its a little tool i made that will show you a grid with an alpha of 20 then when you click on it it tells you the x and y position of the point you clicked on its at http://albert.teleinc.com/tool.zip

Flash Gordon
06-03-2007, 07:15 AM
How in the world is that supposed to help people build flames??? :confused:

The point of these contest is not to just take other people's code but to challenge them with some of your own.

orange gold
06-03-2007, 03:58 PM
first off thats just a tool i made to help you figure out were your line is on the x, y axis in as lineTo and stuff so we can build a realistic moving flame all done with actionscript

babeuf
06-22-2007, 10:51 AM
Hi ! That s my first post here !

Here's a small fire effect using BitmapData.

It's as2 and it takes a lot of ressources :(

Just move your mouse over the stage (compile in 40 fps )

import flash.filters.BlurFilter;
import flash.display.BitmapData ;

var mcBack : MovieClip = _root.createEmptyMovieClip("back",1);
var mcFront : MovieClip = _root.createEmptyMovieClip("front",2);

Mouse.hide() ;
var bmp : BitmapData = new BitmapData(Stage.width, Stage.height, true, 0xFF000000) ;
var b = new BlurFilter(6,6,2);
mcBack.attachBitmap(bmp,1);
mcBack.filters = [b] ;
mcFront.lineStyle(10,0xFFFF6600) ;
mcFront.moveTo(0,0) ;
mcFront.lineTo(.5,.5);
mcFront.filters = [b] ;

_root.onEnterFrame = function()
{
bmp.draw(_root);
bmp.scroll(0,-4);
mcFront._x =_root._xmouse ;
mcFront._y = _root._ymouse;
}

Stu
06-23-2007, 02:22 PM
Hi babeuf, and welcome.

Nice flame - I borrowed the basic principle and put it into AS3, seems to be a little less processor hungry.

(I'm sure my code could do with some work though - this is the first time I have played with AS3..)

// flame colours
var outer_col:uint = 0xFF6600;
var inner_col:uint = 0xFFFF00;

// arrays to hold our flame parts
var outer_flame:Array = new Array();
var inner_flame:Array = new Array();

var circle:Sprite;

// setup blur to apply to flame elements
var blur:BlurFilter = new BlurFilter(30,30,2);

// paint the background black
this.graphics.beginFill(0x000000);
this.graphics.drawRect(0,0,550,400);

// create flames and draw dodgy looking candle
addFlameParts(outer_flame, outer_col, 275, 250, 40);
drawCandle();
addFlameParts(inner_flame, inner_col, 275, 270, 20);

// create a timer to call the update function
var timer:Timer = new Timer(80);
timer.addEventListener("timer", updateFlame);
timer.start();

// populate the flame arrays
function addFlameParts(holder_array:Array, flame_col:uint, xpos:int, ypos:int, diameter:uint):void {
for (var i:Number=0; i<20; i++) {
circle = new Sprite();
circle.graphics.beginFill(flame_col);
circle.graphics.drawCircle(xpos, ypos-(i*15), diameter);
circle.filters = [blur]
holder_array.push(circle);
addChild(circle);
diameter -= (diameter/10);
}
}

// update the flame
function updateFlame(t_evt:TimerEvent):void {
var offset:Number;
for(var i:Number=0; i<outer_flame.length; i++) {
offset = (Math.random()*6)-3;
Sprite(outer_flame[i]).x = offset;
Sprite(inner_flame[i]).x = offset;
}
}

// dodgy looking candle
function drawCandle():void {
// candle
this.graphics.beginFill(0xF8FEBC)
this.graphics.drawRect(175, 315, 200, 85);
this.graphics.beginFill(0xF8FEBC);
this.graphics.lineStyle(1, 0xF1FD82);
this.graphics.drawEllipse(175, 290, 200, 50);
// wick
this.graphics.lineStyle(6, 0x6D6D01, 1, false, "normal", null, null, 3);
this.graphics.moveTo(275, 225);
this.graphics.lineTo(275, 315);
}

Stu

orange gold
07-02-2007, 04:00 AM
ok so we have ...
now can we make "mcFront.lineStyle" blend from 0xFFFF6600 to 0xFF66FF00 to 0x0066FF slowly?

import flash.filters.BlurFilter;
import flash.display.BitmapData ;

var mcBack : MovieClip = _root.createEmptyMovieClip("back",1);
var mcFront : MovieClip = _root.createEmptyMovieClip("front",2);

Mouse.hide() ;
var bmp : BitmapData = new BitmapData(Stage.width, Stage.height, true, 0xFF000000) ;
var b = new BlurFilter(6,6,2);
mcBack.attachBitmap(bmp,1);
mcBack.filters = [b] ;
mcFront.lineStyle(10,0xFFFF6600) ;
mcFront.moveTo(0,0) ;
mcFront.lineTo(.5,.5);
mcFront.filters = [b] ;

_root.onEnterFrame = function()
{
bmp.draw(_root);
bmp.scroll(0,-4);
mcFront._x =_root._xmouse ;
mcFront._y = _root._ymouse;
}


now can we make "mcFront.lineStyle" blend from 0xFFFF6600 to 0xFF66FF00 to 0x0066FF slowly?

orange gold
07-04-2007, 02:57 AM
ok here is what i have so far its good



stop();
import flash.filters.BlurFilter;
import flash.display.BitmapData ;

var mcBack : MovieClip = _root.createEmptyMovieClip("back",1);
var mcFront : MovieClip = _root.createEmptyMovieClip("front",2);

Mouse.hide() ;
var bmp : BitmapData = new BitmapData(Stage.width, Stage.height, true, 0xFF000000) ;
var b = new BlurFilter(6,6,2);
mcBack.attachBitmap(bmp,1);
mcBack.filters = [b] ;
mcFront.lineStyle(10,0xFFFF6600) ;
mcFront.moveTo(0,0) ;
mcFront.lineTo(.5,.5);
mcFront.filters = [b] ;

_root.onEnterFrame = function()
{
bmp.draw(_root);
bmp.scroll(0,-4);
mcFront._x =_root._xmouse ;
mcFront._y = _root._ymouse;
}
_root.onMouseDown = function() {
mcBack.attachBitmap(bmp,1);
mcBack.filters = [b] ;
mcFront.lineStyle(10,0xFF66FF00) ;
mcFront.moveTo(0,0) ;
mcFront.lineTo(.5,.5);
mcFront.filters = [b] ;

_root.onEnterFrame = function()
{
bmp.draw(_root);
bmp.scroll(0,-4);
mcFront._x =_root._xmouse ;
mcFront._y = _root._ymouse;
}
_root.onMouseDown = function() {
mcBack.attachBitmap(bmp,1);
mcBack.filters = [b] ;
mcFront.lineStyle(10,0xFF0066FF) ;
mcFront.moveTo(0,0) ;
mcFront.lineTo(.5,.5);
mcFront.filters = [b] ;

_root.onEnterFrame = function()
{
bmp.draw(_root);
bmp.scroll(0,-4);
mcFront._x =_root._xmouse ;
mcFront._y = _root._ymouse;
}

}

}
trace ("left click for more colors")
/********
add in
mcBack.onEnterFrame = function() {
this._alpha = this._alpha - 0.0005;
}
for a cool effect too
*********/

mattkenefick
07-06-2007, 07:37 PM
Here's something to make it jitter a little. Can be worked on to make look better.. but adds a little realism.


stop();
import flash.filters.BlurFilter;
import flash.display.BitmapData ;

var mcBack : MovieClip = _root.createEmptyMovieClip("back",1);
var mcFront : MovieClip = _root.createEmptyMovieClip("front",2);

Mouse.hide() ;
var bmp:BitmapData = new BitmapData(Stage.width, Stage.height, true, 0xF0F0F00) ;

var c1=6,c2=6,c3=2;

var b = new BlurFilter(c1,c2,c3);

mcBack.attachBitmap(bmp,1);
mcBack.filters = [b] ;
mcFront.lineStyle(10,0xFFFF6600) ;
mcFront.moveTo(0,0) ;
mcFront.lineTo(.2,1);
mcFront.filters = [b] ;


_root.onEnterFrame = function()
{
b = new BlurFilter(rand(1,8),6,c3);
mcFront.filters=[b]

bmp.draw(_root);
bmp.scroll(rand(-2,2),-4);

mcFront._x =_root._xmouse ;
mcFront._y = _root._ymouse;

}



function rand(low, high){
return Math.floor(Math.random() * (high - low)) + low
}

orange gold
07-07-2007, 06:18 AM
good work it looks real good in fps 40

Greg SS
12-13-2007, 02:42 AM
Lets kick it up a notch!

Flame_2.0 <-- AS 2.0 version, 160x30 pixels, scaled 4 times, no smoothing, slooow...
Flame_3.0 <-- AS 3.0 version, 320x60 pixels, scaled 2 times, much better. (requires flash player 9 to view and CS3 to edit).

Description:
Old school procedural fire, the bitmap is generated per pixel using a triangle blur filter where a pixel is the average of the 3 pixels below it:

pixel[x][y] = ( pixel[x-1][y+1] + pixel[x][y+1] + pixel[x+1][y+1] ) / 3

The bitmap is palletized to speed up the calculation.
All random numbers are cached using table lookup method.
All trivial static arithmetic are cached (things like Stage.width+1).

Lets see if you guys can optimize this for speed even further :)

xwielder
01-04-2008, 02:46 PM
Lets kick it up a notch!

Flame_2.0 <-- AS 2.0 version, 160x30 pixels, scaled 4 times, no smoothing, slooow...
Flame_3.0 <-- AS 3.0 version, 320x60 pixels, scaled 2 times, much better. (requires flash player 9 to view and CS3 to edit).

Description:
Old school procedural fire, the bitmap is generated per pixel using a triangle blur filter where a pixel is the average of the 3 pixels below it:

pixel[x][y] = ( pixel[x-1][y+1] + pixel[x][y+1] + pixel[x+1][y+1] ) / 3

The bitmap is palletized to speed up the calculation.
All random numbers are cached using table lookup method.
All trivial static arithmetic are cached (things like Stage.width+1).

Lets see if you guys can optimize this for speed even further :)

Hey, that's a great flame for just using code. I'm impressed.

xwielder
01-04-2008, 05:23 PM
I do have a question.

In the function, "function populateArray ()"

do you mean to have:

randPX[x] = Math.floor(Math.random() * 101 + 668);

as

randPX[x] = Math.floor(Math.random() * (101 + 668));

?

Both give a different output. Which one did you intend?

Greg SS
01-13-2008, 02:28 PM
Of course its

randPX[x] = Math.floor( (Math.random() * 101) + 668);

Multiplication have a higher precedence than addition, I just ommited the paranthesis pair, its essentially the same.

BTW. I have a better version of this flame code in hand, it runs a 640 * 480 res flame just fine, with smaller memory footprint, but its only for AS3.
I'll upload the samples tomorrow.

Greg SS
01-14-2008, 04:23 AM
New update: Flame v. 2.0

Now these puppies uses the new ConvolutionFilter in AS3, so all filter calculation is done using native code, and not script, and that means FAST execution time.

Flame3x3 uses the classic 3x3 flame filter, while Flame3x5 uses a modified filter. The end result didn't differ by much, but the classic 3x3 filter needs tweaking and blurring or it will introduce striping on the result.

The mouse and dancing fireball is an example of implementing this on a larger scale, moving fireball on a large stage. The image was blitted using a dirty rectangle to avoid a full stage refresh on every frame, and it can still play on a reasonable frame rate (30-ish).

Of course, faster is better, if anyone feels like banging their head against a wall, feel free to try to optimize these puppies for speed :P

orange gold
12-28-2008, 05:29 AM
i know this contest is old but i really loved this one and working with it... i remember i got the mouse functions to do flames and change colors then i left this forum for a while i jsut now came back too look at what people had done and i am amazed at what some of you came up with using only actionscript so i herebye officialy re-open this contest

goodluck making a better realistic flame then greg ss.. his are pretty good. im working on one of my own right now
!! HAVE FUN !!