Share
1er juin 2009; la date à laquelle Adobe a publié son dernier outil destiné aux "concepteurs et développeurs". C’était presque le slogan de Flash Catalyst, précédemment nommé "Thermo".
Jetons un premier coup d'œil à cette application puissante qui promet aux concepteurs qu'ils pourront désormais participer au développement d'applications Flash et de sites Web..
Flash Catalyst, précédemment appelé "Adobe Thermo", est une application spécialement développée pour les concepteurs et les développeurs. Il peut facilement transformer n'importe quelle disposition de Photoshop ou Illustrator en un site Web complet, animé et interactif ou en une application Internet riche basée sur la plate-forme Flash. Le résultat final de Flash Catalyst peut être importé et modifié par Flash Builder (anciennement Flex Builder), permettant ainsi aux développeurs d’avoir une belle mise en page prête à être codée. L'application regorge de fonctionnalités qui permettent aux concepteurs d'adopter une mise en page simple, d'ajouter des effets, puis de publier sur une plate-forme flash sans avoir à écrire une seule ligne de code! C'est la puissance de Flash Catalyst.
Après le tout premier exposé de MAX sur un nouvel outil fantastique appelé "Thermo", tous les blogs et forums de la communauté RIA et Flash étaient remplis de vidéos étonnantes. Dans ces vidéos, nous avons pu voir une structure statique Adobe Illustrator en cours de transformation en une application entièrement fonctionnelle en quelques minutes. Adobe se préparait à impressionner encore plus…
C'était en octobre 2007, alors que Thermo devenait Catalyst, une autre année s'écoulait et nous ne pouvions toujours trouver que des photos rares lors de quelques conférences. Dans le même temps, Flex 4 a commencé à attirer l'attention avec des informations presque hebdomadaires. Thermo semblait avoir disparu.
Novembre 2008; une date inattendue! Adobe a distribué des aperçus gratuits de Flash Catalyst, uniquement pour MAC OS et Gumbo (Gumbo était le nom de code de Flash Builder 4). Les développeurs et les concepteurs ont commencé à accorder une plus grande attention aux laboratoires Adobe, mais malheureusement, jusqu'en juin 2009, rien de plus n'était entendu…
Juin. 2009. Le premier jour du mois (enfin), Adobe a publié la première version bêta publique de Flash Catalyst. Eh bien, les choses commencent ici!
L'IDE est bien conçu et divisé, il est intuitif et les éléments sont faciles à trouver. Je vais discuter de ces panneaux un peu plus loin. Notez que mon système d'exploitation est en français, donc si vous connaissez déjà FC et que votre système d'exploitation est dans une autre langue, vous constaterez peut-être quelques différences, mais je les nommerai également en anglais..
En haut à gauche, le tout premier panneau que nous voyons est celui des "États / Pages". Ce sont les états de l'application. Imaginez, dans le premier état, vous avez un panneau de connexion, sur le second, vous avez l'application principale. Ces états sont facilement identifiables car l’image suivante montre!
L'application se chargera sur le premier état et si vous voulez passer au second état, vous devrez effectuer quelques astuces (enfin… un seul tour - currentState = "Page2"), mais dans Flash Catalyst, les choses sont faites avec un certain style. . Nous mettons un simple bouton sur la "scène" et le faisons passer à "Page2" avec l'interaction onClick.
Le deuxième panneau est l'endroit où nous mettons toutes nos données, si vous importez un fichier Photoshop ou un fichier Illustrator, tous les éléments apparaîtront ici. Si vous travaillez avec Flash et Flex, vous pouvez considérer cela comme la scène principale. Voyez comme c'est similaire:
Vous pouvez également trouver un bouton dans le coin supérieur droit, qui rafraîchit la scène. Ceci est utile lorsque la scène contient beaucoup d'éléments et que, pour une raison quelconque, Flash Catalyst oublie de mettre à jour automatiquement les modifications..
Le troisième panneau est le panneau "Timelines" et il réserve de grandes surprises. Le catalyseur Flash a une chronologie, mais si vous vous attendez à ce qu'il fonctionne comme la chronologie de Flash, vous constaterez que vous vous trompez. Ce scénario est très limité et son objectif principal est de créer des animations fluides entre les pages (transition de la page 1 à la page 2 et inversées) avec des éléments et des effets simples tels que le fondu, le déplacement, la rotation. Ce panneau est peut-être un peu difficile à comprendre, mais vous penserez différemment dans un court laps de temps. Jetons un coup d'oeil!
Dans ce panneau, vous trouverez à gauche les transitions État / page et les séquences d'actions (non, cela n'a pas été traduit en français), où vous pouvez créer des actions et des effets personnalisés. Quand une "vraie" mise en page est chargée et transformée en éléments, elles apparaîtront sur cette timeline. Vous pouvez appliquer un effet spécifique à un seul composant. Cette chronologie fonctionne de manière similaire au panneau Animation Flash, mais vous spécifiez ici les heures de début et de fin de l'effet ou de la transition. Vous verrez dans l'image suivante de quoi je parle, cela a été fait avec une mise en page simple:
Comme je l'ai expliqué, vous trouverez à gauche les composants "Page1", au centre le scénario de l'animation et à droite (non illustrés auparavant), les composants "Page2". Vous pouvez mettre un effet séparé sur chaque composant latéral; Ici, les éléments "Page1" commencent à disparaître en fondu, puis à mi-chemin, les éléments "Page2" commencent à en fondu, ce qui donne un effet de transition très fluide..
Nous pouvons également voir l’une des meilleures fonctionnalités de Flash Catalyst ici; le bouton Aperçu (le petit bouton "Lecture" au milieu). Si vous avez des transitions, des effets ou des séquences, appuyez simplement sur ce bouton et vous verrez l'animation sur scène sans quitter l'EDI. C'est vraiment utile, crois-moi!
Le panneau suivant est le panneau "Utilitaires / Outils" dans lequel vous trouverez quelques composants natifs Flash / Flex tels que des formes, du texte, le zoom et des outils de sélection..
Au bas de celui-ci, vous avez le panneau "Calques / Layers" commun, où vous pouvez organiser vos éléments d'application. Si vous ouvrez un fichier PSD ou AI, l'ordre des couches restera le même. tout sera au même endroit. Si vous avez des choses bien séparées dans Photoshop ou Illustrator, vous en bénéficierez également ici! Vous avez votre mise en page importée tous ici. Si vous créez un projet à partir d'un modèle vide, c'est là que les éléments apparaîtront lorsqu'ils seront ajoutés à la scène. Voir le panneau:
Le panneau suivant est le plus complet. Il contient trois parties principales, les composants, la bibliothèque et le panneau "Données":
Voir à quoi ça ressemble!
Le dernier panneau est "Propriétés / Propriétés" où vous pouvez trouver des informations sur un élément sélectionné sur la scène. Par exemple, si vous cliquez sur un élément Texte, vous pouvez définir ici ses propriétés telles que la couleur, la police, la taille…
Enfin, le panneau magique "Sans nom", le panneau que j'avais précédemment appelé "Options de l'élément". C'est en fait le groupe le plus important de tous; il exécute toute la magie de Flash Catalyst. C'est un panneau arrière / gris-noir qui apparaît lorsque vous cliquez sur un élément de la scène. En cliquant sur une partie d'une mise en page, ce panneau s'ouvre et il contient 3 sections principales:
Voyons ça…
Eh bien, fondamentalement, notre IDE est présenté. Cependant, nous oublions une chose, une chose à laquelle les concepteurs ne sont peut-être pas intéressés, mais qui est importante pour les développeurs. Le code. Dans le coin supérieur droit, vous avez une liste déroulante dans laquelle vous pouvez sélectionner la vue Conception ou Code. Si vous cliquez dessus et que vous n'êtes pas familier avec flex, vous le fermerez probablement immédiatement, mais si vous êtes un développeur Flex, vous voudrez explorer cela attentivement. Vous trouverez de nombreuses nouveautés (en particulier si vous développez dans Flex 3) qui sont orientées vers Flash Builder 4. Le langage est MXML avec quelques éléments dans ActionScript. Vous verrez également un explorateur de projet où vous trouverez tout ce qui a déjà été converti en éléments et composants MXML d'application prêts à être utilisés dans Flash Builder. Ceci est un tout autre sujet et si vous voulez en savoir plus, je vous recommande de lire l'excellente critique que Jesse Freeman a écrite sur Flash Builder 4..
Une des autres choses intéressantes est que le projet est prêt à être utilisé et prêt à être visualisé. Il suffit d'aller dans Fichier> Exécuter le projet (CTRL + ENTRÉE sur Windows), votre projet est compilé et ouvert dans un navigateur..
Cela peut être mal compris, Flash Catalyst n’est pas facile à utiliser et pourrait bien être déroutant au début, mais oui! Cela rend vraiment les choses simples. Créez simplement votre mise en page ou récupérez-la auprès de votre concepteur dans un fichier Photoshop ou Illustrator, sélectionnez votre fichier et créez-en un nouveau projet Flash Catalyst. Les choses se ressemblent dans Flash Catalyst. À partir de là, convertissez simplement les éléments auxquels vous souhaitez ajouter un comportement, générez des pages, des transitions, testez le projet et enregistrez-le. C'est tout! C'est prêt pour les mains du développeur!
Cela n’intéresse pas forcément les concepteurs, mais c’est le point le plus difficile de FC. Comme le code de tous les éléments et propriétés est généré automatiquement, il devra être révisé correctement et probablement modifié pour fonctionner en fonction des besoins du développeur. Dans Flash Catalyst, nous pouvons déjà voir le nouveau moteur vectoriel Flash en action. Si vous chargez des éléments vectoriels dans Flash Catalyst, vous trouverez dans le code des éléments "Groupes", "Trait", "Rect", "Remplissage" et "Chemin" avec des données. Voici comment Flash conçoit des éléments vectoriels. Une simple flèche vectorielle produira ce code:
Ces éléments sont l’implémentation de la nouvelle spécification Flash 10 / Flex FXG qui permet aux développeurs d’utiliser des éléments de style XML ou des groupes d’éléments à dessiner en flash, en utilisant non seulement des éléments natifs tels que des cercles, des rectangles, du texte ou des courbes, mais également des graphiques plus complexes. indiquant des informations vectorielles.
Vous trouverez de nombreux états et principalement du code MX 4 Flex 4 légèrement différent de Flex 3 et tout à fait nouveau pour les développeurs Flash ou les débutants de Flex..
C'est une application fantastique! N'ai aucun doute!
Pour commencer, nous, les développeurs, pouvons désormais réellement collaborer avec les concepteurs, leur montrer le point de vue du développeur et certaines interactions des applications avant de passer au développement de l'application, ce qui accélère l'ensemble du processus. Il sera facile de trouver des applications fantastiques et des sites construits avec FC, la créativité envahira désormais les applications Internet riches. Cela dit, les développeurs devront faire attention. Le code généré est assez volumineux et chaque modification a un impact sur la mise en page. Placer des éléments dans Flash Catalyst et obtenir du code bien généré est une chose, mais coder quelque chose selon le code FC va parfois brûler le cerveau d'un développeur.!
Flash Catalyst apporte de nombreuses nouvelles choses à explorer, mais pour être honnête, je m'attendais à plus. La bibliothèque de composants est réduite, l'interaction avec les éléments est également réduite, le texte importé ne conserve pas toujours sa qualité d'origine et certaines choses ne fonctionnent pas correctement (en particulier dans DataList avec quelques lignes…). Cela dit, ce n'est qu'une version bêta, non?! Nous devons encore attendre la version finale.
Définitivement, Flash Catalyst atteindra les masses, mais le code généré et l’interaction Flash Builder 4 auront besoin de temps pour gagner en popularité, principalement parce que les nouvelles spécifications Flex 4 sont très différentes de Flex 3..
Pour ceux qui souhaitent en savoir plus sur Flash Catalyst, consultez la page Didacticiel Catalyst sur Adobe Labs..
Merci d'avoir lu, ce serait génial d'entendre ce que vous avez à dire!
Accentsconagua