Howdy everyone. I have an issue which confounds me. I am working on a parallax engine which can be seen here. See all those trees with the white trim? The white bit should actually be transparent. The .png I am using can be found [URL=“http://www.eccesignum.org/flash/as3/070629/tree_texture_2.png”]here. Aaaand here are the classes which pull in the .png and apply it to a custom shape as a bitmap fill:
package {
import flash.display.*
public class ParallaxSprite extends Sprite {
public var layers:Number;
private var offsetRatio:Number = 1.05;
private var sizeOffset:Number = 1;
private var maxCenterDistance:Number;
private var world:World;
private var dX:Number = 0;
private var dY:Number = 0;
private var d:Number = 0;
private var r:Number = 0;
public var spriteLayers:Array = new Array();
/* EMBEDDED ASSETS */
[Embed("tree_texture_2.png")]
private var Tree_Texture:Class;
public function ParallaxSprite($world:World,$x:Number,$y:Number) {
world = $world;
x = $x;
y = $y;
maxCenterDistance = Math.min(world.centerX,world.centerY)/2
init();
}
private function init():void {
layers = 25;
var g:Bitmap = new Tree_Texture();
var b:BitmapData = new BitmapData(g.width,g.height);
b.draw(g);
for(var i:Number=0;i<layers;i++) {
spriteLayers* = new PolyStar(0,0,8,false,50-(i/2),25-(i/4),0,0x000000,0,b,0);
spriteLayers*.rotation = Math.random()*360;
spriteLayers*.cacheAsBitmap=true;
}
}
public function detectCenter():void {
dX = x - world.centerX;
dY = y - world.centerY;
d = Math.sqrt(dX*dX+dY*dY);
var o:Number = d/maxCenterDistance*offsetRatio;
r = Math.atan2(dY,dX);
for(var i:Number = 0;i<spriteLayers.length;i++) {
spriteLayers*.x = x+i*o*Math.cos(r);
spriteLayers*.y = y+i*o*Math.sin(r);
}
}
}
}
package {
import flash.display.*
import flash.geom.Matrix;
public class PolyStar extends Shape{
public function PolyStar($x:Number,$y:Number,$points:Number,$vertical:Boolean,$outerRad:Number,$innerRad:Number,$lineW:Number,$lineC:Number,$lineA:Number,$bgC:*,$bgA:Number) {
var points:Number = $points*2;
var angleDelta:Number = (Math.PI*2 / points);
var angle:Number = 0;
var anglex:Number = 0;
var angley:Number = 0;
graphics.lineStyle($lineW,$lineC,$lineA);
var m:Matrix = new Matrix();
m.translate(-$bgC.width/2,-$bgC.height/2);
graphics.beginBitmapFill($bgC,m);
if($vertical != true) {
graphics.moveTo($outerRad,0);
} else {
graphics.moveTo( // change orientation of polygon
Math.cos(angle + (angleDelta/2)) * $outerRad,
Math.sin(angle + (angleDelta/2)) * $outerRad
);
}
for(var i:Number=0;i<points;i++) {
angle += angleDelta;
var temp:Number = (i%2) ? $outerRad: $innerRad;
if($vertical != true) {
anglex = Math.cos(angle) * temp;
angley = Math.sin(angle) * temp;
} else { // change orientation of polygon
anglex = Math.cos(angle + (angleDelta/2)) * temp;
angley = Math.sin(angle + (angleDelta/2)) * temp;
}
graphics.lineTo(anglex,angley);
}
graphics.endFill();
x = $x;
y = $y;
}
}
}
Basically every time a ParallaxSprite is instantiated it creates several layers using the PolyStar class, which itself bitmap fills its graphics layer with the embedded .png.
It works perfectly except for the .png transparency. I created the .png using the Gimp, if that helps.
Is there anyone who has run into anything like this? Am I doing some thing wrong? I have only been playing with AS3 for a little over a month, so there are many things about it I am still earning.
Thanks for any help!