AS3-Tutorium: Flex: Butterfly 03 variable number of rounds: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{AS3-Tutorium:Flex:Butterfly:Menü}} | {{AS3-Tutorium:Flex:Butterfly:Menü}} | ||
=Flatternder Schmetterling= | ==Flatternder Schmetterling== | ||
Im zweiten Teil des Flex-Tutoriums die Anwendung erweiter: Anstelle einer festen Anzahl von Runden zu fliegen, | Im zweiten Teil des Flex-Tutoriums die Anwendung erweiter: Anstelle einer festen Anzahl von Runden zu fliegen, | ||
Zeile 16: | Zeile 16: | ||
</noinclude> | </noinclude> | ||
=Weiterentwicklung von Teil 2 des Flex-Tutoriums= | ==Weiterentwicklung von Teil 2 des Flex-Tutoriums== | ||
Die Programmierung des Flex- | Die Programmierung des Flex-Projekts führt die Programmierung des Flex-Projekts <code>[[AS3-Tutorium: Flex: Butterfly 02 fixed number of rounds|Butterfly03Flex]]</code> | ||
weiter. Sie können daher entweder Ihre Lösung von Teil 2 nehmen und gemäß den nachfolgenden Beschreibungen erweitern. Oder | weiter. Sie können daher entweder Ihre Lösung von Teil 2 nehmen und gemäß den nachfolgenden Beschreibungen erweitern. Oder | ||
Sie erstellen ein neues Projekt <code>Butterfly03Flex</code> und kopieren den Ordner <code>assets</code> und den Inhalt von | Sie erstellen ein neues Projekt <code>Butterfly03Flex</code> und kopieren den Ordner <code>assets</code> und den Inhalt von | ||
Ordner <code>lib</code>. Zu guter Letzt kopieren Sie den Inhalt der Datei <code>Butterfly02Flex.mxml</code> | Ordner <code>lib</code>. Zu guter Letzt kopieren Sie den Inhalt der Datei <code>Butterfly02Flex.mxml</code> | ||
und fügen diesen in die Datei <code>Butterfly03Flex.mxml</code> des neuen | und fügen diesen in die Datei <code>Butterfly03Flex.mxml</code> des neuen Projekts ein. | ||
Im Folgenden arbeiten Sie ausschließlich im Flash Builder. | Im Folgenden arbeiten Sie ausschließlich im Flash Builder. | ||
==Die Input-Komponente== | ===Die Input-Komponente=== | ||
# Im Paket-Explorer: Klick mit der rechten auf <code>Butterfly03/Flex/src/(Standardpaket)</code> → <code>Neu</code> → <code>MXML-Komponente</code> → Name: <code>Input</code> → <code>Fertig stellen</code>. | # Im Paket-Explorer: Klick mit der rechten auf <code>Butterfly03/Flex/src/(Standardpaket)</code> → <code>Neu</code> → <code>MXML-Komponente</code> → Name: <code>Input</code> → <code>Fertig stellen</code>. | ||
Zeile 41: | Zeile 41: | ||
(Sie können diesen Code auch direkt in Ihre Datei kopieren): | (Sie können diesen Code auch direkt in Ihre Datei kopieren): | ||
<source lang=" | <source lang="mxml" enclose="div"> | ||
<?xml version="1.0" encoding="utf-8"?> | <?xml version="1.0" encoding="utf-8"?> | ||
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" | <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" | ||
Zeile 60: | Zeile 60: | ||
den Klassennamen verwenden müssen, den Sie Ihrem Schmetterlingsmovie in Flash zugewiesen haben): | den Klassennamen verwenden müssen, den Sie Ihrem Schmetterlingsmovie in Flash zugewiesen haben): | ||
<source lang=" | <source lang="mxml"> | ||
<?xml version="1.0" encoding="utf-8"?> | <?xml version="1.0" encoding="utf-8"?> | ||
<s:Application | <s:Application | ||
Zeile 81: | Zeile 81: | ||
<fx:Script> | <fx:Script> | ||
<![CDATA[ | <![CDATA[ | ||
</source> | |||
<source lang="actionscript3"> | |||
private function o_init (): void | private function o_init (): void | ||
{ | { | ||
Zeile 100: | Zeile 102: | ||
sp_butterfly_movie.gotoAndPlay("lbStart"); | sp_butterfly_movie.gotoAndPlay("lbStart"); | ||
} | } | ||
</source> | |||
<source lang="mxml"> | |||
]]> | ]]> | ||
</fx:Script> | </fx:Script> | ||
Zeile 114: | Zeile 118: | ||
identisch benannt wurden. | identisch benannt wurden. | ||
==Skinning== | ===Skinning=== | ||
<noinclude> | <noinclude> | ||
Zeile 131: | Zeile 135: | ||
und trägt in diese folgenden Code ein (in Anlehnung an <ref>Skinning a Spark Button in Flex 4 [http://inflagrantedelicto.memoryspiral.com/2010/01/skinning-a-spark-button-in-flex-4/]</ref>): | und trägt in diese folgenden Code ein (in Anlehnung an <ref>Skinning a Spark Button in Flex 4 [http://inflagrantedelicto.memoryspiral.com/2010/01/skinning-a-spark-button-in-flex-4/]</ref>): | ||
<source lang=" | <source lang="mxml" enclose="div"> | ||
<?xml version="1.0" encoding="utf-8"?> | <?xml version="1.0" encoding="utf-8"?> | ||
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" | <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" | ||
Zeile 191: | Zeile 195: | ||
Abschließend ersetzt man in der Datei <code>Input.mxml</code> | Abschließend ersetzt man in der Datei <code>Input.mxml</code> | ||
den Code: | den Code: | ||
<source lang=" | <source lang="mxml" enclose="div"> | ||
<s:Button x="120" y="44" label="Start" id="buttonStart"/> | <s:Button x="120" y="44" label="Start" id="buttonStart"/> | ||
</source> | </source> | ||
durch: | durch: | ||
<source lang=" | <source lang="mxml" enclose="div"> | ||
<s:Button x="120" y="44" label="Start" id="buttonStart" skinClass="ButtonSkin"/> | <s:Button x="120" y="44" label="Start" id="buttonStart" skinClass="ButtonSkin"/> | ||
</source> | </source> | ||
Zeile 206: | Zeile 210: | ||
Beachten Sie, dass durch die obigen Befehle die Datei <code>src/css/Main.css</code> neu angelegt wurde: | Beachten Sie, dass durch die obigen Befehle die Datei <code>src/css/Main.css</code> neu angelegt wurde: | ||
<source lang=" | <source lang="css" enclose="div"> | ||
@namespace s "library://ns.adobe.com/flex/spark"; | @namespace s "library://ns.adobe.com/flex/spark"; | ||
@namespace mx "library://ns.adobe.com/flex/mx"; | @namespace mx "library://ns.adobe.com/flex/mx"; | ||
Zeile 217: | Zeile 221: | ||
In der Haupt-Datei <code>Butterfly03Flex.mxml</code> | In der Haupt-Datei <code>Butterfly03Flex.mxml</code> | ||
wird diese CSS-Datei durch die Anweisung < | wird diese CSS-Datei durch die Anweisung | ||
<source lang="mxml" enclose="div"> | |||
<fx:Style source="css/Main.css"/> | |||
</source> | |||
eingebunden. | |||
=Quellen= | ==Quellen== | ||
<noinclude> | <noinclude> | ||
<references /> | <references /> | ||
* [[Kowarschick, W.: Multimedia-Programmierung]]</noinclude> | * [[Kowarschick, W.: Multimedia-Programmierung]]</noinclude> | ||
* [http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs5/butterfly/Butterfly03Flex4Flash11/ Musterlösung (Flex 4/Flash CS5)] | * [http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs5/butterfly/Butterfly03Flex4Flash11/ Musterlösung (Flex 4/Flash CS5)] | ||
* [http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs4/butterfly/Butterfly03Flex4Flash10/ Musterlösung (Flex 4/Flash CS4)] | * [http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs4/butterfly/Butterfly03Flex4Flash10/ Musterlösung (Flex 4/Flash ==CS4)] | ||
== [[Subversion/HowTo|SVN]]-Repository-Verweise == | === [[Subversion/HowTo|SVN]]-Repository-Verweise === | ||
* [http://glossar.hs-augsburg.de/webdav/tutorium/flex_4__flash_cs5/butterfly/Butterfly03Flex4Flash11/ Musterlösung (Flex 4/Flash CS5)] | * [http://glossar.hs-augsburg.de/webdav/tutorium/flex_4__flash_cs5/butterfly/Butterfly03Flex4Flash11/ Musterlösung (Flex 4/Flash CS5)] | ||
* [http://glossar.hs-augsburg.de/webdav/tutorium/flex_4__flash_cs4/butterfly/Butterfly03Flex4Flash10/ Musterlösung (Flex 4/Flash CS4)] | * [http://glossar.hs-augsburg.de/webdav/tutorium/flex_4__flash_cs4/butterfly/Butterfly03Flex4Flash10/ Musterlösung (Flex 4/Flash CS4)] |
Aktuelle Version vom 1. März 2023, 15:26 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
Flatternder Schmetterling
Im zweiten Teil des Flex-Tutoriums die Anwendung erweiter: Anstelle einer festen Anzahl von Runden zu fliegen, kann der Benutzer die Zahl der Runden vorgeben. Hierbei werden als Button und Texteingabefeld Flex-Komponenten (Spark) an Stelle von Flash-Komponenten verwendet. Diese sind wesentlich flexibler. Zum Beispiel kann das Aussehen frei definiert werden (Skinning).
<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs5/butterfly/Butterfly03Flex4Flash11/swf/Butterfly03Flex4Flash11.swf</swf>
Musterlösung (Flex 4/Flash CS5)
(SVN-Repository)
Musterlösung (Flex 4/Flash CS4) (SVN-Repository)
Weiterentwicklung von Teil 2 des Flex-Tutoriums
Die Programmierung des Flex-Projekts führt die Programmierung des Flex-Projekts Butterfly03Flex
weiter. Sie können daher entweder Ihre Lösung von Teil 2 nehmen und gemäß den nachfolgenden Beschreibungen erweitern. Oder
Sie erstellen ein neues Projekt Butterfly03Flex
und kopieren den Ordner assets
und den Inhalt von
Ordner lib
. Zu guter Letzt kopieren Sie den Inhalt der Datei Butterfly02Flex.mxml
und fügen diesen in die Datei Butterfly03Flex.mxml
des neuen Projekts ein.
Im Folgenden arbeiten Sie ausschließlich im Flash Builder.
Die Input-Komponente
- Im Paket-Explorer: Klick mit der rechten auf
Butterfly03/Flex/src/(Standardpaket)
→Neu
→MXML-Komponente
→ Name:Input
→Fertig stellen
. - Im Editorfenster von
Input.mxml
(wurde automatisch geöffnet): Wechsel in den Design-Modus (Design
) → Rahmen der Kompnente verkleinern →Button
-,Label
- und
TexInput
-Komponente aus dem Komponentenfenster in das Editorfesnter ziehen. - Im Editorfenster von
Input.mxml
: Die Eigenschaften der drei Kompnenten bearbeiten:Label
: Den TextBeschriftung
nach Doppelklick auf diesen Text inAnzahl Runden:
ändern. Eventuell Font anpassen (Eigenschaften
-Fenster).Button
: Den TextButton
nach Doppelklick auf diesen Text inStart
ändern.Button
: Selektieren → ImEigenschaften
-Fenster rechtsID
eintragen:buttonStart
.TextInput
: Skalieren, evtl. Font anpassen.TextInput
: Selektieren → ImEigenschaften
-Fenster rechtsID
eintragen:inputRounds
.- Alle drei Komponenten wie gewünscht anordnen.
Der MXML-Code der Input
-Komponente (Quellenmodus) sollte in etwa wie folgt aussehen
(Sie können diesen Code auch direkt in Ihre Datei kopieren):
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="76"
>
<s:Button x="120" y="44" label="Start" id="buttonStart"/>
<s:TextInput x="120" y="10" width="70" id="inputRounds"/>
<s:Label x="12" y="10" height="22"
fontSize="14" verticalAlign="middle"
text="Anzahl Runden:"
/>
</s:Group>
Nun öffen Sie durch Doppelklick die Haupt-Datei Butterfly03Flex
und ersetzen den Code
dieser Datei durch folgenden Code (wobei Sie an Stelle von ButterflyMovieBlue
den Klassennamen verwenden müssen, den Sie Ihrem Schmetterlingsmovie in Flash zugewiesen haben):
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:std="*"
width="550" height="400"
applicationComplete="o_init()"
>
<s:Label
x="13" y="5" fontSize="20"
text="Butterfly 03 Variable Number of Rounds (Flex 4/Flash CS4)"
/>
<std:ButterflyMovieBlue id="sp_butterfly_movie"/>
<std:Input id="sp_input"
x="340" y="313"
/>
<fx:Script>
<![CDATA[
private function o_init (): void
{
stage.scaleMode=StageScaleMode.SHOW_ALL;
sp_input.buttonStart.addEventListener(MouseEvent.CLICK, o_start);
}
private function o_start(p_event: MouseEvent): void
{
sp_input.visible = false;
var l_rounds_to_fly: Number = parseInt(sp_input.inputRounds.text);
if (isNaN(l_rounds_to_fly) || l_rounds_to_fly < 0)
l_rounds_to_fly = 0;
sp_butterfly_movie.roundsToFly = l_rounds_to_fly;
sp_butterfly_movie.gotoAndPlay("lbStart");
}
]]>
</fx:Script>
</s:Application>
Beachten Sie, dass der Code, der hier verwendet wird, direkt aus der Musterlösung von AS3-Tutorium: Flash: Butterfly 05 external code
übernommen wurde: Der Inhalt des Konstruktors public function Main()
wurde in die Observer-Methode o_init
eingefügt.
Und die Methode o_start
wurde eins zu eins übernommen.
Natürlich funktioniert dies nur, wenn auch alle Komponenten in beiden Fällen
identisch benannt wurden.
Skinning
<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flex_4__flash_cs5/butterfly/Butterfly03SkinFlex4Flash11/swf/Butterfly03SkinFlex4Flash11.swf</swf>
Musterlösung (Flex 4/Flash CS5)
(SVN-Repository)
Musterlösung (Flex 4/Flash CS4)
(SVN-Repository)
Das Aussehen der einzelnen Flex-Spark-Komponenten kann mittels Skinning beliebig modifiziert werden.[1]
Beispielsweise kann man das Aussehen des Buttons modifizieren.
Dazu legt man zunächst eine neue MXML-Komponente ButtonSkin.mxml
an
und trägt in diese folgenden Code ein (in Anlehnung an [2]):
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21"
alpha.disabled="0.5"
>
<!-- Based on http://inflagrantedelicto.memoryspiral.com/2010/01/skinning-a-spark-button-in-flex-4/ -->
<fx:Metadata>
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<!-- background -->
<s:Rect
left="0" right="0" top="0" bottom="0"
radiusX="0" radiusY="0"
topLeftRadiusX="20" topLeftRadiusY="20"
topRightRadiusX="20" topRightRadiusY="20"
bottomLeftRadiusX="20" bottomLeftRadiusY="20"
bottomRightRadiusX="20" bottomRightRadiusY="20"
height="30" width="69"
>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x6699ff"/>
<s:GradientEntry color="0x666688"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- label -->
<!-- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s:Label
id="labelDisplay"
textAlign="center"
verticalAlign="middle"
paddingLeft="5" paddingRight="10"
maxDisplayedLines="1"
top="2" left="10"
bottom="4" right="10"
horizontalCenter="0" verticalCenter="0"
color.up = "#000000"
color.over = "#FFFF88"
color.down = "#88FFFF"
/>
</s:Skin>
Abschließend ersetzt man in der Datei Input.mxml
den Code:
<s:Button x="120" y="44" label="Start" id="buttonStart"/>
durch:
<s:Button x="120" y="44" label="Start" id="buttonStart" skinClass="ButtonSkin"/>
Oder besser: Man erzeugt eine CSS-Datei, die diesen Skin für alle Spark-Buttons definiert:
- Im „Paket-Explorer“: Die Datei
Input.mxml
durch Doppelklick öffnen
- Im Editorfenster:
Design
-Modus → Start
-Button durch Klick selektieren.
- Im Eigenschaften-Fenster:
In CSS konvertieren...
→ Neu...
→ Paket: css
, Dateiname: Main
→ Fertig stellen
→ OK
.
Beachten Sie, dass durch die obigen Befehle die Datei src/css/Main.css
neu angelegt wurde:
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button
{
skinClass: ClassReference("ButtonSkin");
}
In der Haupt-Datei Butterfly03Flex.mxml
wird diese CSS-Datei durch die Anweisung
<fx:Style source="css/Main.css"/>
eingebunden.
Quellen
SVN-Repository-Verweise
Dieser Artikel ist GlossarWiki-konform.