Scrolling Panorama
Irgendwie hab ich mich entschlossen nun ein kleines Tutorial zu schreiben wie man die mit Flash ein Panorama erstellen kann welches nicht das gesamte Bild auf einmal anzeigt, sondern man einen kleineren Ausschnitt definieren kann und je nachdem wie man mit der Maus über den Ausschnitt fährt scrollt das Panorama in diese Richtung oder eben zurück. Das Script funktioniert in x und y Richtung. Am Ende des Panorama hört das Bild auf zu scrollen. In welche Richtung gescrollt werden kann hängt von den Dimensionen des Ausschnitts im Vergleich zum Bild ab. In der Mitte des Bildes und am Rand kann eine tote Zone definiert werden in der nicht gescrollt wird. Nun aber eine kleine Anleitung dazu. Das Panoramabild muss natürlich schon vorhanden sein. Am Besten als jpg oder ähnliche Bilddatei. Außerdem wird Adobe Flash CS benötigt. Ich habe CS4 benutzt aber ich denke es geht auch schon mit früheren Versionen oder auch neueren. Zuerst erstellen wir ein neues Dokument (Bild 1). Danach kann man über die Eigenschaften die größe des Ausschnitts einstellen. Als nächstes Müssen wir das das Panorama in das Flashprojekt importieren. Dafür gehen wir auf “Datei -> In Bühne importieren” oder Strg+R (Bild 2). Das gerade importiere Bild muss dann in ein Symbol/Film umgewandelt werden. Wahrscheinlich ist das Bild noch ausgewählt wenn nichts anderes angeklickt wurde. Dann kann man einfach auf “Modifizieren -> In Symbol umwandeln” gehen oder F8 drücken (Bild 3). Im nächsten Dialogfeld ist wichtig, dass “Film” als Typ ausgewählt ist und die rechte obere Ecke bei Registrierung markiert ist (Bild 4). In den Eigenschaften des gerade umgewandelten Filmes muss man auf jeden Fall noch den Namen “nav1” vergeben (Bild 5), sonst weiß das Script nichts mit dem Panorama anzufangen. Als nächstes legen wir eine neue Ebene an (linkes, unteres Symbol in der Zeitleiste – Bild 6). Über einen Rechtsklick auf den 2. Layer kommt man über “Actions” (Bild 7) in ein neues Fenster welches das Script aufnimmt (Bild 8). Sobald das Script dort eingefügt wurde kann man über Strg + Enter einen Probelauf starten. Falls alles funktioniert kann man den Film dann als .swf Datei speichern und auf einer Webseite einbinden. Die Idee für das Skript bekam ich von dieser Seite. Allerdings habe ich noch einiges abgeändert.
Das Script unten ist auch als PDF und als TXT als download verfügbar. Die txt Datei kann in eine as Datei umbenannt werden und auch einfach in Flash importiert werden. Beispiele solcher Panoramas findet ihr z.B. hier: Landschaft in Nunavik, Kanada.
ÄNDERUNG: Skript, Linie 9: -1000; -> 0; Damit sollte das Bild in der linken, oberen Ecke starten anstatt irgendwo weiter unten oder gar außerhalb des Bildes.
The script is also available as PDF and as TXT for download. The txt file can be renamed to an as file which can easily be imported into the Action Script editor. Examples of flash panoramas that can be done with that script can be found in this post: Scenery in Nunavik, Canada.
CHANGE: Script line 9: -1000; -> 0; That way it should start in the top left corner instead of somewhere down the picture if not out of the picture.
// get some initial variables from the stage.
// The picture used for the pano scroll has to be a movie and named nav 1
var movieWidth:Number = stage.stageWidth;
var movieHeight:Number = stage.stageHeight;
var panoWidth:Number = nav1.width;
var panoHeight:Number = nav1.height;
// set of initial position
nav1.x = 0;
nav1.y = 0;
addEventListener(“enterFrame”,frame_handler);
function frame_handler(e:Event) {
// get mouse position
var mousex:Number = mouseX;
var mousey:Number = mouseY;
// center of movie
var xspeed:Number = movieWidth/2;
var yspeed:Number = movieHeight/2;
// sets movement speed ( greater number, slower movement)
var c:Number = 75;
// sets the dead center where nothing moves
var center:Number = 50;
// sets the dead rim where nothing moves
var rim:Number = 20;
// scrollspeed calculation
var posx:Number = 0 – ((mousex – xspeed)/c);
var posy:Number = 0 – ((mousey – yspeed)/c);
// if the mouse is in the rim do nothing, only continue if it is inside
if ( mousex > rim && mousex < movieWidth – rim && mousey > rim && mousey < movieHeight – rim ) { // movement in x direction if it is not in the center if ( ( mousex > xspeed + center ) || ( mousex < xspeed – center ) ) {
// only move it to the end of the pano. Don’t scroll further
if ( nav1.x = (movieWidth – panoWidth)) {
nav1.x += posx;
// don’t know if it is necessary. Just to be save. If the movement was to far set it back
if ( nav1.x > 0 ) {
nav1.x = 0;
} else if ( nav1.x < (movieWidth – panoWidth) ) { nav1.x = movieWidth – panoWidth; } } } // movement in y direction if it is not in the center if ( ( mousey > yspeed + center ) || ( mousey < yspeed – center ) ) {
// only move it to the end of the pano. Don’t scroll further
if ( nav1.y = (movieHeight – panoHeight)) {
nav1.y += posy;
// don’t know if it is necessary. Just to be save. If the movement was to far set it back
if ( nav1.y > 0 ) {
nav1.y = 0;
} else if ( nav1.y < (movieHeight – panoHeight) ) {
nav1.y = movieHeight – panoHeight;
}
}
}
}
}
Vielen Dank für das Tutorial.
Es ist wirklich ausführlich.
Genau die Scrollmöglichkeit eines Panoramabildes habe ich schon länger gesucht.
Ich habe es in Adobe Flash Professional CS6 nachvollzogen — es funktioniert aber nicht. Beim Abspielversuch bleibt das Fenster weiß ohne irgendeine Fehlermeldung.
Mit Flash kenne ich mich nicht gut aus, bin Neuling.
Sicherlich habe ich einen Fehler gemacht, in CS6 stellt sich das Ganze auch etwas anders dar.
J. Kresse
Hallo Jochen,
ich bin mittlerweile auch auf CS6 umgestiegen. Daran liegt es auf jeden Fall nicht. Wie groß ist denn dein Bild? Ein Problem könnte sein, was ich gerade sehe, dass ich im Skript bei
// set of initial position
nav1.x = 0;
nav1.y = -1000;
immer noch -1000 stehen habe für den y wert. D.h. beim Laden des Bildes wird es 1000 Pixel nach oben verschoben. Wenn es also keine 1000 Pixel hoch ist dann siehst du es gar nicht mehr. Stell den Wert mal auf 0. Wenn es dann oben links anfängt ist alles super und nur ich hab vergessen das für die Onlineversion wieder auf 0 zu setzen. Wenn es immer noch nicht geht müssen wir mal weiter schauen.
Viele Grüße
Jens
Hallo Jens.
Vielen Dank für die Antwort.
Den Fehler habe ich nun entdeckt.
Das Panoramabild konnte nicht gefunden werden, da nicht richtig importiert.
Der Import sieht in CS6 so aus:
Datei -> Importieren -> in Bühne importieren.
Ich hab’s probiert, nicht gewusst.
Was der Unterschied ist zwischen “In Bühne importieren”
und “Video importieren” ist, weiss ich nicht.
“Video importieren” geht jedenfalls nicht.
Es “läuft” nun prächtig!
Mein Panoramabild ist B:2213 mal H:600 Pixel.
Das Fenster von Flash 900 X 600, also den Ausschnitt, den man dann sieht.
Das ist also ziemlich gross.
In Zeile 8 den X-Wert (horizontal) habe ich auf -500 gesetzt, also etwas links von der Mitte des Bildes. Nicht an den Rand.
Den Wert habe ich in der Vorschau ausprobiert und abgelesen, da kann man ja auch schon scrollen.
Es soll auch der Fokus des Betrachters sein.
In Zeile 9 den Y – Wert(vertikal) auf 0.
Wenn’s interessiert, kannst Du es Dir ja mal ansehen.
Das Panoramabild besteht aus 7 HDR – Bildern Hochformat.
Jedes HDR Bild aus 5 Einzelbildern, von -2 bis +2 Blendenwerten
vom gemessenen Mittelwert, aufgenommen.
http://www.evkiunterlenningen.de/neu/Bilder/Panorama/Lenningen-2.html
Viele Grüße
Jochen
Hi Jochen,
Schön, dass es funktioniert hat! Danke auch für die korrekte deutsche Übersetzung. Ich habe das Programm nur in English, deswegen muss ich immer Rätseln wie das jetzt wohl im deutschen Programm genau heißen mag. Ich werde den Teil demnächst dann anpassen, damit der Unterschied zwischen Film und Bühne klarer hervorkommt.
Ein schönes Bild hast du da zusammengebastelt. Du kannst auch probieren noch mit den FPS Einstellungen rumzuspielen. Standard sind glaub 24 FPS. Mit höheren Werten läuft es etwas flüssiger. Die Einstellung findest du bei den Eigenschaften der Bühne.
Grüße, Jens