Share
Ceci est un tutoriel Basix au cours duquel nous allons construire notre premier projet dans Flash Catalyst à partir d’un fichier PSD préconfiguré. Nous allons couvrir les bases de Catalyst: convertir l’art en composants, créer des effets et rendre ces composants vivants - aucun code requis!
Dans ce didacticiel, vous apprendrez à gérer les illustrations dans Flash Catalyst et à les rendre vivants..
Dans la deuxième partie du tutoriel, après vous être familiarisé avec le programme, nous allons faire des choses plus compliquées et ajouter plus d'interactivité..
Remarque: vous pouvez enregistrer votre projet Flash Catalyst à tout moment, puis le poursuivre à votre guise. Pour ce faire, allez dans Fichier> Enregistrer sous…, donnez un nom au projet et enregistrez-le où vous le souhaitez.
Voici le résultat final que nous allons atteindre. En apprenant les bases de l'utilisation de l'un des derniers produits d'Adobe, nous allons convertir nos illustrations en composants, créer des effets de rayonnement, spécifier des icônes et effectuer des transitions de pages. Nous allons également créer une icône Adobe sous forme de bouton menant à une URL spécifiée: http://active.tutsplus.com
Cela peut sembler être un exemple extrêmement basique. Ce qui est important, c'est la manière dont nous réalisons l'interactivité. L'ensemble du processus est Pointer et cliquer, il n'y a pas une seule ligne de codage impliquée.
Ouvrez Adobe Flash Catalyst, puis dans la fenêtre de démarrage, sélectionnez "Créer un nouveau projet à partir d'un fichier de conception"> "À partir du fichier Adobe Photoshop PSD ..."..
Sélectionner Galaxy.PSD (vous pouvez l'obtenir à partir du téléchargement source en haut du didacticiel). Assurez-vous que l'option "Importer les calques non visibles" est cochée et appuyez sur OK..
Tout d’abord, nous devons affecter les soi-disant "États" à notre projet. Les états (également appelés "pages") représentent les changements qui surviendront après que les utilisateurs ont effectué certaines actions (par exemple, il ou elle appuie sur un bouton).
Dans notre projet, l'objectif est le suivant: après que l'utilisateur ait cliqué sur l'une des icônes (Flash, Photoshop ou Dreamweaver), un rectangle contenant des informations sur le produit apparaît. Comme nous avons trois icônes, nous devrions ajouter trois États supplémentaires (Pages). Pour ce faire, appuyez trois fois sur "État en double" dans le panneau Pages / États. Cela crée trois copies de notre page principale, dans laquelle nous apporterons des modifications.
Il est maintenant sage de définir les noms des états. Double-cliquez sur le nom de chaque état et changez-le en quelque chose de significatif. J'ai choisi les noms suivants commençant par le premier état: Principal, Photoshop, Flash, Dreamweaver. Je vous recommande de donner les mêmes noms à ces États - cela vous aidera à suivre le didacticiel et à éviter toute confusion..
Remarque: Il est très important de garder votre projet structuré et d'attribuer des noms significatifs à vos composants. Cela vous aidera à trouver ce dont vous avez besoin et à décider où placer vos futurs actifs..
Nous avons donc attribué les états à notre projet. Créons maintenant des boutons. Pour ce faire, choisissez le groupe de calques Flash. Le panneau HUD devrait apparaître (sinon appuyez sur F7). Entre parenthèses, vous verrez "2 éléments", indiquant que deux éléments sont sélectionnés. Maintenant, cliquez Convertir l'illustration en composant> Choisir un composant et dans le menu, choisissez Button et cliquez dessus. Cela transformera notre groupe de couches en un bouton. Faites de même avec les groupes Photoshop et Dreamweaver.
Après cela, dans le panneau des couches et dans le panneau HUD, il devrait ressembler à ceci (notez "bouton" dans le panneau HUD et dans le panneau des couches, nos groupes sont convertis en couches avec le nom du bouton):
La prochaine chose à faire est d’attribuer des états à nos boutons. Si vous connaissez bien Flash Professional, vous savez que les boutons existent dans quatre états. Il en va de même ici. Dans notre projet, nous sommes intéressés par les états Over et Down.
Permettez-moi de clarifier le sens de tous les états pour ceux qui ne sont pas familiers avec eux.
Commençons par l'état Over du bouton Photoshop - dans le panneau HUD, cliquez sur "Etat Over". Attirez votre attention sur le panneau Pages / États où nous n’avons pour le moment que quatre États (Haut, Sur, Bas, Désactivé). Vous pouvez également voir que seul notre bouton est entièrement visible et que l’autre illustration est estompée en arrière-plan..
Jetez également un coup d'œil à notre panneau de calques où vous pouvez voir le groupe Photoshop:
Développez le groupe Photoshop. Sélectionnez le calque PhotoshopIcon dans le panneau Calque, puis allez à Panneau de propriétés> Filtres> Ajouter un filtre> Glow. Choisissez la couleur que vous aimez (j'ai utilisé la couleur de l'icône - # 179AFF), réglez Flou sur 16 et Force sur 1.
Remarque: Rappelez-vous que tout cela est fait dans l'état over over dans le panneau Pages / States.
Choisissez la couche Rectangle dans le panneau Calque. Regardez la scène et vous verrez que l'objet est sélectionné, mais qu'il se trouve derrière PhotoshopIcon. Étendez simplement le rectangle en plaçant la souris sur le côté droit du rectangle, définissez la flèche au milieu entre les coins supérieur et inférieur. Prolongez-le pour avoir l'espace nécessaire pour écrire le libellé "Photoshop".
Nous avons donc étendu le rectangle. Maintenant, prenez l'outil Texte (raccourci T) et écrivez en haut du rectangle le mot "Photoshop". Dans le panneau Propriétés de l'outil Texte, j'ai choisi les propriétés suivantes (vous pouvez choisir les mêmes):
Pour le moment, vous devriez avoir quelque chose qui ressemble à ceci (j'ai désélectionné les calques):
OK, nous avons défini le statut supérieur pour le bouton Photoshop - vous pouvez tester votre projet avec le raccourci Ctrl + Entrée ou aller à Fichier> Exécuter le projet. Si vous avez suivi le didacticiel et que vous avez tout fait correctement, l'icône Photoshop devrait briller et le texte avec un rectangle devrait apparaître pendant que vous passez la souris sur le bouton..
De retour dans notre projet, vous pouvez accéder à la scène principale en cliquant simplement deux fois sur l’espace vide ou en appuyant sur Echap du clavier. Vous pouvez également cliquer sur les liens de navigation dans le coin supérieur gauche de la scène où vous voyez Galaxy / PhotoshopButton.
Répétez les étapes 7 à 9 avec les boutons Flash et Dreamweaver. Notez que dans vos effets Glow, il est préférable d’utiliser les couleurs des icônes..
Cette étape est facultative. J'aimerais ajouter de l'éclat lorsqu'un utilisateur clique sur l'un des boutons. Pour ce faire, nous sélectionnons l'un des boutons du panneau Calque, puis choisissez État désactivé dans le panneau HUD. Ensuite, dans le panneau Calque, accédez au groupe Dreamweaver (ou au groupe que vous préférez aborder en premier), sélectionnez le calque DreamweaverIcon. Une fois là-bas, allez dans le panneau Propriétés, choisissez Filtres> Ajouter un filtre> Lueur et sélectionnez les préférences de votre choix (j'ai utilisé du gris foncé- # 333333). Répétez cette étape pour les autres groupes.
Au cours de cette étape, nous allons convertir la couche AdobeIcon en un bouton et attribuer des curseurs de main à nos icônes. Tout d'abord, sélectionnez la couche AdobeIcon. Accédez au panneau HUD, puis cliquez sur le bouton Choisir un composant>. Une fois que vous avez terminé, sélectionnez le nouveau bouton, allez à Apparence et cochez la case "Curseur à la main". Faites cela pour tous les autres boutons (Photoshop, Flash et Dreamweaver)..
Si vous testez votre projet, vous remarquerez que le curseur de la main apparaît lorsque nous survolons les icônes. Nous avons montré à nos utilisateurs que ces icônes sont des boutons. L'étape suivante consiste à affecter cette option à d'autres pages. Cela peut être fait très facilement - pour ce faire, il vous suffit de sélectionner l’une des icônes, d’aller dans le panneau HUD, puis de choisir l’option "Make Same in All Other States". En faisant cela, le curseur de la main apparaîtra aussi sur les autres pages.
Remarque: Vous remarquerez également que les calques avec icônes ont le même nom "Bouton". C'est bien pour un projet simple comme celui-ci, mais pour d'autres plus complexes, je vous recommande fortement de renommer les calques et de leur donner des noms significatifs..
Nous sommes un peu plus près de la fin. Parlons maintenant des interactions. Dans Flash Catalyst, les interactions nous permettent de basculer entre différentes pages (états), d’aller vers une URL spécifique, de lire, de mettre en pause ou d’arrêter la vidéo..
Commençons par notre première interaction. Choisissez le bouton AdobeIcon et double-cliquez sur le panneau d'interactions s'il est masqué. Avec la couche sélectionnée, cliquez sur le bouton Ajouter une interaction:
Ici vous pouvez voir la liste déroulante. Comme nous sommes intéressés par l’interaction URL, choisissez les options suivantes:
En utilisant ces paramètres, nous indiquons à Catalyst que lorsqu'un utilisateur cliquera sur le bouton, il sera envoyé à l'URL attribuée et que le site s'ouvrira dans une nouvelle fenêtre de navigateur. Nous avons également défini que cette interaction n’est possible que lorsque nous sommes dans la page principale..
Créons maintenant les interactions entre les pages. Tout d’abord, nous devons déplacer la couche AdobeIcon afin qu’elle se trouve sous la couche de groupe Rectangles. Cela nous permettra de voir des rectangles au-dessus des autres objets. Pour ce faire, faites simplement glisser les calques pour en modifier l'ordre. L'ordre des couches suivant sera appliqué à tous les autres États:
Nous avons ensuite besoin de changer l'apparence de pages spécifiées en modifiant le contenu. Choisissez la page Photoshop. Dans le panneau Calques, sélectionnez le groupe de couches Rectangles et révélez-le en cliquant à l'endroit indiqué ici:
L'icône représentant un œil sera révélée et sur la page, vous verrez le rectangle Adobe Dreamweaver avec le texte et l'icône à l'intérieur. Comme il s'agit de la page Photoshop, nous ne devrions révéler que le contenu le concernant. Développez le groupe de couches Rectangle et désactivez les icônes pour les yeux des groupes Flash et Dreamweaver. Cela nous permettra de voir uniquement le contenu pertinent pour Photoshop:
Répétez ces actions pour les pages Flash et Dreamweaver afin que les rectangles visibles soient pertinents pour le logiciel..
Si vous avez tout fait correctement, les pouces de votre panneau Pages / States devraient ressembler à ceci:
Ajoutons maintenant l’interaction entre nos pages principales et Photoshop. Dans le panneau Pages / States, sélectionnez notre page principale. Ensuite, allez dans le panneau Calques et choisissez le bouton PhotoshopIcon. Comme précédemment, accédez au panneau Interactions et choisissez les options suivantes:
Répétez cette étape pour Dreamweaver et les pages Flash afin qu’en cliquant sur une icône, nous passions à la page correspondante..
Notre prochaine étape consiste à importer une image supplémentaire dans la bibliothèque afin de pouvoir lire la transition vers la page principale. Aller à la page Photoshop. Sélectionnez le groupe de couches Rectangle dans le panneau Calque. Choisir Fichier> Importer et sélectionnez l'icône exit.gif (là encore, elle est disponible dans le téléchargement source en haut du didacticiel):
L'image devrait apparaître au centre du rectangle:
Et le panneau de calque devrait apparaître ainsi:
Maintenant, avec l’aide de la souris, positionnez simplement l’icône Quitter dans le coin inférieur droit du rectangle blanc:
Flash Catalyst est suffisamment intelligent pour positionner l'image au bon endroit dans les autres pages. Il suffit de révéler l'image en cliquant sur l'icône en forme d'œil:
Nous devons maintenant convertir l’icône Quitter en bouton et définir un effet..
Sélectionnez l'icône Quitter, accédez au panneau HUD et convertissez-le en bouton, comme nous l'avons fait précédemment..
Sélectionnez l'état actif, puis dans le panneau Propriétés, choisissez Commun> Opacité. Définissez l'opacité sur 50. Cela nous permettra de révéler une opacité complète uniquement lorsque nous passons la souris sur le bouton ou appuyons dessus:
Ajoutons une simple interaction à notre bouton de sortie. Dans la page Photoshop, sélectionnez le calque avec l'icône, cliquez sur Ajouter une interaction comme précédemment et définissez les options affichées dans l'image ci-dessous. La seule différence est qu'il devrait jouer la transition vers l'état principal tout en étant dans n'importe quel état:
Vous avez terminé la première partie de ce didacticiel en deux parties consacré aux notions de base de Flash Catalyst. Appuyez sur Ctrl + Entrée ou Fichier> Exécuter le projet pour vérifier si tout fonctionne bien. Pour le moment, il devrait y avoir des effets lumineux, et l'icône Adobe devrait mener à l'URL que vous avez spécifiée. Les autres icônes (Photoshop, Flash, Dreamweaver) doivent jouer les transitions vers leurs pages et l'icône Quitter devrait reproduire une transition vers la page principale..
Dans la suite du didacticiel, nous allons apprendre à ajouter une animation à notre projet, à ajouter du son et à définir des vidéos..
Accentsconagua