NetObserver Studie
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Flash > Irisblende mit Flash I

Irisblende mit Flash

In diesem Tutorial zeigt uns Autor Usch, wie Ihr eine solche Blende mit Flash konstruieren und animieren könnt, um damit Fotos auf einer Website attraktiv zu präsentieren. Das sehr ausführliche Tutorials erstreckt sich über 3 Seiten.

Vorbereitungen

Mit "Datei>Neu" erstellen wir ein neues Dokument. Die Dokumenteigenschaften stellen wir unter "Modifizieren>Dokument" ein. (Größe: 400px X 400px, Hintergrundfarbe: weiß FFFFFF, Linealeinheit: Pixel)tooltipp

Unter "Ansicht" aktivieren wir "Lineale" und "An Pixel ausrichten", bei "Hilfslinien>An Hilfslinie ausrichten, Hilfslinien anzeigen". Wir ziehen aus den Linealen am Kopf und der linken Seite je eine Hilfslinie (Cursor auf dem Lineal positionieren und mit gedrückter linker Maustaste in das Dokument ziehen) und positionieren sie auf 200px.

Falls noch nicht geschehen aktivieren wir unter "Fenster" die Bedienfelder "Werkzeuge, Zeitleiste, Eigenschaften, Ausrichten und Transformieren". (diese Fenster müssen also alle einen Haken haben)

Konstruktion

Wir wählen das Kreiswerkzeug, stellen bei Füllfarbe "keine" ein, (weißes Rechteck mit rotem Balken) tooltipp platzieren den Cursor (jetzt ein Kreuz) im Dokument und ziehen bei gleichzeitig gedrückter Shift und linker Maustaste einen beliebig großen Kreis auf. tooltipp Wir wählen den Kreis mit dem Auswahlwerkzeug (schwarzer Pfeil oben links) und stellen im Bedienfeld "Eigenschaften" die Strichstärke auf 2 und Breite und Höhe auf 250.

Im Bedienfeld "Ausrichten" aktivieren wir "An Bühne ausrichten" und klicken dann auf "Horizontal zentrieren" und "Vertikal zentrieren".tooltipp

Jetzt wählen wir in der Werkzeugleiste das Linienwerkzeug (linke Reihe, zweites von oben) und zeichnen entlang der senkrechten Hilfslinie vom Scheitelpunkt des Kreises bis zum Mittelpunkt eine Linie (Radius). Mit "Strg+Ü" blenden wir die Hilfslinien aus. Wir wählen den Radius mit dem Auswahlwerkzeug (schwarzer Pfeil oben links) aus und wandeln ihn mit "Ansicht>In Symbol konvertieren" (oderF8) in ein Grafiksymbol um und geben ihm den Namen "Radius".

Wir wählen in der Werkzeugleiste "Frei transformieren" (linke Reihe, 6. Symbol von oben ). Der Mittelpunkt des Radius verwandelt sich in einen kleinen Kreis, den wir nach unten zum Mittelpunkt des großen Kreises ziehen. tooltipp Im Bedienfeld "Transformieren" geben wir im Feld "Drehen" 45° ein und klicken auf das Zeichen "Kopieren und Transformierung anwenden" (rechte untere Ecke, linkes Zeichen). tooltipp So erhalten wir eine zweite Gerade. tooltipp

Mit noch ausgewählter Geraden wählen wir "Modifizieren>Teilen" (oder Strg+B). Danach wählen wir die senkrechte Gerade aus und teilen sie ebenso. Mit gedrückter Shift Taste wählen wir beide Geraden und den sie verbindenden Kreisausschnit aus. tooltippJetzt stellen wir die Füllfarbe auf Schwarz und die Strichfarbe auf ein mittleres Grau. Dann wählen wir das Farbeimerwerkzeug, und klicken damit in den ausgewählten Kreisausschnitt. tooltipp

Damit beim Öffnen der Blende zwischen den einzelnen Lamellen keine Spalten entstehen, müssen wir die Spitze der Lamelle über den Kreismittelpunkt hinaus verlängern und gleichzeitig etwas nach links ziehen. Um das zu erreichen, klicken wir mit dem Auswahlwerkzeug (schwarzer Pfeil) auf eine freie Stelle neben der Lamelle, um die Auswahl aufzuheben. Jetzt führen wir den Cursor zur Spitze der Lamelle bis ein kleiner rechter Winkel unterhalb des Pfeils erscheint und ziehen sie mit gedrückter linker Maustaste etwas nach unten und links. Wenn die richtige Position erreicht ist, lösen wir die Maustaste. Danach führen wir den Pfeil des Auswahlwerkzeugs zur rechten Geraden bis ein kleiner Kreisbogen erscheint und ziehen ihn bei gedrückter linker Maustaste etwas nach rechts. Ebenso verfahren wir mit der senkrechten Geraden. tooltipp

Jetzt wählen wir die ganze Lamelle aus. Am einfachsten geht das, indem wir mit dem Auswahlwerkzeug ein Rechteck darum aufziehen. Mit "Einfügen>In Symbol konvertieren" (oder F8) öffnen wir ein Fenster, in dem wir das Symbol benennen und als Verhalten "Grafik" auswählen.

Um einen vollen Kreis aus Lamellen zu erhalten, brauchen wir 7 Kopien, die wir jeweils um 45° versetzt um den Kreismittelpunkt anordnen. Um diesen zu ermitteln, schalten wir wieder mit Strg+Ü die Hilfslinien ein. Wir wählen die Lamelle aus. In der Mitte erscheint ein kleines Kreuz auf einem weißen Kreis. Dieser bezeichnet den Drehpunkt und muss für unsere Blendenkonstruktion auf den Mittelpunkt unseres Ausgangskreises gelegt werden. Wie wir wissen, schneiden sich unsere Hilfslinien in diesem Punkt.

Wir wählen "Modifizieren>Transformieren>Drehen und neigen". Jetzt können wir den kleinen weißen Kreis in der Mitte der Lamelle auf den Kreuzungspunkt der Hilfslinien ziehen. tooltipp

Nun kommt der schönste Teil der Konstruktion. Wir stellen im Bedienfeld Transformieren den Drehwinkel wieder auf 45° (wie Abb.6) und klicken sieben mal auf das Zeichen "Kopieren und Transformierung anwenden" (rechte untere Ecke, linkes Zeichen). Schon ist unser Kreis fertig. [Abbildung 12]

 

>>> weiter zur nächsten Seite / Die Animation der Blende

(uj) (http://www.sitecrea.de)

Abbildungen

Abbildung 1

Abbildung 1

Abbildung 2

Abbildung 2

Abbildung 3

Abbildung 3

Abbildung 4

Abbildung 4

Abbildung 5

Abbildung 5

Abbildung 6

Abbildung 6

Abbildung 7

Abbildung 7

Abbildung 8

Abbildung 8

Abbildung 9

Abbildung 9

Abbildung 10

Abbildung 10

Abbildung 11

Abbildung 11

Abbildung12

Abbildung12

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /