skew Klasse von Andre M.

[labrar]

Kompliment erst mal an Andre. Ein Gott

Dennoch komme ich mit einer seiner Klassen nicht klar und ich sitze schon seit 9 Stunden googelnd und probierend dran.

Es geht um folgendes.

Die Skewklasse von AM und sein Beispiel dazu attachen einen mc aus der Bibliothek welchen man dann beliebig verzerren kann.
Ich brauche das ganze aber so daß eben nicht attached wird, da ich externe Bilder einladen und verzerren möchte.
Ich bin mit meinem Latain am Ende und hoffe einer von euch ist da schon etwas weiter.

Hier die Klasse(Das einkommentierte ist ursprünglich.jeweils die Zeile darunter meine kläglichen Versuche)

PHP-Code:

class DistortImage {
    private var parent:MovieClip;
    //private var symbolId:String;
    private var symbolId:MovieClip;
    private var width:Number;
    private var height:Number;
    private var xMin:Number, xMax:Number, yMin:Number, yMax:Number;
    private var hseg:Number;
    private var vseg:Number;
    private var hsLen:Number;
    private var vsLen:Number;
    private var points:Array;
    private var triAngles:Array;
    //function DistortImage(parent:MovieClip, symbolId:String, vseg:Number, hseg:Number) {
        function DistortImage(parent:MovieClip, symbolId:MovieClip, vseg:Number, hseg:Number) {
        this.parent = parent;
        this.symbolId = symbolId;
        this.vseg = vseg;
        this.hseg = hseg;
        if (arguments.length>4) {
            width = arguments[4];
            height = arguments[5];
        } else {
            getImageSize();
        }
        init();
    }
    private function getImageSize() {
        //var getDimension:MovieClip = parent.attachMovie(symbolId, "getDimension", 0);
        var getDimension:MovieClip = parent.symbolId;
        width = int(getDimension._width);
        height = int(getDimension._height);
        getDimension.removeMovieClip();
    }
    private function init():Void {
        points = new Array();
        triAngles = new Array();
        var ix:Number;
        var iy:Number;
        var w2:Number = width/2;
        var h2:Number = height/2;
        hsLen = width/(vseg+1);
        vsLen = height/(hseg+1);
        var x:Number, y:Number;
        for (ix=0; ix<vseg+2; ix++) {
            for (iy=0; iy<hseg+2; iy++) {
                x = ix*hsLen;
                y = iy*vsLen;
                points.push({x:x, y:y, sx:x, sy:y});
            }
        }
        for (ix=0; ix<vseg+1; ix++) {
            for (iy=0; iy<hseg+1; iy++) {
                createTriAngle(ix, iy, 1, [points[iy+ix*(hseg+2)], points[iy+ix*(hseg+2)+1], points[iy+(ix+1)*(hseg+2)]]);
                createTriAngle(ix, iy, -1, [points[iy+(ix+1)*(hseg+2)+1], points[iy+(ix+1)*(hseg+2)], points[iy+ix*(hseg+2)+1]]);
            }
        }
        xMin = yMin=0;
        xMax = width;
        yMax = height;
        render();
    }
    private function createTriAngle(x:Number, y:Number, align:Number, vertices:Array):Void {
        var n:Number;
        var triAngle:MovieClip;
        n = triAngles.length;
        triAngle = parent.createEmptyMovieClip('t_'+n, n);
        var inner:MovieClip = triAngle.inner=triAngle.createEmptyMovieClip('inner', 0);
        var mask:MovieClip = inner.createEmptyMovieClip("mask", 0);
        //var image = inner.attachMovie(symbolId, "img_", 1);
        var image = inner.symbolId;
        inner._rotation = -45;
        mask.beginFill(0);
        mask.moveTo(-1, -1);
        mask.lineTo(101, -1);
        mask.lineTo(-1, 101);
        mask.lineTo(-1, -1);
        mask.endFill();
        triAngle.setMask(mask);
        image._xscale = 10000/hsLen;
        image._yscale = 10000/vsLen;
        if (align == 1) {
            image._x = -x*100;
            image._y = -y*100;
        } else {
            image._rotation = -180;
            image._x = (x+1)*100;
            image._y = (y+1)*100;
        }
        triAngle.vertices = vertices;
        triAngles.push(triAngle);
    }
    function setTransform(x0, y0, x1, y1, x2, y2, x3, y3):Void {
        var w = width;
        var h = height;
        var w2_0 = x1-x0;
        var w2_1 = x2-x3;
        var h2_0 = y1-y0;
        var h2_1 = y2-y3;
        for (var p in points) {
            var point = points[p];
            var gx = (point.x-xMin)/w;
            var gy = (point.y-yMin)/h;
            var bx = x0+gy*(x3-x0);
            var by = y0+gy*(y3-y0);
            point.sx = bx+gx*((x1+gy*(x2-x1))-bx);
            point.sy = by+gx*((y1+gy*(y2-y1))-by);
        }
        render();
    }
    private function render():Void {
        var t:Number;
        var tmc:MovieClip;
        var inner:MovieClip;
        var vertices:Array;
        var p0, p1, p2;
        var atan2:Function = Math.atan2;
        var sqrt:Function = Math.sqrt;
        var cos:Function = Math.cos;
        var tan:Function = Math.tan;
        var arm, p0x, p0y, dx10, dy10, dx20, dy20, ap1, ap2, da12;
        for (t in triAngles) {
            tmc = triAngles[t];
            inner = tmc.inner;
            vertices = tmc.vertices;
            p0 = vertices[0];
            p1 = vertices[1];
            p2 = vertices[2];
            tmc._rotation = (180/Math.PI)*(-(da12=((ap1=atan2(dy10=p1.sy-(p0y=tmc._y=p0.sy), dx10=p1.sx-(p0x=tmc._x=p0.sx)))-(ap2=atan2(dy20=p2.sy-p0y, dx20=p2.sx-p0x)))/2)+ap1);
            tmc._yscale = 100*tan(da12);
            inner._xscale = sqrt(dx20*dx20+dy20*dy20)/(arm=100/(Math.SQRT1_2*2)/cos(da12))*100.5;
            inner._yscale = sqrt(dx10*dx10+dy10*dy10)/arm*100.5;
        }
    }
    function getBounds():Object {
        return {xMin:xMin, xMax:xMax, yMin:yMin, yMax:yMax};
    }
} 


Aufgerufen wird das ganze dann im Film so:

PHP-Code:

var plane:DistortImage = new DistortImage(scene, img, 1, 1);//mein Versuch
var plane:DistortImage = new DistortImage(scene, 'image', 1, 1);//Original 


Weiß einer wo ich was ändern muss?????
Danke

[gaspode]

Ich denke mal, daß Du das Bild vorher in einen
MovieClip laden mußt und diesen dann, wenn das
Bild fertig geladen wurde, als zweiten Parameter
übergibst.

gruß, gaspode

[labrar]

Ja das habe ich auch schon versucht.

Wie gesagt 9 Hours

[gaspode]

Zitat von labrar

Ja das habe ich auch schon versucht.

Dann zeig mal das Skript.

gruß, gaspode

[labrar]

Puh. Ich kanns nochmal nachprogrammieren
Leider schon wieder verworfen weils nicht ging.

Aber so war mein Ansatz:
Ansatz 1:

Ich habe den Klassenaufruf in eine Funktion gepackt und dann mein externes Bild in den image mc in der Bib geladen. Durch eine preloader habe ich dann nach vollständigem laden die Funktion des Klassenaufrufs aufgerufen.
Bild wurde geladen aber eben in Orginalgröße und ohne daß die Anfasser entsprechend angelegt wurden. Sprich es ging gar nix.

Ansatz 2:
Ich habe in der Klasse die symbolId von String nach MovieClip beschrieben und in der Funktion "createTriAngle" das attachMovie durch var image = inner.symbolId; ersetzt. Sieht man auch in der Klasse.

Was aber auch nicht funktionieren konnte da ja insgesamt in "inner" 7 mcs "Dreicke" erstellt werden die allesamt darauf zugreifen müssen. Wenn ichs richtig verstanden habe.


Ich habe mir die Flashhilfe schon nach allen Möglichen Dingen angeschaut. BitmapData, Matrix, copyPixel etc. Ist ziemlich bescheiden beschrieben.


Hier mal der komplette Code mit dem ich die Funktion aufrufe

PHP-Code:

var plane:DistortImage = new DistortImage(scene, img, 1, 1);
for (var i in scene) {
    trace(scene.t_0.inner.img_);
}
wert = 1;
wertrot = 1;
cframe = 1;
aframe = 20;
vertwinkel = wert;
horwinkel = 0.2;
//dreher = 0;
must = _parent.oben._width;
xpos = _parent.oben._x;
ypos = _parent.oben._y;
scene._x = xpos;
scene._y = ypos;
scaleprz = 100/scene._width*must;
scene._xscale = scaleprz;
scene._yscale = scaleprz;
this.slide.unten._y = scene._y+scene._height;
var bounds = plane.getBounds();
var drag:Boolean = false;
var n0 = scene.attachMovie("node", "n0", 1000, {_x:bounds.xMin, _y:bounds.yMin});
var n1 = scene.attachMovie("node", "n1", 1001, {_x:bounds.xMax, _y:bounds.yMin});
var n2 = scene.attachMovie("node", "n2", 1002, {_x:bounds.xMax, _y:bounds.yMax});
var n3 = scene.attachMovie("node", "n3", 1003, {_x:bounds.xMin, _y:bounds.yMax});
this.stop();

n0x = n0._x;
n0y = n0._y;
n1x = n1._x;
n1y = n1._y;
n2x = n2._x;
n2y = n2._y;
n3x = n3._x;
n3y = n3._y;
var p = {x:0, y:0};
_parent.oben.localToGlobal(p);
n0.globalToLocal(p);
var t = {x:0, y:0};
_parent.unten.localToGlobal(t);
n3.globalToLocal(t);
divo = _parent.oben._x-p.x;
divu = _parent.unten._x-t.x;
ukante = scene._height+80;
breite = scene._width;
half = breite/2;
startid = scene._x;
endid = scene._x+breite;
zerren = function () {
    this.slide.unten._y = scene._y+scene._height;
    framer = aframe/2-cframe+0.5;
    n0._x = _parent.oben._x-divo;
    n3._x = _parent.unten._x-divu;
    n1._x = _parent.oben._x-divo+230;
    n2._x = _parent.unten._x-divu+230;
    n0._y = n0y+framer*horwinkel;
    n1._y = n1y-framer*horwinkel;
    n2._y = n2y+framer*(horwinkel*7);
    n3._y = n3y-framer*(horwinkel*7);
    plane.setTransform(n0._x, n0._y, n1._x, n1._y, n2._x, n2._y, n3._x, n3._y);
};
zerren(); 


Nur das keiner meint ich täte nix

[labrar]

Okay. Ich habe die Klasse jetzt mal soweit verändert das tatsächlich (hoffe ich zunidest) mein mc verwendet wird.

scenegröße verändert sich.

Nur den mc seh ich nicht. Dafür aber die attachten nodes drumherum

Hier der Code:

PHP-Code:

class DistortImage {
    public var parent:MovieClip;
    //public var symbolId:String;
    public var symbolId:MovieClip;
    public var width:Number;
    public var height:Number;
    public var xMin:Number, xMax:Number, yMin:Number, yMax:Number;
    public var hseg:Number;
    public var vseg:Number;
    public var hsLen:Number;
    public var vsLen:Number;
    public var points:Array;
    public var triAngles:Array;
    //function DistortImage(parent:MovieClip, symbolId:String, vseg:Number, hseg:Number) {
    function DistortImage(parent:MovieClip, symbolId:MovieClip, vseg:Number, hseg:Number) {
        this.parent = parent;
        this.symbolId = symbolId;
        this.vseg = vseg;
        this.hseg = hseg;
        if (arguments.length>4) {
            width = arguments[4];
            height = arguments[5];
        } else {
            getImageSize();
        }
        init();
    }
    private function getImageSize() {
        //var getDimension:MovieClip = parent.attachMovie(symbolId, "getDimension", 0);
        var getDimension:MovieClip = symbolId;
        width = int(getDimension._width);
        height = int(getDimension._height);
        getDimension.removeMovieClip();
    }
    private function init():Void {
        points = new Array();
        triAngles = new Array();
        var ix:Number;
        var iy:Number;
        var w2:Number = width/2;
        var h2:Number = height/2;
        hsLen = width/(vseg+1);
        vsLen = height/(hseg+1);
        var x:Number, y:Number;
        for (ix=0; ix<vseg+2; ix++) {
            for (iy=0; iy<hseg+2; iy++) {
                x = ix*hsLen;
                y = iy*vsLen;
                points.push({x:x, y:y, sx:x, sy:y});
            }
        }
        for (ix=0; ix<vseg+1; ix++) {
            for (iy=0; iy<hseg+1; iy++) {
                createTriAngle(ix, iy, 1, [points[iy+ix*(hseg+2)], points[iy+ix*(hseg+2)+1], points[iy+(ix+1)*(hseg+2)]]);
                createTriAngle(ix, iy, -1, [points[iy+(ix+1)*(hseg+2)+1], points[iy+(ix+1)*(hseg+2)], points[iy+ix*(hseg+2)+1]]);
            }
        }
        xMin = yMin=0;
        xMax = width;
        yMax = height;
        render();
    }
    private function createTriAngle(x:Number, y:Number, align:Number, vertices:Array):Void {
        var n:Number;
        var triAngle:MovieClip;
        n = triAngles.length;
        triAngle = parent.createEmptyMovieClip('t_'+n, n);
        var inner:MovieClip = triAngle.inner=triAngle.createEmptyMovieClip('inner', 0);
        var mask:MovieClip = inner.createEmptyMovieClip("mask", 0);
        //var image = inner.attachMovie(symbolId, "img_", 1);
        var image = inner.symbolId;
        inner._rotation = -45;
        mask.beginFill(0);
        mask.moveTo(-1, -1);
        mask.lineTo(101, -1);
        mask.lineTo(-1, 101);
        mask.lineTo(-1, -1);
        mask.endFill();
        triAngle.setMask(mask);
        image._xscale = 10000/hsLen;
        image._yscale = 10000/vsLen;
        if (align == 1) {
            image._x = -x*100;
            image._y = -y*100;
        } else {
            image._rotation = -180;
            image._x = (x+1)*100;
            image._y = (y+1)*100;
        }
        triAngle.vertices = vertices;
        triAngles.push(triAngle);
    }
    function setTransform(x0, y0, x1, y1, x2, y2, x3, y3):Void {
        var w = width;
        var h = height;
        var w2_0 = x1-x0;
        var w2_1 = x2-x3;
        var h2_0 = y1-y0;
        var h2_1 = y2-y3;
        for (var p in points) {
            var point = points[p];
            var gx = (point.x-xMin)/w;
            var gy = (point.y-yMin)/h;
            var bx = x0+gy*(x3-x0);
            var by = y0+gy*(y3-y0);
            point.sx = bx+gx*((x1+gy*(x2-x1))-bx);
            point.sy = by+gx*((y1+gy*(y2-y1))-by);
        }
        render();
    }
    private function render():Void {
        var t:Number;
        var tmc:MovieClip;
        var inner:MovieClip;
        var vertices:Array;
        var p0, p1, p2;
        var atan2:Function = Math.atan2;
        var sqrt:Function = Math.sqrt;
        var cos:Function = Math.cos;
        var tan:Function = Math.tan;
        var arm, p0x, p0y, dx10, dy10, dx20, dy20, ap1, ap2, da12;
        for (t in triAngles) {
            tmc = triAngles[t];
            inner = tmc.inner;
            vertices = tmc.vertices;
            p0 = vertices[0];
            p1 = vertices[1];
            p2 = vertices[2];
            tmc._rotation = (180/Math.PI)*(-(da12=((ap1=atan2(dy10=p1.sy-(p0y=tmc._y=p0.sy), dx10=p1.sx-(p0x=tmc._x=p0.sx)))-(ap2=atan2(dy20=p2.sy-p0y, dx20=p2.sx-p0x)))/2)+ap1);
            tmc._yscale = 100*tan(da12);
            inner._xscale = sqrt(dx20*dx20+dy20*dy20)/(arm=100/(Math.SQRT1_2*2)/cos(da12))*100.5;
            inner._yscale = sqrt(dx10*dx10+dy10*dy10)/arm*100.5;
        }
    }
    function getBounds():Object {
        return {xMin:xMin, xMax:xMax, yMin:yMin, yMax:yMax};
    }
} 


Weiß jemand noch was?

[labrar]

Bitte streichen.

Ich bin wohl schon zu übermüdet.

Funzt nicht

Jemand noch eine Idee

[gaspode]

Wo findet man eigentlich die Original-Klasse zum Download?

gruß, gaspode

[labrar]

Bei AM selbst.

Kommst aber nicht direkt daruf. Ich bin auch durch die Suche hier im FF draufgestoßen.


Wobei die Klasse die ich im ersten Thread gepostet habe 1zu1 ist mit Ausnahme von den auskommentierten Versuchen von mir

[MaticPel]

Haste es mal mit http://www.flashsandy.org/ probiert? Da ist DistortImage auch dabei (sandy.util.DistortImage).

Ich hatte damit keine Probleme. Kleiner Code-Ausschnitt:

mitte_Gross = new Element (0, 0, 590, 0, 590, 308, 0, 308); 
 
 //...
 
 tmp = this.cover (mitte_Gross, 0, 2, this._timeline.mc_BildDummy); 
 
 // ....
 
    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;    
        
        return [this._timeline["clip"+i], this._timeline["di"+i]];
    } 

[labrar]

Wow ist genauso harter Stoff

Trotzdem Danke. Auch da wurschtel ich mich mal rein.
Wer hat da von wem angekupfert? AM d oder die von AM?

Die Klassen sind fast idenstisch. Sogar von den bezeichnern her

[gaspode]

Ich glaube die Klasse von André läßt sich nicht so ohne weiteres
verändern, da das Bild per attachMovie in einen bestimmten Clip
attachet wird.
Diesen Vorgang kann man aber meines Wissens mit einem extern
geladenen Bild nicht nachmachen. Das dürfte erst mit AS3 gehen.

gruß, gaspode

[MaticPel]

Zitat von labrar

Wow ist genauso harter Stoff

Trotzdem Danke. Auch da wurschtel ich mich mal rein.
Wer hat da von wem angekupfert? AM d oder die von AM?

Die Klassen sind fast idenstisch. Sogar von den bezeichnern her

/*
****************************
* From a first idea and first implementation of Andre Michelle www.andre-michelle.com
* @version 2.0
* @author Thomas Pfeiffer - kiroukou - http://www.thomas-pfeiffer.info
* @author Richard Lester - RichL
* @author Didier Brun - foxy - http://www.foxaweb.com
* @website: http://sandy.media-box.net
* @description: Tesselate a movieclip into several triangles to allow free transform distorsion.
*/

Das basiert auf dem von Andre Michelle

[labrar]

Zitat von gaspode

Ich glaube die Klasse von André läßt sich nicht so ohne weiteres
verändern, da das Bild per attachMovie in einen bestimmten Clip
attachet wird.
Diesen Vorgang kann man aber meines Wissens mit einem extern
geladenen Bild nicht nachmachen. Das dürfte erst mit AS3 gehen.

gruß, gaspode

Muss irgendwie gehen. Da ich kürzlich einen Pic in Glass Designer gesehen habe wo man ebenfalls Bilder hochladen kann welche sich dann 3Dmäßig mitdrehen.
Und die werden auch perspektivisch gezzert(Trapez und nicht Parallelogram)

[MaticPel]

Das geht auch. Der codeauschnitt ist auch für dynamisch geladene bilder
Probier mal das mit sandy aus. das ist nicht so kompliziert wie es aussieht