Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative.

Inhaltsverzeichnis
Vorwort
1 Flash für ActionScript
2 ActionScript in Flash
3 Flash Pro für ActionScript
4 Grundlagen der Programmierung
5 Einfache Filmsteuerung
6 Bildschirme und Präsentationen
7 Drucken und das Kontextmenü
8 Textfelder
9 Tasten
10 Datum und Zeit
11 Rechnen
12 Farbe wechseln und Drag
13 Zeichnen und Zufall
14 Von Mäusen und Duplikaten
15 Kollisionstest
16 Sound
17 Video
18 Externe Filme
19 Vorladen und Player erkennen
20 Formulare und UI-Komponenten
21 Komponenten anpassen
22 Formulare versenden
23 Warenkorb
24 Ausblick auf ActionScript 3
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler
Aktuell zu Flash 8
Buch: Einstieg in ActionScript

Einstieg in ActionScript
brosch., mit CD und QuickFinder und Referenz
416 S., 24,90 Euro
Rheinwerk Design
ISBN 978-3-89842-774-6
Pfeil 23 Warenkorb
  Pfeil 23.1 Allgemeines
  Pfeil 23.2 Artikelseiten
  Pfeil 23.3 Der Warenkorb
  Pfeil 23.4 Lieferdaten und Bestätigung


Rheinwerk Computing - Zum Seitenanfang

23.2 Artikelseiten  topZur vorigen Überschrift

Wir beginnen mit den Artikelseiten. Wie Sie beim Film feststellen, sind sich Bild 1 und Bild 5 ähnlich; lediglich das Produktbild und einige Details in der Programmierung sind unterschiedlich. In einer großen Warenkorb-Anwendung beispielsweise gäbe es nur eine einzige Produktseite und die jeweiligen Produktdaten werden dort aus einer Datenbank geholt.

Abbildung 23.1 Eine Artikelseite

Betrachten Sie als Erstes die drei Auswahllisten auf der linken Seite. Mit ihnen kann der Nutzer in der Theorie zwischen den verschiedenen Kategorien, Marken und Artikelgruppen hin- und herspringen. »In der Theorie« deswegen, weil unser Beispiel aus nur zwei Artikeln besteht; lediglich die Auswahlliste für die Kategorie (Instanzname kategorie1_cb) ist aktiviert.

Ein Blick in den Eigenschafteninspektor gibt Hinweise, wie das Ganze vonstatten gehen kann.

Abbildung 23.2 Die Auswahlliste im Eigenschafteninspektor

Dem Nutzer stehen die Kategorien T-Shirts und Jacken zur Verfügung. Im data-Parameter finden Sie praktischerweise die Bilder, die zu den jeweiligen Kategorien gehören. Damit ist das Einrichten der Navigation relativ schnell geschehen.

Schritt für Schritt: Navigation der Artikelseiten

Fügen Sie der Auswahlliste kategorie1_cb folgenden Code hinzu:

on (change) {
   _parent.gotoAndStop(this.selectedItem.data);
}

Die Bildnummer wird aus dem data-Parameter ausgelesen und an gotoAndStop() übergeben. _parent kommt zum Einsatz, um auf die Hauptzeitleiste zuzugreifen, denn die Auswahlliste selbst ist ein eigener MovieClip mit eigener Zeitleiste.

Auch die Kategorie-Auswahlliste in Bild 5 (kategorie2_cb) »verdient« den Code zum Bildwechsel:

on (change) {
   _parent.gotoAndStop(this.selectedItem.data);
}

Jede Produktseite enthält des Weiteren drei Schaltflächen für die Produktfarben. Jede der Schaltflächen ist ein MovieClip mit zwei Schlüsselbildern: Bild 1 ist die Farb-Schaltfläche in normalem Zustand, Bild 5 zeigt die Schaltfläche mit schwarzer Umrandung. Da immer nur eine Farbe ausgewählt werden darf, müssen Sie das programmtechnisch umsetzen. Die Implementierung erinnert ein wenig an die Implementierung der »selbstgemachten« Radiobuttons aus Kapitel 21, »Komponenten anpassen«.

Schritt für Schritt: Farb-Schaltflächen programmieren

Die MovieClips für die drei Farben in Bild 1 heißen farbe1a, farbe1b und farbe1c. Analog heißen die Farb-Schaltflächen in Bild 5 farbe2a, farbe2b und farbe2c.

Anfangs soll immer die erste, linke Farbe ausgewählt sein. Dazu wird der entsprechende MovieClip auf Bild 5 vorgespult, alle anderen auf Bild 1. Zudem speichern Sie die aktuell gewählte Farbe in einer String-Variablen. Der Code für Bild 1 sieht wie folgt aus:

stop();
var farbe_str = "gelb";
farbe1a.gotoAndStop(5);
farbe1b.gotoAndStop(1);
farbe1c.gotoAndStop(1);

Bei Bild 5 des Hauptfilms geht das analog:

farbe_str = "rot";
farbe2a.gotoAndStop(5);
farbe2b.gotoAndStop(1);
farbe2c.gotoAndStop(1);

Wenn der Nutzer auf eine der Schaltflächen klickt, müssen Sie zum einen die String-Variable anpassen und zum anderen die Farb-MovieClips an die richtige Stelle spulen. Dazu verwenden Sie als Erstes den Code für die Schaltfläche farbe1a in Bild 1:

on (release) {
   farbe_str = "gelb";
   this.gotoAndStop(5);
   _parent.farbe1b.gotoAndStop(1);
   _parent.farbe1c.gotoAndStop(1);
}

Für die anderen fünf Farb-Schaltflächen gehen Sie analog vor. Hier der Code für farbe2c, in Bild 5 (die Schaltfläche selbst muss auf Bild 5 gespult sein, die beiden anderen zurück auf Bild 1):

on (release) {
   farbe_str = "grau";
   this.gotoAndStop(5);
   _parent.farbe2a.gotoAndStop(1);
   _parent.farbe2b.gotoAndStop(1);
}

Zu guter Letzt fällt auf, dass die automatisch von Flash vergebene Schriftart für Auswahllisten zu groß ist, sie sollte also angepasst werden.

Abbildung 23.3 Auf Mausklick wird die Farb-Schaltfläche umrandet.

Dies geht leider nicht innerhalb von Flash, Sie müssen die Hilfe von ActionScript in Anspruch nehmen. Die Anpassung geht relativ einfach, wie Sie bereits in Kapitel 21, »Komponenten anpassen«, gesehen haben.

Schritt für Schritt: Layout für Auswahllisten

Zunächst legen Sie einen Stil für die Auswahllisten an, und zwar am besten beim Filmstart in Bild 1. Dem Stil geben Sie den Namen Listenstil. Zunächst überprüfen Sie, ob der Stil bereits existiert. Dieser Fall kann eintreten, wenn Sie im Laufe des Einkaufs auf Bild 1 zurückspringen.

if (_global.styles.Listenstil == null) {
   definiereListenstil();
}

Als Nächstes bestimmen Sie in definiereListenstil(), wie der Stil genau aussehen soll. Eine 9-Punkt-Schrift scheint angemessen:

function definiereListenstil() {
   var stil = new mx.styles.CSSStyleDeclaration;
   stil.styleName = "Listenstil";
   _global.styles.Listenstil = stil;
   stil.fontFamily = "_sans";
   stil.fontSize = 9;
}

Nun weisen Sie den Stil den verschiedenen Auswahllisten im Film zu, und zwar mit setStyle():

kategorie1_cb.setStyle("styleName", "Listenstil");
marke1_cb.setStyle("styleName", "Listenstil");
gruppe1_cb.setStyle("styleName", "Listenstil");
groesse1_cb.setStyle("styleName", "Listenstil");
anzahl1_cb.setStyle("styleName", "Listenstil");

Fehlt noch die zweite Artikelseite, also Bild 5. Auch hier muss der Stil zugewiesen, nicht jedoch definiert werden, das ist bereits in Bild 1 geschehen. Es ergibt sich folgender Code:

kategorie2_cb.setStyle("styleName", "Listenstil");
marke2_cb.setStyle("styleName", "Listenstil");
gruppe2_cb.setStyle("styleName", "Listenstil");
groesse2_cb.setStyle("styleName", "Listenstil");
anzahl2_cb.setStyle("styleName", "Listenstil");


Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: ActionScript 3 – Das Praxisbuch
ActionScript 3
Das Praxisbuch

bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: JavaScript






 JavaScript


Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern