Macromedia Fireworks MX 2004

1. Macromedia Fireworks MX 2004

2. Einführung in das Programm • 1. Fireworks allgemein • Das Grafikprogramm Fireworks MX 2004 stammt von Macromedia • Es beherrscht eine Vielzahl von Fähigkeiten (z.B. Webgrafiken entwerfen, optimieren & integrieren, HTML Code für geteilte Grafiken übergeben, etc.) • Letzteres funktioniert nur in Zusammenarbeit mit seiner „Schwester“ Dreamweaver -> Fireworks beherrscht alles was für professionelle Grafik-Gestaltung im Web nötig ist

3. Es bietet sich bei den Macromedia Programmen die Möglichkeit der Zusammenarbeit untereinander TIPP 1: Lasst euch nicht aus der Ruhe bringen, dass Programm wirkt auf den ersten Blick sehr verwirrend. Aber nach kurzer Arbeit mit Fireworks gewinnt man den Überblick.

4. 2. Die Arbeitsfläche • Die Arbeitsfläche von Fireworks setzt sich aus einem Hauptfenster und 4 kleinen Zusatzfenster (farbig markiert) zusammen TIPP 2: Man muss nicht alle Fenster gleichzeitig geöffnet haben. • Jedes Zusatzfenster besteht zusätzlich aus 4-5 Registerkarten

5. 3. Die Farbtabelle • Fireworks gibt automatisch durch das Farben-Fenster Auskunft über die Farben eines in Fireworks gelade- nen Bildes (Anzahl der Farben) • Die 6 markierten Schalter können auf die Farben zugreifen um sie zu löschen, zu sperren, transparent zu machen, oder durch andere Farben zu ersetzen

6. 4. Optionen • Das Fenster „Optionen“ passt sich dem gewählten Werkzeug aus der Werkzeugleiste an. Werkzeugleiste ->

7. 5. Ebenen • Wie von anderen Grafikprogrammen her bekannt, kann man mehrere Ebenen (Schichten) übereinander legen, aus denen sich dann das komplette Bild ergibt. • Der Vorteil an der Arbeit der Ebenen ist, dass jede für sich bearbeitet werden kann, d.h. z.B. Effekte können gezielter und leichter angewendet werden. TIPP 3: Es besteht die Möglichkeit die einzelnen Ebenen im Fenster „Ebenen“ aus zu blenden, gelöscht oder gesperrt werden.

8. 6. Frames (Rahmen) • Man kann mit diesem Programm auch Roll-Over-Effekte und Animationen erstellen. • In dem Fenster „Frames“ kann man die einzelnen Bilder einer Animation unterbringen.

9. TIPP 4: Um eine fließende Animation zu erstellen, helfen professionelle Funktionen aus dem Normalen Animationsverfahren, z.B. „Zwiebelschicht“. → Die Zwiebelschicht ist eine Methode, bei der dünnes, durchsichtiges Schablonenpapier verwendet wird, um animierte Sequenzen zu betrachten.

10. 7. Verlauf • Der Verlauf dient die Arbeit an einem Dokument zu verstehen, zu ändern oder wiederholen zu können. • Das Fenster enthält eine Auflistung der Arbeitsschritte, die man mit Fireworks durchgeführt hat. • 8. Info • Das Fenster „Info“ gibt Informationen zu Farbwerten, Größe und Lage einer Grafik oder eines Objektes an.

11. 9. Optimieren • Man kann mit Fireworks auch Grafiken optimieren und Objekte gestalten. • Eine Grafik kann jederzeit in Hinblick auf Dateiumfang und Ladezeit kontrolliert werden. • Die Vorschau lässt die verschieden Optimierungstiefen direkt vergleichen.

12. 10. Objekt • Im Registerfenster „Objekt“ stellt man die Opazität (Durchsichtigkeit) ein. • Hier kann man auch den Mischmodus wählen, außerdem kann hier Pinselstrich und Füllung eines gezeichneten Objektes bestimmt werden. • 11. Pinselstrich • Hier kann man eigene Strichformen kreieren und für späteren Gebrauch speichern.

13. 12. Verhaltensweisen • Das Fenster liefert verschiedene Funktionen zur Gestaltung von Roll-Over-Buttons. • Per Mausklick versehen sie Web-Objekte mit JavaScript-Optinonen. • Diese lassen sich hier später auch überprüfen und ändern.

14. 13. URL • Mit Fireworks kann man sich eine „URL-Bibliothek“ anlegen. • So kann man bestimmte URL mehrmals in einem Dokument verwenden, ohne sie jedes mal suchen zu müssen. • 14. Stile • Es lassen sich Stile (grafische Vorlagen) u.a. auf Buttons oder Texte anwenden. TIPP 5: So lassen sich in wenigen Minuten Grafiken erstellen, ohne in die Tiefe geblickt zu haben.

15. Jeder Effekt kann rückgängig gemacht werden. • Die Entwicklung von neuen Stilformen und die Änderung von Vorlagen ist ebenfalls möglich. • 15. Bibliothek • Hierbei handelt es sich um eine Symbol-Bibliothek. • Hier kann man Symbole (Objekte) ablegen. Diese kann man als Kopien wieder aufrufen und wieder verwenden. • Aktualisierung der Kopien erfolgt automatisch • Die Bibliothek ist eine Hilfe zum erstellen von Roll-Over-Buttons.

16. 16. Füllen • Die Aufgabe des Füllfensters besteht darin dem Objekt eine geeignete Füllung zu verpassen. • Zu den bereits definierten Farbverläufen kann man eigene Schöpfungen ergänzen. • Hier bestimmt man auch die Struktur und Transparenz eines Objektes.

17. Werkzeuge • 1. Der Farbmischer • Der Farbmischer dient zum definieren der Farben (RGB, Hexadezimal, HSB, CMY und Grauskala), sowie zum Austausch der Farben um sie für bestimmte Werkzeuge zu definieren.

18. 2. Farbfelder • Das Farbfeld ist zunächst leer. Man muss erst im Pop-up Menü „Aktuelle Exportpalette“ auswählen, damit das Farbfeld der Grafik angezeigt wird. TIPP 6: Das Farbfeld kann immer abgespeichert und wieder aufgerufen werden.

19. Erstellen eines Logos(„Rock in den Ruinen“) • Nach dem öffnen erstellt man ein neues Dokument und gibt die Leinwandgröße, sowie die Leinwandfarbe an • Leinwandfarbe: Schwarz (#000000) Leinwandgröße: B 380 Pixel / H 450 Pixel ( Auflösung: 72 Pixel/Zoll) • Man wählt das „Linienwerkzeug“ aus, um eine U-förmige Figur zu zeichnen ( Strichfarbe #666666) TIPP 7: Man kann jederzeit die letzten Schritte rückgängig machen.

20. Screenshot: U-förmige Figur

21. Nun benutzt man das „Ellipsenwerkzeug“ um den Torbogen der entstehenden Burg zu ziehen • Mit dem „Pinselwerkzeug“ (Filzstift, dunkler Makierer) übermalt man die Hälfte der Ellipse, die außerhalb der Burg liegt Burg mit fertigem Torbogen • Die Zinnen der Burg werden nun mit dem „Linienwerkzeug“ gezeichnet

22. Jetzt füllt man die Burg (ohne das Tor) in der Farbe #666666 • Die überflüssigen Linien werden ebenfalls schwarz übermalt • Man schreibt nun „ROCK IN DEN RUINEN“ (Copperplate Gothic Bold; 90) über die Burg • Dann werden Effekte hinzugefügt • Geschliffen und Prägen • Außen geschliffen • Ring/Erhaben/Verlauf: Supernova

23. Das fertige Logo

24. Erstellung von Animationen 1. Stern mit bewegendem Punkt: • Man legt ein neues Dokument an (Leinwandfarbe: Weiß #000000) • Man zeichnet einen Stern • Nun erzeugt man eine neue Ebene für den kleinen Kreis TIPP 8: Um genauer arbeiten zu können verändert man die Ansicht der Leinwand auf 200%

25. Screenshot: Stern mit kleiner Kugel

26. Nun markiert man die Kugel und konvertiert diese mit F8 in ein Symbol • Man dubliziert dann as Symbol mehrmals mit STRG+Alt+D bis man 6 Teile erhält • Danach werden die 6 Kugeln gleichmäßig auf dem Stern verteilt • Nach dem makieren aller Kugeln, wählt man Modifizieren -> Symbol -> Tween - Instanzen (Schritte: 5; auf Frames verteilen)

27. Screenshot: Stern mit Laufbahn der Kugel

28. 2. Rotierender Stern • Man zeichnet auf ein leeres Dokument mit der Leinwandfarbe Rot (wird im Verlauf noch schwarz) einen Stern (schwarz) Screenshot: Schwarzer Stern auf rotem Hintergrund

29. Dem Stern wird folgende Füllung gegeben: Verlauf -> linear rot – blau – gelb Nun fügt man die Animation ein, indem man modifiziert, animiert und die Auswahl animiert und folgende Einstellungen übernimmt: Jetzt kann man noch die Leinwand zurecht schneiden (Modifizieren -> Leinwand -> Leinwand anpassen Allgemein: Man kann auch Effekte hinzufügen (Schlag- schatten)

30. Screenshot: Fertiger Stern

31. Clarissa Rogner Klasse 10a