sushiandbox.ru Mastering PC - Internet. Skype. Réseaux sociaux. Cours sur Windows.
Toutes les rubriques du site site
télécharger des tutoriels vidéo sur flash
Tutoriels vidéo Macromedia Flash 8
Vous avez une excellente occasion GRATUITE de voir et télécharger 11 leçons vidéo pour le travail dans le programme
Macromédia Flash 8 professionnels
================
===================
Télécharger le 1er tutoriel vidéo
Interface du programme affichée Macromédia Flash 8 Professionnel
et travailler avec des panneaux, où et lesquels se trouvent.
Comment activer (ou désactiver) les panneaux que vous voulez
Télécharger la 2ème leçon vidéo
Quels sont les composants interactifs du programme et comment vous pouvez commencer à les utiliser immédiatement.
Comment créer de NOUVEAUX objets et composants interactifs dans le programme - boutons, cases à cocher, boutons radio et autres cloches et sifflets.
Télécharger la 3ème leçon vidéo:
Comment définir les propriétés(par exemple, entrez un nom, une réaction au nom, etc.) aux composants standard et aux composants interactifs que vous venez de créer.
Il explique également : quel paramètre - ce qu'il signifie. Il montre également quelles valeurs et quels paramètres du programme doivent être définis.
Télécharger la 4ème leçon vidéo
Le code de script est le principal moyen de créer des films et des applications interactifs.
Comment l'utiliser pour entrer les principaux paramètres des composants et des objets contrôlés par l'animation du film. Où est l'éditeur de ce code scripté.
Télécharger la 5ème leçon vidéo
Il n'est pas nécessaire de créer des objets interactifs à chaque fois. Le programme dispose d'une bibliothèque d'éléments interactifs intégrés.
Le didacticiel vidéo traite de l'utilisation de la fenêtre de la bibliothèque. Où et comment trouver et activer des composants interactifs prédéfinis, ainsi que comment créer les vôtres.
Téléchargez la 6ème leçon vidéo
Caractéristiques cachées programmes qui peuvent grandement faciliter le travail avec lui et au-delà :) Comment et où trouver toutes les informations sur l'objet ou l'élément actuel.
Après tout, tous les objets d'un film ou d'un film ne peuvent pas être affichés dans la scène actuelle - ils peuvent être affichés dans des scènes supplémentaires Comment les afficher. modifier ou supprimer - vous apprendrez dans ce didacticiel vidéo.
Comment et où se déplacer entre scènes de cinéma, clip vidéo ou objets groupés.
Télécharger la 7ème leçon vidéo
Où sont barre d'outils du programme et ce qu'ils signifient comment sélectionner des actions sur des objets graphiques pour les modifier et les éditer.
Et aussi, comment et où des palettes d'écran supplémentaires sont affichées où se trouvent la fenêtre de travail du film et la zone de montage du film ou de la vidéo.
Quelle est la chronologie et où sont définies les propriétés de l'objet.
Télécharger la 8ème leçon vidéo
À propos du but et des fonctions du menu principal de Macromedia Flash 8 Professional - quoi et pourquoi il y a des sections dans le menu principal.
Télécharger la 9ème leçon vidéo
De quelles sections la barre d'outils se compose-t-elle et de quoi boutons ce dont ils sont responsables.
C'est très important, car il y a beaucoup de boutons, et même si vous avez une version russe Macromédia Flash 8 Pro et c'est bien quand ils vous expliquent depuis l'écran quel bouton est responsable du trait, du remplissage ou de la sélection.
Et si vous avez la version anglaise de Flash 8 installée sur votre ordinateur et que vous n'êtes pas très familier avec l'anglais, alors une leçon très nécessaire.
Télécharger la 10ème leçon vidéo
Les règles de mesure de la grille et les guides graphiques sont indispensables. Où se cachent-ils et quelle équipe peut les appeler.
De plus, il sera montré comment les déplacer dans l'espace de travail du film monté et, surtout, comment les faire disparaître plus tard :)
Et puis certaines personnes ne rigolent pas lorsque l'impossibilité de supprimer ces règles prend beaucoup de nerfs et de temps.Comment et où définir la couleur, l'épaisseur et la structure de la grille en fonction de vos besoins actuels.
Téléchargez la 11ème leçon vidéo
Lorsque le programme est lancé pour la première fois, toutes les barres d'outils disponibles dans le programme ne sont pas affichées Macromédia Flash 8 Professionnel
Où et comment trouver les panneaux nécessaires, que signifient les éléments du panneau principal le plus nécessaire et principal, et où se trouvent les commandes les PLUS nécessaires pour travailler avec le programme.
Bon visionnage !
Malgré le fait que la plupart des ressources d'apprentissage sont conçues spécifiquement pour la version anglaise, nous considérerons la version russe, car il existe une localisation dans le package Macromedia Flash 8 pour faciliter le travail.
Figure 1.3.1 - Fenêtre de l'éditeur Macromedia Flash 8 avec un document non ouvert
Dans la figure 1.3.1, nous voyons une fenêtre d'éditeur nouvellement lancée avec des barres d'outils inactives jusqu'à ce qu'un document soit créé ou ouvert, et une barre de menus. La fenêtre affiche un écran vous invitant à ouvrir les derniers documents modifiés, à créer un nouveau document et à créer à partir d'échantillons préparés. Également sur cet écran, il y a des liens vers des ressources flash d'entraînement et une case à cocher pour désactiver l'affichage de cet écran au démarrage de l'éditeur. Si vous cochez cette case, le flash démarrera sans écran d'invite et attendra vos actions avec un espace de travail vide.
Figure 1.3.2 - Fenêtre de l'éditeur Macromedia Flash 8 avec un document non ouvert
La figure 1.3.2 montre une fenêtre d'éditeur nouvellement lancée avec des barres d'outils inactives jusqu'à ce qu'un document soit créé ou ouvert, et une barre de menus. La fenêtre affiche un écran vous invitant à ouvrir les derniers documents modifiés, à créer un nouveau document et à créer à partir d'échantillons préparés. Également sur cet écran, il y a des liens vers des ressources flash d'entraînement et une case à cocher pour désactiver l'affichage de cet écran au démarrage de l'éditeur. Si vous cochez cette case, le flash démarrera sans écran d'invite et attendra vos actions avec un espace de travail vide.
Couches
comme les autres éditeurs graphiques plus puissant que MS Paint, Macromedia Flash fonctionne avec des calques. Les calques peuvent être créés, ordonnés (y compris conscients des dossiers, organisant ainsi une hiérarchie), supprimés, basculer la visibilité et modifier l'ordre de la superposition dans la zone gauche du panneau Chronologie à l'aide des boutons appropriés. Les calques du haut de la liste chevauchent ceux du bas de l'image. Une seule animation peut être créée par calque.
Animation
Il existe deux types d'animation en flash : le mouvement et la transformation.
Lors de la transformation d'une forme, vous pouvez contrôler la transformation elle-même et le changement de couleur. Ne fonctionne pas avec les symboles et les groupes
Lors du déplacement, vous pouvez modifier la teinte, la transparence et la taille. Nécessite qu'un personnage ou un groupe soit dans les images clés.
Couches spéciales
Flash 8 fait la distinction entre les calques de guide, les calques de masque et les calques de chemin.
Le type le plus simple de couches spéciales dans Programme flash Ce sont les couches dites guides. Leur seul but est d'aider à dessiner différents objets et à placer des symboles flash.
Les masques peuvent avoir des zones opaques forme libre, à travers lequel les calques masqués seront visibles, la partie du calque masqué qui se trouve sous la partie transparente du calque de masque sera masquée derrière le remplissage uni. Les masques peuvent participer à l'animation. Généralement utilisé pour présenter une partie d'une image ou pour faire apparaître ou glisser un calque masqué de manière spectaculaire.
Les calques de chemin sont un outil d'animation très puissant dans Flash. Technologie Flash vous permet de définir graphiquement la trajectoire du mouvement des objets, simplement en les "dessinant" sur l'écran, et il est possible de définir l'orientation de l'objet déplacé par rapport au chemin. Le calque-chemin est appelé le leader, le calque attaché au chemin est l'esclave.
Symboles
Il existe trois types de symboles dans Flash : Clip vidéo, Bouton, Graphique. Ce ne sont pas tout à fait des symboles au sens habituel. Le premier et le plus courant d'entre eux est le clip vidéo. Veuillez noter que la vidéo principale peut contenir autant d'autres vidéos que vous le souhaitez ! Ce type de caractère flash est communément appelé "clip" dans l'environnement de développement. Ce mot est devenu assez courant. À tel point que beaucoup considèrent qu'il est passé de mots d'argot à des termes établis. Un clip peut contenir tous les éléments qu'un clip principal peut contenir. En général, c'est un film à part qui vit sa propre vie. Par exemple, l'arrêt de la lecture du film principal n'affecte en rien la lecture des clips. Le deuxième type de symbole flash, également largement utilisé, est le bouton. Un bouton est un objet spécial axé sur l'interactivité : on suppose généralement que l'utilisateur "appuie" sur ce bouton avec un clic de souris et que quelque chose se passe. Lorsque l'utilisateur passe le pointeur de la souris sur le bouton, il change sa forme en "patte", comme il le fait traditionnellement lorsque la souris passe sur un lien hypertexte dans un navigateur. Certes, il ne s'ensuit pas encore que lorsque vous cliquez sur le bouton dans la vidéo, quelque chose se passera. Pour rendre le bouton "vivant", il est nécessaire de programmer les actions qui sont effectuées lorsqu'il est enfoncé (et également relâché, etc.). Et enfin, le troisième type de symbole flash est appelé objet graphique, ou simplement graphique (Graphic). Vous ne devez pas penser que de tels objets ne contiennent que des graphiques statiques. Ils peuvent également contenir une animation, mais contrairement aux films, ils sont toujours synchronisés avec le clip principal (ou clip "parent" si les graphiques se trouvent à l'intérieur). Si, par exemple, la lecture de la vidéo principale s'arrête ; arrêts et animation dans tous objets graphiques situé dedans.
Les boutons diffèrent des symboles discutés précédemment par leur chronologie. Il a 4 images - haut, dessus, bas, coup. Le contenu de chacune de ces trames correspond à l'état du bouton lors des événements, respectivement : 1 - le curseur de la souris est à l'extérieur du bouton, 2 - le curseur de la souris est sur le bouton et les boutons de la souris ne sont pas enfoncés, 3 - le la souris se déplace sur le bouton, bouton gauche enfoncé, 4 - sélection de la figure, en présence du curseur, sur laquelle le bouton fonctionnera (il peut ne pas correspondre à l'image du bouton ni en forme ni en position). script d'action flash macromédia
Tous les symboles présents dans le film sont placés dans la bibliothèque de symboles du film. Un symbole contenu dans une bibliothèque est appelé un motif. Un échantillon placé sur l'espace de travail du document est appelé une instance. Les instances sont utiles lorsque de nombreuses copies d'un symbole sont nécessaires. Certes, lorsque l'échantillon est modifié, toutes les instances sont automatiquement remplacées par la mise à jour. Les instances sont hautement personnalisables. Ils peuvent changer la luminosité, la teinte, la transparence. Vous pouvez également attribuer un comportement à une occurrence telle qu'un clip, un bouton ou un graphique, quel que soit son type. La bibliothèque vous permet de cataloguer des échantillons (les dossiers sont autorisés), de créer, d'importer, de supprimer et même de remplacer un échantillon par un autre. Passons maintenant à ActionScript.
Jusqu'à présent, nous avons examiné les films Flash qui ont joué sans intervention du spectateur du début à la fin. Cependant, Flash vous permet également de créer des applications interactives dans lesquelles l'utilisateur peut contrôler la présentation du contenu. Dans cette leçon, nous allons commencer à nous familiariser avec les éléments du langage de script Action Script et voir comment il peut être utilisé pour créer des applications interactives. Par exemple, créons un album photo avec des éléments d'interface interactifs. Mais avant de passer à la description d'Action Script, nous devons parler d'un autre type de symboles que nous avons ignoré jusqu'à présent - ce sont les symboles de bouton. Pour construire une interface interactive, ils sont simplement nécessaires.
Création de boutons
Le bouton est un clip vidéo interactif de quatre images. Lorsque nous attribuons un type de bouton à un symbole, Flash crée une chronologie à quatre images pour le nouveau symbole :
L'état haut est un cadre correspondant à la situation où le bouton n'est pas enfoncé et où le pointeur de la souris n'est pas situé sur le bouton ;
Sur-état d'un cadre illustrant l'apparence du bouton lorsque le pointeur de la souris est sur le bouton, mais que le bouton n'est pas enfoncé ;
A l'état bas, ce cadre montre l'apparence du bouton lorsqu'il est enfoncé ;
Hit-state définit la zone dans laquelle le bouton réagit à un clic de souris ; cette zone n'est pas visible dans le clip.
Pour créer un bouton, exécutez la commande Insert => New Symbol (vous pouvez taper le raccourci clavier Control + F8). Dans la boîte de dialogue Créer un nouveau symbole qui s'affiche, saisissez un nom pour le symbole du bouton (par exemple, but1) et sélectionnez le type de symbole Bouton.
Flash passera en mode d'édition de caractères, fournissant des images vers le haut, vers le haut, vers le bas et sur le coup. La première image, Haut, devient une image clé vide. Dessinons une vue non enfoncée du bouton dans ce cadre (Fig. 1).
Riz. 1. Bouton de cadre supérieur
Sélectionnons le deuxième cadre, marqué Over et correspondant à l'état lorsque le curseur est survolé le bouton. Insérons une image clé dans cette image (à l'aide de la commande Insérer => Image clé), à la suite de quoi une image clé apparaîtra qui répète complètement le contenu de l'image vers le haut. Changeons la couleur du bouton, comme le montre la Fig. 2.
Fig 2. Bouton sur-cadre
De même, ajoutons l'image suivante (Down-frame) et dessinons l'état enfoncé du bouton (Fig. 3).
Riz. 3. Bouton d'image vers le bas
Nous ne dessinerons rien dans le cadre Hit pour l'instant, mais nous reviendrons sur ce cadre un peu plus tard.
Passons à la scène principale, appelez la bibliothèque à l'aide de la commande Fenêtre => Bibliothèque et créez une instance du symbole du bouton en le faisant glisser sur la scène (Fig. 4.)
Riz. 4. Créez une instance du bouton en le faisant glisser depuis la bibliothèque
En conséquence, nous obtenons ce qui suit film. Comme vous pouvez le voir sur ce film, le bouton est enfoncé non seulement lorsque nous cliquons sur la zone centrale (de travail) du bouton, mais également lorsque nous cliquons sur le cadre qui l'entoure. Cela est dû au fait que si le cadre Hit n'est pas dessiné, la zone de travail du bouton correspondra au cadre Up.
Pour que le bouton soit enfoncé uniquement dans la zone de travail, il est nécessaire de définir cette zone dans le Hit-frame, c'est-à-dire de dessiner un bouton sans cadre (voir Fig. 5)
Riz. 5. Bouton Hit-frame
Après avoir ajouté le Hit-frame requis, nous obtenons ce qui suit film, dans lequel lorsque vous cliquez sur le cadre, le bouton n'est pas enfoncé.
Pour rendre un bouton interactif, il faut associer le fait d'appuyer sur le bouton à l'exécution de certaines commandes, c'est-à-dire décrire un certain scénario. Il existe un langage Action Script spécial pour définir des scripts dans Flash. Dans cette leçon, nous n'aborderons qu'une petite partie des capacités de ce langage, et à l'avenir nous reviendrons sur la structure et la syntaxe d'Action Script à mesure que les exemples de création de films interactifs en Flash deviendront plus compliqués.
Comprendre le script d'action
Action Script est un langage de script - jeu d'instructions, qui contrôlent les éléments d'une animation Flash. Les scripts d'action peuvent être intégrés dans un film ou stockés dans un fichier texte avec extension AS.
Lorsque vous intégrez un script dans un film, vous pouvez l'intégrer dans différentes parties du film. Plus précisément, les scripts d'action peuvent contenir des images clés, des occurrences de bouton et des occurrences de clip. En conséquence, les scripts sont appelés scripts d'image (Frame Action), script de bouton (Button Action) et script de clip (MovieClip Action).
Les scripts d'action sont exécutés lors de l'apparition de certains événements déclenchés par l'utilisateur ou le système. Le mécanisme qui indique à Flash quelle instruction exécuter lorsqu'un événement se produit est appelé un gestionnaire d'événements.
Action Script a sa propre syntaxe, un peu comme la syntaxe JavaScript. Flash MX 2004 prend en charge Action Script de tous Versions précédenteséclat.
L'un des principaux concepts d'Action Script est Actions - des commandes qui émettent des instructions lors de l'exécution d'un fichier SWF. Par exemple, gotoAndStop() envoie la tête de lecture vers une image ou un repère spécifique. Du mot Actions vient le nom du langage - Action Script (littéralement - script d'action). Avec la plupart des concepts de ce langage, nous nous familiariserons avec des exemples précis.
Album photo interactif
Démontrons l'utilisation de boutons pour contrôler un album photo - créez un ensemble de photos et ajoutez deux boutons qui feront défiler la photo vers l'avant et vers l'arrière.
Plaçons la première photo sur la timeline principale et ajoutons un bouton de l'ensemble standard. Accéder dossier souhaité devrait être fait Commande Windows=> Panneaux de configuration Bibliothèques communes => Boutons (Fig. 6).
Riz. 6. Ajouter un bouton de la bibliothèque standard
À la suite de l'exécution de cette commande, un panneau apparaîtra contenant un grand nombre de boutons pré-dessinés. divers types. Sélectionnons, par exemple, Key Buttons (boutons similaires aux touches du clavier), ouvrons le dossier correspondant, sélectionnons le bouton key-left (Fig. 7) et créons une instance de ce bouton (en le faisant glisser sur la scène).
Riz. 7. Éléments du dossier des boutons clés
Notez que lorsque vous placez le deuxième bouton (touche droite) sur la scène et que vous le déplacez pour l'aligner avec le premier bouton, le programme donne un indice (ligne pointillée) qui vous permet de positionner le bouton avec précision (Figure 8).
Riz. 8. Alignement automatique des boutons au même niveau
Pour ajouter un script, vous devez appeler l'éditeur d'Action Script à l'aide de la commande Fenêtre => Panneaux de développement => Actions ou en appuyant sur la touche F9. Si vous allez souvent écrire des scripts, cette commande clavier mérite d'être rappelée. En conséquence, l'éditeur Action Script apparaîtra (Fig. 9).
Riz. 9. Panneaux de l'éditeur Action Script
Si vous expérimentez en mettant en surbrillance différents éléments de la scène tout en surveillant les messages dans les panneaux de l'éditeur Action Script, vous constaterez que le programme suggère sur quel élément vous pouvez "accrocher" le code. Si vous sélectionnez un cadre sur la scène, l'inscription Actions - Cadre apparaît dans le coin supérieur gauche du panneau de l'éditeur, si vous cliquez sur le bouton, l'inscription Actions - Bouton apparaît, c'est-à-dire que le programme demande que le code vous entrez fera référence au script du bouton. Et si vous sélectionnez une photo, alors dans le champ destiné à la saisie du script, le message apparaîtra : La sélection actuelle ne peut pas avoir d'actions qui lui sont appliquées (le script ne peut pas être appliqué à cet objet sélectionné).
Nous allons attribuer un script à un bouton. À dernières versions ActionScript a la capacité d'écrire du code centralisé, c'est-à-dire du code situé à un seul endroit, et cette capacité vous permet de mieux comprendre les programmes volumineux. Cependant, dans exemples simples(que nous envisageons) d'attribuer un script à un bouton est parfaitement acceptable.
Ainsi, pour un bouton avec une flèche vers la gauche, nous devons formaliser le scénario suivant : "Si le bouton est relâché sur une certaine image, alors à partir de cette image, vous devez aller à l'image précédente." Conformément à la syntaxe du langage Action Script (Fig. 10), cela ressemblera à ceci :
La première ligne contient le gestionnaire d'événements du bouton on(), qui a le format suivant :
Ajoutons maintenant plusieurs images clés afin que les boutons créés dans la première image y soient copiés, et nous plaçons les photos nécessaires dans les images nouvellement créées.
Si vous exécutez le film créé pour l'exécution, les images seront lues en continu les unes après les autres et, par conséquent, nous devons tout d'abord donner la commande "Stop" sur la première image. Pour ce faire, ajoutez la commande correspondante au premier cadre (Fig. 11).
Riz. 11. Scénario attribué à la première image
Attention : la commande n'est plus affectée au bouton, mais au cadre. Le fait qu'une scène se soit vu attribuer un script est noté sur la chronologie principale - une lettre minuscule "a" apparaît au-dessus du point gras dans la désignation de l'image.
En conséquence, nous avons obtenu ce qui suit film.
Si nous n'avons que quelques images dans l'album photo, deux boutons - "Avant" et "Retour" - suffisent amplement, mais si l'ensemble de photos est volumineux, il est souhaitable d'avoir des boutons qui envoient au début et fin du film. Dans l'exemple suivant, nous ajouterons les boutons correspondants : "Au premier cadre" et "Au dernier cadre". Vous pouvez sélectionner les boutons d'un mnémonique approprié dans la bibliothèque standard de boutons du dossier Circle Buttons (Fig. 12).
Dans l'exemple proposé, nous allons nous familiariser avec une autre commande gotoAndStop(), qui permet de sauter à l'image souhaitée puis de s'arrêter.
Riz. 12. Boutons du dossier Circle Buttons
Sur le bouton pour passer au premier cadre (troisième à partir de la gauche sur la Fig. 13), nous accrocherons le code, comme indiqué sur la Fig. 13.
Riz. 13. Scénario pour le bouton "Dans la première image"
Dans le cas d'un album photo de cinq images, ajoutez le script de transition "Vers la dernière image" au dernier bouton :
Script automatisé
Jusqu'à présent, nous avons tapé toutes les commandes manuellement, mais les panneaux de l'éditeur ActionScript fournissent une gamme de services de script automatisés. Considérons ces possibilités.
Riz. 14. Outils de script automatisés
Le panneau de l'éditeur Action Script vous permet de sélectionner, faire glisser, réorganiser et supprimer des commandes.
Montrons comment vous pouvez écrire le même script pour le bouton "Suivant" en mode automatisé. En sélectionnant le dossier Movie Clip Control (fenêtre supérieure gauche sur la Fig. 14), vous pouvez accéder au gestionnaire d'événements on, puis double-cliquer sur l'élément correspondant ou faire glisser l'expression sur le champ d'écriture du script en mode Faites glisser et Goutte.
Riz. 15. Astuce pour compléter une expression
En conséquence, l'expression nécessaire et un indice du formulaire apparaîtront sur le champ de travail (Fig. 15): vous sélectionnez la commande requise dans le menu et l'expression est complétée automatiquement. Comme vous pouvez le voir dans le menu, vous pouvez sélectionner non seulement la condition associée aux boutons à l'écran, mais vous pouvez également sélectionner dans le menu de la Fig. Touche 15 pointsAppuyez sur "
Riz. 16. Appels des boutons du clavier
Utilisons la commande keyPress
Riz. 17. La commande nextFrame se trouve dans le dossier Timeline Control
Pour le bouton qui déplace le film au début de l'album photo, vous pouvez sélectionner l'appui sur la touche Accueil comme un événement dans le menu, puis (Fig. 18) faites glisser la commande gotoAndStop sur le champ, à la suite de laquelle un d'autres indications apparaîtront sur la syntaxe possible de cette commande.
Les flèches de l'info-bulle vous permettent de visualiser différentes variantes syntaxe. Le programme propose deux options (Fig. 18 et 19), c'est-à-dire qu'il propose de définir la scène et le cadre ou uniquement le cadre. Dans notre cas, il suffit de spécifier uniquement le cadre (Frame). Si le nom de la scène est omis, il s'agit par défaut d'une image de la scène actuelle.
Riz. 18. Astuce sur la syntaxe de commande possible
Riz. 19. Flèche-triangle vous permet d'afficher les options de syntaxe
Après avoir attribué à tous les boutons le bon boutons du clavier, on obtient ce qui suit film, où la pagination des photos se fera à partir du clavier, et le fait de cliquer sur les boutons à l'écran avec la souris n'aura aucune conséquence.
Est-il possible de proposer un scénario dans lequel différents événements conduiront aux mêmes actions ? Il s'avère que c'est possible - pour cela, dans le gestionnaire d'événements on, vous devez énumérer la liste des noms d'événements. Si vous mettez une virgule dans la liste des événements après le premier événement, le programme lui-même vous proposera un menu (Fig. 20).
Riz. 20. Lors de la saisie d'une virgule dans la liste des événements, un menu de commandes supplémentaires apparaît automatiquement
Ajoutons au premier événement (appuyer sur le bouton du clavier) le deuxième événement (relâcher le bouton à l'écran) :
on(keyPress" |
Nous répétons la procédure pour les boutons restants et nous obtenons ainsi album photo, dans lequel la pagination des photos se fera à la fois avec la souris et avec le clavier (le fichier FLA d'origine peut être obtenu à partir de lien).
Dans l'exemple considéré, nous avons utilisé la transition par numéro d'image, mais cette méthode n'est pas toujours pratique : si la numérotation des images change pendant le montage du film, la logique peut être violée. Il est plus pratique d'utiliser la transition par marque de cadre. Prenons un exemple qui nécessite non seulement de parcourir l'album, mais également le passage à différentes sections, c'est-à-dire une navigation plus complexe.
Que l'album se compose de dessins, infographie et photographies.
Étiquetons la première image de la section "Images" comme Images, de la même manière que les premières images des autres sections, étiquetez les graphiques et la photo.
Créons un calque pour placer des étiquettes et nommons-le Lables. Pour étiqueter un cadre, dans le panneau Propriétés, sélectionnez le type d'étiquette Nom et notez son nom. Dans notre cas, Photos (Fig. 21). Placez les repères dans les cadres 5 et 10 de la même manière (Fig. 22).
Riz. 21. Un exemple d'attribution d'une étiquette à un cadre
Ajoutons maintenant un nouveau calque et nommons-le Actions. Dans la première image clé du calque Actions, appelez le panneau Actions Frame (en appuyant sur la touche F9) et tapez la commande stop () (voir Fig. 22)
Riz. 22. Scénario du premier cadre
Ajoutons un autre calque appelé Sujets (sujet), dans lequel nous donnerons les titres aux cadres correspondants : "Images" (Fig. 23), "Graphiques" et "Photo".
Riz. 23. Le titre des cadres de la section "Images"
Ajoutons maintenant des boutons de menu avec des noms similaires sur le côté, que nous placerons sur un nouveau calque appelé Menu.
Imprimons le premier élément de menu "Images" à partir du bord gauche et traduisons-le en un symbole de bouton. À l'aide de l'outil Flèche, sélectionnez le bloc de texte « Images » et exécutez la commande Modifier => Convertir en symbole (cette commande peut également être exécutée à l'aide de la touche F8), dans le panneau Convertir en symbole, définissez le type de symbole Bouton et définissez son nom comme pictureButton (Fig. 24 ).
Riz. 24. Nommez le bouton pour aller à la section image le nom pictureButton
Créons quatre cadres pour le bouton "Images": le premier représentera simplement le texte original (Fig. 25), le second - le même texte uniquement en bleu, nous sauterons le troisième cadre (dans ce cas, le Down-frame sera le même que le Over-frame ), et dans le Hit-frame, nous dessinons une zone rectangulaire qui déterminera la zone où le bouton est enfoncé (Fig. 26).
Riz. 25. Bouton d'image vers le haut
Riz. 26. Hit-frame du pictureButton
Nous devons maintenant attacher le script au bouton nouvellement créé. Pour ce faire, sélectionnez le bouton dans la scène 1 et, en appuyant sur F9, appelez le panneau Actions, puis entrez le code illustré à la Fig. 27.
Riz. 27. Scénario de transition vers un cadre avec une étiquette
Toutes les raisons possibles de festivités sont derrière, le cinquième semestre de mon carnet de notes est complètement rempli, il fait -25 degrés dehors - je n'ai tout simplement aucune raison de retarder l'accomplissement de ma promesse qui vous est faite avant le Nouvel An en "KV" No.50 . Alors, continuons la conversation sur la technologie Flash et le package populaire pour la création d'applications interactives Macromedia Flash Professional 8. Aujourd'hui, nous allons concentrer notre attention sur les techniques de dessin délicates.
Je dois immédiatement vous avertir que vous ne trouverez pas ici une énumération ennuyeuse d'outils Flash avec une description des propriétés et des méthodes de chacun. Ces informations peuvent être facilement trouvées dans des didacticiels, des ouvrages de référence électroniques et des aides "pour Flash. J'ai essayé de rassembler les techniques les plus intéressantes qui sont utilisées par les utilisateurs avancés et qui intéresseront à la fois les utilisateurs novices et les concepteurs Flash expérimentés. Eh bien, mettez-vous au travail !
Boutons de modification
Supposons que vous souhaitiez créer un rectangle arrondi sur la table de montage Flash 8. Cette figure géométrique est dessinée à l'aide de l'outil Rectangle (R), pour lequel le rayon du congé est défini à l'aide du bouton de modification "Définir le rayon du coin" qui apparaît en bas de la barre d'outils (dans la section "Options"). Cette méthode peut être utilisée avec succès pour écrire rapidement des boutons simples.
Lors de l'activation d'un outil dans Flash, vous devez faire attention à ses boutons de modification, qui peuvent modifier fondamentalement le principe de fonctionnement de l'outil de dessin sélectionné. Par exemple, un crayon (Outil Crayon) peut fonctionner dans l'un des trois modes suivants : redresser les lignes (Redresser), lisser les angles vifs (Lisser) et dessiner à l'encre (Encre). Chacun des modes répertoriés est défini à l'aide d'un bouton de modification et peut être utile si la souris tremble excessivement dans la main pendant le dessin. L'outil Gomme (gomme) dispose également de plusieurs modes de fonctionnement qui permettent de le configurer pour détruire des lignes (mode "Erase Lines"), des zones remplies de couleur (mode "Erase Fills"), etc. Généralement, le nom du modificateur bouton suit directement son rendez-vous.
Verrou de remplissage
Si vous utilisez l'outil Paint Basket pour peindre plusieurs objets avec le modificateur Fill Lock, la texture ou le dégradé utilisé pour remplir la forme sera répété dans chaque objet successif. En d'autres termes, le blocage de remplissage vous permet de donner l'impression que les formes que vous coloriez sont découpées dans une seule feuille de papier colorée. L'outil Pinceau (B) possède également cette propriété.
Fill Lock est utile lorsque vous avez besoin de voir les autres à travers certains objets. De cette façon, il est facile de créer une vue depuis la fenêtre vers le ciel nocturne lors d'une pleine lune.
En gros, dans chaque châssis de fenêtre (et dans la fenêtre aussi), l'observateur doit voir des parties de la même image - le ciel nocturne et le disque lunaire, dont la lueur s'affaiblit avec la distance. Cet effet est fourni par le blocage de remplissage. Commençons dans l'ordre. J'ai dessiné la fenêtre elle-même en utilisant des rectangles creux (Outil Rectangle) et des traits de crayon (Outil Crayon) avec une épaisseur variable et un remplissage en dégradé (les couleurs nécessaires ont été sélectionnées dans le panneau Fenêtre -> Mélangeur de couleurs). Tous les éléments de la fenêtre sont situés sur le même calque. Ensuite, j'ai sélectionné le côté droit de la fenêtre et l'ai rempli (outil Panier de peinture) avec un dégradé radial noir-bleu-noir, en activant le mode de verrouillage de remplissage (le bouton de modification "Fill Lock"). À l'aide de l'outil de transformation de dégradé ("Paramètres de dégradé"), j'ai choisi la meilleure façon de superposer le dégradé. L'évent et la seconde moitié de la fenêtre ont été peints avec le même contenu du panier de peinture. Et la dernière touche est la lune. Pour ce faire, prenez l'outil ovale ("Ellipse"), supprimez le contour, maintenez la touche Maj enfoncée et dessinez le cercle correct au point le plus brillant du ciel. Ajouter des étoiles au goût. :)
La même chose pourrait être faite à l'aide d'un calque de masque, sur lequel se trouvent des rectangles qui assurent la visibilité du ciel dans les châssis de la fenêtre. Mais dans ce cas, voyez-vous, plus d'agitation. Et donc nous avons réussi avec une seule couche.
Remplissage bitmap
Revenons aux résultats de la leçon précédente et dessinons des motifs hivernaux sur le verre.
Pour ce faire, sélectionnez la texture en sélectionnant l'élément "Bitmap" dans la liste "Type" de la fenêtre "Mélangeur de couleurs". Remplissez toutes les fenêtres et utilisez l'outil de transformation de dégradé pour ajuster la position, la taille et la pente de la texture. On dirait qu'il fait plus froid ! :)
Laissez quelqu'un essayer de regarder par la fenêtre et de nettoyer une zone de givre, comme vous et moi le faisons souvent en hiver dans les transports. Prenez un pinceau (outil Pinceau), chargez un bitmap pour celui-ci (vue depuis la fenêtre) et appliquez quelques traits, en activant le mode "Fill Lock". C'est la "baguette magique" ! Dans ces endroits où le pinceau a travaillé, un paysage d'hiver s'est ouvert. Cependant, vous ne devez pas vous laisser emporter par les textures raster - la taille du fichier de sortie augmente à pas de géant. :)
Ombre d'un objet en mouvement
Les méthodes décrites précédemment (filtre et effet de ligne de temps Drop Shadow) font que l'objet projette une ombre uniquement dans le plan vertical. Autrement dit, si nous prenons notre clip ou notre image graphique et l'amenons sur un mur éclairé par une source de lumière arbitraire, l'ombre sera alors située sur la surface verticale (mur) derrière l'objet. Cependant, il est assez souvent nécessaire de placer l'ombre dans n'importe quel autre plan (au sol, sur une surface inclinée, etc.). Et ici signifie standard déjà impuissant.
Pensons logiquement. Tout type d'objet (graphique, bouton et MovieClip) peut être manipulé pour : redimensionner, faire pivoter, incliner, etc. (menu Modifier -> Transformer). C'est des graphiques vectoriels ! Disons que nous avons une vidéo (prenons la vidéo standard avec un singe se balançant sur une branche du dossier "Samples And Tutorials"). La bibliothèque du clip contient le symbole du clip et sa représentation (image) se trouve sur la timeline. Qui nous empêche de faire glisser une autre représentation de ce clip sur l'espace de travail, de le remplir de noir et de le placer dans le plan souhaité à l'aide de la procédure "Rotate And Skew" du menu Modifier -> Transformer ? Personne! Et en même temps, l'ombre correspondra pleinement à son objet - un singe en rotation et une branche, dans notre cas. Alors faisons-le.
Pour remplir tout le clip de noir, vous pouvez procéder de deux manières : recolorer chaque détail du clip, ce qui, bien sûr, prendra beaucoup de temps, ou sur le panneau des propriétés du clip (Fenêtre -> Propriétés -> Propriétés ou " Ctrl + F3") dans la liste des couleurs, sélectionnez Teinte ("Couleur") avec 100 % de noir. Ce dernier est nettement préférable. :) En conséquence, tout le clip deviendra noir. Cependant, l'ombre n'a pas de contour clair, la vidéo résultante doit donc être floue. Pour ce faire, sélectionnez le filtre Blur et réglez le flou horizontal sur BlurX=50, le flou vertical sur BlurY=4, et réglez la qualité sur faible (Quality=Low) afin que lors de la lecture de l'intégralité du clip, la charge sur le PC le matériel est moindre. Maintenant, l'ombre doit être positionnée dans le plan requis (plan du sol). Une animation complexe dans laquelle des objets en mouvement projettent une ombre selon les lois de la physique est créée de la manière décrite ci-dessus.
Interaction avec les objets
Une caractéristique distinctive de Flash en tant qu'éditeur vectoriel est l'interaction d'objets graphiques situés dans le même calque de cadre. La nature de leur interaction dépend du type et de la position relative. Par exemple, des formes de couleurs identiques se collent lorsqu'elles sont superposées, et une ligne régulière peut couper un objet en morceaux. Ce dernier est souvent utilisé pour briser une zone de remplissage, ce qui produit à son tour des résultats impressionnants. Pour exclure l'interaction des objets, ils doivent être placés sur des calques différents.
Conception d'inscriptions
Dans certains cas, il est utile de transformer des zones de texte en objets graphiques pour tirer parti des techniques de style qui ne s'appliquent pas au texte normal. Cependant, la conversion ne doit être effectuée que lorsque les lignes sont complètement prêtes pour un traitement ultérieur : les mots sont écrits sans erreur, la police nécessaire est sélectionnée, etc. Ensuite, il ne sera pas possible de revenir au type de données texte et de corriger ces défauts à l'aide des outils standard de l'outil Texte.
Nous supposerons donc que nous avons une inscription textuelle dans notre espace de travail, à partir de laquelle nous devons créer un logo ou un en-tête pour un site Web. Et Flash, comme tout éditeur de graphiques vectoriels à part entière, vous permettra facilement de le faire. Décomposons la phrase en lettres avec la commande Modifier -> Séparer (vous pouvez également utiliser la combinaison "Ctrl + B" à cette fin). En conséquence, le bloc de texte d'origine est divisé en plusieurs parties, dont le nombre est égal au nombre de caractères du fragment de texte d'origine. Pour convertir chaque caractère en graphique, reprenons cette procédure. Maintenant, les lettres sont représentées par des zones de remplissage, et vous pouvez faire les mêmes actions avec elles qu'avec des objets graphiques. Par exemple, contour. Pour ce faire, activez l'outil Encrier ("Encrier"), sélectionnez l'épaisseur et la couleur du trait, puis cliquez dessus sur chaque lettre. Le texte contour (lettres vides) est créé en supprimant les zones de remplissage. De plus, chaque lettre ou mot entier peut subir une déformation, etc. Tous les symboles sont assemblés en un seul bloc graphique à l'aide de la commande Modifier -> Convertir en symbole ou de la touche "F8".
Optimisation graphique
Il existe plusieurs façons dans Flash de réduire la taille du fichier de sortie (s'applique aux formats FLA, SWF et MOV). Tout d'abord, lors de la publication d'une vidéo, vous pouvez choisir le degré de compression des images bitmap, ainsi que permettre une compression supplémentaire du document (menu Fichier -> Paramètres de publication). Cette option, bien sûr, ne convient pas pour FLA - le type de fichier interne de Flash. Deuxièmement, l'utilisateur peut supprimer les formes inutiles et les lignes supplémentaires de la scène, ainsi que réduire au minimum le nombre de symboles utilisés en réfléchissant à la structure de chaque objet à l'avance et en supprimant les symboles inutiles de la bibliothèque. Troisièmement, vous pouvez utiliser l'optimiseur de ligne intégré, qui vous permettra de vous débrouiller avec un nombre minimum de lignes, réduisant ainsi la quantité de données nécessaires à la mémorisation. Pour cela, sélectionnez tout le document ("Ctrl + A") et allez dans le menu Modifier -> Forme -> Optimiser. Dans la boîte de dialogue qui s'affiche, vous pouvez définir les paramètres d'optimisation requis. J'ai exécuté l'assistant pour l'image de la vue de la lune. Le fichier d'origine contenait des informations sur 91 courbes et, après optimisation, le nombre de lignes courbes a été réduit à 43. C'est-à-dire. la taille du fichier SWF de sortie a été réduite de moitié. Ces actions, bien sûr, n'affectent en rien la qualité de l'image, car dans ce cas, la description formule de l'image est optimisée. Si dans graphiques vectoriels remplacez les lignes composées par des lignes pleines et redressez un peu les courbes, moins d'informations sont nécessaires pour décrire l'ensemble du dessin.
Au lieu d'une conclusion
C'est tout pour aujourd'hui. Lorsque j'ai travaillé sur cet opus, je suis parti du fait que le lecteur était déjà familiarisé avec les précédents articles sur Flash, publiés dans "KV" n° - /2005. Par conséquent, aujourd'hui, je n'ai fourni aucune référence à des documents antérieurs. Cependant, si quelque chose n'était pas clair pour vous, la clé est peut-être cachée dans les numéros précédents.
Symphonie d'Aspera
