Flex Skinning

7,398 views
7,293 views

Published on

Creating Skins for Flex Applications with Flash, Photoshop, Illustrator and Fireworks using the Adobe CS3 Skinning and Component Extensions.

Published in: Technology, Art & Photos
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
7,398
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
204
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Flex Skinning

  1. 2. Gestalten von Flex Komponenten <ul><li>Skin-Typen und States </li></ul><ul><li>Flex Design Erweiterungen für CS3 </li></ul><ul><li>Flash & Flex </li></ul>
  2. 3. Skin Typen und States <ul><li>Skin Typen </li></ul><ul><ul><li>Grafische Skins </li></ul></ul><ul><ul><ul><li>PNG, JPG, GIF oder SWF/SWC </li></ul></ul></ul><ul><ul><ul><li>Photoshop, Fireworks, Illustrator oder Flash </li></ul></ul></ul><ul><ul><li>Programmierte Skins </li></ul></ul><ul><ul><ul><li>ActionScript oder MXML </li></ul></ul></ul><ul><ul><ul><li>Flex oder Flash </li></ul></ul></ul><ul><ul><li>Stateful Skins </li></ul></ul><ul><ul><ul><li>Programmierte Skins mit verschiedenen View States in einer Klasse </li></ul></ul></ul><ul><ul><ul><li>Standard der meisten Flex Komponenten </li></ul></ul></ul>
  3. 4. Skin Typen und States <ul><li>Skin States </li></ul><ul><ul><li>States beschreiben die Zustände einer Komponente </li></ul></ul><ul><ul><li>In der Referenz unter Styles zu finden </li></ul></ul>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
  4. 5. Skin Typen und States <ul><li>Skins und States zuweisen </li></ul><ul><ul><li>CSS : <mx:Style> </li></ul></ul><ul><ul><ul><li>Flexbuilder: File > Import > Skin Artwork... </li></ul></ul></ul><ul><ul><li>setStyle() Methode </li></ul></ul><ul><ul><li>StyleManager </li></ul></ul><ul><ul><ul><li>mx.styles.StyleManager </li></ul></ul></ul><ul><ul><ul><li>Skins zur Laufzeit ändern </li></ul></ul></ul>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
  5. 6. CS3 Skinning Extension <ul><li>Die Extensions </li></ul><ul><ul><li>Fireworks </li></ul></ul><ul><ul><ul><li>MXP Installer mit Skins und Befehl </li></ul></ul></ul><ul><ul><li>Illustrator </li></ul></ul><ul><ul><ul><li>Zip mit Skins und Skripten </li></ul></ul></ul><ul><ul><li>Photoshop </li></ul></ul><ul><ul><ul><li>Zip mit Skins und Skripten </li></ul></ul></ul><ul><ul><li>Flash </li></ul></ul><ul><ul><ul><li>MXP mit Flex Component Kit </li></ul></ul></ul><ul><ul><ul><li>MXP mit Flex Skin Design Extension </li></ul></ul></ul><ul><li>Download </li></ul><ul><ul><li>www.adobe.com/de/products/flex/workflow/ </li></ul></ul><ul><ul><li>www.adobe.com/go/flex3_cs3_skinning_extensions </li></ul></ul>
  6. 7. CS3 Skinning Extension <ul><li>Installation für deutsche Programmversionen </li></ul><ul><ul><li>Fireworks und Flash </li></ul></ul><ul><ul><ul><li>Adobe Extension Manager 1.8 </li></ul></ul></ul><ul><ul><li>Illustrator </li></ul></ul><ul><ul><ul><li>FlexSkins Ordner: </li></ul></ul></ul><ul><ul><ul><ul><li>Illustrator > Coole Extras > Vorlagen </li></ul></ul></ul></ul><ul><ul><ul><li>Create Flex Skin.jsx und Export Flex Skin.jsx Skripte: </li></ul></ul></ul><ul><ul><ul><ul><li>Illustrator > Vorgaben > Skripten </li></ul></ul></ul></ul><ul><ul><li>Photoshop </li></ul></ul><ul><ul><ul><li>Flex Skins Ordner: </li></ul></ul></ul><ul><ul><ul><ul><li>Photoshop > Presets </li></ul></ul></ul></ul><ul><ul><ul><li>NewFlexSkins.jsx und ExportFlexSkins.jsx Skripte: </li></ul></ul></ul><ul><ul><ul><ul><li>Photoshop > Zusatzmodule > Skripten: </li></ul></ul></ul></ul>
  7. 8. Photoshop Skinning Extension <ul><li>Graphische Skins in Photoshop gestalten </li></ul><ul><ul><li>Datei > Skripten > New Flex Skin </li></ul></ul><ul><ul><li>Multiple Flex Components </li></ul></ul><ul><ul><li>Specific Component </li></ul></ul><ul><ul><li>Stylename </li></ul></ul><ul><li>Export der Skin Dateien </li></ul><ul><ul><li>Ebenenanordnung und Namen nicht ändern </li></ul></ul><ul><ul><li>Hide Before Exporting Layer ausblenden </li></ul></ul><ul><ul><li>Datei > Skripten > Export Flex Skins </li></ul></ul><ul><ul><li>9Slice Scaling über CSS in Flex </li></ul></ul>
  8. 9. Skin Artwork in Flexbuilder 3 <ul><li>Grafische Skins in Flexbuilder importieren </li></ul><ul><ul><li>File >Import > Skin Artwork </li></ul></ul><ul><ul><ul><li>Folder of Images </li></ul></ul></ul><ul><ul><ul><li>SWC or SWF File </li></ul></ul></ul><ul><ul><ul><li>Asset Ordner und CSS Datei festlegen </li></ul></ul></ul><ul><ul><li>Skin States zum importieren auswählen </li></ul></ul>
  9. 10. Externe CSS Datei <ul><li>Grafische Skins mit externer CSS Datei zuweisen </li></ul><ul><ul><li><mx:Style source=&quot; assets.css &quot; /> </li></ul></ul><ul><li>Panel </li></ul><ul><li>{ </li></ul><ul><li>borderSkin: Embed ( source= &quot;assets/Panel_borderSkin.png&quot; ); </li></ul><ul><li>closeButtonDisabledSkin: Embed ( source= &quot;assets/Panel_closeButtonDisabledSkin.png&quot; ); </li></ul><ul><li>closeButtonDownSkin: Embed ( source= &quot;assets/Panel_closeButtonDownSkin.png&quot; ); </li></ul><ul><li>closeButtonOverSkin: Embed ( source= &quot;assets/Panel_closeButtonOverSkin.png&quot; ); </li></ul><ul><li>closeButtonUpSkin: Embed ( source= &quot;assets/Panel_closeButtonUpSkin.png&quot; ); </li></ul><ul><li>controlBarBackgroundSkin: Embed ( source= &quot;assets/Panel_controlBarBackgroundSkin.png&quot; ); </li></ul><ul><li>} </li></ul>
  10. 11. Scale-9-Grid <ul><li>CSS Editor </li></ul><ul><ul><li>Edit Scale Grid </li></ul></ul><ul><ul><li>Padding </li></ul></ul><ul><li>Panel </li></ul><ul><li>{ </li></ul><ul><li>borderSkin: Embed ( source= &quot;assets/Panel_borderSkin.png, </li></ul><ul><li>scaleGridTop= &quot;30&quot; , </li></ul><ul><li>scaleGridLeft= &quot;13&quot; , </li></ul><ul><li>scaleGridRight= &quot;264&quot; , </li></ul><ul><li>scaleGridBottom= &quot;187 &quot; ); </li></ul><ul><li>paddingTop: 20 ; </li></ul><ul><li>paddingBottom: 10 ; </li></ul><ul><li>paddingLeft: 15 ; </li></ul><ul><li>paddingRight: 15 ; </li></ul><ul><li>} </li></ul>
  11. 12. Fireworks Skinning Extension <ul><li>Graphische Skins in Fireworks gestalten </li></ul><ul><ul><li>Befehle > Flex Skinning > New Flex Skin </li></ul></ul><ul><ul><li>Multiple Flex Components </li></ul></ul><ul><ul><li>Specific Component </li></ul></ul><ul><ul><li>Stylename </li></ul></ul><ul><li>Export der Skin Dateien </li></ul><ul><ul><li>Ebenenanordnung und Namen nicht ändern </li></ul></ul><ul><ul><li>Ausblenden der _labels, _background und Web Ebenen </li></ul></ul><ul><ul><li>Befehle > Flex Skinning > Export Flex Skins </li></ul></ul><ul><ul><li>9Slice Scaling über CSS in Flex nicht mit Fireworks </li></ul></ul><ul><li>Fireworks Mockup </li></ul><ul><ul><li>Flex Komponenten Bibliothek </li></ul></ul><ul><ul><li>Export MXML und Bilder </li></ul></ul>
  12. 13. Illustrator Skinning Extension <ul><li>Graphische Skins in Illustrator gestalten </li></ul><ul><ul><li>Datei > Skripten > Create Flex Skin </li></ul></ul><ul><ul><li>Multiple Flex Components </li></ul></ul><ul><ul><li>Specific Component </li></ul></ul><ul><ul><li>Stylename </li></ul></ul><ul><li>Export der Skin Dateien </li></ul><ul><ul><li>Ebenenanordnung und Namen nicht ändern </li></ul></ul><ul><ul><li>Ausblenden der background, information und type Ebenen </li></ul></ul><ul><ul><li>Datei > Skripten > Export Flex Skins </li></ul></ul><ul><ul><li>9Slice Scaling mit Illustrator </li></ul></ul>
  13. 14. Illustrator SWF importieren <ul><li>SWF Skins in Flexbuilder importieren </li></ul><ul><ul><li>File >Import > Skin Artwork </li></ul></ul><ul><ul><ul><li>SWC or SWF File auswählen </li></ul></ul></ul>/* Flash Symbole importieren: */ VScrollBar { downArrowDisabledSkin: Embed ( source= &quot;CustomScrollbar.swf&quot;, symbol=&quot;VScrollBar_downArrowDisabledSkin&quot; ); }
  14. 15. Flash Skinning Extension <ul><li>Anpassen eines Skins </li></ul><ul><ul><li>Aus Vorlage erstellen </li></ul></ul><ul><ul><ul><li>Flex Skins </li></ul></ul></ul><ul><ul><li>Symbole bearbeiten </li></ul></ul><ul><ul><ul><li>Timeline Marken beachten </li></ul></ul></ul><ul><ul><li>SWC Publizieren </li></ul></ul><ul><li>Import in Flex </li></ul><ul><ul><li>Import > Skin Assets </li></ul></ul><ul><ul><ul><li>SWF / SWC auswählen </li></ul></ul></ul>
  15. 16. Flash Komponenten <ul><li>Flex Komponente in Flash erstellen </li></ul><ul><ul><li>Symbole erstellen </li></ul></ul><ul><ul><li>Registrierung oben links </li></ul></ul><ul><ul><li>Befehle: </li></ul></ul><ul><ul><ul><li>Convert Symbol to Flex Component </li></ul></ul></ul><ul><ul><ul><li>Convert Symbol to Flex Container </li></ul></ul></ul>
  16. 17. Symbole Konvertieren <ul><li>Änderungen am Symbol </li></ul><ul><ul><li>Export für ActionScript </li></ul></ul><ul><ul><li>In erstes Schlüsselbild exportieren </li></ul></ul><ul><ul><li>Basisklasse ändern: </li></ul></ul><ul><ul><ul><li>mx.flash.UIMovieClip </li></ul></ul></ul><ul><ul><ul><li>mx.flash.ContainerMovieClip </li></ul></ul></ul><ul><ul><li>Klassenname = Symbolname </li></ul></ul><ul><li>Bibliothek </li></ul><ul><ul><li>FlexComponentBase (Kompilierter Clip) </li></ul></ul><ul><ul><li>FlexContentHolder (MovieClip) </li></ul></ul><ul><li>Publishing Einstellungen </li></ul><ul><ul><li>Flash Player 9 und AS 3.0 </li></ul></ul><ul><ul><li>Export SWC </li></ul></ul><ul><ul><li>24 FPS </li></ul></ul>
  17. 18. SWC in Flex importieren <ul><li>Skin Art importieren </li></ul><ul><ul><li>Zuweisung via CSS </li></ul></ul><ul><li>Libs Ordner verwenden </li></ul><ul><ul><li>Namespace anlegen </li></ul></ul><ul><ul><ul><li>xmlns:custom=&quot; * &quot; </li></ul></ul></ul><ul><ul><li>MXML </li></ul></ul><ul><ul><ul><li><custom:CustomComp /> </li></ul></ul></ul>
  18. 19. Flash Bounding Box <ul><li>Anpassungen der Größe einer Flash Komponente zur Laufzeit </li></ul><ul><ul><li>Verhindert, dass sich Komponenten überlappen </li></ul></ul><ul><ul><li>Wichtig, wenn sich die Größe z.B. in verschiedenen States ändert </li></ul></ul><ul><li>&quot;boundingBoxName&quot; Eigenschaft von UIMovieClip </li></ul><ul><ul><li>Flash Symbol öffnen </li></ul></ul><ul><ul><li>Rechteck auf neuer Ebene anlegen, dass alle Komponentenzustände umschließt (visible Eigenschaft wird beim Export auf false gesetzt) </li></ul></ul><ul><ul><li>Symbol erzeugen und als Instanznamen &quot; boundingBox &quot; angeben (dies ist der Standardname der boundingBoxName Eigenschaft) </li></ul></ul>
  19. 20. View States und Transitions <ul><li>View States </li></ul><ul><ul><li>Unterschiedliche Zustände der Komponente </li></ul></ul><ul><ul><li>Werden durch Bildmarken in Schlüsselbildern des Symbols abgebildet </li></ul></ul><mx:Button label=&quot; Change State &quot; click&quot;myComp.currentState= 'stateName' ;&quot; />
  20. 21. View States und Transitions <ul><li>Transitions </li></ul><ul><ul><li>Animierte Übergänge zwischen View States (Tweens innerhalb des Komponenten- Symbols) </li></ul></ul><ul><ul><li>Basieren auf Bildmarken in Schlüsselbildern </li></ul></ul><ul><ul><li>Bezeichnung: </li></ul></ul><ul><ul><ul><li>currentViewState-destinationViewState:start </li></ul></ul></ul><ul><ul><ul><li>currentViewState-destinationViewState:end </li></ul></ul></ul><ul><li>up-over:start </li></ul><ul><li>up-over:end </li></ul><ul><li>Wildcards: </li></ul><ul><li>up-*:start </li></ul>
  21. 22. Flash Container Komponenten <ul><li>Erstellen einer Container Komponente </li></ul><ul><ul><ul><li>Befehl > Convert Symbol to Flex Container </li></ul></ul></ul><ul><ul><ul><li>FlexContentHolder Symbol in den MovieClip ziehen und anpassen </li></ul></ul></ul><ul><ul><ul><li>Komponenten zum Container in Flex hinzufügen (nur ein Child Objekt möglich: Zuweisung über die &quot;content&quot; Eigenschaft des ContainerMovieClip </li></ul></ul></ul><ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> </li></ul><ul><li><mx:Application xmlns:mx=&quot; http://www.adobe.com/2006/mxml &quot; layout=&quot; absolute &quot; xmlns:customSkin=&quot; * &quot; > </li></ul><ul><ul><li><mx:Script> </li></ul></ul><ul><ul><ul><li><![CDATA[ </li></ul></ul></ul><ul><ul><ul><ul><li>import mx.containers.VBox; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>import mx.controls.Button; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>private function init(): void { </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var myBox:VBox = new VBox(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>var myButton:Button= new Button(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>myButton.label=&quot; Click Me &quot;; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>myBox.addChild(myButton); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>myContainer.content = myBox; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><li>]]> </li></ul></ul></ul><ul><ul><li></mx:Script> </li></ul></ul><ul><ul><li><customSkin:MyContainer id=&quot; myContainer &quot; initialize=&quot;init();&quot; /> </li></ul></ul><ul><li></mx:Application> </li></ul>
  22. 23. Danke <ul><li>www.svenbrencher.de/blog </li></ul>

×