Flash CS3 Skin Template

Wie in meinem letzten Artikel erwähnt, waren Jürgen und Ich bei der Adobe onAIR tour in München. Dort habe ich Lee (einem der Referenten von Adobe) das Problem mit dem Illustrator CS3 Skin Template geschildert. Es scheint nichts neues zu sein dass die Templates nicht richtig funktionieren.

Auf sein Anraten hin habe ich nun das Flex Extension Kit für Flash CS3 installiert und das mitgelieferte Template genutzt. Leider muss ich sagen das es keinen tick besser funktioniert als das Illustrator Template. Im Gegenteil, hier kommt noch hinzu das der PopUpButton nicht richtig dargestellt wird. Ein weiterer Versuch war, einzelne Komponenten anstatt des gesamten Templates zu verwenden. Aber auch hier ein Bild des jammers, das Panel versagt leider komplett und dadurch verhagelt es die gesamte Testanwendung.

Ich werde also weiterhin mit dem Illustrator Template arbeiten und auf schöne Tweens und Effekte leider verzichten müssen. Der Bug-Report an Adobe wird von mir die nächsten Tage noch rausgehen mit der Hoffnung das bald Besserung eintritt.

Flex DividedBox Skin

Auf der Suche nach einer Möglichkeit die Boxen einer DividedBox durch eine Linie zu trennen, sind wir auf folgende Lösung gestoßen. Standardmäßig sieht man bei der Benutzung der DividedBox lediglich nur einen Grid zentriert zwischen den Boxen. Ticore Shih löste dies mit einem Container der die Linie/Grafik beinhalte und sie zwischen den Boxen platziert.

DividedBox Skin Demo

Hierfür wird nur ein kleines Script benötigt.

  1. <?xml version=“1.0″ encoding=“utf-8″?>
  2. <mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml“
  3. layout=“horizontal“ width=“400″ height=“300″ backgroundColor=“#FFFFFF“>
  4. <mx:Script>
  5. <![CDATA[
  6. [Bindable]
  7. [Embed(source=“../assets/DividerBox.png“, scaleGridTop=“3″,
  8. scaleGridBottom=“6″, scaleGridLeft=“3″, scaleGridRight=“6″)]
  9. public var DividerBox:Class;
  10. ]]>
  11. </mx:Script>
  12. <mx:Container x=“{box1.width + hDivBox.x + 1}“ y=“0″ width=“10″ height=“100%“
  13. mouseEnabled=“false“ mouseChildren=“false“
  14. backgroundImage=“{DividerBox}“ backgroundSize=“100%“ />
  15. <mx:HDividedBox id=“hDivBox“ width=“100%“ height=“100%“ borderStyle=“solid“>
  16. <mx:Box id=“box1″ width=“50%“ height=“100%“ backgroundColor=“#FFD0C0″>
  17. </mx:Box>
  18. <mx:Box id=“box2″ width=“50%“ height=“100%“ backgroundColor=“#C0D0FF“>
  19. </mx:Box>
  20. </mx:HDividedBox>
  21. </mx:Application>

Link zur Page: http://ticore.blogspot.com

Skinnen mit Illustrator CS3

Ich skinne read more at nun schon seit geraumer Zeit Flexkomponenten mit Illustrator CS3. Dabei bin ich über einige Lösungen/Probleme gestolpert. Bei letzterem habe ich mich mehr als nur einmal gefragt ob ich der einzige Mensch auf Erden bin der diese Art von Problem hat.

Also, um auf dem neuesten Stand zu bleiben solltet Ihr euch die Flex Extension für Illustrator downloaden und installieren. Diese bekommt Ihr bei Adobe. Da ist dann auch alles beschrieben wir Ihr darauf zugreifen könnt. Ich werde es trotzdem kurz beschreiben.

Nachdem die Extension installiert wurden taucht unter Datei >> Skripten >> „Create Flex Skin“ auf. Hier kann zwischen specific (einzelne Komponenten) und multiple (gesamtes Template) gewählt werden. Im Normalfall werdet ihr euch für multiple entscheiden, hier könnt ihr den gesamten look eures Designs umsetzen.

Allerdings gibt es einige Dinge die beachtet werden sollten.

  • Das neu herausgegebene Template von Adobe hat gegenüber seiner Vorgängerversion von Flex 2 einige Macken. Das Panel z.B. sollte möglichst umgangen werden, da es selbst bei völlig unverändertem Zustand nicht richtig dargestellt wird (Abstände und Buttons sind hier das Hauptproblem).
  • Bei den Scrollbars sollte penibelst darauf geachtet werden nicht ausversehen die Bounds (wie ich Sie nenne) zu verändern oder gar zu löschen. Es handelt sich um die unsichtbaren Rahmen die um die thumbs der Scollbar herum sind (HScrollBar_thumbIcon, HScrollBar_thumbDownSkin, HScrollBar_thumbUpSkin usw…).
  • Ich setze meine Screendesigns immer zuerst in Photoshop auf, dort lassen sich einfach bessere Effekte erzielen. Nach fertigstellung des Designs müssen die Komponenten aber in Illustrator reproduziert werden. Einige Effekte lassen sich in Illustrator allerdings nicht nachstellen und somit bleibt nichts anderes übrig als Bitmap Grafiken in das Template zu integrieren. Hier habe ich festgestellt das Scale-9 nicht sonderlich gut bei der vertikalen skalierung arbeitet. Das Problem ist allerdings schnell behoben wenn Ihr ein in Illustrator erstelltes Vektorobjekt dahinter legt. Danach müsste die Skalierung wieder tadellos funktionieren.
  • Transparenzeffekte wie z.B. Abdunkeln oder Multiplizieren werden nach meiner Feststellung zum größten Teil beim Export verworfen, anstatt des Effektes wird einfach die eingestellte Transparenz dargestellt. Also nicht erst mal bei dem ganzen Template Effekte anwenden, sondern zwischendurch immer wieder mal testen.

Es gibt sicher noch weitere Dinge die mir momentan nicht einfallen. Einfach ab und an bei labs.zeroseven.de vorbeischauen, ich werde das Thema sicher immer weiter ausbauen.