Move und Scale Effect

[fedarius]

Hallo Community

Stellt euch ein Bild vor (in wirklichkeint ist es eine DataGroup mit verteilten Elementen), bei klick auf eine bestimmte Stelle soll an diese gezoomt werden (s:Scale) und diese Stelle soll ins Zentrum gerückt werden (s:Move).

Beide Effekte getrennt voneinander funktionieren, zusammen allerdings leider nicht, d.h. es verschiebt sich immer ein anderer Punkt ins Zentrum.
Ich denke es liegt daran, dass durch den Scale-Effekt sich die ursprünglichen Koordinaten des Punktes ändern.

Hat jemand ne Idee wie ich das ordentlich hinbekomme?

Grüße

[Omega Psi]

Parallel?

[fedarius]

Naja, quasi parallel. Also idealer Weise erst Move und dann Scale mit dem entsprechenden Punkt im Zentrum.

[Omega Psi]

Dann ein mx:Sequence.

[fedarius]

Naja, das Problem ist wie gesagt nicht das eigentlich Ausführen, sondern dass es richtig ausgeführt wird.

Denn der ScaleEffect wird leider nicht auf die Mitte ausgerichtet.
Er soll auch nicht auf die Mitte der eigentlichen Komponente ausgerichtet werden (da sie ja auch verschoben wird), sondern auf die Allgemeine mitte der Applikation, also nahezu der Bildschirmmitte.
Ich setzte für den ScaleEffect den Bezugspunkt über transformX und transformY.

Wie schaffe ich es, dass sich der ScaleEffect immer auf die Bildschirmmitte bezieht?

Wäre wirklich Klasse, wenn mich da jemand weiterbringen könnte.

[JohannesDicks]

Hi,
ich habe einen ansatz, der dich in die richtige Richtung bringen könnte.

versuche, den skallierungsfaktor mit in die bewegung einzubeziehen.

in meinem einfachen anwendungsbeispiel, möchte ich ein UIComponent nur auf der X-Achse verschieben und es gleichzeitig um X% verkleinern. D.h., dass sich der mittelpunkt auf der X-Achse bewegen soll.

folgend meine schnelllösung:

PHP-Code:

            private function getContentEffect(component:UIComponent,scalePercent:Number,movX:Number):Parallel
            {
                var movY:Number = component.height/100*scalePercent*-1/2;
                var res:Scale = getScale(scalePercent);
                res.duration = 1200;
                var mov:Move = getMove(movX,movY);
                mov.duration = 1200;
                var effects:Array = new Array();
                effects.push(res);
                effects.push(mov);
                
                return getParallel(effects,1000,component);
            }
            
            private function getParallel(effects:Array, duration:int, component:UIComponent):Parallel
            {
                var parallelO:Parallel = new Parallel(component);
                //parallelO.duration = duration;
                
                for each (var effect:Effect in effects) {
                    parallelO.children.push(effect);                    
                }
                return parallelO;
            }

            private function getScale(percent:int):Scale
            {
                var resize:Scale = new Scale();
                resize.scaleYBy = 1/100*percent;//component.height / 100 * percent;
                resize.scaleXBy = 1/100*percent;//component.width / 100 * percent;
                resize.autoCenterTransform = false;
                return resize;
            }

            private function getMove(xLength:int, yLength:int):Move
            {
                var move:Move = new Move();
                move.xBy = xLength;
                move.yBy = yLength;            
                return move;
            } 


benutzt wird das ganze dann einfach so:

PHP-Code:

        trace("hideContent");
                var percentScale:Number = -15;
                var movX:Number = 100;
                
                var parallel:Parallel = getContentEffect(this.contentContainer,percentScale,movX);
                
                parallel.play(); 


bzw...

PHP-Code:

            trace("showContent");                
                var percentScale:Number = 15;
                var movX:Number = -100;                
                var parallel:Parallel = getContentEffect(this.contentContainer,percentScale,movX);                
                parallel.play(); 


sicherlich nicht allzu schwer zu verstehen, knackpunkt ist folgende zeile in getContentEffect:

PHP-Code:

var movY:Number = component.height/100*scalePercent*-1/2; 


ein stolperstein, den ich mir nicht direkt erklären konnte, war folgende zeile in getParallel:

PHP-Code:

//parallelO.duration = duration; 


die beiden effekte wurden nach dem gemeinsamen setzen von duration über das Parallel-Objekt nicht gleichlang ausgeführt, beheben ließ es sich komischerweise nur über das setzen der duration direkt über die effect-objekte Move und Scale in getContentEffect

PHP-Code:

                var res:Scale = getScale(scalePercent);
                res.duration = 1200;
                var mov:Move = getMove(movX,movY);
                mov.duration = 1200; 


ich hoffe du kannst noch was damit anfangen.
die nächste herausforderung wäre quasi, die berechnung verschiedene richtungen zu erweitern. also was passiert wenn ich über x & y schiebe und vergrößere/verkleinere...

Grüße Johannes