Share
Au cours de ce didacticiel Basix, nous allons apprendre à ajouter les dernières fonctionnalités à notre projet Flash Catalyst existant. Nous examinerons les interactions fluides entre les pages, les actions de survol supplémentaires, les sons et les vidéos. Comme avec le tutoriel précédent, aucun code n'est requis!
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 dans un répertoire approprié.
Découvrez le résultat final que nous visons. En couvrant les bases de Catalyst, nous allons apprendre à créer des transitions de page douces, à appliquer une animation 3D, à ajouter du son à nos boutons et à ajouter de la vidéo..
Ouvrez Adobe Flash Catalyst. Dans la fenêtre de démarrage, sélectionnez Ouvrir un projet> Fichier téléchargé. Sélectionnez Galaxy2.fxp, que vous pouvez obtenir à partir du téléchargement source en haut de la page..
Ouvrez le panneau Montage en double-cliquant sur son nom. Nous sommes présentés avec toutes les interactions possibles entre les pages:
Si vous souhaitez voir des interactions relatives à une page donnée, écrivez son nom dans la fenêtre de recherche:
Vous pouvez également le faire avec le menu déroulant:
Passons maintenant à certaines choses concernant la chronologie elle-même. Ici nous avons 5 points importants:
Ok, vous connaissez maintenant la chronologie afin que nous puissions ajouter une animation à nos pages. Commençons par la transition entre la page principale et la page Photoshop. Dans le panneau Montage, avec le calque Photoshop sélectionné (s'il est sélectionné, le fond bleu apparaît), cliquez sur la flèche située à côté du bouton Transition douce:
Nous voyons ici le menu qui nous permet de définir certains paramètres. "Durée" est la durée de l'animation; J'ai décidé de le régler sur 1 seconde et pour le chronométrage, j'ai utilisé l'option "Smart Smoothing". Nous n'avons pas besoin de "Simultaneous" car nous appliquons uniquement l'animation à un seul calque. Et bien sûr, nous n’avons pas besoin de tout écraser, laissez donc le champ de coche vide..
Nous avons appliqué une transition en douceur à l'une des pages. Regardons l'image et voyons ce qui a changé:
Tout d’abord, vous pouvez prévisualiser l’effet que nous avons défini à l’aide du bouton Lecture. Ici, vous pouvez voir que nous avons maintenant une ligne continue bleue avec les mots "Fade In" à l'intérieur. Cela signifie que nous avons appliqué l'animation à notre calque Photoshop. Cliquez sur cette ligne continue bleue et examinez le panneau Propriétés:
Nous voyons qu'il est écrit Fade au sommet; cela indique le nom de l'effet appliqué. Nous avons quelques options supplémentaires: Opacité est défini sur Auto, mais si vous souhaitez l’ajuster vous-même, décochez simplement la case et définissez vos propres paramètres dans "De" et "Vers". Vous pouvez également voir que nous pouvons modifier la durée et même définir le temps de retard de l'effet. L'assouplissement est une autre option importante, en particulier si vous connaissez bien Flash Professional. Je vais le laisser faire défaut, mais n'hésitez pas à expérimenter.
Nous devons ensuite appliquer l’animation au bouton Quitter. Sélectionnez le calque "Bouton" dans le panneau Montage (rappelez-vous - la transition principale> Photoshop doit être sélectionnée dans la fenêtre inférieure gauche du panneau Montage), puis cliquez à nouveau sur la flèche située à côté du bouton Transition douce. Dans la boîte de dialogue, définissez la durée sur 0,5 seconde:
Séparons le temps de l'animation. Sélectionnez le calque "Bouton de sortie". Nous avons deux méthodes pour le faire.
Accédez au panneau Propriétés et définissez le retard du calque du bouton Quitter sur 1 seconde:
Vous pouvez également sélectionner la ligne verte sur le calque du bouton Quitter afin qu'elle devienne bleue continue, puis cliquez dessus et faites-la glisser vers le segment de la timeline qui nous convient (dans notre cas, il s'agit d'une seconde):
Il existe un autre moyen d’ajuster la durée de l’animation. C'est très important et très facile à utiliser. Pour modifier simplement la durée de l'animation avec le calque sélectionné, placez le bouton gauche de la souris sur la petite flèche située à la fin du segment d'animation, faites-la glisser dans la direction souhaitée (prolongement à droite, à gauche - raccourci):
Passons à une autre page. la page flash. Dans le panneau "Scénarios", sélectionnez Principal> Transition Flash. Encore une fois, configurez le même effet de fondu pour les deux couches que celui décrit aux étapes 5 à 7:
Ajoutons plus d'interaction. Dans le panneau "Scénarios" avec le calque "Flash" sélectionné, cliquez en bas au centre sur le bouton "+ Ajouter une action". Dans le menu déroulant, sélectionnez Rotation:
Nous avons maintenant sélectionné trois éléments de notre couche Flash et vous pouvez voir que l'effet Rotation est appliqué à chacun d'entre eux:
OK, choisissez l’un des effets de rotation (l’effet de rotation sur lequel vous avez cliqué devient bleu fixe) dans le panneau Scénarios et accédez à la fenêtre Propriétés. Une fois que vous avez défini la première option sur un angle spécifique, l’angle lui-même est défini sur 360 ° - la rotation s’achève. Une durée de 0,5 seconde devrait suffire, mais vous êtes libre d'expérimenter - mon but est seulement de vous montrer ce que vous pouvez faire :)
Une fois que vous l'avez appliqué à l'un des éléments, définissez les mêmes paramètres sur les deux éléments restants, afin qu'ils aient tous les trois une rotation de 360 ° et une durée identique. Ensuite, vous pouvez prévisualiser l'animation. Nous avons maintenant des effets Rotation et Fade In pour cette page Flash.
Passons à autre chose et ajoutons des effets à la page Dreamweaver. Dans le panneau Montage, sélectionnez Général> Transition Dreamweaver. Répétez les étapes 5 à 7 de la page pour obtenir un fondu en fondu:
Avec le calque Dreamweaver sélectionné, cliquez sur le bouton "+ Ajouter une action" et sélectionnez "Rotation 3D" dans le menu déroulant..
Vous devriez maintenant regarder quelque chose de similaire à ceci (l’effet Rotation 3D est appliqué aux trois éléments de la timeline):
Personnalisons-les. Sélectionnez l'une des animations Rotation 3D et accédez au panneau Propriétés. Là nous avons deux options. Outre la durée, le délai et l’assouplissement, nous avons trois types de rotation. Donc, de gauche à droite: Premier - fait pivoter l'objet autour de l'axe X, Second - fait pivoter l'objet autour de l'axe Y et le troisième - il s'agit d'une simple rotation présentée dans la page Flash. Et pour chaque type de rotation, nous pouvons définir l’angle de démarrage et sa valeur finale..
Pour DreamweaverRect, j'utilise la rotation de 0 à 360 ° autour de l'axe des ordonnées:
Pour DreamweaverIcon et Text, j'utilise la rotation de 0 à 360 ° autour de l'axe X avec un délai de 0.5:
Donc, vous devriez avoir l'image suivante et pouvez tester votre animation avec le bouton Lecture:
La prochaine chose que nous devrions accomplir est de définir la vidéo. Nous ajouterons une vidéo à la page Flash, car la vidéo elle-même concerne Flash Catalyst et Flash Player. Pour ce faire, choisissez notre page Flash. Ensuite, allez dans Fichier> Importer> Fichier vidéo / audio. Choisissez le fichier Adobe.flv téléchargé à partir du zip source lié en haut du didacticiel..
Nous avons ensuite besoin d’affecter le fichier au groupe Flash. Sélectionnez simplement le lecteur vidéo dans le panneau Calques, maintenez le bouton gauche de la souris enfoncé et faites glisser ce lecteur vers le calque du groupe Flash jusqu'à ce qu'il s'agrandisse et l'insérez dans le calque. Ceci fait, vous devriez voir ce qui suit:
Cachons maintenant l’icône Flash et le texte pour qu’il n’y ait que de la vidéo. Pour ce faire, cliquez sur les icônes des yeux sur ces calques pour les faire disparaître (vous pouvez également supprimer ces calques, à vous de choisir - il suffit de sélectionner ces calques et de cliquer sur l'icône de la corbeille dans le coin inférieur droit du panneau Calques)..
La prochaine chose à faire est de redimensionner notre vidéo afin qu’elle tienne dans le rectangle. Sélectionnez le calque "Video Player" et placez la souris sur le coin supérieur gauche de la vidéo pour pouvoir voir deux flèches dirigées vers des directions différentes (la souris doit se situer au-dessus du carré blanc). Maintenez le bouton gauche de la souris et commencez à faire glisser. Vous remarquerez également qu'il y a d'autres carrés blancs et le carré bleu au centre. De la même manière, faites-les glisser de manière à positionner la vidéo de manière centrale (si vous voulez faire glisser la vidéo elle-même, pas ses coins, pointez la souris au centre de la vidéo et faites-la glisser)..
Passons au panneau des propriétés et explorons ce qui est proposé.
Tout d'abord, nous voyons la position de la vidéo sur scène, sa largeur et sa hauteur. Si vous souhaitez les ajuster comme je l'ai fait avec les options suivantes: X - 179, Y - 89, Largeur (W) - 281, Hauteur (H) - 154. Ensuite, vous remarquerez que nous avons déjà les commandes vidéo - la Le panneau Propriétés nous offre deux contrôles vidéo prédéfinis (filaire et standard), mais nous ajouterons nos propres boutons pour contrôler la vidéo. Réglez-le donc sur Aucun..
Pour le mode échelle, j'ai également choisi de définir "Aucun". En plus de None, nous pouvons définir le mode d’échelle sur Stretch, Letterbox ou Zoom - vous pouvez ici expérimenter et définir le meilleur qui vous convient. Si vous voulez avoir un aperçu du résultat, cochez la case "Lecture automatique" (rappelez-vous que lorsque vous avez terminé vos essais, décochez l'option Lecture automatique)..
En plus de la lecture automatique, nous avons l’option "Loop" et "Muted". Nous n'avons pas besoin de faire de la vidéo en boucle, laissez donc cette option décochée. Nous souhaitons également entendre le son. L'option Muet doit également être décochée..
Passons maintenant aux sous-menus Composant et Apparence. Assurez-vous que l'option "Accepter l'événement souris" est cochée (si ce n'est pas le cas, nous ne pourrons pas définir nos propres boutons sur la vidéo). L'option "Info-bulle" nous permet d'écrire la description de la vidéo et lorsque l'utilisateur la survole, il verra la description..
"Volume", je pense, est clair., /
Dans l'option Apparence, vous pouvez définir un certain "Mode de fusion". Vous pouvez également cocher l'option "Curseur à la main" pour que, lorsque l'utilisateur survole la vidéo, la flèche de la souris se transforme en curseur de main..
Il est maintenant temps de régler les boutons de contrôle sur notre vidéo. Avec le groupe de calques Flash sélectionné, allez dans Fichier> Importer> Image et importer Play.png. Faites la même chose pour Stop.png. Convertissez-les en boutons et placez-les sous la vidéo (il est toujours recommandé de les renommer). Vous pouvez également leur appliquer certains effets, mais ce n’est pas nécessaire. J'ai réglé l’opacité à l’état Up sur 75 (si vous ne savez pas comment procéder, assurez-vous de voir mon premier tutoriel sur Flash Catalyst discuter de telles choses).
… Et la situation dans le panneau des couches devrait être la suivante:
La partie la plus simple à ce jour - allez dans le panneau Interactions, sélectionnez le bouton Lire et, dans le panneau Interactions, choisissez les options suivantes: Premier - Cliquez, deuxième - Lire une vidéo, troisième - sélectionnez notre vidéo "Adobe1.flv", quatrième - seulement quand dans Flash Page:
Faites la même chose pour le bouton Arrêter, mais au lieu de "Lire la vidéo", réglez-le sur "Arrêter la vidéo"..
Maintenant que nous avons défini les contrôles de notre vidéo, testons-le - appuyez sur Ctrl + Entrée ou allez dans Fichier> Exécuter le projet.
La dernière chose à faire est d’appliquer le son à nos boutons. Tout d'abord, importons le son. Accédez à Fichier> Importer> Fichier vidéo / audio et accédez au dossier racine de Flash Catalyst installé. Là, sélectionnez "Effets sonores / Flash Beep.mp3". Bien sûr, nous pouvons utiliser nos propres sons, mais je voulais vous montrer que Flash Catalyst est doté d’un ensemble de sons préinstallé. Choisissez ceux qui vous conviennent. Une fois qu'il est importé, vous pouvez en avoir un aperçu - allez dans le panneau Bibliothèque et, dans la partie inférieure, accédez au sous-dossier Médias, puis sélectionnez "Flash Beep.mp3". Vous remarquerez que le bouton Lecture apparaît dans la fenêtre supérieure. Si vous cliquez dessus, vous entendrez le son du bouton:
Remarque: Vous y trouverez également tous nos fichiers graphiques, supports et composants.
Finalisons notre projet et ajoutons du son aux boutons pendant leurs états over. Pour ce faire, sélectionnez l’un des boutons du panneau "Couches", passez à son état final. Dans le panneau "Scénarios" avec l'icône de la scène sélectionnée, cliquez sur le bouton "+ Ajouter une action" et sélectionnez Effet sonore:
Dans la boîte de dialogue, sélectionnez "Flash Beep" et cliquez sur OK:
La situation sur la chronologie devrait être la suivante:
Répétez cette étape pour les icônes Flash et Photoshop et vous avez terminé. Lancer le projet!
Vous savez maintenant non seulement convertir votre illustration en composants, mais également ajouter des interactions fluides entre les pages, appliquer différentes variantes d'animation, utiliser la vidéo et le son dans vos projets et les contrôler. Flash Catalyst est une application étonnante et vous pouvez désormais facilement écrire une seule ligne de code pour donner vie à vos œuvres.
J'espère que vous avez apprécié suivre ce projet et apprendre à utiliser Flash Catalyst. Pratique et vous obtiendrez d'excellents résultats! Merci aussi d'avoir lu mon tutoriel :)
Accentsconagua