Rollo das durch Mausberührung aufgeht

QR-tipps-1sttec-100

Rollo das durch Mausberührung aufgeht

Ein Flash Tutorial über ein Fensterrollo das sich durch berühren mit der Maus automatisch öffnet. Mit Bewegungstween, Importfunktion aus Photoshop und ActionScript onRollOver- und onRollOut-Funktion. Es wird auch die Bearbeitung mit Photoshop erklärt.

Zuerst braucht man natürlich einmal ein Fenster. Falls man selbst kein Rolladenfenster Zuhause hat, einfach eins irgendwo fotografieren.

Als nächsten Schritt muss das Bild bearbeitet werden. Dazu verwende ich Photoshop.

Bearbeitung mit Photoshop:

Weil oft Bilder etwas schräg fotografiert sind, sollten sie zuerst gedreht werden.

Das Bild gerade stellen:

Menu-Analyse-Linealwerkzeug

Eine Linie entlang eines Bereiches ziehen das horizontal werden soll

Menu-Bild-Bilddrehung-Per Eingabe...

Es erscheint folgendes Fenster

Hier erscheint automatisch der Winkel der mit dem Linealwerkzeug für die Drehung festgelegt wurde. Dies wird mit OK bestätigt. Nun haben wir ein Bild für eine gerade Rolloführung.

Bild zuschneiden:

Als nächstes sollte der komplette Hintergrund entfernt werden, hier Mauerwerk und Fensterbank.

In diesem Beispiel wird das Polygon-Lasso-Werkzeug verwendet

Ich habe hier mit Strg+J eine neue Ebene erstellt

Die Ebene 0 kann jetzt in den Mülleimer verschoben werden

Das Bild über Menu-Bild-Zuschneiden anpassen

Nun schneide ich unschöne Schattenbereiche noch aus

Jetzt wird das Rollo markiert und mit Strg+J eine neue Ebene erstellt

Auf das Miniaturbild von Ebene 1 mit gedrückter Strg-Taste klicken, die Ebene Rollo markieren und die Entf-Taste drücken.

Die beiden Rolloführungen markieren und nach oben zum Rollokasten schieben

Die Ebene 1 nach unten ziehen

Da die Rolloführungen nicht ganz vertikal laufen sollte das Rollo etwas breiter gemacht werden (Frei-Transformieren Strg+T). Oder die Rolloführungen drehen und einpassen.

Jetzt kann man das Bild nochmal zuschneiden und anschließend auf die passende Größe bringen.

Es fehlt nur noch ein Bild das bei geöffnetem Rollo erscheint.

Hierzu habe ich ein Bild aus meinem Archiv eingefügt und auf die richtige Größe gebracht. Die Ebene nach unten schieben nicht vergessen.

Zuletzt natürlich das Speichern nicht vergessen.

Flash:

In Flash eine neue Datei mit ActionScrip 2.0 erstellen.

In Bühne importieren

In Flash lässt sich die Photoshop-Datei ganz einfach mit allen Ebenen importieren.

Über Datei-Importieren-In Bühne Importieren wähle ich die psd-Datei aus die ich vorher in Photoshop erstellt habe.

Bühne auf gleiche Größe wie Photoshop-Leinwand anklicken

Ebene umwandeln in: Flash-Ebenen

Die Ebene Rollo markieren und "Movieclip für diese Ebene erstellen" anklicken, wird für die Bewegung benötigt.

Die Ebene mona markieren und "Movieclip für diese Ebene erstellen" anklicken und einen Instanznamen vergeben der später für ActionScript benötigt wird.

Jetzt erscheinen alle Ebenen in der Zeitleiste

Nun markiere ich das Bild 24 mit "Shift" über alle Ebenen füge mit "F5" ein Bild ein.

Bewegungstween

Markiere Bild 1 der Ebene Rollo und erstelle über Einfügen einen Bewegungstween.

Auf der Ebene Rollo wird in Bild 24 und Bild 12 noch ein Schlüsselbild mit "F6" eingefügt.

In Bild 12 verschiebe ich das Rollo nach oben. Dazu sperre ich die Ebene Rollokasten um auf das Rollo zugreifen zu können weil es unter der Ebene liegt.