LABS | VIZAR

PaperCube without Flex and only pure AS3

Boris — Thu, 10 Jul 2008 11:41:37 +0000

Because of that comment were i was asked if the papercube will be run without Flex but also with XML-files, so i looked what is the difference between Flex Datahandling and pure AS3-Datahandling with XML. There is no big difference. Of course the Main-Classes (Document-Classes) can’t extend the UIComponent-Class and must extend the MovieClip-Class to be visible on Stage. The main difference is to handle the XML-Data. The refactored class looks like this.

package net.borishorn.pv3d.data
{
	import flash.events.*;
	import flash.display.*;
	import flash.net.*;
	import flash.utils.*;

	import net.borishorn.pv3d.events.PaperEvent;

	public class PaperData extends Sprite
	{

		public var sides:XMLList;

		public function PaperData()
		{
			getData();
		}

			private function getData():void
			{
				var loader:URLLoader = new URLLoader();
				loader.dataFormat = URLLoaderDataFormat.TEXT;
				loader.addEventListener(Event.COMPLETE, resultHandler);
				loader.load(new URLRequest("xml/papercube.xml"));
			}

			private function resultHandler(event:Event):void
			{
				try
				{
					sides = new XMLList(event.target.data);
					sides = sides.children();
					dispatchEvent( new Event(PaperEvent.XML_DATA_LOADED, true, false));

				}catch (e:TypeError)
				{
					trace("There was something wrong");
					trace(e.message);

				}

			}

	}
}

The whole package will be found here

The Flex-Version is here

Five3D is now managing Bitmaps

Boris — Tue, 08 Jul 2008 15:15:05 +0000

Yes, it’s true my favourite 3D-Engine Five3D is now competing with bitmaps and videos. All you need to do this is grabbing the new 2.1 Package of Five3D and if you plan to build some crazy apps with Flex you have to include the Flash CS3-Classes into your Flex Build Path, because Five3D 2.1 needs to import fl.motion.Color ( don’t ask me why, ask Mathieu)

When you succeded with that step everything is ready for takeoff and you can start. My first try to bring some bitmaps into the vector-world of Five3D is this piece. The inspiration came across by a photo by my buddy Sören Rogoll who take a picture from my closer backyard.

Launch it!

When you click the button and the ships appear, you see bitmaps in Five3D.

var ship:Bitmap3D = new Bitmap3D(new Images.mary().bitmapData);
scene3D.addChild(ship);

This line adds a Bitmap3D into the DisplayList. Now you access to rotationY, rotationX, rotationZ and the z-Index. Combine it with the smooth 3D Vectors. There is a big potencial in Five3D.

First Steps with FIVe3D and Flex

Boris — Mon, 12 May 2008 13:08:53 +0000

Hola,
a few weeks ago, Mathieu Badimon published the AS3 Version of his incredible 3D-API FIVe3D and i decided to play a little with it. The demos that Badimon posted in his Lab are really stunning and when i first saw these amazing vector-driven pearls of modern flash-design, i couldnt close my mouth for a long time. This is what i call passion.

Let’s give a try to FIV3D - it’s really fun and the API is clear and easy to understand - Combine it with Tweener (or your Tweening Engine of choice). It’s definitly worth and the performance is a lot better than Papervision.

See my first approach in Action here.
I build it with Flex, so i can add some other favourite mechanism to this demo.

PaperCube - Loading Videos and Bitmap at runtime with Papervision3D

Boris — Mon, 28 Apr 2008 07:18:07 +0000

Good morning,
instead of chilling in the sun, i decided to refactor the PaperCube. In that version, you could load videos and bitmaps at runtime, driven by a XML-File.

Note: In some cases (i didn’t had the time to inspect the code), there is a bitmap error( ArgumentError: Error #2015: Ungültiges BitmapData.) In that case just refresh with the f5-key and everything will works fine. Computer are sometimes like girls

paperdata.xml

Check it out there
The Sources will be found there

The refactored PaperCube.as

package net.borishorn.pv3d
{
    import caurina.transitions.Tweener;

    import flash.events.*;

    import mx.core.UIComponent;

    import net.borishorn.pv3d.data.PaperData;
    import net.borishorn.pv3d.events.PaperEvent;
    import net.borishorn.pv3d.video.PaperVideo;

    import org.papervision3d.cameras.*;
    import org.papervision3d.events.*;
    import org.papervision3d.lights.*;
    import org.papervision3d.materials.*;
    import org.papervision3d.materials.shaders.*;
    import org.papervision3d.materials.special.*;
    import org.papervision3d.materials.utils.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.objects.primitives.*;
    import org.papervision3d.objects.special.*;
    import org.papervision3d.render.*;
    import org.papervision3d.scenes.*;
    import org.papervision3d.view.*;

    public class PaperCube extends UIComponent
    {

        public var isAnimated:Boolean = true;

        private var viewport:Viewport3D;
        private var renderer:BasicRenderEngine;
        private var scene:Scene3D;
        private var camera:Camera3D;
        private var cube:Cube;

        private var top:*;
        private var bottom:*;
        private var right:*;
        private var left:*;
        private var front:*;
        private var back:*;

        private var papervideo:PaperVideo;
        private var paperdata:PaperData;
        private var isReady:Boolean = false;

        public function PaperCube()
        {
            super();

            paperdata = new PaperData();
            paperdata.addEventListener(PaperEvent.XML_DATA_LOADED, setup);

            addToStageHandler();
        }

        private function setup(e:Event):void
        {

            createViewport();
            createRenderer();
            createScene3D();
            createCamera3D();
            createMaterials();
            createCube();

            isReady = true;

        }

        public function stopAnimation():void
        {

            stage.removeEventListener(Event.ENTER_FRAME, loop);

        }

        public function startLoop():void
        {
            stage.addEventListener(Event.ENTER_FRAME, loop);

        }

        private function addToStageHandler():void
        {
            addEventListener(Event.ADDED_TO_STAGE, setListeners);

        }

        private function createViewport():void
        {

            viewport = new Viewport3D(0, 0, true, true);
            addChild(viewport);
            viewport.buttonMode = true;
            viewport.interactive = true;
            viewport.name = "cubeVP";

            viewport.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
            viewport.addEventListener(MouseEvent.MOUSE_OUT, setListeners);
        }

        private function createRenderer():void
        {

            renderer = new BasicRenderEngine();

        }

        private function createScene3D():void
        {

            scene = new Scene3D();

        }

        private function createCamera3D():void
        {

            camera = new Camera3D();
            camera.zoom = 44;
            camera.focus = 100;
        }

        private function createMaterials():void
        {

            top =  getMaterial("top");
            top.interactive = true;
            top.name = "top";
            top.smooth = true;

            back = getMaterial("back");
            back.interactive = true;
            back.name = "back";
            back.smooth = true;

            front =  getMaterial("front");
            front.interactive = true;
            front.name = "front";
            front.smooth = true;

            bottom =  getMaterial("bottom");
            bottom.interactive = true;
            bottom.name = "bottom";
            bottom.smooth = true;

            left =  getMaterial("left");
            left.interactive = true;
            left.name = "left";
            left.smooth = true;

            right =  getMaterial("right");
            right.interactive = true;
            right.name = "right";
            right.smooth = true;

        }

        private function getMaterial(side:String):*
        {

            var cm:BitmapFileMaterial;
            var cmv:VideoStreamMaterial;

            switch(side)
            {
                case 'top':
                    if(paperdata.sides.(@side=='top').@type == 'image')
                    {
                        cm = new BitmapFileMaterial(paperdata.sides.(@side == 'top').@url);
                        return cm;

                    }else if (paperdata.sides.(@side=='top').@type == 'video')
                    {
                        papervideo = new PaperVideo(paperdata.sides.(@side == 'top').@url);
                        cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
                        return cmv;
                    }else
                    {
                        cm = new BitmapFileMaterial("assets/images/boris.jpg");
                        return cm;

                    }
                break;
                case 'bottom':
                    if(paperdata.sides.(@side=='bottom').@type == 'image')
                    {
                        cm = new BitmapFileMaterial(paperdata.sides.(@side == 'bottom').@url);
                        return cm;

                    }else if (paperdata.sides.(@side=='bottom').@type == 'video')
                    {
                        papervideo = new PaperVideo(paperdata.sides.(@side == 'bottom').@url);
                        cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
                        return cmv;
                    }else
                    {
                        cm = new BitmapFileMaterial("assets/images/boris.jpg");
                        return cm;

                    }
                break;
                case 'front':
                    if(paperdata.sides.(@side=='front').@type == 'image')
                    {
                        cm = new BitmapFileMaterial(paperdata.sides.(@side == 'front').@url);
                        return cm;

                    }else if (paperdata.sides.(@side=='front').@type == 'video')
                    {
                        papervideo = new PaperVideo(paperdata.sides.(@side == 'front').@url);
                        cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
                        return cmv;
                    }else
                    {
                        cm = new BitmapFileMaterial("assets/images/boris.jpg");
                        return cm;

                    }
                break;
                case 'back':
                    if(paperdata.sides.(@side=='back').@type == 'image')
                    {
                        cm = new BitmapFileMaterial(paperdata.sides.(@side == 'back').@url);
                        return cm;

                    }else if (paperdata.sides.(@side=='back').@type == 'video')
                    {
                        papervideo = new PaperVideo(paperdata.sides.(@side == 'back').@url);
                        cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
                        return cmv;
                    }else
                    {
                        cm = new BitmapFileMaterial("assets/images/boris.jpg");
                        return cm;

                    }
                break;
                case 'left':
                    if(paperdata.sides.(@side=='left').@type == 'image')
                    {
                        cm = new BitmapFileMaterial(paperdata.sides.(@side == 'left').@url);
                        return cm;

                    }else if (paperdata.sides.(@side=='left').@type == 'video')
                    {
                        papervideo = new PaperVideo(paperdata.sides.(@side == 'left').@url);
                        cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
                        return cmv;
                    }else
                    {
                        cm = new BitmapFileMaterial("assets/images/boris.jpg");
                        return cm;

                    }
                break;
                case 'right':
                    if(paperdata.sides.(@side=='right').@type == 'image')
                    {
                        cm = new BitmapFileMaterial(paperdata.sides.(@side == 'right').@url);
                        return cm;

                    }else if (paperdata.sides.(@side=='right').@type == 'video')
                    {
                        papervideo = new PaperVideo(paperdata.sides.(@side == 'right').@url);
                        cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
                        return cmv;
                    }else
                    {
                        cm = new BitmapFileMaterial("assets/images/boris.jpg");
                        return cm;

                    }
                break;
                default:
                    cm = new BitmapFileMaterial("assets/images/boris.jpg");
                    return cm;
                break;

            }
        }

        private function onObjectClick(event:InteractiveScene3DEvent):void
        {
            Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});
        }

        private function createCube():void
        {

            cube = new Cube(new MaterialsList({top:top,
                                               bottom:bottom,
                                               left:left,
                                               right:right,
                                               front:front,
                                               back:back }),
                                               400, 400, 400, 10, 10, 10);

        cube.name = "papercube";                     

        scene.addChild(cube);

        }

        private function setListeners(e:Event):void
        {
            Tweener.addTween(camera, {zoom:8, time:1, transition:"easeOutBack"});
            stage.addEventListener(Event.ENTER_FRAME, loop);

        }

        private function removeListeners():void
        {

            stage.removeEventListener(Event.ENTER_FRAME, loop);
        }

        private function loop(e:Event):void
        {

            var xDist:Number = mouseX - stage.stageWidth * 0.5;
            var yDist:Number = mouseY - stage.stageHeight * 0.5;

            if(isReady)
            {
                if(isAnimated)
                {

                    cube.rotationY += xDist* 0.05;
                    cube.rotationX += yDist* 0.05;
                    renderer.renderScene(scene, camera, viewport);

                }else
                {

                    renderer.renderScene(scene, camera, viewport);

                }
            }

        }

    }
}

Have fun!

Papergrid - Get more into PV3D and Flex

Boris — Tue, 01 Apr 2008 08:40:07 +0000

Ok, not that new but i think why not share that experiment. Again it`s based by a PV3D-Flash App coded by Lee Brimelow

It show how to integrate a bitmap into the Flex Framework - I like it more to code AS3 in Flex because it`s so intuitive to extend the built in Flex-Classes. How said it Doug McCune :

Flex changed my life

PaperGrid in action
PaperGrid’s code

PaperGrid.as

package net.borishorn.flex.pv3d
{
    import caurina.transitions.*;

    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.events.*;
    import flash.geom.Point;

    import net.borishorn.assets.images.Images;
    import net.borishorn.flex.pv3d.utils.BitmapUtils;

    import mx.core.UIComponent;

    import org.papervision3d.cameras.*;
    import org.papervision3d.materials.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.scenes.*;

    public class PaperGrid extends UIComponent
    {
        public var con:Sprite;
        private var cam:Camera3D;
        private var scene:Scene3D;
        private var pa:Array;
        private var cm:BitmapMaterial;
        private var p:Plane;

        public function PaperGrid()
        {
            con = new Sprite();
            addChild(con);

            scene = new Scene3D(con);
            cam = new Camera3D();
            cam.zoom = 11;

            pa = new Array();

            for(var i:uint=0; i < 10; i++)
            {
                for(var j:uint=0; j < 10; j++)
                {

                    cm = BitmapUtils.createBitmapMaterial(Images.flexIcon);
                    cm.oneSide = false;

                    p = new Plane(cm, 50, 50);
                    p.x = j * 50 + 25;
                    p.y = i * 50 + 25;

                    scene.addChild(p);

                    pa.push({pl:p, rotY:Math.random() * 360, rotZ:Math.random() * 360, z:Math.random() * 30000});
                    p.rotationY = pa[i].rotY;
                    p.rotationZ = pa[i].rotZ;
                    p.z = pa[i].z;

                }

            }

            addEventListener(Event.ENTER_FRAME, render);

        }

        private function render(e:Event):void
        {
            for(var i:uint; i
           {
               if(checkDist(pa[i].pl))
                {

                    Tweener.addTween(pa[i].pl, {rotationY:0, rotationZ:0, z:0, time:0.3});

                }
                else
                {

                    Tweener.addTween(pa[i].pl, {rotationY:pa[i].rotY, rotationZ:pa[i].rotZ, z:pa[i].z, time:3});

                }

            }

            scene.renderCamera(cam);

        }

        private function checkDist(p:Plane):Boolean
        {
            var p1:Point = new Point(p.x, p.y);
            var p2:Point = new Point(con.mouseX, -con.mouseY);

            if(Point.distance(p1, p2)> 150)
            {
                    return true;

            }

            else return false;

        }

    }    

}

PaperCube - How to use MovieMaterial in a Flex App

Boris — Tue, 01 Apr 2008 07:07:06 +0000

Moin,moin

influenced by the one an only Lee Brimelow , who made a demo using the Great White Repository of Papervision 2.0, in which he gave interactivity for MovieClips, i tried to make the same with a Flex based application. It`s not that easy, than it is in a Flash based app, but the good thing, when using the Flex Framework, that everything works, when you understand the core functionality. So that line is the magic for creating a silly cube with Papervision

var cube_right:DisplayObject = new Images.skyline() as DisplayObject;
cube_right.name = "right";

That is the same approach when using a MovieClip with the Flash IDE. But in Flex you have to cast an embedded image as a DisplayObject for the sake of interactivity.

Check out the app

Check out the Source

UPDATED VERSION WILL BE FOUND HERE

Here is the code of PaperCube.as

package net.borishorn.pv3d {
import caurina.transitions.Tweener;import flash.display.DisplayObject;
import flash.events.*;

import mx.core.UIComponent;

import net.borishorn.assets.images.Images;

import org.papervision3d.cameras.*;
import org.papervision3d.events.*;
import org.papervision3d.lights.*;
import org.papervision3d.materials.*;
import org.papervision3d.materials.shaders.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.objects.special.*;
import org.papervision3d.render.*;
import org.papervision3d.scenes.*;
import org.papervision3d.view.*;

public class PaperCube extends UIComponent
{
private var viewport:Viewport3D;
private var renderer:BasicRenderEngine;
private var scene:Scene3D;
private var camera:Camera3D;

private var top:MovieMaterial;
private var bottom:MovieMaterial;
private var right:MovieMaterial;
private var left:MovieMaterial;
private var front:MovieMaterial;
private var back:MovieMaterial;

private var cube:Cube;

public function PaperCube()
{
super();

createViewport();
createRenderer();
createScene3D();
createCamera3D();
createMaterials();
createCube();

addToStageHandler();

}

private function addToStageHandler():void
{
addEventListener(Event.ADDED_TO_STAGE, setListeners);

}

private function createViewport():void
{

viewport = new Viewport3D(0, 0, true, true);
addChild(viewport);
viewport.buttonMode = true;
viewport.addEventListener(MouseEvent.MOUSE_OUT, setListeners);
viewport.name = "cubeVP";

}

private function createRenderer():void
{

renderer = new BasicRenderEngine();

}

private function createScene3D():void
{

scene = new Scene3D();
}

private function createCamera3D():void
{

camera = new Camera3D();
camera.zoom = 44;
camera.focus = 100;
}

private function createMaterials():void
{

var cube_front:DisplayObject = new Images.animated() as DisplayObject;
cube_front.name = "front";

var cube_back:DisplayObject = new Images.boris() as DisplayObject;
cube_back.name = "back";

var cube_top:DisplayObject = new Images.jesus() as DisplayObject;
cube_top.name = "top";

var cube_bottom:DisplayObject = new Images.hafen() as DisplayObject;
cube_bottom.name = "bottom";

var cube_left:DisplayObject = new Images.amsterdam() as DisplayObject;
cube_left.name = "left";

var cube_right:DisplayObject = new Images.skyline() as DisplayObject;
cube_right.name = "right";

top =  new MovieMaterial(cube_top,true,true);
top.interactive = true;
top.name = "top";
top.smooth = true;

back =  new MovieMaterial(cube_back,true,true);
back.interactive = true;
back.name = "back";
back.smooth = true;

front =  new MovieMaterial(cube_front,true,true);
front.interactive = true;
front.name = "front";
front.smooth = true;

bottom =  new MovieMaterial(cube_bottom,true,true);
bottom.interactive = true;
bottom.name = "bottom";
bottom.smooth = true;

left =  new MovieMaterial(cube_left,true,true);
left.interactive = true;
left.name = "left";
left.smooth = true;

right =  new MovieMaterial(cube_right,true,true);
right.interactive = true;
right.name = "right";
right.smooth = true;

cube_front.addEventListener(MouseEvent.CLICK, gotoLink);
cube_back.addEventListener(MouseEvent.CLICK, gotoLink);
cube_top.addEventListener(MouseEvent.CLICK, gotoLink);
cube_bottom.addEventListener(MouseEvent.CLICK, gotoLink);
cube_left.addEventListener(MouseEvent.CLICK, gotoLink);
cube_right.addEventListener(MouseEvent.CLICK, gotoLink);
}

private function gotoLink(e:Event):void
{
trace("clicke" + e.target.name);
switch(e.target.name)
{
case "top":

trace(top.movie);
Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "back":

Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "bottom":

Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "front":

Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "right":

Tweener.addTween(cube, {rotationY:0, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;
case "left":

Tweener.addTween(cube, {rotationY:360, rotationX:0, time:1, transition:"easeOutBack", onComplete:removeListeners});
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});

break;

}

trace(e.target.name);

}

private function createCube():void
{

cube = new Cube(new MaterialsList({top:top,
bottom:bottom,
left:left,
right:right,
front:front,
back:back }),
400, 400, 400, 10, 10, 10);

scene.addChild(cube);

}

private function setListeners(e:Event):void
{
Tweener.addTween(camera, {zoom:8, time:1, transition:"easeOutBack"});
stage.addEventListener(Event.ENTER_FRAME, loop);

}

private function removeListeners():void
{

stage.removeEventListener(Event.ENTER_FRAME, loop);
}

private function loop(e:Event):void
{

var xDist:Number = mouseX - stage.stageWidth * 0.5;
var yDist:Number = mouseY - stage.stageHeight * 0.5;

cube.rotationY += xDist* 0.05;
cube.rotationX += yDist* 0.05;

renderer.renderScene(scene, camera, viewport);
}

}
}

Flex BulkLoader

Boris — Thu, 20 Dec 2007 15:09:53 +0000

Today i’ve played a little bit with Arthus Debert’s BulkLoader and put it together in a really simple Flex-Application. It does nothing more than loading content in a streamlined form, so the perfomance for asset-overheaded applications should be better. Next time i give Donovan Adams QueueLoader a try.

ItemLoader.as

package loading

{

 import br.com.stimuli.loading.BulkLoader;

 import br.com.stimuli.loading.BulkProgressEvent;
 import caurina.transitions.Tweener;

 import flash.display.Bitmap;

 import flash.display.Sprite;

 import flash.events.*;

 import flash.net.URLRequest;

 import mx.core.UIComponent;

public class ItemLoader extends UIComponent

 {

private var _bulkLoader:BulkLoader;

 	private var _bg:URLRequest;

 	private var _bmp:Bitmap;

 	private var _loaderBar:Sprite;

 	private var _sw:Number;

 	private var _sh:Number;

public function ItemLoader()

 	{

 		_bulkLoader = new BulkLoader("mainLoader");

 		_bg = new URLRequest("assets/images/bg.jpg");

		_bulkLoader.add(_bg);

		_bulkLoader.addEventListener(BulkProgressEvent.COMPLETE, onCompleteHandler);

 		_bulkLoader.addEventListener(BulkProgressEvent.PROGRESS, onProgressHandler);

		addEventListener(Event.ADDED_TO_STAGE, stageHandler);

		_bulkLoader.start();

		createLoaderBar();

 	}

private function stageHandler(e:Event):void

 	{

		_sw = stage.stageWidth;

 		_sh = stage.stageHeight;

}

private function onCompleteHandler(e:ProgressEvent):void

 	{

 		_bmp = _bulkLoader.getBitmap("assets/images/bg.jpg");

		_bmp.width = 1057;

 		_bmp.height = 600;

 		_bmp.smoothing = true;

 		_bmp.alpha = 0;

		addChild(_bmp);

 		Tweener.addTween(_bmp, {alpha:1, time:0.4, transition:"easeInQuart"});

		fadeLoaderBar()

}

private function createLoaderBar():void

 	{

		_loaderBar = new Sprite();

 		_loaderBar.graphics.beginFill(0xff0000, 1.0);

 		_loaderBar.graphics.drawRect(0,0,1, 2);

		ddChild(_loaderBar);

}

private function onProgressHandler(e:ProgressEvent):void

 	{

trace("Loaded" , e.bytesLoaded," of ",  e.bytesTotal);

_loaderBar.width = ((e.bytesLoaded / e.bytesTotal) * 1057);

}

private function fadeLoaderBar():void

 	{

Tweener.addTween(_loaderBar, {alpha:0, time:1, transition:"easeOutQuad", onComplete:removeLoaderBar })

 	}

private function removeLoaderBar():void

 	{

removeChild(_loaderBar);

 	}

}

}

Check out the Application loading a large .jpg

A so called Adventskalender

Boris — Thu, 20 Dec 2007 13:04:28 +0000

In Germany there is a tradition, that you get some goodies in form of an calendar and i had the time to experiment with Tink’s FlexPapervisionEffects. Next year i’m gonna take that thing to another level and fill some life in this app.

http://labs.vizar.de/advent (Because ‘im a smart developper view source is always enabled )


?xml version="1.0" encoding="utf-8"?>

    xmlns:pv3dEffects="ws.tink.flex.pv3dEffects.*"
    xmlns:advent="net.borishorn.advent.*"
    xmlns:reflector="com.rictus.reflector.*"
    xmlns:dragpanel="com.rictus.dragpanel.*"
    verticalAlign="middle" horizontalAlign="center"
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off"
    backgroundColor="0x000000"
    creationComplete="init()"
    viewSourceURL="srcview/index.html">

    
                    private var _dc:DayController;

            [Bindable]
            public var currentUser:int;

            [Bindable]
            public var _visibilty:Boolean;

            private function init():void
            {
                _dc = new DayController();

                //_currentUser = Application.application.parameters.currentUser;
                currentUser = 16568;

            }

            private function imageClick(vs:ViewStack, e:Event):void
            {

                if(_dc.checkDate(e.currentTarget.day) == true)
                {

                    vs.selectedIndex = e.currentTarget.flipToIndex;

                }else{

                    Alert.show("Dieses TÃ¼rchen ist erst am " + e.currentTarget.day.toString() + ".Dezember fÃ¼r Sie geÃ¶ffnet" , "Etwas mÃ¼ssen Sie noch warten");
                }

            }

        ]]>
    

    



    

    
    
    

        


    title="Advents-Kalender 2007" backgroundAlpha="0"
    height="440" width="1070" verticalGap="0" horizontalGap="0" >



    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip" horizontalGap="0">
            
        

    

    



    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip" horizontalGap="0">
            
        

    





    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip" horizontalGap="0">
            
        

    





    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

    

    

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip">
            
        

        
            verticalAlign="middle" horizontalAlign="center"
            hideEffect="hideFlip" showEffect="showFlip" horizontalGap="0">

Source:http://labs.vizar.de/advent/srcview/