topical media & game development
#graphic-flex-image-effects-07-Flex-Planet.ax
#graphic-flex-image-effects-07-Flex-Planet.ax
[swf]
[flash]
flex
package {
import aeon.AnimationLoop;
import aeon.animators.Tweener;
import aeon.events.AnimationEvent;
import aether.effects.common.CompositeEffect;
import aether.effects.common.OverlayImageEffect;
import aether.effects.shaders.ShaderEffect;
import aether.effects.shaders.WrapToSphereEffect;
import aether.effects.texture.TextureEffect;
import aether.effects.transformations.TranslateEffect;
import aether.textures.natural.EarthTexture;
import aether.textures.natural.StarsTexture;
import aether.utils.ImageUtil;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.GradientType;
import flash.display.Shape;
import flash.display.Sprite;
import flash.geom.Matrix;
[SWF(width=550, height=400, backgroundColor=0x000000)]
Demonstrates the use of the aether and aeon libraries to create complex composite effects.
This uses generated textures and a shader effect from aether to draw a planet onto a starfield.
The aeon library is then used animate the rotation of the planet in an endless loop.
public class @ax-graphic-flex-image-effects-07-Flex-Planet extends Sprite {
private const IMAGE_WIDTH:uint = 360;
private const IMAGE_HEIGHT:uint = 288;
private const PLANET_RADIUS:uint = IMAGE_HEIGHT/2;
Constructor. Pretty much handles it all.
public function @ax-graphic-flex-image-effects-07-Flex-Planet() {
// draw starfield and add it to stage
var stars:BitmapData = new StarsTexture(stage.stageWidth, stage.stageHeight, 0).draw();
addChild(new Bitmap(stars));
// transparent bitmap data will hold planet texture
var planet:BitmapData = new BitmapData(IMAGE_WIDTH, IMAGE_HEIGHT, true, 0x00000000);
// make second bitmap data same size as first, then draw gradient that will be used for
// lighting effect on planet
var gradientOverlay:BitmapData = planet.clone();
gradientOverlay.draw(getGradientOverlayShape());
// draw Earth texture into planet bitmap data
new TextureEffect(
new EarthTexture(IMAGE_WIDTH, IMAGE_HEIGHT)
).apply(planet);
// saved data since undistorted data will have to be referenced each frame
var saved@fileData:BitmapData = planet.clone();
// path to .pbj file; if you have different directory structure YOU MUST UPDATE PATH!!!!
ShaderEffect.shaderFilePath = "../../assets/";
// shader will wrap texture around sphere shape
var shaderEffect:WrapToSphereEffect = new WrapToSphereEffect(PLANET_RADIUS, IMAGE_WIDTH, IMAGE_HEIGHT);
// combine spherical wrap and overlay gradient to planet texture for still planet
new CompositeEffect(
[
shaderEffect,
new OverlayImageEffect(gradientOverlay)
]
).apply(planet);
// add planet data to bitmap and then to the stage
var bitmap:Bitmap = new Bitmap(planet);
bitmap.x = 210;
bitmap.y = 0;
// slight rotation will make "planet rotation" more realistic
bitmap.rotation = 30;
addChild(bitmap);
// tweener set up to interpolate values between 0 and width of image over 30 seconds
var tweener:Tweener = new Tweener(null, {x:0}, {x:IMAGE_WIDTH}, 30000);
// -1 for loop means it will go indefinitely
new AnimationLoop(tweener, -1,
// every time loop runs (each frame) this function will be called
function (event:AnimationEvent):void {
// copy the original, undistorted planet data
var copy:BitmapData = saved@fileData.clone();
new CompositeEffect(
[
// translate texture on x axis by current tweener value
new TranslateEffect((event.target as Tweener).currentValue.x, 0, true),
// reapply shader and overlay gradient to translated texture
shaderEffect,
new OverlayImageEffect(gradientOverlay)
]
).apply(copy);
// copy the new translation onto old bitmap data so bitmap on stage can update
// bitmap.bitmapData = copy; will also work
ImageUtil.copyPixels(copy, planet);
}
).start();
}
Draws a gradient shape to be used to overlay planet to create lighting effect.
returns: The shape drawn with the gradient.
private function getGradientOverlayShape():Shape {
var shape:Shape = new Shape();
var matrix:Matrix = new Matrix();
matrix.createGradientBox(IMAGE_HEIGHT, IMAGE_HEIGHT, Math.PI/4, 18);
// white in the middle and black on the outside
var colors:Array = [0xFFFFFF, 0xFFFFFF, 0, 0];
// only first and last colros have opacity
var alphas:Array = [.1, 0, 0, .6];
var ratios:Array = [0, 60, 120, 255];
// -0.7 to offset focal point
shape.graphics.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, matrix, null, null, -0.7);
shape.graphics.drawCircle(PLANET_RADIUS, PLANET_RADIUS, PLANET_RADIUS);
shape.graphics.endFill();
return shape;
}
}
}
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.