Gestalten von Flex KomponentenGestalten von Flex Komponenten

• Skin-Typen und States• Flex Design Erweiterungen für CS3• Flash & Flex

Skin Typen und StatesSkin 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

Skin Typen und StatesSkin Typen und States

• Skin States• States beschreiben

die Zustände einer Komponente

• In der Referenz unter Styles zu finden

Button Skin Bezeichnungen

State Skin/CSS-Property Standard Skin Klasse

down downSkin mx.skins.halo.ButtonSkin

over overSkin mx.skins.halo.ButtonSkin

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

Skin Typen und StatesSkin Typen und States

• Skins und States zuweisen• CSS : <mx:Style>

Flexbuilder: File > Import > Skin Artwork...

• setStyle() Methode• StyleManager

mx.styles.StyleManager Skins zur Laufzeit ändern

Flex Style Explorer V3.0 Beta:http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Auch als Fireworks Erweiterung verfügbar:http://download.macromedia.com/pub/developer/flex_style_explorer.zip

CS3 Skinning ExtensionCS3 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

CS3 Skinning ExtensionCS3 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:

Photoshop Skinning ExtensionPhotoshop 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

Skin Artwork in Flexbuilder 3Skin 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

Externe CSS DateiExterne 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");

}

Scale-9-GridScale-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;

}

Fireworks Skinning ExtensionFireworks 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

Illustrator Skinning ExtensionIllustrator 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

Illustrator SWF importierenIllustrator 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");

}

Flash Skinning ExtensionFlash 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

Flash KomponentenFlash Komponenten

• Flex Komponente in Flash erstellen• Symbole erstellen• Registrierung oben links• Befehle:

Convert Symbol to Flex Component

Convert Symbol to Flex Container

Symbole KonvertierenSymbole 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

SWC in Flex importierenSWC in Flex importieren

• Skin Art importieren• Zuweisung via CSS

• Libs Ordner verwenden• Namespace anlegen

xmlns:custom="*"• MXML

<custom:CustomComp />

Flash Bounding BoxFlash 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)

View States und TransitionsView 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';" />

View States und TransitionsView 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

Flash Container KomponentenFlash 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>

DankeDanke

• www.svenbrencher.de/blog