ActionScript 2 (eBook)

Arno Kohl: seit 1998 Medienentwicklung (Schwerpunkt Director und Flash, Konzeption Multimedia), seit 2001 Studienleiter Macromedia Akademie für Medien, Arbeitsschwerpunkte Scripting, Games Design, interaktive 3D-Welten Mitglied Jury Flash-Filmfestival (vor der Medienentwicklung mehrjährige Tätigkeit als Politologe, mehrere Auslandsprojekte in den USA und Vietnam)

Einleitung 16
ActionScript: Geschichte, Versionen, Ausblick 19
Programmentwicklung und Programmiersprachen 24
3.1 Ansätze (Top-Down, Bottom-Up) 24
3.2 Algorithmus als Problemlösung 25
3.3 Hilfsmittel zur Entwicklung von Algorithmen 26
3.3.1 Flowcharts 27
3.3.2 Pseudo-Code 28
3.4 Beispiel-Algorithmus „Kaffee kochen“ 29
Programmierung und ActionScript 40
Framework und Codeorganisation 48
5.1 Skriptarten (Objekt- und Bildskript) 48
5.2 Anzahl der Bildskripte 50
5.3 Aufbau eines Skripts 50
Operatoren 54
6.1 Zuweisungsoperator 55
6.2 Arithmetische Operatoren 55
6.3 Inkrement-/Dekrementoperator 56
6.4 Stringoperatoren 57
6.5 Vergleichsoperatoren 59
6.6 Logische Operatoren 61
6.7 Bit-Operatoren 63
6.8 Sonstige 64
Variablen 67
7.1 Deklaration 67
7.2 Wertezuweisung 70
7.3 Reichweite 72
7.4 Parameter und Zählvariablen 74
7.5 Konstanten 74
Datentypen 75
8.1 Boolean 76
8.2 Number 76
8.3 String 79
8.4 Null, undefined 79
8.5 MovieClip 80
8.6 Object 80
8.7 Void 80
Arrays 81
9.1 Arrays einrichten und die Länge definieren 81
9.2 Arrays bei der Deklaration füllen 82
9.3 Zugriff auf Inhalte 82
9.4 Arrays dynamisch füllen 84
9.5 Löschen von Elementen 86
9.6 Arrays sortieren und durchsuchen 89
9.7 Weitere Methoden 92
9.8 Mehrdimensionale Arrays 93
9.9 Assoziative Arrays 94
Funktionen 97
10.1 Funktionsdeklaration und -aufruf 97
10.2 Funktionen ohne Bezeichner 98
10.3 Gültigkeit 99
10.4 Verschachtelung von Funktionen 100
10.5 Parameter 101
10.6 Funktionen mit Rückgabewert (return) 103
10.7 Von Flash zur Verfügung gestellte Funktionen 104
10.8 Rekursion 105
Kontrollstrukturen 106
11.1 Bedingungen 106
11.1.1 Die if-Anweisung 106
11.1.2 Verschachtelte if-Anweisungen, logisches und, logisches oder 109
11.1.3 if else 110
11.1.4 else if 111
11.1.5 switch, break 112
11.2 Schleifen 114
11.2.1 for-Schleife 115
11.2.2 break, continue 119
11.2.3 while-Schleife 119
11.2.4 do while-Schleife 120
11.2.5 for in-Schleife 121
11.2.6 Endlosschleifen 122
MovieClip-Klasse 123
12.1 Eigenschaften von MovieClips 123
12.1.1 Adressierung von MovieClips 123
12.1.2 _x, _y, _xmouse, _ymouse, _width, _height 129
12.1.3 _xscale, _yscale 133
12.1.4 _rotation, _alpha, _visible 135
12.1.5 blendMode 138
12.1.6 _currentframe, _totalframes 140
12.2 Ereignisse 140
12.2.1 onEnterFrame 141
12.2.2 Schaltflächenereignisse von MovieClips 142
12.2.3 Maus-Ereignisse 145
12.3 MovieClip-Methoden 146
12.3.1 Zeitleistensteuerung 146
12.3.2 Objekte dynamisch einfügen 148
12.3.3 Drag and Drop 157
12.3.4 Kollision 158
12.3.5 Maskierung 160
12.3.6 Ausdehnung und Koordinaten 161
12.4 Die Mutter aller MovieClips: _root (_level0) 163
Zeichnungsmethoden der MovieClip-Klasse 165
13.1 Linien, Kurven und Füllungen 166
13.2 Verlaufsfüllungen 170
13.3 Ereignisse, Methoden, Eigenschaften 175
13.4 Geometrische Grundfiguren (Kreis, Oval, Polygon, Stern) 175
String, Textfield, Textformat 182
14.1 Strings erzeugen und String-Wert auslesen 182
14.2 Länge 183
14.3 Verkettung 183
14.4 Escape-Sequenzen und Sonderzeichen 183
14.5 ASCII-Zeichensatz 185
14.6 Teilstrings extrahieren 187
14.7 Teilstrings ermitteln 188
14.8 Groß-/Kleinbuchstaben 188
14.9 Text, Textfelder 189
14.10 Textauszeichnung/-formatierung 193
14.10.1 TextFormat 193
14.10.2 Formatierung mit HTML 197
14.10.3 Formatierung mit CSS 199
14.11 Darstellung größerer Textmengen 201
14.12 Eingabetext 202
Math-Klasse 207
15.1 Eigenschaften: Konstanten 207
15.2 Methoden 208
15.2.1 Auf- und Abrunden 208
15.2.2 Zufallszahlen 209
15.2.3 Weitere Methoden 213
Color-/ColorTransform-Klasse 215
16.1 Klassenpakete und Instanziierung von Klassen 215
16.2 Vollständiges Einfärben 216
16.3 Einfärben mit Hilfe einzelner Farbkanäle 217
Maus und Tastatur 220
17.1 Die Mouse-Klasse 220
17.1.1 Eigene Cursor 220
17.1.2 Mausereignisse 222
17.2 Tastatur 225
BitmapData- und Filter-Klasse 228
18.1 Bitmap versus Vektor 228
18.2 Instanziierung der BitmapData-Klasse 230
18.3 Eigenschaften der BitmapData-Klasse 231
18.4 Methoden der BitmapData-Klasse 231
18.4.1 Dispose() 232
18.4.2 FillRect(), floodFill() 233
18.4.3 GetPixel(), getPixel32(), setPixel(), setPixel32() 234
18.4.4 LoadBitmap(), draw(), copyPixels(), clone() 236
18.4.5 Noise(), perlinNoise() 239
18.5 Optimierung mit Hilfe von BitmapData 242
18.6 Filter 242
18.6.1 Bevel-Filter 243
18.6.2 Blur-Filter 244
18.6.3 DropShadow-Filter 245
18.6.4 Glow-Filter 245
18.6.5 GradientBevel-Filter 246
18.6.6 GradientGlow-Filter 246
18.6.7 ColorMatrix-Filter 247
18.6.8 Convolution-Filter 248
18.6.9 DisplacementMap-Filter 249
Sound 251
19.1 Sound abspielen und stoppen 251
19.2 Einen Sound loopen 254
19.3 Externe Sounds 255
Externe Assets 256
20.1 Laden externer swf-Dateien 257
20.2 Eigenschaften der geladenen Dateien 262
20.3 Anzeigen der Ladekontrolle (Preloader mit getBytesLoaded()) 268
20.4 Überblenden bei Ladevorgängen 275
20.5 Alternative Ladekontrolle (Preloader mit der MovieClipLoader-Klasse) 280
20.6 Beispiel modulare Website 281
20.7 Code 285
XML 286
21.1 Aufbau von XML-Dokumenten 286
21.2 Laden von XML-Dokumenten (new XML, load(), onLoad, onData) 289
21.3 Zugriff auf den gesamten Inhalt einer XML-Datei (firstChild, ignoreWhite) 291
21.4 Verarbeitung einzelner Daten 292
Tween- und TransitionManager-Klasse 295
22.1 Tween-Klasse 295
22.2 Beschleunigungsklassen und -methoden 296
22.3 Eigenschaften (duration, finish, FPS, position, time) 298
22.4 Methoden 298
22.5 Ereignisse 299
22.6 Sukzessive Animation verschiedener Eigenschaften 300
22.7 TransitionManager-Klasse 302
22.8 Eigenschaften, Methoden und Ereignisse 303
22.9 Übergangstypen 304
Debugging 306
23.1 Fehlertypen 306
23.2 Erste Fehlerkontrolle mit Auto-Format 307
23.3 Das Nachrichtenfenster 311
23.4 Der integrierte Debugger 315
Geskriptete Animationen 320
24.1 Animationskategorien 320
24.2 Einmalige Animation 321
24.3 Animation mit onEnterFrame und fester Schrittweite 322
24.4 Animation mit setInterval() und fester Schrittweite 328
24.5 Zeitsteuerung 332
24.6 Dynamische Schrittweite 333
24.7 Feste Schrittanzahl 336
24.8 Fehlerquelle Schleife 340
24.9 Überprüfung von Grenzwerten 341
24.10 Grenzbedingung und Verwendung von Animationsobjekten 342
24.10.1 Löschen des Objekts 343
24.10.2 Bouncing off 345
24.10.3 Screen wrap 346
24.10.4 Neue Zufallsposition 347
Trigonometrie 348
25.1 Einige Grundlagen der planen Trigonometrie 348
25.2 Abstände zwischen Objekten 350
25.3 Kreise und Ellipsen 352
25.4 Spiralen 354
25.5 Code 357
25.6 Spiralförmige Animation eines Objekts 357
25.7 Sinustäuschung 360
25.8 Drehung eines Objekts zu einem anderen Objekt 361
25.9 Interaktiver Schlagschatten 363
25.10 Code 365
Effekte (Text) 367
26.1 Text vergrößern und ein-/ausblenden 367
26.2 Code 373
26.3 Einzelne Zeichen einfärben 374
26.4 Code 377
26.5 Einzelne Zeichen vergrößern und verkleinern 379
26.6 Code 380
26.7 Text mit Farbverlauf 380
26.8 Code 385
26.9 Schreibmaschineneffekt 387
26.10 Text einblenden aus Zufallsbuchstaben 388
26.11 Code 391
26.12 Weitere Effekte 392
Effekte (Grafik) 393
27.1 Einfärben über einzelne Farbkanäle 393
27.2 Code 399
27.3 Organische Moleküle 401
27.4 Code 404
27.5 Beleuchtungseffekt mit Maske 404
27.6 Code 407
27.7 Überblendeffekt mit Maske 408
27.8 Code 411
27.9 Mosaik-Effekt 412
27.10 Code 415
Effekte (Maus) 417
28.1 Maus(ver)folger 418
28.2 Code 428
28.3 Initialisierung von Animationen 430
28.4 Code 434
28.5 Eigenschaftsänderungen 435
28.6 Code 437
Interface und Navigation 438
29.1 Check Boxes 438
29.2 Radio Buttons 441
29.3 Combo-Box 443
29.4 Code 447
29.5 Variante 448
29.6 Slider 449
29.7 Drag and Drop-Elemente 450
29.8 Code 454
29.9 Einfaches Fenster-System mit scale9Grid 455
29.10 Code 461
29.11 Varianten und Erweiterungen 463
Menü-Systeme 464
30.1 Kreismenüs 465
30.2 Code 472
30.3 Elliptisches Menü 474
30.4 Code 480
30.5 Akkordeon 481
30.6 Code 486
30.7 Drop Down-Menü 487
30.8 Code 491
Bildergalerien 493
31.1 Einfache Galerie mit Slider und internen Assets 494
31.2 Code 502
31.3 Eine Variante 503
31.4 Code 506
31.5 Galerie mit externen Assets 506
31.6 Code 518
31.7 Einige Varianten 520
Spiele 521
32.1 Pairs 521
32.2 Code 527
32.3 Puzzle 528
32.4 Code 539
Ressourcen 542
33.1 Literatur 542
33.2 Lernvideos 544
33.3 Webseiten 545
Sachverzeichnis 549
Abbildung 1: Standardsymbole zur Entwicklung eines Flowcharts 27
Abbildung 2: Beispielhaftes Flussdiagramm (Programmlogik) 28
Abbildung 3: Variablen- und Funktionsdefinition 36
Abbildung 4: Anweisungsblock 37
Abbildung 5: Argument, Parameter, Schleife 37
Abbildung 6: Anweisung, Bedingung, Funktionsaufruf 38
Abbildung 7: Integrierter AS-Editor 44
Abbildung 8: Zuweisung eines Objektskripts 49
Abbildung 9: Fixieren des Skriptfensters 49
Abbildung 10: Operanden und Operatoren 54
Abbildung 11: Codehinweise zu Datentypen 67
Abbildung 12: Arraylänge, -index und -inhalte 83
Abbildung 13: Verwendung einer parametrisierten Funktion 102
Abbildung 14: Vorgegebene Funktionen 105
Abbildung 15: Fehlermeldung bei Endlosschleife 122
Abbildung 16: Eigenschaftsfenster eines MovieClips auf der Bühne 123
Abbildung 17: Verschachtelter MovieClip auto 125
Abbildung 18: Pfadhierarchie 126
Abbildung 19: Relative Adressierung mit _parent 129
Abbildung 20: Kartesisches Koordinatensystem 129
Abbildung 21: Kartesisches Koordinatensystem in Flash (Hauptzeitleiste) 130
Abbildung 22: Skalieren eines MovieClips 133
Abbildung 23: Spiegelung mit _xscale 134
Abbildung 24: Positionierung der MovieClips 138
Abbildung 25: Überlappende MovieClips 144
Abbildung 26: Beispielhafter Aufbau der Übung 147
Abbildung 27: Kollisionserkennung mit hitTest() 160
Abbildung 28: Ergebnis von getBounds() bei verschiedenen Koordinatensystemen 162
Abbildung 29: Beispiel einer geskripteten Zeichnung 167
Abbildung 30: Haus und Grundstück des Autors 168
Abbildung 31: Zur Funktionsweise von curveTo() 169
Abbildung 32: Zweifarbiger, radialer Farbverlauf Rot – Orange 171
Abbildung 33: Koronaartiger Grafikeffekt mit Verlaufsfüllung 173
Abbildung 34: Verschiebung des Verlaufsmittelpunkts 173
Abbildung 35: Oval 178
Abbildung 36: Händisch erstelltes Textfeld 189
Abbildung 37: Textformatierung mit der TextFormat-Klasse 195
Abbildung 38: Erweiterte Textformatierung mit der TextFormat-Klasse 195
Abbildung 39: Verwendung der Komponente UIScrollBar 202
Abbildung 40: Eingabefeld für die Mail-Adresse 205
Abbildung 41: Einfärben eines MovieClips 216
Abbildung 42: Erweiterte Farboptionen einer MovieClip-Instanz 217
Abbildung 43: Eigener Mauszeiger in Aktion 221
Abbildung 44: Erzeugung eines Punktrasters mit setPixel() 235
Abbildung 45: Erzeugung eines zufälligen Musters mit setPixel32() 235
Abbildung 46: Ausschnittweises Kopieren einer Grafik 238
Abbildung 47: Erzeugung einer Störung mit Hilfe der perlinNoise()-Methode 241
Abbildung 48: Skinners „Pflanzengenerator“ 243
Abbildung 49: Bevel-Filter 244
Abbildung 50: Bevel-Filter mit maximaler Stärke 244
Abbildung 51: GradientBevel-Filter 246
Abbildung 52: 4 × 5-Matrix des ColorMatrix-Filters 247
Abbildung 53: DisplacementMap-Filter 250
Abbildung 54: Einstellungen für das Sound-Verhalten 252
Abbildung 55: Weitere Einstellungen für das Sound-Verhalten 253
Abbildung 56: Externer Ladevorgang in der Hauptzeitleiste 258
Abbildung 57: Auswirkungen von _root auf externe Ladeprozesse 260
Abbildung 58: Verschachtelte Ordnerstruktur für externe Ladevorgänge 260
Abbildung 59: Fehlermeldung bei fehlgeschlagenem Ladeaufruf 261
Abbildung 60: Eigenschaftsänderungen bei externen Ladevorgängen 263
Abbildung 61: Fehlerhafte Positionierung einer extern geladenen Grafik 265
Abbildung 62: Bandbreiten-Profiler zur Kontrolle des Ladevorgangs 266
Abbildung 63: Konfiguration der Download-Simulation 267
Abbildung 64: Simulation eines externen Ladevorgangs 267
Abbildung 65: Zeichnen der Elemente des Ladebalkens 274
Abbildung 66: Aufbau der Anwendung 278
Abbildung 67: Phase 1 des Ladevorgangs 279
Abbildung 68: Phase 2 des Ladevorgangs 279
Abbildung 69: Phase 3 des Ladevorgangs 279
Abbildung 70: Datei literatur1.xml im Internet Explorer 287
Abbildung 71: Fehlerhaftes XML-Dokument im Internet Explorer 288
Abbildung 72: Beschleunigungseffekt Back.easeIn 297
Abbildung 73: Beschleunigungseffekt Bounce.easeIn 297
Abbildung 74: Beschleunigungseffekt Elastic.easeIn 297
Abbildung 75: Beschleunigungseffekt Regular.easeIn 297
Abbildung 76: Beschleunigungseffekt Strong.easeIn 297
Abbildung 77: Sukzessives Ausführen mehrerer Tweens 301
Abbildung 78: Abprallen am rechten Rand 301
Abbildung 79: Fehlermeldung im Compiler-Fenster (1) 307
Abbildung 80: Fehlermeldung im Compiler-Fenster (2) 308
Abbildung 81: Fehlermeldung im Compiler-Fenster (3) 309
Abbildung 82: Fehlermeldung im Compiler-Fenster (4) 309
Abbildung 83: Fehlermeldung im Compiler-Fenster (5) 310
Abbildung 84: Auflistung aller Variablen zur Laufzeit 316
Abbildung 85: Abspeichern des Inhalts des Nachrichtenfenster 316
Abbildung 86: Debugger-Fenster 317
Abbildung 87: Animation durch permanente Änderung der Drehung 322
Abbildung 88: Horizontale und vertikale Bewegung 323
Abbildung 89: Bewegung und Vorzeichenumkehr 326
Abbildung 90: Positionsberechnung über wechselnde Entfernung (1) 335
Abbildung 91: Positionsberechnung über wechselnde Entfernung (2) 335
Abbildung 92: Berechnung der Schrittweite aus Schrittanzahl und Entfernung 337
Abbildung 93: Bewegung und Grenzbedingung 342
Abbildung 94: Überschreiten des Grenzwertes 342
Abbildung 95: Animationsobjekt innerhalb/außerhalb der Bühne 344
Abbildung 96: Abprallen am rechten Screenrand 346
Abbildung 97: Rechtwinkliges Dreieck 348
Abbildung 98: Abstandsmessung zwischen zwei beliebigen Punkten und der Satz des Pythagoras 349
Abbildung 99: Trigonometrische Funktionen und Kreisberechnung 349
Abbildung 100: Der Einheitskreis 350
Abbildung 101: Abstandsmessung zwischen MovieClips 350
Abbildung 102: Spirale mit linear anwachsendem Radius 355
Abbildung 103: Spirale mit exponentiell anwachsendem Radius 356
Abbildung 104: Spiralförmig zu animierende Rakete 358
Abbildung 105: Spiralförmig animierter Bleistift 359
Abbildung 106: Sinustäuschung 361
Abbildung 107: Ausrichtung des Fahrzeugs vor der Drehung zur Maus 362
Abbildung 108: Veränderung des Schlagschattens per Maus 362
Abbildung 109: Animierter Text (Änderung von Größe, Deckkraft, Position) 367
Abbildung 110: Einbetten eines Fonts in der Bibliothek 368
Abbildung 111: Animiertes Einfärben einzelner Buchstaben 375
Abbildung 112: Text mit statischem Farbverlauf 381
Abbildung 113: Farbverlauf Rot – Gelb – Grün 382
Abbildung 114: Verschiedene Ausrichtungen des Farbverlaufs 383
Abbildung 115: Aufbau der Animation mit Farbverläufen 384
Abbildung 116: Schreibmaschineneffekt 387
Abbildung 117: Text einblenden aus Zufallsbuchstaben 389
Abbildung 118: Färben über einzelne Farbkanäle 393
Abbildung 119: Einfärbung eines per Filter-Klasse erstellten Schattens 399
Abbildung 120: Organische Erscheinung per Ebeneneffekt 401
Abbildung 121: Simulation eines Spotlights 405
Abbildung 122: Überblendeffekt mit Hilfe einer Maske 408
Abbildung 123: Mosaik-Effekt (1) 412
Abbildung 124: Mosaik-Effekt (2) 412
Abbildung 125: Ermittlung eines Farbpixels 414
Abbildung 126: Text als Mausverfolger 418
Abbildung 127: Uhr in Ruhestellung 421
Abbildung 128: Uhrteile folgen der Maus 421
Abbildung 129: Aufbau der Uhr ohne Zeitanzeige 424
Abbildung 130: Blätteranimation nach Mausbewegung 430
Abbildung 131: Alternative Objektformen 435
Abbildung 132: Formänderung nach Mausbewegung 435
Abbildung 133: Check Boxes des Workshops 438
Abbildung 134: Aufbau von mcRecht 439
Abbildung 135: Radio Buttons 441
Abbildung 136: Aufbau von mcKreis 442
Abbildung 137: Combo-Box des Workshops 443
Abbildung 138: Bibliotheks-Elemente der Drag and Drop-Übung 450
Abbildung 139: Einzelelemente eines Fensters 456
Abbildung 140: Positionsbestimmung der Fensterteile 457
Abbildung 141: Kreisförmiges Menü 465
Abbildung 142: Aktiviertes Kreismenü 467
Abbildung 143: Aufbau des elliptischen Menüs 474
Abbildung 144: Anzeigen der Menüelemente 476
Abbildung 145: Scheitelpunkte der Animation 478
Abbildung 146: Akkordeon-Menü des Workshops 481
Abbildung 147: Aufbau des MovieClips mcFenster 482
Abbildung 148: Drop Down-Menü des Workshops 487
Abbildung 149: Originalgrafik (verkleinert) 494
Abbildung 150: Thumbnail-Typ 1 494
Abbildung 151: Thumbnail-Typ 2 494
Abbildung 152: Thumbnail-Typ 3 494
Abbildung 153: Infografik mit Bildergalerie 495
Abbildung 154: Aufbau des MovieClips mcBild 496
Abbildung 155: Aufbau des MovieClips mcSlider 496
Abbildung 156: Aufbau des MovieClips mcMaske 497
Abbildung 157: Variante der Bildergalerie 503
Abbildung 158: Aufbau des MovieClips mcMaske bei nicht aktivierter Maske 504
Abbildung 159: Aufbau der Galerie mit externen Assets 507
Abbildung 160: Ordnerstruktur der Galerie 507
Abbildung 161: Aufbau der Thumbnails 514
Abbildung 162: Aufbau Memory-Spiel 521
Abbildung 163: Karten und Bilderset 522
Abbildung 164: Zufallsverteilung der Karten in aKarten 523
Abbildung 165: Puzzlespiel 528
Abbildung 166: Umrisse der Puzzleteile 529
Abbildung 167: Registrierungspunkt und gedachtes Quadrat 529
Abbildung 168: Puzzleteile entsprechend der Array-Elemente 530
Abbildung 169: Begrenzungsrechteck und Registrierungspunkt von mcPuzzle6 533
Abbildung 170: Puzzleteile ohne Maske 535
Abbildung 171: Puzzleteile mit BevelFilter 536