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

Skin-Typen und States

Flex Design Erweiterungen für CS3

Flash & Flex

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

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 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 States

States beschreiben die Zustände einer Komponente

In der Referenz unter Styles zu finden

Skin 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

Skins und States zuweisen

CSS : <mx:Style>

Flexbuilder: File > Import > Skin Artwork...

setStyle() Methode

StyleManager

mx.styles.StyleManager

Skins zur Laufzeit ändern

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

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 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:

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

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

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 Datei Grafische Skins mit externer CSS Datei zuweisen <mx:Style source=&quot; assets.css &quot; /> Panel { borderSkin: Embed ( source= &quot;assets/Panel_borderSkin.png&quot; ); closeButtonDisabledSkin: Embed ( source= &quot;assets/Panel_closeButtonDisabledSkin.png&quot; ); closeButtonDownSkin: Embed ( source= &quot;assets/Panel_closeButtonDownSkin.png&quot; ); closeButtonOverSkin: Embed ( source= &quot;assets/Panel_closeButtonOverSkin.png&quot; ); closeButtonUpSkin: Embed ( source= &quot;assets/Panel_closeButtonUpSkin.png&quot; ); controlBarBackgroundSkin: Embed ( source= &quot;assets/Panel_controlBarBackgroundSkin.png&quot; ); }

Grafische Skins mit externer CSS Datei zuweisen

<mx:Style source=&quot; assets.css &quot; />

Panel

{

borderSkin: Embed ( source= &quot;assets/Panel_borderSkin.png&quot; );

closeButtonDisabledSkin: Embed ( source= &quot;assets/Panel_closeButtonDisabledSkin.png&quot; );

closeButtonDownSkin: Embed ( source= &quot;assets/Panel_closeButtonDownSkin.png&quot; );

closeButtonOverSkin: Embed ( source= &quot;assets/Panel_closeButtonOverSkin.png&quot; );

closeButtonUpSkin: Embed ( source= &quot;assets/Panel_closeButtonUpSkin.png&quot; );

controlBarBackgroundSkin: Embed ( source= &quot;assets/Panel_controlBarBackgroundSkin.png&quot; );

}

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

CSS Editor

Edit Scale Grid

Padding

Panel

{

borderSkin: Embed ( source= &quot;assets/Panel_borderSkin.png,

scaleGridTop= &quot;30&quot; ,

scaleGridLeft= &quot;13&quot; ,

scaleGridRight= &quot;264&quot; ,

scaleGridBottom= &quot;187 &quot; );

paddingTop: 20 ;

paddingBottom: 10 ;

paddingLeft: 15 ;

paddingRight: 15 ;

}

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

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

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 importieren SWF Skins in Flexbuilder importieren File >Import > Skin Artwork SWC or SWF File auswählen /* Flash Symbole importieren: */ VScrollBar { downArrowDisabledSkin: Embed ( source= &quot;CustomScrollbar.swf&quot;, symbol=&quot;VScrollBar_downArrowDisabledSkin&quot; ); }

SWF Skins in Flexbuilder importieren

File >Import > Skin Artwork

SWC or SWF File auswählen

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

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 Komponenten Flex Komponente in Flash erstellen Symbole erstellen Registrierung oben links Befehle: Convert Symbol to Flex Component Convert Symbol to Flex Container

Flex Komponente in Flash erstellen

Symbole erstellen

Registrierung oben links

Befehle:

Convert Symbol to Flex Component

Convert Symbol to Flex Container

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

Ä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 importieren Skin Art importieren Zuweisung via CSS Libs Ordner verwenden Namespace anlegen xmlns:custom=&quot; * &quot; MXML <custom:CustomComp />

Skin Art importieren

Zuweisung via CSS

Libs Ordner verwenden

Namespace anlegen

xmlns:custom=&quot; * &quot;

MXML

<custom:CustomComp />

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 &quot;boundingBoxName&quot; 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 &quot; boundingBox &quot; angeben (dies ist der Standardname der boundingBoxName Eigenschaft)

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

&quot;boundingBoxName&quot; 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 &quot; boundingBox &quot; angeben (dies ist der Standardname der boundingBoxName Eigenschaft)

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

View States

Unterschiedliche Zustände der Komponente

Werden durch Bildmarken in Schlüsselbildern des Symbols abgebildet

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

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 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 &quot;content&quot; Eigenschaft des ContainerMovieClip <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; layout=&quot; absolute &quot; xmlns:customSkin=&quot; * &quot; > <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=&quot; Click Me &quot;; myBox.addChild(myButton); myContainer.content = myBox; } ]]> </mx:Script> <customSkin:MyContainer id=&quot; myContainer &quot; initialize=&quot;init();&quot; /> </mx:Application>

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 &quot;content&quot; Eigenschaft des ContainerMovieClip

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>

<mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; layout=&quot; absolute &quot; xmlns:customSkin=&quot; * &quot; >

<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=&quot; Click Me &quot;;

myBox.addChild(myButton);

myContainer.content = myBox;

}

]]>

</mx:Script>

<customSkin:MyContainer id=&quot; myContainer &quot; initialize=&quot;init();&quot; />

</mx:Application>

Danke www.svenbrencher.de/blog

www.svenbrencher.de/blog