Printable Version of Topic

Click here to view this topic in its original format

Sandy's Forum _ AS2 1.x versions _ Transparent Cube

Posted by: tan Nov 29 2006, 10:09 AM

Hi Guys

I am using a Textureskin to load Bitmaps on all the sides of the cube. But I want the cube to be semi-transparent how can I achieve it.

thank you

Posted by: kiroukou Nov 29 2006, 12:19 PM

Hi tan;
The best way to do this with the 1.1 is to modify the BitmapData applying a filter (ColorFilter) on it. Change the alpha channel by the correspondant matrix.

A solution as been given by RichL, do a little research on the forum.

++
Ps : In 1.2 I'll try to add this kind of property directly in the skin.

Posted by: Petit Nov 30 2006, 02:29 AM

QUOTE(kiroukou @ Nov 29 2006, 01:19 PM)

Hi tan;
The best way to do this with the 1.1 is to modify the BitmapData applying a filter (ColorFilter) on it. Change the alpha channel by the correspondant matrix.

Indeed, the ColorFilter class is the one with lots of possibilities.
I used a flash.geom.ColorTransform for a TextureSkin with sucess, but it was a bit tricky.
I had to create a MovieClip in the library to hold the bitmap.
Here is my createScene method, that creates the skin and the Box.

CODE

function createScene(Void):Group{
    var g:Group = new Group();
    this.attachMovie("imageholder","imageholder",this.getNextHighestDepth());
    // Set transparent to hide the imageholder on the Stage
    imageholder._alpha = 000
    var skin = new TextureSkin(new BitmapData(this.imageholder._width,this.imageholder._height));
    skin.texture.draw(this.imageholder);
    var colTrans = new ColorTransform(1,1,1,1,0,0,0,-155);
    skin.texture.colorTransform(skin.texture.rectangle, colTrans);
    box = new Box(80,80,80,'tri');
    box.setSkin( skin );
    box.setBackSkin( skin );
    box.enableBackFaceCulling = false;
    // Transforms
    var tg:TransformGroup = new TransformGroup();
    rotation = new Transform3D();
    tg.setTransform(rotation);
    tg.addChild(box);
    g.addChild(tg);
    return g;
}

The first alpha value has nothing to do with the final result. It is just to hide the imageholder MovieClip on the Stage.
The ColorTransform value -155 is subtracted from the alpha value 255, which means fully opaque.
To really see the transparency, you have to set a back skin and to disable back face culling, so the inside of the cube will be drawn.
The returned Group "g" is the world's root group.

Attached are the fla and the AS file, as well as the completed SWF, from my upcoming tutorial part on using lights and filters.

Good luck!

Attached File(s)

BoxTexturedAlpha.as ( 2.44k ) Number of downloads: 8

BoxTexturedAlpha.fla ( 394k ) Number of downloads: 4

BoxTexturedAlpha.swf ( 60.35k ) Number of downloads: 24

Posted by: tan Nov 30 2006, 09:17 AM

Thanks Guys it is great

But I think I am making some mistake in coding.Here is my code

CODE

function createScene( bg:Group ):Void
{

    var o:Object3D = new Box( 975, 975, 975, "tri" );
    var a:Array = o.getFaces();
    for( var i:Number = 0,j:Number = 1; i < a.length; i+=2, j++ )
    {
        this.attachMovie(eval(j),"imageholder"+j,this.getNextHighestDepth());
        // Set transparent to hide the imageholder on the Stage
        trace(eval(j));
        eval("imageholder"+j)._alpha = 000;
        var skin = new TextureSkin(new BitmapData(this.eval("imageholder"+j)._width,this.eval("imageholder"+j)._height));
        skin.texture.draw(this.eval("imageholder"+j));
        var colTrans = new ColorTransform(1,1,1,1,0,0,0,-155);
        skin.texture.colorTransform(skin.texture.rectangle, colTrans);

        //var skin:Skin = new TextureSkin( BitmapData.loadBitmap(''+j));

        f = a[i];
        f.setSkin( skin );
        f.setBackSkin( skin );
        f.enableEvents(true);
        f.addEventListener(ObjectEvent.onPressEVENT,this,eval("_onclick"+j));
        f = a[i+1];
        f.setSkin( skin );
        f.setBackSkin( skin );
        f.enableEvents(true);
        f.addEventListener(ObjectEvent.onPressEVENT,this,eval("_onclick"+j));

    }
    o.enableBackFaceCulling = false;
    o.enableEvents(true);
    o.addEventListener(ObjectEvent.onRollOverEVENT,this,_onrollover);
    o.addEventListener(ObjectEvent.onRollOutEVENT,this,_onrollout);


    var tg:TransformGroup = new TransformGroup();
    var tg_rot:TransformGroup = new TransformGroup();
    var t:Transform3D = new Transform3D();
    t.translate( 0, 0, 5700 );
    tg.setTransform( t );
    //
    var ease:Ease = new Ease();
    ease.linear();
    rotint = new RotationInterpolator(ease.create(), 150 );
    rotint.addEventListener( InterpolationEvent.onProgressEVENT, this , onRender );
    rotint.addEventListener( InterpolationEvent.onEndEVENT, this , onEnd );

    tg_rot.addChild( o );
    tg_rot.setTransform( rotint );
    tg.addChild( tg_rot );
    bg.addChild( tg );
}

Posted by: Petit Dec 1 2006, 03:17 PM

QUOTE(tan @ Nov 30 2006, 10:17 AM)

But I think I am making some mistake in coding.Here is my code

Well, what happens?

Posted by: tan Dec 4 2006, 04:52 AM

QUOTE(Petit @ Dec 1 2006, 08:47 PM)

Well, what happens?

It does not display anything. I don't even know if the code is right or wrong. pls let me know.

Posted by: kiroukou Dec 4 2006, 07:53 AM

Look at the 1.2 BETA

Posted by: tan Dec 12 2006, 06:54 AM

QUOTE(kiroukou @ Dec 4 2006, 01:23 PM)

Look at the 1.2 BETA

Hi kiroukou

I tried using the 1.2 beta for the transparency but it does not work. do i have to do anything extra for it.

Here is the code

CODE

var skin:Skin = new TextureSkin( BitmapData.loadBitmap(''+j));
        skin.setTransparency(50);
        f = a[i];
        f.setSkin( skin );
        f.enableEvents(true);
.
.
.

Posted by: kiroukou Dec 12 2006, 09:28 AM

My fault,
I had updated it on the svn the day after the 1.2 announce... Should update the zip file too you're right.

Can you use the svn?

Posted by: tan Dec 12 2006, 09:35 AM

QUOTE(kiroukou @ Dec 12 2006, 02:58 PM)

My fault,
I had updated it on the svn the day after the 1.2 announce... Should update the zip file too you're right.

Can you use the svn?

svn?

what svn? I just downloaded the 1.2 beta zip file.

Posted by: tan Dec 12 2006, 09:46 AM

QUOTE(tan @ Dec 12 2006, 03:05 PM)

svn?

what svn? I just downloaded the 1.2 beta zip file.

ok i got what svn is , but now the question is how will I know what is updated and how will I copy the .as files from there. It though opens in the browser but u cannot expect anyone to open each file and copy paste the matter in the API. Should be a proper solution right.

Posted by: Zaba Dec 12 2006, 09:47 AM

Svn is subversion, version controlling system sandy uses. http://en.wikipedia.org/wiki/Version_control_system

Try using a svn client, dude.
Like tortoisesvn.tigris.org