La Fabrick Interactive [blog]

Accueil

Laboratoires d'applications riches:
RIA , elearning, design interactif, ergonomie...

Skiner un composant Flex 3 avec Fireworks CS3 [Tutoriel Vidéo]

Par Erick, dans [Dev] Flash / Flex / AIR... # 405

J'avais un petit essai de tutoriel vidéo à faire... Euuuh .... comment dire ??? euuuuh ... c'est un peu laborieux :).
Mais bon maintenant, euh... c'est fait et euuuh... ca servira peut être un jour à quelqu'un !

Télécharger les fichiers sources.

Au final je suis pas sûr que la vidéo soit vraiment pratique comme support d'apprentissage pour Flex ( même si on enlève les euuuh et autres hésitations

). Et toi tu aimes les tutos vidéos ???

[Correction ]
Dans la partie Fireworks je parle de calques, en fait il s'agit de dossiers de calques.

[ A voir aussi ] Skiner Flex à l'aide de flash chez Phiphou

Commentaires

1. Le dimanche 11 mai 2008 à 12:11, par piouPiouM

Dur dur l'exercice du tuto vidéo, n'est-ce pas :D
Néanmoins, tu ne t'en sors pas si mal (contrairement à un autre que tu connais bien xD)

Le plus déroutant étant de parler seul, à sa machine…

2. Le dimanche 11 mai 2008 à 12:22, par Tek

C'est ultra-long à faire les didacticiels vidéo. Il faut s'y essayer au moins un jour, mais ça laisse jamais de très bons souvenirs.

Pour en revenir au sujet de base du didacticiel, j'avais exploré cette possibilité pour skinner l'application sur laquelle je travaillais. Mais j'avais abandonné parce que Fireworks n'exporte en fait que du raster, pas du vectoriel.

Il faudrait la même simplicité d'export des skins de composants, mais depuis Flash pour avoir du vectoriel. J'espère que Thermo permettra de faire ce travail et qu'il sera livré en natif avec l'intégralité des composants Flex prêts à skinner.

3. Le dimanche 11 mai 2008 à 15:56, par Erick

Ouai c'est clair que parler seul devant çà machine, c'est vraiment pas fun. Et en plus c'est long... par contre je suis persuadé que c'est un très bon exercice, très bénéfique à terme en tout cas.
En ce qui concerne l'export bitmap, du point de vue "visuel", c'est pas très génant je trouve grâce au scale grid. Par contre c'est vrai que faut faire un peu gaffe au poids final de l'appli. Dans une démo de C.Coenraets javais matté, la skin faisait au final plusieurs Mo... mais c'était vraiment très zoli :)...
Par contre il me semble que le plugin flex skin design pour flash permet d'export du vectoriel via un swf. Un sujet pour le prochain tuto vidéo ;)...

4. Le dimanche 11 mai 2008 à 17:37, par Iteratif

Salut Erick,

comment va depuis notre dernière rencontre

Pas mal pour un premier essai et ce qui est du euhhhh... tu le coupes au montage

J'utilise pas mal les gabarits présents dans le SDK pour faire les skins en Flash (AeonGraphical ou l'original) ainsi que les feuilles de style correspondantes.

AeonGraphical : Program Files\Adobe\Flex Builder 3\sdks\3.0.0\themes\AeonGraphical
Original :
C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\projects\framework\assets

En tout cas super

5. Le lundi 12 mai 2008 à 01:04, par Phiphou

Bonjour,

Avec ton tuto, sur Fireworks, et le mien (blog.phiphou.com/index.ph...
sur Flash, manque plus que ceux sur Photoshop et Illustrator ! Qui s'y colle ? Remarquez, pour ces deux derniers, c'est quasi pareil que pour celui là.

...même si on enlève les euuuh et autres hésitations...

De ce point de vue là, je te bats allègrement :=)

Très bon tuto en tout cas. Merci

6. Le lundi 12 mai 2008 à 14:50, par Erick

@Iteratif : salut msieur :). Pour ma part, tout va plutôt bien depuis ton passage chez les gônes ! comme tu vois je m'essaye à des ... euh .. nouvelles expériences :D.
Pour ce qui est des thèmes fournis par Adobe, ils sont très bien... pour commencer... mais maintenant j'aime bien partir from the scratch... On s'amuse comme on peut !!!
Et toi ? ça roule ? Aux vues de l'actu de Indigo, j'imagine que t'as pas tellement profité du soleil ces derniers temps ;).

@Phiphou : bien le bonjour, merci pour le lien j'avais oublié l'existence de ton tuto. Je le rajoute dans le corps de l'article.
Pour ce qui est de photoshop/ illustrator, je crois que ça va... je vais laisser passer mon tour :). Par contre, je vais jeter un coup d'oeil à Degrafa. t'as déjà testé ?

7. Le samedi 17 mai 2008 à 22:01, par _Stef

Salut,

pour ma part, j'utilise simplement un swf normal avec simplement un nom d'export qui va bien sur mes movieClips et que j'utilise dans flex avec la propriété stylename et une liaison via un css.

Simple et euuuh... vecto

Dans le css ça donne

.allMusic
{
upSkin:Embed(source="../assets/skin.swf", symbol="Button2_upSkin");
overSkin:Embed(source="../assets/skin.swf", symbol="Button2_overSkin");
downSkin:Embed(source="../assets/skin.swf", symbol="Button2_downSkin");
}

et dans le flex

<mx:Button useHandCursor="true" buttonMode="true" styleName="allMusic" click="audio(event)" horizontalCenter="-15" top="93"/>

Tu utilises quel soft pour le screencast ? ET juste un truc, il manque un petit zoom, parce que la pour les dossiers de calques on te croit sur paroles hein ...