This is G o o g l e's cache of http://www.flashsandy.org/forum/lofiversion/index.php/t435.html as retrieved on 24 Jul 2007 11:58:40 GMT.
G o o g l e's cache is the snapshot that we took of the page as we crawled the web.
The page may have changed since that time. Click here for the current page without highlighting.
This cached page may reference images which are no longer available. Click here for the cached text only.
To link to or bookmark this page, use the following url: http://www.google.com/search?q=cache:_j8dKKKPbt8J:www.flashsandy.org/forum/lofiversion/index.php/t435.html+site:www.flashsandy.org/forum&hl=en&ct=clnk&cd=29


Google is neither affiliated with the authors of this page nor responsible for its content.

Full Version: Horizontal Spin
matic
Hi,
how can I build a horizontal spin with 2 MovieClips and Sandy?

A postcard, which one turns.

One MovieClip is the photo and the other MovieClip the text.


The Example-Effekt: the OsX Widgets, when you klick on "i"
http://illustratorwanted.de/_trans/player.html

I tried it with
CODE
import sandy.util.DistortImage;
import com.mosesSupposes.fuse.*;
import com.dynamicflash.utils.Delegate;
import Element;
import flash.display.BitmapData;


class Application
{
    public static var instance:Application;
    private var _timeline:MovieClip;
    private var base:MovieClip;
    
    
    private var alleElemente:Array;
    public var intervalId:Number;
    var mitte_Gross:Element;
    var mitte_Gross_Uebergang:Element;


    public function Application(timeline:MovieClip)
    {
        this._timeline = timeline;

        ZigoEngine.register(Fuse, PennerEasing, FuseFMP);

        this.init();

    }
    


    public function init ():Void
    {
        
        alleElemente = new Array();
        
        
        mitte_Gross = new Element (0, 0, 590, 0, 590, 308, 0, 308);
        mitte_Gross_Uebergang = new Element (590, 0, 0, 0, 0, 308, 590, 308);
        
        var ebene:Number;
        var startX:Number;
        var tmp:Array;

        tmp = this.cover (mitte_Gross, 0, 2, this._timeline.mc_BildDummy);
        alleElemente.push({clip:tmp[0],  dist:tmp[1]});
        
        tmp = this.cover (mitte_Gross_Uebergang, 0, 1, this._timeline.mc_BildDummy2);
        alleElemente.push({clip:tmp[0],  dist:tmp[1]});        
        
        this._timeline.mc_BildDummy2._visible = false;
        this._timeline.mc_BildDummy._visible = false;
    }



    function cover (obj, x, i, clip):Array
    {

        this._timeline["bmd"+i] = new BitmapData(clip._width, clip._height);
        this._timeline["clip"+i] = this._timeline.createEmptyMovieClip("holder"+i, i);
        this._timeline["clip"+i]._x = x;
        this._timeline["clip"+i]._y = 150;    

        this._timeline["clip"+i].cacheAsBitmap = true;
        this._timeline["di"+i] = new DistortImage(this._timeline["clip"+i], this._timeline["bmd"+i], 1, 1);
        this._timeline["di"+i].setTransform(obj.x1, obj.y1, obj.x2, obj.y2, obj.x3, obj.y3, obj.x4, obj.y4);
        this._timeline["di"+i].texture.draw(clip);
        this._timeline["clip"+i].di = this._timeline["di"+i];
        this._timeline["clip"+i].num = i;    
        this._timeline["clip"+i].onRelease = Delegate.create(this, klick);
        
        return [this._timeline["clip"+i], this._timeline["di"+i]];
    }
    
    function executeCallback():Void
    {
        this.alleElemente[1].clip.swapDepths(this.alleElemente[0].clip);
    
         clearInterval(intervalId);
        
    }
        

    public function klick (o:Object):Void
    {
        trace("Klick");

        this.ani(mitte_Gross, mitte_Gross_Uebergang, this.alleElemente[0], 10, false, false);
        this.ani(mitte_Gross_Uebergang, mitte_Gross, this.alleElemente[1], 0, false, false);
        intervalId = setInterval(this, "executeCallback", 100);


    }

    function ani (ref1:Element, ref2:Element, elem:Object, abst:Number, mitte:Boolean, change:Boolean)
    {
        var f2:Fuse = new Fuse();
        
        var tmp2_S  = ref1.clone();
        var tmp2_Z  = ref2.clone();
        var newX = elem.clip._x + abst;
        
        
            f2.push([
                    {target:tmp2_S, x1: tmp2_Z.x1, y1: tmp2_Z.y1, x2: tmp2_Z.x2, y2: tmp2_Z.y2, x3: tmp2_Z.x3, y3: tmp2_Z.y3, x4: tmp2_Z.x4, y4: tmp2_Z.y4, seconds: 0.4}]);    
                    
            f2.start();
    
            delete elem.clip.onEnterFrame;
            elem.clip.onEnterFrame = function ()
            {
                elem.dist.setTransform(tmp2_S.x1, tmp2_S.y1, tmp2_S.x2, tmp2_S.y2, tmp2_S.x3, tmp2_S.y3, tmp2_S.x4, tmp2_S.y4);
    
            };


    }


    public static function main (timeline:MovieClip):Void
    {
        var instance = new Application(timeline);
    }


But this is not really the effect I want.

Does anyone have an better idea?
Petit
QUOTE(matic @ Apr 2 2007, 12:07 AM) *

But this is not really the effect I want.
Does anyone have an better idea?

Hi matic!
I haven't used the DistortImage class and not the Fuse.
I would use Sandy 1.1.
For the card animation I would
- create a Plane3D
- set a TextureSkin for the front side
- and another for the back side
For the rotation I would use a RotationInterpolator and set it to rotate 0 - 180 degrees
and to redo() or yoyo() on demand ( onPress or onRollOver handler )

Instead of a TextureSkin which applies a bitmap (image ), you could use a Movieskin which applies a MovieClip.

Maybe in your case, using Sandy would be overkill?
matic
QUOTE(Petit @ Apr 2 2007, 11:41 AM) *

Hi matic!
I haven't used the DistortImage class and not the Fuse.
I would use Sandy 1.1.
For the card animation I would
- create a Plane3D
- set a TextureSkin for the front side
- and another for the back side
For the rotation I would use a RotationInterpolator and set it to rotate 0 - 180 degrees
and to redo() or yoyo() on demand ( onPress or onRollOver handler )

Instead of a TextureSkin which applies a bitmap (image ), you could use a Movieskin which applies a MovieClip.

Maybe in your case, using Sandy would be overkill?


Do you have a simple example?
Petit
QUOTE(matic @ Apr 2 2007, 10:41 AM) *

Do you have a simple example?

Not exactly the application you want, but you can read about interpolators here and about user interaction here.

Good luck!
/Petit
matic
Thanks.
I read the tutorial and I will try it smile.gif

Is it possible to add a blur effect to the rotation animation?
matic
I have problems with the TextureSkin

If I use the Box it works.

CODE
function createScene( bg:Group ):Void
{

    this.createCoordinateSystem(bg, false, 1);
    
    var skin:TextureSkin = new TextureSkin( BitmapData.loadBitmap( "bild1" ));
    var bskin:TextureSkin = new TextureSkin( BitmapData.loadBitmap( "bild2" ));


    var box:Box = new Box(150,100,80,'tri');    
    box.setSkin( skin );

    // Transforms
    var tg:TransformGroup = new TransformGroup();
    var rotation:Transform3D = new Transform3D();
    rotation.rot(90,0,0);
    tg.setTransform(rotation);
    
    tg.addChild(box);
    
    bg.addChild(tg);

}


IPB Image

If I use the Plane3D the result is:

CODE

    var plane:Object3D = new Plane3D(100,150,1,'tri');
    plane.setSkin( skin );    

    // Transforms
    var tg:TransformGroup = new TransformGroup();
    var rotation:Transform3D = new Transform3D();
    rotation.rot(90,0,0);
    tg.setTransform(rotation);
    
    //tg.addChild(box);
    tg.addChild(plane);
    bg.addChild(tg);


IPB Image
Petit
QUOTE(matic @ Apr 2 2007, 10:40 PM) *

Is it possible to add a blur effect to the rotation animation?

I'm not sure when and how you want to apply the blur effect,
but you may apply a blur filter when you start the rotation and and remove it when you stop.
If you use a RotationInterpolator, you may even listen to its onProgressEVENT and vary the strength of the blur during rotatatioin ( that may be too witty though wink.gif)
You can read about using filters in Using Lights and Filters. The last example shows how to blur.

Good luck!

QUOTE(matic @ Apr 3 2007, 10:30 AM) *

I have problems with the TextureSkin

Well I cannot see what problem you have.
The only thing I can see in the Plane3D case, is that the car is upside down.
Is that it? Or am I blind?

You can always flip the image.
Point me in some direction unsure.gif
matic
QUOTE(Petit @ Apr 3 2007, 02:18 PM) *

I'm not sure when and how you want to apply the blur effect,


Ok, i try...


QUOTE(Petit @ Apr 3 2007, 02:18 PM) *

but you may apply a blur filter when you start the rotation and and remove it when you stop.
If you use a RotationInterpolator, you may even listen to its onProgressEVENT and vary the strength of the blur during rotatatioin ( that may be too witty though wink.gif)



How does the RotationInterpolator work with a Plane3D?

If I use a Box it works.
But if I use a plane it doesn´t work. I tried it with the samples from http://www.petitpub.com/labs/media/flash/s...rpolators.shtml

So I use Fuse and rot(x, y, z), mad.gif

Here is my code:

CODE
class Application
{
    public static var instance:Application;
    private var _timeline:MovieClip;
    private var base:MovieClip;
    private var world:World3D;
    var screen:ClipScreen;     
    var rotation:Transform3D;
    public var zW:Number = 0;
    public var xW:Number = 90;
    public var richtung:Boolean = false;

    public function Application(timeline:MovieClip)
    {
        this._timeline = timeline;
        ZigoEngine.register(Fuse, PennerEasing, FuseFMP);

        // We define some useful global variables
        
        world = World3D.getInstance();
        this.init(this._timeline);
        
    

    }
        
    function init( stage : MovieClip  ):Void
    {
        // Create a clipScreen as presentation surface for the World3D to draw on
        screen = new ClipScreen( this._timeline.createEmptyMovieClip('screen', 1), 500, 500 );
    
        // Create a camera, so we can see our world.
        // Give it a focal distance ( equivalent ) and a reference to the viewing screen.
        var cam:Camera3D = new Camera3D( 700, screen );
    
        // Position the camera at a negative distance along the z axis
        // By default it is looking at the origin of the world coordinate system [0,0,0]
        cam.setPosition(0,0,-700);
        cam.lookAt(0,0,0);
    
        // Attach the camera to the world
        world.addCamera( cam );
        
        // Create the root group, the branch node for all objects in our world
        var bg:Group = new Group();
    
        // and attach it to the world. this node is responsible
        // for drawing all its ( possibly transformed child nodes
        world.setRootGroup( bg );
    
        // Create the scene and attach it to the rootGroup
        createScene( bg );
    
        // Finally we start rendering the world
        world.render();
        
        this._timeline.btn_klick.onRelease = Delegate.create(this,klick);
    }
            
function createScene( bg:Group ):Void
{


    var skin:MovieSkin = new MovieSkin(this._timeline.mc_skin);
    var bskin:MovieSkin = new MovieSkin(this._timeline.mc_skin2);

    this._timeline.mc_skin._visible = false;
    this._timeline.mc_skin2._visible = false;
    
    var plane:Object3D = new Plane3D(150,224,1,'tri');
    plane.setSkin( skin );    
    plane.setBackSkin( bskin );
    plane.enableBackFaceCulling = false;

    var tg:TransformGroup = new TransformGroup();
    rotation = new Transform3D();
    rotation.rot(xW,180,zW);
    tg.setTransform(rotation);

    tg.addChild(plane);
    bg.addChild(tg);
}

function rotieren1 ():Void
{
    var ref = this;     
        var tmp = {xw: 90};
        
    var f2:Fuse = new Fuse();    
            f2.push([
                    {target:tmp, xw: -90, seconds:0.4}]);    
                    
    f2.start();    
    
    this._timeline.onEnterFrame = function ()
    {
        ref.rotation.rot(tmp.xw,180,0);
    };
}


function rotieren2 ():Void
{
    var ref = this;     
    var tmp = {xw: -90};    
        
    var f2:Fuse = new Fuse();    
            f2.push([
                    {target:tmp, xw: 90, seconds:0.4}]);    
                    
    f2.start();    
    
    this._timeline.onEnterFrame = function ()
    {
        trace(tmp.xw);
        ref.rotation.rot(tmp.xw,180,0);
    };
}


function klick ():Void
{
    delete this._timeline.onEnterFrame;

    if (richtung)
        this.rotieren2();
    else
        this.rotieren1();
        
    richtung = !richtung;     
}


}


    public static function main (timeline:MovieClip):Void
    {
        var instance = new Application(timeline);
    }
}


The result: http://www.illustratorwanted.de/_trans/main.html
Petit
QUOTE(matic @ Apr 3 2007, 02:15 PM) *

How does the RotationInterpolator work with a Plane3D?
If I use a Box it works.
But if I use a plane it doesn´t work. I tried it with the samples from

The Interpolators work the same way with all kinds of Object3D.
Your problem with the Plane3D is probably, that you are looking at the plane from the edge.
A Plane3D is always created in the zx coordinate plane, and the camera is by default created in the same plane.
What you do is to retract the camera along the z axis like this:
CODE
      cam.setPosition(0,0,-700);
      cam.lookAt(0,0,0);


To be able to see the plane, you have to either move the camera or rotate the plane.
The latter is what you want to do. You want to do it smoothly, so you use a RotationInterpolator.
This is what you need:
CODE
    rotation = new RotationInterpolator( new Ease().create(),20, -90, 90);
    rotation.setAxisOfRotation( new Vector(1,0,0));

The rotation axis here is the x axis, and the rotatation goes from -90 to +90 degrees in 20 frames.
How fast the rotation is depends on this setting, but also on the Flash frame rate.
In your example, you want to flip the 'card' 180 degrees when you click the button, and back when you click next time. The interpolator has a yoyo() method that does just that, so here is the new click handler
CODE
function klick ():Void{
    rotation.yoyo();  
}

To get the car in upright position, I rotated the image inside the MovieClip in the library.

Mama look! - no Fuse cool.gif

You can test it here: Click to view attachment - The frame rate is set at 120 fps
and download the modified code here: Click to view attachment
Good luck!
matic
thanks for your help!!!
Petit
QUOTE(matic @ Apr 10 2007, 12:51 PM) *

thanks for your help!!!

You're welcome, and oops! I see now that I should have flipped the car horizontally too, to get the text right.
I believe you noticed that wink.gif
matic
Is it possible to get a reference to the container-MovieClip of a Plane oder a Box?
kiroukou
Hi,
In the 1.1 release, you can but it's a bad trick. myFace['_mc'] shall return the movieclip.

In the 1.2 you can do that with the container property.

++
matic
QUOTE(kiroukou @ Apr 16 2007, 03:03 PM) *

In the 1.1 release, you can but it's a bad trick. myFace['_mc'] shall return the movieclip.

I tried

box = new Box(224,150,0,'tri');
box.setSkin( skin );
trace(box["_mc"]);

but this is "undefined" Or I have to set the movieclip manuell?
kiroukou
No its not at object level where the movieclip exists, but at Face level !

Once again it's a wieird trick, since in the 1.1 the face movieclip is not the same each time it is rendered.
So this hack usability really depends on what you need to do...

Thomas
Petit
QUOTE(matic @ Apr 16 2007, 12:34 PM) *

Is it possible to get a reference to the container-MovieClip of a Plane oder a Box?

A Box or a Plane is not the same as a Face ( version 1.1 ), and it doesn't rest on one single Movieclip.
Instead an object is built up of faces, the class Face. To do what you want, you'll have to get the MovieClip(s) of one or more faces. Depending on mode 'tri' or 'quad' and quality, the number of faces differ.

CODE
var cube:Object3D = new Box(50,50,50);
var faces:Array = cube.getFaces();
for( var i = 0; i < faces.length; i++){
     var face:Face = faces[i];
     var mc = face[_mc];
     // Do something with this Face
}
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2007 Invision Power Services, Inc.