AS3-Tutorium: Flex: Butterfly 01 fluttering: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Wechseln zu:Navigation, Suche
(Schmetterlingssymbol aus Flash CS5 in Flex integrieren (Alternative))
(Schmetterlingssymbol aus Flash CS5 in Flex integrieren (Alternative))
Zeile 54: Zeile 54:
 
# Im Editor-Fenster der Datei <code>Butterfly01Flex.mxml</code> in den Design-Modus wechseln: Klick auf den Button <code>Design</code>.
 
# Im Editor-Fenster der Datei <code>Butterfly01Flex.mxml</code> in den Design-Modus wechseln: Klick auf den Button <code>Design</code>.
 
# Im Editorfenster (Design-Modus) der Datei <code>Butterfly01Flex.mxml</code>: Komponente <code>Flash Professional-Komponente</code> (aus Fenster <code>Komponenten</code> → </code>Benutzerdefiniert</code>) auf die Bühne ziehen.
 
# Im Editorfenster (Design-Modus) der Datei <code>Butterfly01Flex.mxml</code>: Komponente <code>Flash Professional-Komponente</code> (aus Fenster <code>Komponenten</code> → </code>Benutzerdefiniert</code>) auf die Bühne ziehen.
# Neue Flash-Komponente erstelle: Entweder Doppelklick auf Komponenten-Symbol im Editor oder Einfachklick auf Komponentensymbol im Editor + Klick auf <code>In Flash Professional erstellen...</code> im Fenster <code>Eigenschaften</code> (rechts unten in der Standardperspektive) → Klassenname: <code>Butterfly</code>, SWC-Dateiname: <code>Butterfly01Flash.swc</code>.
+
# Neue Flash-Komponente erstelle: Entweder Doppelklick auf Komponenten-Symbol im Editor oder Einfachklick auf Komponentensymbol im Editor + Klick auf <code>In Flash Professional erstellen...</code> im Fenster <code>Eigenschaften</code> (rechts unten in der Standardperspektive) → Klassenname: <code>Butterfly</code>, SWC-Dateiname: <code>Butterfly01FlashComponents.swc</code>.
# FORTSETZUNG folgt
+
# In der Bibliothek von Flash: Symbol <code>Butterfly</code> löschen.
 +
# In Flash: Ihre Lösung <code>Butterfly01Flash.fla</code> oder die Musterlösung <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/Butterfly01Flash11.fla Butterfly01Flash11.fla]</code> von [[AS3-Tutorium: Flash: Butterfly 01 fluttering]] öffnen.
 +
# In der Bibliothek von <code>Butterfly01Flash.fla</code> bzw. <code>Butterfly01Flash11.fla</code>: Alle Ordner und Symbole markieren → </code>Strg-C</code> (<code>Strg-C</code>).
 +
# In der Bibliothek der von Flex erstellten <code>fla</code>-Datei <code>Butterfly01FlashComponents.fla</code>: </code>Strg-V</code> (<code>Strg-V</code>).
 +
# Fortsetzung folgt.
  
 
==Anwendung testen==
 
==Anwendung testen==

Version vom 9. November 2010, 14:28 Uhr

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 4
(großteils überprüft)
Umfang: 3
(einige wichtige Fakten fehlen)
Quellenangaben: 5
(vollständig vorhanden)
Quellenarten: 5
(ausgezeichnet)
Konformität: 5
(ausgezeichnet)

AS3-Tutorium: Butterfly: Flash | Flex

Flex: Übersicht | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5

1 Flatternder Schmetterling

Im ersten Teil des Flex-Tutoriums wird der Schmetterling aus AS3-Tutorium: Flex: Butterfly 01 fluttering in eine Flex-Anwendung eingebunden.


Musterlösung (Flex 4/Flash CS5) (SVN-Repository)

Musterlösung (Flex 4/Flash CS4) (SVN-Repository)


1.1 Ein neues Flex-Projekt

  1. Flash Builder 4 (deutsche Version) starten.
  2. Die Flash-Perspektive öffenen: FensterPerspektive öffnenAndere...Flash.
  3. Ein neues Flex-Projekt erzeugen: DateiNeuFlex-Projekt → Projektname: Butterfly01FlexFertig stellen.
  4. Im Editor-Fenster von Eclipse ist die Datei Butterfly01Flex.mxml geöffnet. Diese Datei kann durch einen Doppelklick auf Butterfly01Flexsrc(Standardpaket)Butterfly01Flex.mxml im Fenster Paket-Explorer (links oben in der Standardperspektive) jederzeit geöffnet werden.
  5. Im Editor-Fenster der Datei Butterfly01Flex.mxml in den Quelle-Modus wechseln: Klick auf den Button Quelle (sofern dieser Button nicht bereits selektiert ist).
  6. Im Editor-Fenster der Datei Butterfly01Flex.mxml: minWidth="955" minHeight="600" durch width="550" height="400" ersetzen.
  7. Wenn gewünscht wird, dass sich die Darstellungsgröße der SWF-Datei der Flex-Anwendung an die Größe des Ausgabefensters anpasst: Direkt hinter width="550" height="400" folgendes Attribut einfügen: applicationComplete="stage.scaleMode=StageScaleMode.SHOW_ALL".
  8. Im Editor-Fenster der Datei Butterfly01Flex.mxml in den Design-Modus wechseln: Klick auf den Button Design. (Der Wechsel in den Design-Modus dauert bei ersten Mal i. Allg. etwas länger.)
  9. Die Komponente Label aus dem Fenster Komponenten (links oben, zweiter Reiter in der Standardperspektive) in das Editorfenster ziehen.
  10. Den Inhalt des Labels im Editor-Fenster in Butterfly 01 (Flex) abändern (Doppelklick mit der linken Maustaste).
  11. Die Schriftgröße und -art kann, wenn die Label-Komponente per Mausklick selektiert wurde, im Fenster Eigenschaften (rechts unten, erster Reiter in der Standardperspektive) abgeändert werden.

1.2 Schmetterlingssymbol aus Flash CS3, CS4 oder CS5 in Flex integrieren

Die folgende Beschreibung funktioniert sowohl für Flash CS4, als auch für Flash CS5 uns sollte auch für Flash CS3 funktionieren. Im nächsten Abschnitt wird eine alternative Vorgehensweise gezeigt, die aber nur für Flash CS5 funktioniert.

  1. Im Paket-Explorer: Klick mit rechter Maustaste auf den Projektordner Butterfly01FlexNeuOrdner → Ordnername: assets (Schreibweise ist bei Flash CS5 wichtig) → Fertig stellen.
  2. Im Paket-Explorer: Klick mit rechter Maustaste auf den Ordner assetsImportierenAllgemein (Ordner durch Klick Dreiecksicon öffnen) → DateisystemWeiterAus Verzeichnis: hier den Ordner mit der Lösung von AS3-Tutorium: Flex: Butterfly 01 fluttering wählen → Häckchen vor fla-Datei mit Flash-Musterlösung (Butterfly01Flash.fla) → Fertig stellen.
  3. Im Paket-Explorer: Die fla-Datei im Ordner assets durch Doppelklick in dobe Flash öffnen.
  4. In der Bibliothek von Adobe Flash: Symbol Butterfly selektieren.
  5. In Adobe Flash: BefehleSymbol in Flex-Komponente konvertieren (in Flash CS4 gibt es diesen Befehl nur, wenn das Plugin Flex Component Kit installiert wurde; siehe Übersicht).
  6. In Adobe Flash: DateiSpeichern.
  7. In Adobe Flash: DateiVeröffentlichen.
  8. Im Paket-Explorer (vom Flash Builder): Klick mit rechter Maustaste auf den Projektordner Butterfly01FlexAktualisieren.
  9. Im Paket-Explorer: Neu erstellte swc-Datei (Butterfly01Flash.swc) vom Ordner assets in den Ordner lib verschieben.
  10. Im Editorfenster (Design-Modus) der Datei Butterfly01Flex.mxml: Komponente Butterfly (aus Fenster Komponenten → Benutzerdefiniert) auf die Bühne ziehen (und evtl. skalieren).

Tipp: Sollte es beim Start einer Flex-Anwendung zu unerklärlichen Fehlern kommen, hilft oft:

  • In der Menüleiste (ganz oben): ProjektBereinigen....

1.3 Schmetterlingssymbol aus Flash CS5 in Flex integrieren (Alternative)

Voraussetzung: Ein neues Flex-Projekt wurde gemäß der Anleitung von Abschnit Ein neues Flex-Projekt erstellt. Weitere Dateien oder Ordner (wie z.B. assets) wurden noch nicht angelegt.

  1. Im Editor-Fenster der Datei Butterfly01Flex.mxml in den Design-Modus wechseln: Klick auf den Button Design.
  2. Im Editorfenster (Design-Modus) der Datei Butterfly01Flex.mxml: Komponente Flash Professional-Komponente (aus Fenster Komponenten → Benutzerdefiniert) auf die Bühne ziehen.
  3. Neue Flash-Komponente erstelle: Entweder Doppelklick auf Komponenten-Symbol im Editor oder Einfachklick auf Komponentensymbol im Editor + Klick auf In Flash Professional erstellen... im Fenster Eigenschaften (rechts unten in der Standardperspektive) → Klassenname: Butterfly, SWC-Dateiname: Butterfly01FlashComponents.swc.
  4. In der Bibliothek von Flash: Symbol Butterfly löschen.
  5. In Flash: Ihre Lösung Butterfly01Flash.fla oder die Musterlösung Butterfly01Flash11.fla von AS3-Tutorium: Flash: Butterfly 01 fluttering öffnen.
  6. In der Bibliothek von Butterfly01Flash.fla bzw. Butterfly01Flash11.fla: Alle Ordner und Symbole markieren → Strg-C (Strg-C).
  7. In der Bibliothek der von Flex erstellten fla-Datei Butterfly01FlashComponents.fla: Strg-V (Strg-V).
  8. Fortsetzung folgt.

1.4 Anwendung testen

  1. Auf Icon Ausführen Als... (fünftes Icon links oben: weißes Dreieck in grünem Kreis) klicken → WebanwendungOK.
  2. Wenn die Datei Butterfly01Flex.mxml nicht per Strg-S (Ctrl-S) oder DateiSpeichern gesichert wurde, erscheint nun der Dialog Speichern und starten in dem die zu speichernden Dateien selektiert sind. Hier ist es sinnvoll die Option Ressourcen vor den Start immer speichern zu selektieren (damit dieser Dialog künftig nicht mehr angezeigt wird) und anschließend OK zu klicken.
  3. Im Standard-Browser öffnet sich die Flash-Anwendung.

Im Allgemeinen ist es nicht notwendig, die Anwendung immer im Browser zu starten. Der Standalone-Flash-Player ist für Testzwecke i.Allg. vollkommen ausreichend. Ob die Debug-Version im Browser oder im Standalone-Flash-Player gestartet wird, kann man in den Projekteigenschaften festlegen.

  • Im Paket-Explorer: Klick mit rechter Maustaste auf dem Projektordner Butterfly01FlexEigenschaftenFlex CompilerHTML-Wrapper-Datei generieren → kein Häckchen (⇒ Anwendung wird im Standalone-Flash-Player gestartet; Häckchen ⇒ Anwendung wird im Browser gestartet) → OKOK.

Man kann die Anwendung auch im Debug-Modus starten (viertes Icon links oben: ein symbolisierter Käfer (= Bug)). In diesem Fall werden Fehlermeldung und trace-Ausgaben (trace("Text, der nur im Debug-Modus angezeigt wird")) im Fenster Konsole (unterhalb des Editor-Fensters in der Srandardansicht) ausgegeben.

Für den Debuggingmodus sind allerdings besondere Flash-Player notwendig. Diese können unter http://www.adobe.com/support/flashplayer/downloads.html heruntergeladen werden, sofern der Flash Builder meldet, dass kein geeigneter Flash-Player gefunden werden kann.

2 Quellen

2.1 SVN-Repository-Verweise


Dieser Artikel ist GlossarWiki-konform.