Flex Skinning

Slide 2: Gestalten von Flex Komponenten • Skin-Typen und States • Flex Design Erweiterungen für CS3 • Flash & Flex

Slide 3: Skin Typen und States • Skin Typen • Grafische Skins  PNG, JPG, GIF oder SWF/SWC  Photoshop, Fireworks, Illustrator oder Flash • Programmierte Skins  ActionScript oder MXML  Flex oder Flash • Stateful Skins  Programmierte Skins mit verschiedenen View States in einer Klasse  Standard der meisten Flex Komponenten

Slide 4: Skin Typen und States • Skin States • States beschreiben die Zustände einer Komponente Button Skin Bezeichnungen • In der Referenz State Skin/CSS-Property Standard Skin Klasse unter Styles zu down downSkin mx.skins.halo.ButtonSkin over overSkin mx.skins.halo.ButtonSkin finden up upSkin mx.skins.halo.ButtonSkin disabled disabledSkin mx.skins.halo.ButtonSkin selectedDisabled selectedDisabledSkin mx.skins.halo.ButtonSkin selectedDown selectedDownSkin mx.skins.halo.ButtonSkin selectedOver selectedOverSkin mx.skins.halo.ButtonSkin selectedUp selectedUpSkin mx.skins.halo.ButtonSkin

Slide 5: Skin Typen und States • Skins und States zuweisen • CSS : <mx:Style>  Flexbuilder: File > Import > Skin Artwork... • setStyle() Methode • StyleManager Flex Style Explorer V3.0 Beta:  mx.styles.StyleManager http://examples.adobe.com/flex3/consulting/styleexplorer/F  Skins zur Laufzeit ändern Auch als Fireworks Erweiterung verfügbar: http://download.macromedia.com/pub/developer/flex_style

Slide 6: CS3 Skinning Extension • Die Extensions • Fireworks  MXP Installer mit Skins und Befehl • Illustrator  Zip mit Skins und Skripten • Photoshop  Zip mit Skins und Skripten • Flash  MXP mit Flex Component Kit  MXP mit Flex Skin Design Extension • Download • www.adobe.com/de/products/flex/workflow/ • www.adobe.com/go/flex3_cs3_skinning_extensions

Slide 7: CS3 Skinning Extension • Installation für deutsche Programmversionen • Fireworks und Flash  Adobe Extension Manager 1.8 • Illustrator  FlexSkins Ordner:  Illustrator > Coole Extras > Vorlagen  Create Flex Skin.jsx und Export Flex Skin.jsx Skripte:  Illustrator > Vorgaben > Skripten • Photoshop  Flex Skins Ordner:  Photoshop > Presets  NewFlexSkins.jsx und ExportFlexSkins.jsx Skripte:  Photoshop > Zusatzmodule > Skripten:

Slide 8: Photoshop Skinning Extension • Graphische Skins in Photoshop gestalten • Datei > Skripten > New Flex Skin • Multiple Flex Components • Specific Component • Stylename • Export der Skin Dateien • Ebenenanordnung und Namen nicht ändern • Hide Before Exporting Layer ausblenden • Datei > Skripten > Export Flex Skins • 9Slice Scaling über CSS in Flex

Slide 9: Skin Artwork in Flexbuilder 3 • Grafische Skins in Flexbuilder importieren • File >Import > Skin Artwork  Folder of Images  SWC or SWF File  Asset Ordner und CSS Datei festlegen • Skin States zum importieren auswählen

Slide 10: Externe CSS Datei • Grafische Skins mit externer CSS Datei zuweisen • <mx:Style source="assets.css"/> Panel { borderSkin: Embed(source="assets/Panel_borderSkin.png"); closeButtonDisabledSkin: Embed(source="assets/Panel_closeButtonDisabledSkin.png"); closeButtonDownSkin: Embed(source="assets/Panel_closeButtonDownSkin.png"); closeButtonOverSkin: Embed(source="assets/Panel_closeButtonOverSkin.png"); closeButtonUpSkin: Embed(source="assets/Panel_closeButtonUpSkin.png"); controlBarBackgroundSkin: Embed(source="assets/Panel_controlBarBackgroundSkin.png"); }

Slide 11: Scale-9-Grid • CSS Editor • Edit Scale Grid • Padding Panel { borderSkin: Embed(source="assets/Panel_borderSkin.png, scaleGridTop="30", scaleGridLeft="13", scaleGridRight="264", scaleGridBottom="187"); paddingTop: 20; paddingBottom: 10; paddingLeft: 15; paddingRight: 15; }

Slide 12: Fireworks Skinning Extension • Graphische Skins in Fireworks gestalten • Befehle > Flex Skinning > New Flex Skin • Multiple Flex Components • Specific Component • Stylename • Export der Skin Dateien • Ebenenanordnung und Namen nicht ändern • Ausblenden der _labels, _background und Web Ebenen • Befehle > Flex Skinning > Export Flex Skins • 9Slice Scaling über CSS in Flex nicht mit Fireworks • Fireworks Mockup • Flex Komponenten Bibliothek • Export MXML und Bilder

Slide 13: Illustrator Skinning Extension • Graphische Skins in Illustrator gestalten • Datei > Skripten > Create Flex Skin • Multiple Flex Components • Specific Component • Stylename • Export der Skin Dateien • Ebenenanordnung und Namen nicht ändern • Ausblenden der background, information und type Ebenen • Datei > Skripten > Export Flex Skins • 9Slice Scaling mit Illustrator

Slide 14: Illustrator SWF importieren • SWF Skins in Flexbuilder importieren • File >Import > Skin Artwork  SWC or SWF File auswählen /* Flash Symbole importieren: */ VScrollBar { downArrowDisabledSkin: Embed(source="CustomScrollbar.swf", symbol="VScrollBar_downArrowDisabledSkin"); }

Slide 15: Flash Skinning Extension • Anpassen eines Skins • Aus Vorlage erstellen  Flex Skins • Symbole bearbeiten  Timeline Marken beachten • SWC Publizieren • Import in Flex • Import > Skin Assets  SWF / SWC auswählen

Slide 16: Flash Komponenten • Flex Komponente in Flash erstellen • Symbole erstellen • Registrierung oben links • Befehle:  Convert Symbol to Flex Component  Convert Symbol to Flex Container

Slide 17: Symbole Konvertieren • Änderungen am Symbol • Export für ActionScript • In erstes Schlüsselbild exportieren • Basisklasse ändern:  mx.flash.UIMovieClip  mx.flash.ContainerMovieClip • Klassenname = Symbolname • Bibliothek • FlexComponentBase (Kompilierter Clip) • FlexContentHolder (MovieClip) • Publishing Einstellungen • Flash Player 9 und AS 3.0 • Export SWC • 24 FPS

Slide 18: SWC in Flex importieren • Skin Art importieren • Zuweisung via CSS • Libs Ordner verwenden • Namespace anlegen  xmlns:custom="*" • MXML  <custom:CustomComp />

Slide 19: Flash Bounding Box • Anpassungen der Größe einer Flash Komponente zur Laufzeit • Verhindert, dass sich Komponenten überlappen • Wichtig, wenn sich die Größe z.B. in verschiedenen States ändert • "boundingBoxName" Eigenschaft von UIMovieClip • Flash Symbol öffnen • Rechteck auf neuer Ebene anlegen, dass alle Komponentenzustände umschließt (visible Eigenschaft wird beim Export auf false gesetzt) • Symbol erzeugen und als Instanznamen "boundingBox" angeben (dies ist der Standardname der boundingBoxName Eigenschaft)

Slide 20: View States und Transitions • View States • Unterschiedliche Zustände der Komponente • Werden durch Bildmarken in Schlüsselbildern des Symbols abgebildet <mx:Button label="Change State" click"myComp.currentState='stateName';" />

Slide 21: View States und Transitions • Transitions • Animierte Übergänge zwischen View States (Tweens innerhalb des Komponenten- Symbols) • Basieren auf Bildmarken in Schlüsselbildern • Bezeichnung:  currentViewState-destinationViewState:start  currentViewState-destinationViewState:end up-over:start up-over:end Wildcards: up-*:start

Slide 22: Flash Container Komponenten • Erstellen einer Container Komponente  Befehl > Convert Symbol to Flex Container  FlexContentHolder Symbol in den MovieClip ziehen und anpassen  Komponenten zum Container in Flex hinzufügen (nur ein Child Objekt möglich: Zuweisung über die "content" Eigenschaft des ContainerMovieClip <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:customSkin="*"> <mx:Script> <![CDATA[ import mx.containers.VBox; import mx.controls.Button; private function init():void{ var myBox:VBox = new VBox(); var myButton:Button=new Button(); myButton.label="Click Me"; myBox.addChild(myButton); myContainer.content = myBox; } ]]> </mx:Script> <customSkin:MyContainer id="myContainer" initialize="init();"/> </mx:Application>

Slide 23: Danke • www.svenbrencher.de/blog