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.

» » » » » » » » » » » » « « « « « « « « « « « «Somehow I decided to write a small tutorial about the panorama pictures using Flash. The advantage of this approach is that not the whole pictures displays right away. You can define a smaller window with which you can scroll through the whole picture. That means on websites they are easier to present. At least that is my opinion. In general, depending on where the mouse curser is in the window the picture scrolls in that specific direction. You can also define dead zones at the margin and the center where it doesn’t scroll at all. If it scrolls in both directions or just in one depends on the size of the picture in relation to the size of the defined window. To create them you of course need the panorama picture itself and a version of Adobe Flash which supports Action Script I guess. Personally I used CS4 but it should work with any newer version and probably also with the older versions because the script is not very complicated. Once you opened Flash you should create a new Action Script document. I always used Action Script version 3.0 (Picture 1). Once that is done you can set the size of the window or stage like it is called in Flash in the properties of the document. Next would be to import the panorama picture by using “File -> Import to stage” or Ctrl+R (Picture 2). Probably the imported picture is still selected and we can convert it to a Symbol by using “Modify -> Convert to symbol” or F8 (Picture 3) straight away. Otherwise you have to select the picture first. In the next dialog be sure that Type: Movie is selected and the upper left corner for Registration is marked (Picture 4). In the properties of the just created movie we have to name it “nav1” (Picture 5) otherwise the script will not know which picture it should move around. After that all we have to do is create a new layer (lower left symbol in the timeline window – Picture 6). Rightclick on that new layer2 and select “Actions” from the popup menu (Picture 7). This will open the Action Script editor (Picture 8). In that you can just paste the script below or import the .as file. After that press Ctrl+Enter to test your new scrolling panorama. If you are satisfied export it to a .swf movie and you are ready to embed it into your website. I got the idea for this script from this website. However I modified it quite a bit afterwards.

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;
}
}
}
}
}