PRE-REQUIS
connaissance:
Une première expérience avec Catalyst est fortement conseillée. On considérera ainsi comme acquis la compréhension générale du fonctionnement de Catalyst et des différents panneaux qui le composent. Catalyst s’appuie massivement sur la notion d’état, il est donc préférable de connaître un minimum sur cette notion telle qu’elle est implémentée dans Flex/Flash Catalyst pour profiter pleinement de ce tutoriel.
niveau utilisateur:
Ce tutoriel s’adresse à des utilisateurs de niveau intermédiaire. Les concepteurs ont voulu un outil facile à prendre en main, c’est pourquoi je pense qu’un débutant curieux pourrait malgré tout s’en sortir. Son utilisation deviendra notamment rapidement très familier aux utilisateurs de la suite Adobe et en particulier Illustrator ou Photoshop. Au cours de ce tutoriel, nous ne nous appuierons pas sur le code généré pour ne pas trop alourdir ce tutoriel. Je pense malgré tout que c’est un bon réflexe à prendre pour les devigners (comprendre développeur-designer) auxquels le logiciel s’adresse en particulier pour bien comprendre le fonctionnement de l’outil.
logiciels:
Adobe Flash Catalyst Cs5+
Adobe Illustrator CS5+ (optionnel)
fichiers sources:
af.tutoriel.fcbe1-sources.100611.zip
PRESENTATION
En surfant sur le net, je suis tombé sur le site wokine.fr. Jetez-y un petit coup d’oeil. Le système de navigation implémenté est assez répandu mais efficace et agrémenté d’idées simples améliorant la perception des effets. Pour ma part, j’ai voulu voir si on pouvait le réaliser facilement avec Flash Catalyst sous-entendu sans la moindre ligne de code. On tachera toute fois d’orienter nos choix d’implémentation pour ne pas se fâcher avec son collègue développeur qui sera chargé de reprendre le prototype pour réaliser la version finale.
Au cours de ce tutoriel, nous réaliserons les tâches suivantes:
- import d’un design réalisé sous Illustrator
- gestion des états d’un composant et de leur implémentation par Catalyst
- réalisation de composants génériques
- réalisations de transitions de type fondu, interpolation de mouvement ou de couleurs
- ajout d’interactions utilisateurs de type clic, rollover et rollout
- ajout d’effet de filtre
Pour se donner un peu de baume au cœur, jetons un petit coup d’œil sur l’application que nous allons réaliser (Désolé pour la qualité mais la conversion de la vidéo vers Youtube a fortement dégradé le son).
La suite du tutoriel est disponible au téléchargement ici.
Mots-clefs : adobe, catalyst, illustrator, tutoriel
