Adobe Flash 360° Drehung um die eigene Achse

M

macmouse

Neues Mitglied
Thread Starter
Dabei seit
26.05.2004
Beiträge
5
Reaktionspunkte
0
Ahoi!
Ich bin auf der Suche nach einem Tutorial wo beschrieben ist, wie ich ein Objekt um die eigene Achse drehen kann. Unter www.drehmomente.de und da unter 360° Ansicht mit Lupe (Adidas) ist der SWF meines Begehrens zu sehen. Nur: Wie haben die das gemacht???? Ich weiss nichtmal, wie die das Händchen da reinbekommen :(

Die 36 Bilder des Objektes habe ich. Also immer 10° weiter gedreht. So klappt es in QT VR. Aber in Flash?

*seufz* Wäre klasse, wenn mir jemand helfen könnte.

*wink* Macmouse
 
Das ist total billig gemacht… ich dachte die hätten mit Lingo3D in Director oder mit Drahtmodellen und trigonometrischen Funktionen gearbeitet… aber nix…

Die haben einfach so wie du schon sagtest bei zb. dem Thomann Mischpult ca. 10 Objekte mit je 36° zusätzliche Drehung photografiert bzw. in einer 3D Software erstellt.

Entweder machst du dir nun 10 solche Photos und importierst die alle nach Flash und schraubst dir dann eine Funktion, die mouse._x und mouse._y abfragt, damit du das Dingen virtuell drehen kannst (in Wirklichkeit wird je nach Mouseposition ein anderes Bild angezeigt) oder du beschäftigst dich mit Director und Lingo 3D, oder du zeichnest dir so ein Drahtgittermodell in Freehand und versuchst dich dann in Flash an trigonometrischen Funktionen.

So sehen ein paar Prototypes dafür aus

PHP:
//Actionscript
function Object3d(clip){
	if(!i) i=1;
	_root.attachMovie(clip, "mc"+i, i);
	this.mc=_root["mc"+i];
_root["mc" add i].id=i-1;
	this.fl=200;
	this.xc=275;
	this.yc=200;
	this.zc=200;
	i++;
}
Object3d.prototype.setCenters=function(x,y,z){
	this.xc=x;
	this.yc=y;
	this.zc=z;
}

Object3d.prototype.setPos=function(x,y,z){
	this.x=x;
	this.y=y;
	this.z=z;
	this.scale=this.fl/(this.fl+this.z+this.zc);
	this.mc._x=this.x*this.scale+this.xc;
	this.mc._y=this.y*this.scale+this.yc;
	this.mc._xscale=this.mc._yscale=this.scale*100;
	this.mc.swapDepths(Math.round(100000-this.z)*1000+this.mc.id);
	if(this.z+this.zc<-this.fl){
		this.mc._visible=false;
	} else {
		this.mc._visible=true;
	}
}
Object3d.prototype.translate=function(x,y,z){
	this.x+=x;
	this.y+=y;
	this.z+=z;
	this.setPos(this.x, this.y, this.z);
}
Object3d.prototype.rotateX=function(angle){
	var rad=angle*Math.PI/180;
	cosrad=Math.cos(rad);
	sinrad=Math.sin(rad);
	var z=cosrad*this.z - sinrad*this.y;
	var y=cosrad*this.y + sinrad*this.z;
	this.setPos(this.x, y, z);
}
Object3d.prototype.rotateY=function(angle){
	var rad=angle*Math.PI/180;
	cosrad=Math.cos(rad);
	sinrad=Math.sin(rad);
	var x=cosrad*this.x - sinrad*this.z;
	var z=cosrad*this.z + sinrad*this.x;
	this.setPos(x, this.y, z);
}
Object3d.prototype.rotateZ=function(angle){
	var rad=angle*Math.PI/180;
	cosrad=Math.cos(rad);
	sinrad=Math.sin(rad);
	var x=cosrad*this.x - sinrad*this.y;
	var y=cosrad*this.y + sinrad*this.x;
	this.setPos(x, y, this.z);
};


Siehst du, das es nur mathematisch/physikalische Berechnungen, nach Actionscript übersetzt, sind? Du kannst immer davon ausgehen, das wenn etwas mit 3D in Flash geschehen soll, du das so angehen musst, da Flash selbst keinen 3D Engine hat.


Für die Beispiele die ich auf der Seite gesehen habe würde ich es genauso machen wie die, ist halt für das Web am besten. Ansonsten ein Wireframe in Director MX, kannst ja auch ein wenig Texturen drüberziehen… und am besten in einem 3D Programm… aber da weiß ich nicht, wie es mit der Interaktivität aussieht.


Liebe Grüße

Yves
 
Achso… und herzlich Willkommen bei Macuser.de Community! und weiterhin viel Spaß :)

Ich hab grad erst gesehen, das du ein neues Mitglied bist und versäumt dich willkommen zu heißen.

so then…

You are welcome!


Yves
 
Hallo Yves,

erstmal Danke für die schnelle und umfangreiche Antwort. Das hat mich ja beruhigt, dass du erstmal schreibst: ”ganz billig gemacht” *grins*

Als ich dein AS gesehen hab, hab ich mich gefragt, ob ICH das wirklich so billig finde.... hmmmmmm. Oder ob ich hier im Forum mit meinen bescheidenen Flash-Kenntnissen vielleicht falsch bin.... ?

Also ich grab mich mal durch. *schwitz*

Macmouse als Maulwurf unnawechs ;))
 
Simpel ist nur die Variante mit den 10 Photos und der Funktion, die das ganze dann „dreht“.
Trigonometrische Funktionen & Co sind dann schon nicht ohne.

Bevor ich jetzt irgendetwas zusammenschraube das dich nicht weiterbringt… was hast du denn genau vor?

Eventuell lohnt es sich ja einen Blick auf Director und Lingo3D zu werfen, falls du 3D häufiger benötigst.

Rena Hermann hat etwas ganz nettes gebastelt, das meiner Meinung nach die perfekteste Lösung im Web darstellt. Die Kantenglättung ist zwar nicht ideal, dafür ist das ganze dann aber Interaktiv und von der Größe her akzeptabel.





Liebe Grüße

Yves
 
Zuletzt bearbeitet von einem Moderator:
Hi,

da ich mal davon ausgehe, das du dich noch nicht mit Kollisionsabfragen und den ganzen Sachen beschäftigt hast und das auch nicht für einen Auftrag brauchst, hab ich dir trotzdem mal eben etwas ganz ganz einfaches zusammengeschraubt.

Ich hab in Freehand eine „3D Röhre“ als Gittermodell erstellt und diese 4 mal jeweils +45° gedreht. Ergibt dann 180°. Eine Bewegung in eine Richtung reicht ja erstmal zum sehen, wie man sich einen einfachen Workaround bauen kann.

Diese habe ich dann nach Flash importiert und auf die Frames 1, 10, 20, 30 gesetzt. 1,2,3,4 wäre auch gegangen.

Anstatt Mouseabfragen und Kollisionsabfragen mit hitTest() habe ich dann einfach 4 Buttoninstanzen genommen und dem on(rollOver) Handler von Links nach Rechts zugewiesen:

gotoAndStop(1);, gotoAndStop(10);, gotoAndStop(20);, gotoAndStop(30);

Somit kannst du das Teil dann von Links nach Rechts um 180°(-45°, das letzte Bild hab ich mir gespart:D) drehen.

Rein theoretisch kannst du mit dieser Methode nun eine flüssige Animation in beliebiger Auflösung bezüglich der Feinheit der Bewegung erstellen.

Ganz flüssig wären dann 360 Einzelbilder aus Freehand, jeweils immer +1° gedreht und 360 Buttoninstanzen, die dann jeweils gotoAndStop(1); - gotoAndStop(360); sagen.

Du kannst natürlich auch von der Mitte als 0° ausgehen und dann jeweils nach Links und Rechts 180° bzw. -180° bewegen lassen.

Mit dieser Methode ersparst du dir dann das ganze Scripting und kannst, sofern du Vektorengrafiken nimmst, auch noch eine relativ kleine Größe der SWF vorweisen.


Liebe Grüße

Yves

(.fla, .swf liegt als .zip anbei)
 
hmhmhm. 1000 Dank für deine Mühe!!!

Und jetzt die schlimme Nachricht: Also ich brauche die Funktionalitat in AS weil ich die zugehörigen Bilder via Datenbank einladen möchte. :( Ich hab schon mal mit dem HitTest gearbeitet und auch die Kollisionsabfrage gemacht. Aber... hm ich weiss nicht wie ich anfangen soll. Also erstmal habe ich die Bilder (36 freigestellte Bilder mit einem Objekt) Diese möchte ich zweifach ranzoomen können (mit Masken-Effekt sollte das kein Problem sein und das kriege ich auch via DB hin, hab ich schon mal gemacht und war wirklich easy *froi*)
Mein Problem ist, das ich erstens möchte, das auf dem Mausevent Press UND Move sich das Objekt drehen soll und zwar genau in die Richtung, die der User auch zieht. Ich möchte Buttons vermeiden.

Jetzt habe ich jede Menge Foren zu dem Thema gewälzt und bisher kaum brauchbare Resultate gefunden. QT VR ist eine so einfache und glückliche Lösung, aber die hätte ich eben gern als SWF. Deswegen war ich so begeistert als ich diese drehmomente Nummer gesehen habe.

hm. entschuldige, dass ich nicht eher zu einer Antwort gekommen bin Yves, damit hätte ich dir wohl die Mühe erspart die Fla zu bauen.
 
Hi, kein Problem. Die Fla hat vielleicht höchstens 5min. gedauert.

Wenn du Inhalte aus MySQL nach Flash importierst, wirst du das wahrscheinlich mit PHP als Bridge über das LoadVars Objekt und loadMovie(); machen.

Da du 36 Bilder hast brauchen wir uns also nicht mit Trigonometrik beschäftigen.

Spontan würde ich vorschlagen, das du das Zoomen wie folgt erledigst.

Die entsprechenden Bilder sollten die maximale Größe haben. Diese lädt du in einen ContainerClip, welcher auf 50% skaliert ist. Zoom*1 70%, Zoom*2 100%. Und jeweils wieder zentrieren nicht vergessen ;)

Kannst die ja eine Funktion mit _width, _height, _x und _y bauen, die das dann relativ zu einander erledigen. Als Parameter übergibst du den Zoomfaktor und entsprechend einen Wert wie center, left etc.…
Vielleicht hat Flash auch so eine Funktion schon dabei… hehe… ich bin mittlerweile im FunctioncodingWahn… schau einfach mal in der Referenz :)

Und die Bilder…

die kannst du dann ja mittels loadMovie in den Container laden, skaliert werden diese dann ja ebenfalls.

Und der Roundview…

In PHP liest du dann ja so wahrscheinlich deine Links zu den Dateipfaden aus

PHP:
<?php
require_once('config.inc.php');
$i=0;
$read=mysql_query("select image from $db_tab where root_id='$_POST[root_id]' order by id asc",$handler);
while($a=mysql_fetch_array($read))
    {
    $result.='&image_'.$i.'='$path.$a['image'];
    }
$result.='&repeats='.$i;
echo utf8_encode($result);
?>

$path ist dann der Pfad zu den Bildern, der in der config.inc.php definiert ist, da in die DB nur Dateinamen gehören und du beim Auslesen beide konkatenieren kannst. ;)

In Flash würde ich das dann so machen

PHP:
//Actionscript

var loader=new LoadVars()
loader.object=this;
loader.root_id=//hier die root_id der entsprechenden Bilderserie eintragen, dann kannst du direkt mehrere Objekte ansteuern in einer SWF
loader.sendAndLoad('query.php', loader, 'POST');
loader.onLoad=function(success)
    {
    if (success)
        {
        var Comp=_root.attachMovie('Comp, 'Comp', 1); // Instanz der „Drehumgebung“ auf die Bühne holen. Vorher in die Lib mit Linkage ID legen
        Comp._x=//X Koordinate
        Comp._y=//Y Koordinate
        for(var i=0;i<this.repeats;i++) //Repeats werden ==360 sein, kannst du so aber Variabel halten für ein geringeres Datenaufkommen (zb ==36). Mit entsprechendem Datensatz (root_id) verwenden!
            {
            'Comp.image_'+i=eval('this.image_'+i);
            }
        delete this.object['loader']; 
        }
    }

Cont ist dann eine Komponente die du in der Lib ablegst und entsprechende CompDefinitions (image_1 etc.) mit Datentyp String verpasst.


Nun hast du dann auf der Bühne eine Komponente, die alle 360 Bildpfade als Eigenschaft hat.

Jetzt kannst du dann das erste Bild in einen Container (_root.comp.createEmptyMovieClip('container',1);) mit loadMovie(image_01); laden.

Auf 50% skalieren udn zentrieren nicht vergessen.

Da du dich schon mit Kollisionsabfrage beschäftigt hast kannst du nun die Breite des _root.comp.container ausmessen und die x,y bestimmten ((getProperty()) (immer abhängig vom „Zoomfaktor“, den man übrigens so auch stufenlos einstellen könnte) und dann entsprechend einen _root.comp.container.hitTest(x,y, boolean); bezüglich 360 Einzelabschnitten erstellen, der dann im Falle von hitTest=true das nächste Bild lädt.
Den hitTest musst du in einen onEnterFrame schreiben, damit die Abfrage immer wiederholt wird.

Beispiel:

Zoomfaktor ist 100%.

Das Bild in dem Container wäre dann 360px*360px (angenommene Max Größe) und liegt auf 0 0 . Abfrage würde ergeben, das die Mouse auf x==289 ist und y==[gesamteHöhe des Container], dann müsste der hitTest, welcher für diesen Bereich true wäre das Bild der Variablen image_289 in den Container laden.

Da du nun noch die Maus dabei gedrückt haben möchtest, kannst du als zusätzliche Bedingung zu dem hitTest() noch den Eventhandler Mouse.press / true etc etc. einsetzen. Jenachdem für was du dich entscheidest bezüglich der Abfrage der Maus.






Liebe Grüße

Yves
 
Natürlich ist das erste Bild nicht so groß wie das zb. 183* Bild. Deswegen musst du die hitTest immer neu definieren, indem du das ganze Teil in 360 gleichgroße Abschnitte teilst.

Geht ja ebenfalls mit ein wenig Mathematik in Flash.
Prinzipiell ist das jetzt das was mir ohne viel Denken dazu einfällt.

Alle anderen Methoden hier zu erklären würde zu viel Zeitaufwand kosten, da das schon quasi einem kompletten Job zur 3D Visualisierung eines Objektes gleichen würde.

Vielleicht findet sich ja der ein oder andere Freiberufler, der dir das erledigt, falls du es kommerziell anwendest ;) :D.

Yves
 
Hallo Yves,

deine Gedanken haben mir schon geholfen. Die Denkanstöße sind klasse.
Wenn ich es fertig programmiert habe, stell ich das mal als Tutorial zur Verfügung, vielleicht kann's der ein oder andere ja gebrauchen?

LG
Macmouse
 
Hi,

und schon etwas fertig?

Ich hab mir die Dinge oben nocheinmal durchgelesen… vielleicht ist die Sache mit den 360 (scriptgenerierten) MC Instanzen auch zu umständlich ;)
Alternative wäre, in einem onEnterFrame Handler die Mousekoordianten kontinuierlich auszuwerten, und dann in beliebiger Feinheit einen switch() [case mouse._x>45 :] etc. etc.… erstellen.

Liebe Grüße

Yves
 
Hallo Yves,

die Lösung die ich nun gefunden habe ist ziemlich simpel. Ich würde die Fla ja posten aber die hat 12 MB :(

Also eigentlich hab ich der Maus nur beigebracht wo links und rechts ist und dann den Film mit den Objekten entweder vorwärts oder rückwärts laufen lassen.

Wenn ich Zeit finde, poste ich hier eine kleine Dokumentation. Da es eine wirklich einfache Lösung ist, die eigentlich nur als Vorraussetzung hat, dass man Variablen setzen und auslesen kann, dürfte dieses Ding auch für Anfänger ideal sein.

Viele Grüße

M.
 
Hi,

das klingt interessant.

Ich würde mich sehr über eine Dokumentation von dir in diesem Forum freuen!

Beste Grüße aus Dortmund

Yves
 
Zurück
Oben Unten