Dynamische Lupe / Vergrößerung

[cheetah]

Hello,
ich hab mir grad die Seite http://www.aeonflux.com/aeonflux.html angeschaut und bin von der Navigation sehr beeindruckt. Da ich zufällig grad an einer ähnlichen experimentellen Navigation arbeite wollt ich mal horchen ob einer ne Idee hat wie man diese dynamische Lupenfunktion da angehen könnte... wertet die Sache ja doch echt auf... hat sowas exploratives... einer von euch ne Ahnung?

[cheetah]

...nich? hmm. Erwarte hier ja jetzt auch kein fertiges Script hehe... brauch nur mal einen Ansatz um das anzugehen... vielleicht gibts da ja eine recht einfach integrierbare Funktion die soetwas ausgeben könnte...

[cheetah]

Grad gesehn dass der Colian (siehe ECHTE Lupe) auch schonma sone Frage vor einiger Zeit gestellt hat... scheint wohl wirklich etwas kniffelig zu sein... normale Lupe / Linse ist ja soweit nachvollziehbar, aber bei dynamischem Content...

[Alois]

Zitat von cheetah

... die Seite http://www.aeonflux.com/aeonflux.html .... dynamische Lupenfunktion ....

wo
Edit: ...hab mal was angehängt, meinst Du sowas??

[cheetah]

Japp. Das meinte ich, besten Dank... auf der http://www.aeonflux.com/aeonflux.html musste bisserl warten bis das Intro vorbei ist + dann baut sich oben die Navi auf... eben mit diesem Kugeleffekt.. hast selber geschrieben das AS? Hast zufällig noch ein paar Erläuterungen zu dem Script an Bord? Wäre prima, dann kann ichs an meine Problemstellung anpassen... so ganz klar sind mir da so manche Zeilen nicht

[Alois]

...ich habs mal versucht zu kommentieren, ich hoffe Du hast ausreichend gute Mathe-Kenntnisse, sonst hilft das auch wohl nix :

//die ersten beiden Zeilen sind eher Spielerei
//so verteilen sich die Ringe passend zur Dokumentengrösse
//....braucht man eigentlich nicht....
var w = Stage.width;
var h = Stage.height;
//_global.dia= Radius der virtuellen Kugel (sollte eigentlich der Durchmesser werden, deshalb dia...)
_global.dia = 150;
MovieClip.prototype.scale = function(sc) {
    //ich hatte keine Lust immer this._xscale=this._yscale=50;
    //zu schreiben deshalb hab ich einen entsprechenden prototypen gebastelt
    this._xscale = this._yscale=sc;
};
for (var i = 0; i<70; i++) {
    var x=(i%10)*w/11+w/22//random(w);
    //ohne die 'Spielerei' vom Anfang
    //var x= (i%10)*50+25;
    //bleibt nur noch i%10 zu erklären
    //% steht in flash für modulo 
    //modulo gibt den Rest einer Teilaufgabe zurück
    //Beispiel: 43/10=4 Rest 3 => 43%10=3
    //diese und die nächste Zeile ist das 'bessere'
    //...in Zeilen und Spalten verteilen...
    var y=Math.floor(i/10)*h/8+h/16//random(h);
    //ohne die 'Spielerei' vom Anfang
    //var y= Math.floor(i/10)*50+25;
    ziel = this.attachMovie("ring", "ring"+i, i, {_x:x, _y:y,_alpha:50});
    //das meiste dürfte klar sein, nur das bei attachMovie
    //die Instanz zurückgegeben wird, ist nicht überall bekannt
    ziel.x = ziel._x;
    //ich benötige die aktuelle x-Position für die späteren Berechnungen
    ziel.y = ziel._y;
    //ich benötige die aktuelle x-Position für die späteren Berechnungen
    ziel.scale(50);
    //der o.a. prototype in Aktion
    ziel.onMouseMove = function() {
        //jeder Ring bekommt eine eigene onMouseMove-Funktion
        var dx = _root._xmouse-this.x;
        //Differenz, der x-Mausposition und der ursprünglichen x-position des Rings...
        var dy = _root._ymouse-this.y;
        //Differenz, der y-Mausposition und der ursprünglichen y-position des Rings...
        var d = Math.sqrt(dx*dx+dy*dy);
        //Trigonometrie: c²=a²+b²
        if (d<dia) {
            this._alpha=50+d/dia*50;
            //_alpha entsprechend Mausposition verändern min=50% max=100% 
            this.scale(50+(dia-d));   
            //skalierung entsprechend Mausposition verändern min=50% max=50+dia=200%
            var dist = Math.sin((dia/2-Math.abs(dia/2-d))/dia/2*Math.PI/2);
            //hmmm...ja, Trigonometrie.... eigentlich der 'Kern' der Animation
            //Math.abs(n) ...gibt immer einen pusitiven Wert zurück
            //flash rechnet bei sinus/cosinus im Bogenmaß desh. *Math.PI/2..
            //bei 360°-Berechung hätte da *90 stehen müssen
            //...einfach mal (mit nur einen Ring) trace((dia/2-Math.abs(dia/2-d)); machen
            //...dann verstehst Du vielleicht was ich hier mache
            var distx = dx/d*dist*dia;
            //nach dem Strahlensatz x-Verschiebung errechnen
            var disty = dy/d*dist*dia;
            //nach dem Strahlensatz y-Verschiebung errechnen
            //
            //
            //...und positionieren...
            this._x = this.x-distx;
            this._y = this.y-disty;
        }else{
            //wenn Abstand zu groß trotzdem 'nochmal' positionieren 
            //sonst stehen die Ringe evtl. etwas versetzt...
            this._x = this.x;
            this._y = this.y;
            this._alpha=50;
            this.scale(50);
        }
    };
} 

[cheetah]

Na das nenn ich mal ausführlich... danke. Ist verständlich - mit Mathe habe ich mich lange genug abgeplagt - daran scheiterts nicht hehe... war eher der Aufbau des Scripts... weisst du zufällig wie man MovieClips per AS in die Bibliothek exportiert um die dann via dieser AttachMovie-Funktion wieder ansprechen zu können? habs auch hier gepostet mein Prob... Bibliothek-MC mit AS simulieren

[cheetah]

Ich möchte jetzt gerne per startDrag einen dieser Ringe auf onRollOver verschieben können - leider funktioniert das überhaupt nicht - hab da schon diverse Möglichkeiten ausprobiert - hast du da vielleicht auch ne Idee? Würde mir sehr weiterhelfen grad...

[cheetah]

Also, ums nochmal auf den Punkt zu bringen.. hier mein aktueller Code... warum funzt bloß dieses startDrag nicht...

_global.dia = 150;
MovieClip.prototype.scale = function(sc) {
    this._xscale = this._yscale=sc;
}
        
        ziel = this.createEmptyMovieClip("rechteck", 1);
        
        this.rechteck.beginFill(0x000000,100);
        this.rechteck.lineTo(0,0);
        this.rechteck.lineTo(10,0);
        this.rechteck.lineTo(10,10);
        this.rechteck.lineTo(0,10);
        this.rechteck.endFill();
        
        this.rechteck._x = 50;
        this.rechteck._y = 50;
        this.rechteck._alpha=50;
 
        ziel.x = ziel._x;      
        ziel.y = ziel._y;
        ziel.scale(50);
        ziel.onMouseMove = function() {
 
                var dx = _root._xmouse-this.x;
                var dy = _root._ymouse-this.y;
                var d = Math.sqrt(dx*dx+dy*dy);
                if (d<dia) {
                        this._alpha=50+d/dia*50;
                        this.scale(50+(dia-d));
                        var dist = Math.sin((dia/2-Math.abs(dia/2-d))/dia/2*Math.PI/2);
                        var distx = dx/d*dist*dia;
                        var disty = dy/d*dist*dia;
                        this._x = this.x-distx;
                        this._y = this.y-disty;
                                                
                }else{
                        this._x = this.x;
                        this._y = this.y;
                        this._alpha=50;
                        this.scale(50);
                        
                        
                }
}
 
this.rechteck.onRollOver = function(){
    this.startDrag();
    
} 

[Asta]

Hi

Ich habe das vor 2 Jahren mal gemacht und mit etwas Hilfe von einem Freund, Informatiker, zustande gebracht. Das ganze basiert auf einem Code den wir mal in einem Forum gefunden haben. Es funktioniert vollständig on Drag. Wann es geht kannst du ja mit hilfe einer if-Schleife festlegen. Also abhängig von der Mausposition.

this.onLoad = function() {
        for (x=1; x<30; x++) {
                        this.attachMovie("quader","quader"+x, ++d);
                        this["quader"+x]._x = x * 30;
                        this["quader"+x].onMouseMove = function() {
                                var prescaleit_1 = (Math.sqrt((_root._xmouse-this._x)*(_root._xmouse-this._x)));
                                var scaleit_1 = (200-(prescaleit_1/0.8));
                                if (scaleit_1>=100) {
                                        this._yscale = scaleit_1;
                                        this._xscale = scaleit_1;
                                } else {
                                        this._yscale = 100;
                                        this._xscale = 100;
                                }
                        };
                }
};; 

Nun machst du im der Bibliothek ein movie, den du unter Verknüpfungen (rechte Maustaste) "quader" nennst. Wenn du darin einen Button einbaust müsstest du diesen über den Instanznamen aufrufen können.

Änderung:
Hier noch der Code um ein Feld von Rechtecken zu erzeugen:

this.onLoad = function() {
        for (x=1; x<20; x++) {
                for (y=1; y<15; y++) {
                        this.attachMovie("quader","quader"+x+"-"+y, ++d);
                        this["quader"+x+"-"+y]._x = x * 40;
                        this["quader"+x+"-"+y]._y = y * 40;
                        this["quader"+x+"-"+y].onMouseMove = function() {
                                var prescaleit_1 = (Math.sqrt(((_root._ymouse-this._y)*(_root._ymouse-this._y))+((_root._xmouse-this._x)*(_root._xmouse-this._x))));
                                var scaleit_1 = (200-(prescaleit_1/1.5));
                                if (scaleit_1>=100) {
                                        this._yscale = scaleit_1;
                                        this._xscale = scaleit_1;
                                } else {
                                        this._yscale = 100;
                                        this._xscale = 100;
                                }
                        };
                }
        }
}; 

Ich hoffe es hilft dir ein wenig.

Schöne Grüße
Asta

[cheetah]

Danke dir für die Antwort - habs mal ausprobiert, glaubich aber n bisserl was anderes gesucht... anyway... der Fehler bei mir war mal wieder ein fehlendes _parent in der RollOver-Funktion... wie folgt läufts... wenns nur immer so einfach wäre

_global.dia = 150;
MovieClip.prototype.scale = function(sc) {
        this._xscale = this._yscale=sc;
}
 
ziel = this.createEmptyMovieClip("rechteck", 1);
 
this.rechteck.beginFill(0x000000,100);
this.rechteck.lineTo(0,0);
this.rechteck.lineTo(10,0);
this.rechteck.lineTo(10,10);
this.rechteck.lineTo(0,10);
this.rechteck.endFill();
 
this.rechteck._x = 50;
this.rechteck._y = 50;
this.rechteck._alpha=50;
 
ziel.x = ziel._x;
ziel.y = ziel._y;
ziel.scale(50);
ziel.onMouseMove = function() {
        
        var dx = _root._xmouse-this.x;
        var dy = _root._ymouse-this.y;
        var d = Math.sqrt(dx*dx+dy*dy);
        if (d<dia) {
                this._alpha=50+d/dia*50;
                this.scale(50+(dia-d));
                var dist = Math.sin((dia/2-Math.abs(dia/2-d))/dia/2*Math.PI/2);
                var distx = dx/d*dist*dia;
                var disty = dy/d*dist*dia;
                this._x = this.x-distx;
                this._y = this.y-disty;
                
        }else{
                this._x = this.x;
                this._y = this.y;
                this._alpha=50;
                this.scale(50);
                
                
        }
}
 
this.rechteck.onRollOver = function(){
        this._parent.startDrag();
        
} 

[cheetah]

So ein Ärger - da dachte ich das wärs und merk im nächsten Moment dass ich so ja die gesamte Bühne verschiebe.. weiss einer wie ich nur den MC ohne die Bühne draggen kann? Danke für die Aufmerksamkeit

[cheetah]

Keiner ne Idee?

[Alois]

hmm..., wofür brauchst Du'n das?
...der einfachste Weg ist, den mouseMove-Handler erst zu löschen:

ziel.onRollOver = function(){
    delete this.onMouseMove;
    this.startDrag();
} 

...oder muss der mouseMove-Handler nacher wieder funktionieren..., dann ist es vielleicht besser so:

ziel.onRollOver = function(){
 
    this.onEnterFrame=function(){
        this.x=this._x=this._parent._xmouse;
        this.y=this._y=this._parent._ymouse;
    }
} 

...naja dann müsstest Du halt nach'm 'drop' den enterFrame-Handler löschen, und schon ging es wieder... oder sind beide Fälle für Dich unbrauchbar, weil Du es halt noch anders brauchst
...btw. wenn Du schon 'ziel = this.createEmptyMovieClip("rechteck", 1);' codest kannst Du statt 'this.rechteck' grundsätzlich auch 'ziel' schreiben, noch 'schöner wirds dann mit with, Dein Code sähe dann so aus

_global.dia = 150;
MovieClip.prototype.scale = function(sc) {
    this._xscale = this._yscale=sc;
};
ziel = this.createEmptyMovieClip("rechteck", 1);
with (ziel) {
    beginFill(0x000000, 100);
    lineTo(0, 0);
    lineTo(10, 0);
    lineTo(10, 10);
    lineTo(0, 10);
    endFill();
    _x = 50;
    _y = 50;
    _alpha = 50;
}
ziel.x = ziel._x;
ziel.y = ziel._y;
ziel.scale(50);
ziel.onMouseMove = function() {
    var dx = _root._xmouse-this.x;
    var dy = _root._ymouse-this.y;
    var d = Math.sqrt(dx*dx+dy*dy);
    if (d<dia) {
        this._alpha = 50+d/dia*50;
        this.scale(50+(dia-d));
        var dist = Math.sin((dia/2-Math.abs(dia/2-d))/dia/2*Math.PI/2);
        var distx = dx/d*dist*dia;
        var disty = dy/d*dist*dia;
        this._x = this.x-distx;
        this._y = this.y-disty;
    } else {
        this._x = this.x;
        this._y = this.y;
        this._alpha = 50;
        this.scale(50);
    }
};
ziel.onRollOver = function() {
    delete this.onMouseMove;
    this.startDrag();
}; 

[cheetah]

Aaah ja super... danke dir... mein Ziel war es wirklich, erst den mouseMove-Handler zu deaktivieren um diesen anschließend wieder zu aktivieren... soll natürlich onPress geschehen nicht wie fälschlicherweise angegeben onRollOver... funktioniert wunderbar... tu mich manchmal noch etwas schwer mit den Basics - wird aber