Fireworks, Flash und Dreamweaver : der Grundlagenkurs zu Macromedias Dreamteam ; [zahlreiche Übungen ; interaktives Arbeitsmaterial auf CD-ROM ; kostenlose Textaktualisierungen zu neuen Programmversionen]

694 Pages·2001·16.165 MB·German

by  Patricia Bosselaar

Fireworks, Flash
und Dreamweaver

Patricia Bosselaar
Fireworks, Flash
und Dreamweaver
Der Grundlagenkurs
zu Macromedias Dreamteam
An imprint of Pearson Education
München • Boston • San Francisco • Harlow, England
Don Mills, Ontario • Sydney • Mexico City
Madrid • Amsterdam
Die Deutsche Bibliothek – CIP-Einheitsaufnahme
Ein Titeldatensatz für diese Publikation ist bei
Der Deutschen Bibliothek erhältlich
Die Informationen in diesem Produkt werden ohne Rücksicht
auf einen eventuellen Patentschutz veröffentlicht.
Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt.
Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen.
Trotzdem können Fehler nicht vollständig ausgeschlossen werden.
Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen
weder eine juristische Verantwortung noch irgendeine Haftung übernehmen.
Für Verbesserungsvorschläge und Hinweise auf Fehler
sind Verlag und Autoren dankbar.
Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe
und der Speicherung in elektronischen Medien.
Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle
und Arbeiten ist nicht zulässig.
Fast alle Hardware- und Softwarebezeichnungen,
die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene
Warenzeichen oder sollten als solche betrachtet werden.
Umwelthinweis:
Dieses Produkt wurde auf chlorfrei gebleichtem Papier gedruckt.
Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus
umweltverträglichem und recyclingfähigem PE-Material.
Die holländische Originalausgabe trägt den Titel:
Dynamisch webdesign© 2001 by Site Wide Management Ltd./Pearson Education Uitgeverij BV
Die in diesem Buch behandelte Trainingsmethode darf nicht ohne Zustimmung von
Site Wide Management Ltd. für Trainingsprogramme oder -Kurse bearbeitet werden
(werder als Übungsmaterial noch als organisatorische oder inhaltliche Grundlage).
Patricia Bosselar® ist ein geschützes Markenzeichen.
10 9 8 7 6 5 4 3 2 1
04 03 02 01
ISBN 3-8273-1792-4
© 2001 by Addison-Wesley Verlag,
ein Imprint der Pearson Education Deutschland GmbH
Martin-Kollar-Straße 10–12, D-81829 München/Germany
Alle Rechte vorbehalten
Einbandgestaltung: Helmut Kraus, Düsseldorf
Übersetzung: Henrik Schröder, Felix Hülsey, Peter Wittmann
(Gesamtverantwortung und Redaktion: Henrik Schröder, Köln)
Lokalisierung der CD-ROM: Andreas Diel, Köln
Lektorat: Klaus Hofmann, [email protected]
Korrektorat: Friederike Daenecke, Zülpich
Herstellung: Anna Plenk, [email protected]
Satz: mediaService – Dirk Matzke, Siegen
Druck und Verarbeitung: Kösel, Kempten
Printed in Germany
Inhaltsverzeichnis
Vorwort 19 Werkzeuge und Funktionen für
spezielle Internet-Lösungen.......................32
Vorwort der Autorin 20 Dateiformate: Importieren, Exportieren
und Speichern............................................33
Einleitung 21 1.2 Systemanforderungen...............................34
e.1 Das Dreamteam..........................................21 1.3 Integration mit Dreamweaver....................34
e.2 Tipps.........................................................22 1.4 Anmerkungen............................................35
2
e.3 Übungen....................................................22
e.4 Internet-Anarchie.......................................22 Arbeitsumgebung 37
e.5 Macintosh und/oder Windows?.................23
2.1 Das Dokumentenfenster ...........................37
e.6 Welcher Browser? Internet Explorer
2.2 Voreinstellungen........................................38
oder Netscape?..........................................23
2.3 Ein neues Dokument erstellen...................40
e.7 Welche Browserversion?...........................23
2.4 Leinwand...................................................40
e.8 Welche Internet-Verbindung?....................23
2.5 Symbolleisten............................................42
e.9 Welches Computersystem?........................23
2.6 Bedienfelder und Inspektoren...................43
e.10 Monitorgröße und Bildschirmauflösung?..24
2.7 Navigieren.................................................45
e.11 Java(Script) – ja oder nein?........................24
2.8 Anzeigemodus...........................................45
e.12 Plug-Ins oder ActiveX?...............................24
2.9 Browservorschau ......................................46
e.13 Planung und Vorbereitung.........................24
2.10 Hilfsmittel: Lineale, Gitternetz
e.14 Die CD-ROM zum Buch..............................25
und Hilfslinien............................................46
e.15 Die Website zum Buch...............................25
2.11 Kontextmenüs............................................47
2.12 Mauszeiger und Schieberegler...................48
Fachbegriffe 27 3
Werkzeuge 49
3.1 Die Werkzeugleiste....................................49
Fireworks 29
3.2 Das Bedienfeld Werkzeugoptionen............49
3.3 Objekte......................................................50
3.4 Objektmodus und Bildbearbeitungsmodus51
1
3.5 Drehen, spiegeln, neigen und verzerren.....51
3.6 Das Bedienfeld Info....................................53
Anwendungsmöglichkeiten 31
3.7 Der Objekt-Inspektor.................................53
1.1 Merkmale von Fireworks.............................31 4
Werkzeuge für den Entwurfsprozess..........31
Funktionen für einen einfachen, effizienten Vektoren 55
Produktionsprozess...................................32 4.1 Vektorobjekte erstellen.............................55
4.2 Vektorpfade und Bézier-Punkte.................56
4.3 Vektorpfade ändern...................................57
6 Inhaltsverzeichnis
4.4 Vektorpfade umformen .............................58 6.14 Filter als Live-Effekte verwenden...............77
4.5 Einen Pfad duplizieren...............................59 Die Effekte „Weichzeichnen“.....................80
4.6 Einen Pfad vergrößern oder verkleinern....59 Die Effekte „Andere“..................................80
4.7 Vektorpfade kombinieren..........................59 Die Effekte „Scharf stellen“.......................80
5
6.15 Das Bedienfeld Stile...................................80
Einen neuen Stil generieren........................81
Text 61
Einen Stil zuweisen.....................................81
5.1 Einen Text erstellen....................................61
Einen Stil ändern.........................................81
5.2 Text formatieren........................................62 7
5.3 Schriftart...................................................62
5.4 Schriftgröße..............................................63 Bitmaps 83
5.5 Farbe und Stil............................................63 7.1 Bildobjekte im Objektmodus bearbeiten...83
5.6 Unterschneidung.......................................63 7.2 Bildobjekte im Bildbearbeitungsmodus
5.7 Zeilenabstand............................................63 bearbeiten.................................................84
5.8 Ausrichtung, Orientierung und Richtung...64 7.3 Pixel markieren..........................................84
5.9 Horizontale Skalierung..............................64 7.4 Markierte Pixel bearbeiten.........................85
5.10 Grundlinienverschiebung..........................64 7.5 Die Werkzeuge
5.11 Anti-Aliasing..............................................65 des Bildbearbeitungsmodus......................85
5.12 Textobjekte...............................................65 Bitmaps..........................................86
5.13 Text importieren........................................65 Bilder maskieren............................87
8
5.14 Text an einen Pfad anfügen.......................66
5.15 Text in Vektorobjekt oder
Frames und Ebenen 89
Bitmap konvertieren..................................66
6 8.1 Das Bedienfeld Frames..............................89
8.2 Frames hinzufügen....................................89
Farben, Linien, Füllungen, 8.3 Frames löschen..........................................90
Effekte und Stile 67 8.4 Frames verwenden.....................................90
6.1 Arbeiten mit Farben ..................................67 8.5 Frames und Ebenen...................................90
6.2 Das Bedienfeld Farbfelder.........................67 8.6 Allen Frames Objekte hinzufügen..............90
6.3 Das Bedienfeld Farbmischer......................69 8.7 Die Option „Auf Frames verteilen“..............91
6.4 Pinselstrich und Füllen..............................69 8.8 Exportieren.................................................91
6.5 Das Bedienfeld Pinselstrich.......................69 8.9 Frames importieren.....................................91
Pinselstrich....................................70 FreeHand, Frames und
6.6 Das Bedienfeld Füllen................................72 animiertes GIF............................................92
6.7 Texturen und Muster ................................73 8.10 Der Zwiebelschicht-Effekt..........................92
Die Optionen des 8.11 Einstellungen für GIF-Animationen.............93
Bedienfelds Füllen.....................................73 8.12 Das Bedienfeld Ebenen..............................94
6.8 Das Bedienfeld Effekt ...............................74 8.13 Standardebenen........................................94
6.9 Effekte anwenden......................................74 8.14 Neue Ebenen erstellen...............................94
6.10 Effekte anwenden......................................76 8.15 Ebenen löschen.........................................95
6.11 Effekte löschen..........................................76 8.16 Mit Ebenen arbeiten...................................95
6.12 Effektkombinationen speichern.................77 8.17 Ebenen und Frames...................................96
6.13 „Standardeffekte“.....................................77 8.18 Exportieren................................................96
Eine GIF-Animation erstellen..........96
Inhaltsverzeichnis 7
9
10.7 Das Bedienfeld Verlauf.............................129
10.8 Arbeitsschritte rückgängig machen...........130
Optimieren und exportieren 99
10.9 Arbeitsschritte wiederholen......................130
9.1 Mit Hilfe von Bedienfeldern optimieren
10.10Arbeitsschritte in verschiedenen
und exportieren ........................................99
Dokumenten kopieren und einfügen.........131
9.2 Optimieren und exportieren mit Hilfe
10.11Einen Fireworks-Befehl mit Hilfe des
des Dialogfelds Exportvorschau...............102
Bedienfelds Verlauf erstellen....................131
9.3 Der Vorschaubereich ...............................102
Einen Fireworks-Befehl erstellen...132
9.4 Die Exporteinstellungen der Registerkarten 11
des Dialogfelds Exportvorschau...............104
9.5 Die Registerkarte Optionen des Symbole 135
Dialogfelds Exportvorschau......................104 Ein neues Symbol erstellen.......................136
9.6 Die Formate GIF und animiertes GIF..........104 Ein oder mehrere markierte Objekte in
9.7 Anmerkungen zur Transparenz.................107 ein Symbol verwandeln.............................136
GIF und Transparenz.....................108 Ein Symbol auf der Leinwand einfügen.....137
Transparenz und Anti-Aliasing......109 Ein Symbol von mehreren
9.8 JPEG..........................................................110 Frames erstellen.......................................137
9.9 Der Export-Assistent und der Symbole bearbeiten..................................137
„In Grösse exportieren“-Assistent............112 Symbole löschen.......................................138
9.10 Die Registerkarte Datei des Eine Instanz bearbeiten............................138
Dialogfelds Exportvorschau......................112 Die Verknüpfung einer Instanz aufheben..138
9.11 Die Registerkarte Animation des 11.1 Symbole exportieren, importieren
Dialogfelds Exportvorschau......................113 und aktualisieren .....................................138
9.12 Das Dialogfeld Exportieren.......................114 Kopieren, einfügen und verschieben.........139
9.13 Inhalte exportieren ..................................117 Exportieren und importieren.....................139
9.14 Einen Bildbereich exportieren...................119 11.2 Importierte Symbole aktualisieren............140
9.15 HTML-Quelltext kopieren..........................119 11.3 Die Verknüpfung mit dem originalen
10
Symbol aufheben......................................140
11.4 Tweening mit Symbolen............................140
Den Produktionsprozess
GIF-Animation mit Tweening.........141
beschleunigen 121
GIF-Animation mit Tweening
10.1 Das Projektprotokoll.................................121
von Effekten..............................................143
10.2 Die Option „Suchen und Ersetzen“...........122 12
10.3 Wo soll gesucht und ersetzt werden?.......123
Spezielle Internet-Werkzeuge
10.4 Was soll gesucht und ersetzt werden?......123
Text suchen und ersetzen.........................123 und -Funktionen 145
Eine Schriftart suchen und ersetzen.........124 12.1 Das Bedienfeld URL..................................146
Eine Farbe suchen und ersetzen...............124 12.2 Imagemaps und Hotspots.........................146
URLs suchen und ersetzen........................124 Hotspots.......................................148
Nichtwebfähige Farben suchen 12.3 Segmente.................................................150
und ersetzen.............................................124 Einstellungen von Segmentobjekten
10.5 Batchverarbeitung....................................125 im Objekt-Inspektor festlegen...................152
10.6 Batch-Skripts............................................127 Segmentobjekte und Exporteinstellungen153
Batchverarbeitung mit der Segmente exportieren..............................154
Option „Suchen und Ersetzen“.................127 Segmente......................................154
8 Inhaltsverzeichnis
12.4 Segmente und Hotspots kombinieren......156 Flash 195
Anmerkungen zum Thema Segment-
und Hotspot-Objekte:...............................156
12.5 HTML-Eigenschaften.................................156 1
Segment-Optionen ..................................157
Überblick 197
Imagemaps...............................................159
12.6 Verhaltensweisen.....................................159 1.1 Internet, World Wide Web.........................197
12.7 Parameter der Verhaltensweisen..............162 1.2 Stand-alone-Anwendung..........................197
Einfaches Rollover....................................162 1.3 Digitale Videodateien oder nummerierte
Bild austauschen......................................162 Bitmaps für Multimedia-Anwendungen.....197
Grafik für Navigationsleiste einstellen......163 1.4 Bitmap- oder Vektordateien für
Eine Rollover-Schaltfläche mit die weitere Bearbeitung
der Verhaltensweise in Grafikprogrammen................................197
„Einfaches Rollover“ erstellen..................165 1.5 Merkmale von Flash..................................198
Eine Navigationsleiste erstellen....167 1.6 Importieren und Exportieren.....................199
Hotspots und Segmente in 1.7 Systemanforderungen..............................199
Kombination mit der Verhaltensweise 1.8 Anmerkungen...........................................199
2
Bild austauschen......................................168
12.8 Schaltflächensymbole..............................169 Arbeitsumgebung 201
Ein Schaltflächensymbol erstellen............170
2.1 Einstellungen...........................................202
Eine Schaltfläche bearbeiten....................174
Kategorie Allgemein.................................202
Den Text einer Schaltfläche bearbeiten ...175
Kategorie Bearbeitung.............................203
URL-Link, Ziel, Dateiname oder
2.2 Kategorie Zwischenablage.......................204
Exporteinstellungen einer
2.3 Filmeigenschaften....................................204
Schaltfläche ändern..................................175
Bildrate....................................................205
Eine Navigationsleiste mit
Die Größe der Bühne...............................205
Schaltflächensymbolen erstellen..............177
Hintergrundfarbe.....................................206
12.9 Das HTML-Dokument................................181
2.4 Die Bühne................................................206
Eine Navigationsleiste mit
2.5 Hilfsmittel im Arbeitsbereich....................206
Segmenten, Hotspots und der
Lineale.....................................................206
Verhaltensweise „Bild austauschen“.......183
Gitternetz.................................................206
Ein Bild durch ein externes
Hilfslinien.................................................207
Dokument austauschen............................188
Ausrichten an den Hilfslinien...................207
13
Hilfslinien verschieben oder löschen.......207
Tipps & Tricks 193 2.6 Die Zeitleiste............................................207
2.7 Bedienfelder............................................209
2.8 Tastenkombinationen...............................211
2.9 Zoomen und Scrollen ...............................213
2.10 Der Mauszeiger.........................................214
2.11 Abspielen..................................................214
2.12 Dateien und Dateiformate.........................215
Inhaltsverzeichnis 9
3
3.21 Andere Werkzeuge...................................236
Das Radiergummiwerkzeug.....................236
Werkzeuge 217
Das Farbeimerwerkzeug..........................237
3.1 Werkzeugleiste ........................................217
Tintenfasswerkzeug.................................237
3.2 Farben......................................................218
Pipette.....................................................237
3.3 Die Bedienfelder Füllung und Linie...........219
3.22 Farben und Farbverläufe..........................237
Das Bedienfeld Linie.................................219
3.23 Farbtöne entfernen und hinzufügen.........238
Das Bedienfeld Füllung............................220
3.24 Farbverläufe erstellen und zur
3.4 Vektorgrafiken.........................................220
Palette hinzufügen...................................239
3.5 Linienwerkzeug........................................221
3.25 Farben importieren und exportieren........240
3.6 Rechteck- und Ellipsenwerkzeug..............221
Farben und Füllungen....................241
3.7 Das Freihandwerkzeug............................222
3.26 Farbverläufe verwenden und ändern........242
3.8 Das Pinselwerkzeug................................223
Farbverläufe mit und
Zeichnen mit
ohne Sperrung.........................................243
dem Pinselwerkzeug................................223 4
3.9 Das Stiftwerkzeug...................................224
3.10 Das Pfeilwerkzeug...................................226 Text 245
Markieren....................................227 4.1 Textwerkzeug...........................................245
3.11 Das Lassowerkzeug.................................227 Textobjekte erstellen...............................245
3.12 Das Unterauswahl-Werkzeug..................227 Text bearbeiten........................................246
3.13 Auswahl drehen oder skalieren...............228 Textblock bearbeiten...............................246
3.14 Auswahl verschieben...............................228 4.2 Textattribute ändern................................246
Auswahl kopieren....................................229 Bedienfeld Zeichen..................................246
3.15 Auswahl ausrichten.................................229 Bedienfeld Absatz....................................248
3.16 Vektorobjekte bearbeiten........................230 Bedienfeld Füllung...................................249
Mit Hilfe des Pfeilwerkzeugs (mit dem Bedienfeld Textoptionen..........................249
schwarzen Pfeil in der Werkzeugleiste)...230 Text..............................................252
Mit Hilfe des Unterauswahl-Werkzeugs Dynamischer Text, Texteingabe
(mit dem weißen Pfeil in und statischer Text..................................253
der Werkzeugleiste)................................230 Text und Hyperlinks.....................254
5
Mit Hilfe des Stiftwerkzeugs
(mit der Füllfeder in der Werkzeugleiste)..231
Bibliotheken, Symbole
3.17 An Objekten ausrichten...........................232
und Instanzen 257
An Objekten ausrichten...............233
5.1 Symbole...................................................257
3.18 Ausschneiden und zusammenfügen........233
5.2 Bibliothek................................................259
3.19 Gruppieren..............................................234
Bibliotheksfenster........................262
Ausschneiden, zusammenfügen
5.3 Instanzen.................................................263
und gruppieren........................................234
Eigenschaften der Instanz........................264
3.20 Spezialeffekte..........................................235
5.4 Farbeffekte in Instanzen...........................265
Linien in geschlossene
5.5 Symbole bearbeiten.................................265
Vektorpfade umwandeln.........................235
Symbole und Instanzen................267
Vektorformen vergrößern
5.6 Schriftartsymbole....................................269
oder verkleinern......................................235
Ein Schriftartsymbol erstellen
Anti-Aliasing auf
und verwenden........................................269
Vektorobjekte anwenden........................236
10 Inhaltsverzeichnis
5.7 Gemeinsame Bibliotheken.......................270 7.7 Farbeffekte animieren..............................296
Eine gemeinsame Bibliothek erstellen.....270 Farbeffekte in einem
Symbole aus einer gemeinsamen Bewegungs-Tween animieren..................296
Bibliothek importieren.............................272 7.8 Bewegungs-Tween an einem
Bestandteile gemeinsamer Pfad ausrichten .......................................297
Bibliotheken verändern...........................273 Einen Bewegungs-Tween erstellen..........297
Einige Anmerkungen zur Arbeit mit Eine Pfadebene erstellen.........................297
gemeinsamen Bibliotheken.....................273 Den Pfad der Pfadebene erstellen............297
6
Das Objekt am Pfad entlang führen.........297
Ein schon erstelltes Bewegungs-Tween
Ebenen und Szenen 275
mit einem Pfad kombinieren....................298
6.1 Ebenen....................................................275
Bewegungs-Tween eines
Ebenen einfügen oder löschen................276
springenden Balls....................................299
Ebeneneigenschaften..............................276
Objekte in mehreren Ebenen mit Hilfe
Ebenen aktivieren, ausblenden
einer Pfadebene animieren......................300
und sperren.............................................277
Bewegungs-Tween mehrerer
Die aktive Ebene......................................277
Objekte entlang eines Pfades..................300
6.2 Pfadebenen, Maskenebenen
7.9 Form-Tweening mit Formmarken .............302
und Führungsebenen...............................278
Formmarken.................................303
Pfadebenen.............................................278
7.10 Zwiebelschalen........................................304
Maskenebenen........................................278
Eine vollständige Animation verschieben.305
Führungsebenen.....................................279
Zwiebelschalen verwenden, um eine
6.3 Szenen....................................................279
Animation genau abzustimmen...............305
Mit Szenen arbeiten ................................279
Zwiebelschalen............................306
Szenen in einem Flash-Player-Film..........280
7 7.11 Animation in Symbolen............................307
Animation in Symbolen................307
Animation 281 7.12 Animation von Maskenebenen.................308
7.1 Bilder, Schlüsselbilder Text mit einem durchlaufenden
und Zwischenbilder..................................281 Farbverlauf als Banner.............................308
8
Bilder und Schlüsselbilder erstellen........282
7.2 Bilder und Zeitleiste ...............................283
Interaktivität:
Bildbezeichnungen..................................285
ActionScript (Einführung) 311
7.3 Bild-für-Bild-Animation............................286
8.1 Das Bedienfeld Aktionen...........................311
Bild-für-Bild-Animation................286
8.2 Basisaktionen...........................................313
7.4 Bewegungs-Tweening.............................288
8.3 Bilder benennen.......................................313
Schlüsselbilder in ein Bewegungs-
8.4 Bildaktionen.............................................314
Tween einfügen.......................................290
Bildaktionen..................................314
Drehen in einem Bewegungs-Tween.........291
8.5 Schaltflächensymbole und Aktionen.........315
Abbremsen...............................................291
Schaltflächen................................318
Bewegungs-Tween, Methode 1....292
Animierte Schaltfläche..................319
Bewegungs-Tween, Methode 2...293
8.6 Einer Schaltfläche mehrere
7.5 Form-Tweening........................................294
Aktionen zuweisen...................................320
Form-Tweening............................294
8.7 Hotspot-Schaltflächen.............................320
7.6 Die Zeitleiste lesen..................................295
Hotspots.......................................321