Leçons avec codes pour Adobe Flash. Travaillez efficacement dans Adobe Flash Professional

15.04.2019

Lorsqu'on travaille dans Adobe Flash Professionnel Nous ne devons pas oublier les performances et la culture du contenu créé.
Après avoir étudié un certain nombre de documents et écouté les souhaits de mes collègues, je suis arrivé à la conclusion qu'il valait la peine de publier en un seul endroit une liste de règles de base pour travailler dans Flash Pro qui contribueraient à la création de contenu de haute qualité. Pour une étude plus approfondie de ce sujet, je vous recommande fortement de lire tous les documents dont les liens sont donnés à la fin de l'article.
Ces règles seront principalement utiles aux animateurs et aux constructeurs d'interfaces, mais les développeurs feraient également bien de se familiariser.

Entièrement pertinent pour Flash Pro CS 5.5 et partiellement - les versions antérieures.

- N'utilisez pas de fréquences d'images trop élevées.
Pour la plupart des animations, une fréquence de 24 à 30 images par seconde est suffisante, et si votre projet est une application (AIR) dans laquelle il n'y a presque pas d'animation, il est alors préférable de limiter complètement les images par seconde à 12, en l'augmentant temporairement par programme pour 24h/24 et 30h uniquement si vous devez afficher une animation fluide. Plus les fps sont élevés, moins de temps est alloué à l'exécution du code, au rendu et à l'effacement de la mémoire, ce qui peut souvent conduire à sauter l'étape de rendu (à la suite de quoi l'animation « ralentira »).

— Essayez de placer les éléments « à plat ».
Utilisez des couches au lieu de conteneurs autant que possible. En réduisant le niveau d'imbrication, vous augmentez la productivité.

— Réduisez le nombre d'éléments interactifs en désactivant sourisEnfants Et sourisActivée.
Écrire
mouseEnabled = faux ;
mouseChildren = faux ;
sur la première image de ceux-ci FilmClips, lequel certainement jamais ne sera pas interactif (et ne contiendra pas d’éléments interactifs). Ce code désactivera l'interactivité à la fois sur l'objet lui-même et sur ses objets imbriqués. Si vous souhaitez désactiver l'interactivité uniquement pour les objets imbriqués, utilisez uniquement mouseChildren = faux.En réduisant le nombre d’éléments interactifs, vous augmentez la productivité.

— Optimisez chaque image du projet.
Pour réduire la consommation de ressources et/ou la taille finale du swf, ajustez soigneusement le niveau de compression pour chaque image du projet à l'aide de la boîte de dialogue Propriétés du bitmap, surtout si les images ont été importées depuis PSD. Pour les images avec beaucoup de détails, de dégradés, etc. Il est recommandé d'utiliser la compression JPEG et pour les images avec une petite quantité de détails - PNG, pour obtenir les meilleures performances en matière de taille d'image. Ne pas utiliser Autoriser le lissage pour les images qui n'en ont pas besoin, car l'anticrénelage a un impact négatif sur les performances. Essayez différentes options, vérifiez la qualité et la taille des images résultantes à l'aide du bouton Test(la qualité de l'image peut être évaluée sur le côté gauche de la boîte de dialogue et la taille - en bas), choisissez les paramètres de compression les plus appropriés pour chaque image.

- Utilisez les remplissages d'images avec prudence.
Un remplissage d'image est créé lorsque vous divisez une image à l'aide de Modification-> Séparer (CTRL+B) ou quand tu choisis Type de couleur : Remplissage bitmap dans le panneau Couleur. N'oubliez pas que swf inclut l'intégralité de l'image que vous remplissez. Autrement dit, si vous « découpez » plusieurs petits morceaux d'une grande image de cette manière, la taille de la grande image sera toujours ajoutée au swf. Préparez des petits morceaux à l'avance. Il est conseillé d'utiliser lorsque b apparaît à plusieurs endroits de l'application. Ô la plupart de la même image (dans ce cas, l'effet est tout simplement bon - la taille swf ne sera pas gaspillée).

— Préparez les graphiques à la taille requise avant de les utiliser.
Évitez d'utiliser la mise à l'échelle des images ; préparez-les à l'avance à l'échelle requise. Si vous agrandissez les images, cela gaspille des ressources CPU, et si vous les réduisez, vous laissez des octets supplémentaires dans le swf (sauf si l'original de l'image réduite est utilisé quelque part dans le projet sans réduction).

— Convertissez les lignes en remplissages.
Utilisez la commande Modification-> Forme-> Convertir les lignes en remplissages pour convertir les lignes vectorielles en remplissages. Les lignes sont traitées deux fois plus longtemps que les remplissages, car ont 2 bordures - interne et externe, tandis que les remplissages n'en ont qu'une.

— Limitez l'utilisation des styles de ligne.
Essayez d'utiliser des styles solides pour les lignes - ils consomment moins de ressources que les styles non solides (en pointillés, en pointillés, etc.).

- Utilisez des lignes droites plutôt que des courbes autant que possible.
Par exemple, les angles droits sont traités plus rapidement. À utiliser en particulier sur les petits graphiques, lorsque la différence entre les angles arrondis et droits ne sera pas aussi perceptible.

— Optimiser les graphiques vectoriels.
Souvent, les formes vectorielles contiennent un nombre excessif de points de contrôle le long desquels les courbes sont formées. En réduisant leur nombre, vous pouvez augmenter la productivité du traitement de ces chiffres. Pour ce faire, utilisez l'élément de menu Modification->Forme->Optimiser…, ou un instrument Lisse sur la barre d'outils. Attention cependant, l'optimisation a un impact négatif sur la qualité, essayez de trouver un compromis entre qualité et quantité de courbes.

— Évitez si possible d'utiliser des dégradés dans les graphiques vectoriels.
Les dégradés nécessitent plus de ressources que les remplissages solides. Si possible, remplacez le dégradé vectoriel par des remplissages vectoriels. Le gain de performances ne sera pas significatif, mais il sera là, ce qui peut être utile lors du développement pour les plateformes mobiles.

- Utilisez le moins d'alpha possible.
L'utilisation d'un canal alpha réduit les performances, notamment lors de l'animation. Et si vous laissez de l'alpha supplémentaire dans les images PNG, en plus de la charge inutile sur le processeur, vous laissez des octets supplémentaires dans le swf - coupez l'alpha inutile sur les bords, séparez et recadrez également les images qui sont reliées par une grande quantité d'alpha. Il en va de même pour l'utilisation de la propriété alpha(effets d'apparition, de disparition, etc.).

— N’abusez pas des masques.
Utilisez-les uniquement lorsque cela est nécessaire. Recadrez vous-même les images et les vecteurs si possible. Les masques ont un impact négatif sur la productivité. Parfois, au lieu des masques rectangulaires classiques, il est plus rentable d'utiliser scrollRect- cela peut fonctionner plus rapidement, mais cela ne convient pas toujours - cela dépend de la tâche. Essayez simplement de comparer.

- Utilisez le moins de mélange possible.
Le mélange réduit la productivité. Si possible, préparez vos images à l'avance afin de ne pas avoir à les fusionner.

— Limiter l'utilisation de filtres.
Évitez d'utiliser des filtres autant que possible - préparez vos images à l'avance, par exemple en insérant des ombres dans vos images au lieu d'appliquer un filtre. Les filtres réduisent considérablement les performances.

— Ne pas animer les éléments avec des filtres (sauf pour les mouvements selon x, y) si possible.
Le fait est que lorsqu'un filtre est appliqué, le cacheAsBitmap. Par conséquent, des actions telles que : l'animation des propriétés du filtre, la transformation (sauf pour le déplacement selon x, y), la modification des propriétés effet de couleur- provoque la remise en cache de chaque image d'animation sur les graphiques auxquels le filtre est appliqué, ce qui entraîne une consommation de ressources extrêmement élevée.

— Lorsque vous utilisez des filtres, définissez les valeurs flouX Et flouégalité de pouvoirs 2.
Par exemple - 2,4,8,16, etc. Si les valeurs ne répondent pas à cette exigence, le filtre fonctionnera 20 à 30 % plus lentement.

— Utilisez uniquement le niveau requis de qualité de filtre.
N'utilisez pas de niveaux de qualité de filtre élevés et moyens si l'effet souhaité peut être obtenu avec une qualité faible. Plus la qualité est élevée, plus les ressources sont exigeantes.

— Essayez d'utiliser des images raster dont la taille est un multiple de 2, ou, mieux encore, égale à une puissance de 2 si vous envisagez de les réduire.
Si vous respectez cette règle, vous permettrez au mipmapping de fonctionner correctement. Il est préférable d'utiliser des tailles égales à des puissances de deux. Le mipmapping ne fonctionnera pas sur les images auxquelles des filtres sont appliqués (ou qui sont autrement mises en cache). Si vous ne prévoyez pas de réduire l'image, ou si elle ne sera que sous une forme réduite dans le projet, préparez immédiatement l'image à la taille requise.

1024×1024 1280×1280 101×101

- Utilisez le vecteur pour des graphiques simples.
Si l'image contient très peu de détails, de dégradés et de couleurs, elle peut alors être traitée plus efficacement dans les courbes et, en passant, prendre moins de place. Si l'image est initialement raster, vous pouvez la convertir en courbes à l'aide d'outils externes ou d'un élément de menu. Modification->Bitmap->Tracer le Bitmap…. Assurez-vous de comparer les performances de traitement vectoriel et raster pour choisir l’option la plus productive.

— Utilisez raster pour les graphiques complexes.
Si possible, n'utilisez pas de vecteur pour des graphiques complexes - laissez-les dans un raster ou convertissez-les en raster à l'aide d'outils externes. Pour les images complexes (nombreuses couleurs, détails, dégradés), un raster fonctionne beaucoup plus efficacement qu'un vecteur. Dans ce cas, vous perdez la possibilité de zoomer sur les graphiques sans perte de qualité, mais cela n'est souvent pas nécessaire. Assurez-vous de comparer les performances de traitement vectoriel et raster pour choisir l’option la plus productive.

— Utilisez la nouvelle fonctionnalité de rastérisation pour CS5.5 Convertir en bitmap avec prudence.
Cette méthode de rastérisation des graphiques est pratique et rapide, et prend même partiellement en compte les effets et les masques imbriqués. Cependant, dans certains cas, il produit un raster avec une perte de couleurs ou avec un alpha excessif. Si la qualité du raster obtenu par cette méthode ne vous convient pas, effectuez la rastérisation à l'aide de moyens externes. Vous devez également vous rappeler que les images de la bibliothèque obtenues à l'aide Convertir en bitmap, appliqué automatiquement par défaut Autoriser le lissage et compression sans perte (png).

— Cachez des graphiques vectoriels et du texte complexes. Soigneusement.
Utiliser cacheAsBitmap pour les graphiques vectoriels complexes qui ne contiennent pas d'animations imbriquées et de champs de texte statiques qui ne sont pas eux-mêmes animés (y compris les animations de conteneur parent) autrement qu'en se déplaçant vers x et y (c'est-à-dire animés effet de couleur, alpha etc. ne convient pas non plus).
De plus, vous pouvez utiliser cacheAsBitmapMatrix, disponible uniquement dans l'environnement AIR (depuis AIR 2.0), qui vous permet de mettre à l'échelle et de faire pivoter un objet mis en cache sans remise en cache et de connecter le GPU pour la transformation.
Vous pouvez également utiliser la conversion au moment de la compilation de graphiques vectoriels complexes en bitmaps à l'aide de Exporter sous forme de bitmap. Malheureusement, vous n'aurez aucun contrôle sur la qualité de compression et d'anticrénelage de ces images. Utilisez ce mode de transformation sur des graphiques complexes qui ne contiennent pas d'animation imbriquée. Les graphiques eux-mêmes, ainsi convertis, peuvent être animés non seulement en x, y, mais également transformés sans conséquences significatives sur les performances, contrairement au cacheAsBitmap. Du côté de l'arc - Exporter sous forme de bitmap ajoute les images exportées au swf, augmentant ainsi sa taille.
S'il y a un arrière-plan uniforme rempli de couleur sous les graphiques et qu'il ne changera pas pendant l'exécution du swf, utilisez cacheAsBitmap ou Exporter sous forme de bitmap couplé à un fond opaque ( Arrière-plan bitmap opaque). Cela vous permettra de mettre en cache des images ou des textes sans canal alpha, ce qui aura un impact encore meilleur sur les performances.
Si l'objet mis en cache contient des éléments situés à une certaine distance les uns des autres, il est alors préférable de mettre en cache ces éléments plutôt que l'objet lui-même afin de réduire la quantité de RAM requise pour la mise en cache.
Essayez différentes options, surveillez la consommation de mémoire et les performances et choisissez la méthode de mise en cache la plus appropriée.

- N'utilisez pas l'animation interpolaire en vain.
Si un élément d’une section d’un calque de chronologie n’a pas besoin d’animation, vous devez le supprimer. Entre dans ce domaine.

- N'utilisez pas d'animation interpolaire pour une animation simple.
Pour l'animation de mouvements simples, rotations, changements de couleurs, alpha, etc. utilisez un logiciel, par exemple - TweenLite et des bibliothèques similaires. Cela rendra l'animation plus flexible et économisera des ressources. Un programmeur peut facilement modifier une telle animation.

— Évitez les animations sous la forme d'une série d'images.
Lorsque cela est possible, au lieu d'une série d'images, utilisez une animation interpolée ou une animation logicielle - cela peut économiser des ressources et occuper moins d'espace dans le projet.

- Évitez d'utiliser 2.5D en mode de rendu CPU
Lors du traitement des transformations 3D sur le CPU, des lois similaires aux filtres s'appliquent.

— Vérifiez les zones de redessinage
Pour une idée plus claire des éléments qui sont mis à jour à l'écran, ainsi que des zones de mise à jour dont ils disposent, utilisez l'élément de menu contextuel de la version de débogage de Flash Player - " Afficher les zones à redessiner". En outre, cela peut aider à détecter des éléments animés invisibles. Moins il y a d’éléments mis à jour, plus l’étape de rendu est rapide.

— Essayez de redessiner les zones aussi petites que possible
Évitez de superposer les éléments changeants car dans ce cas, Flash Player combinera leurs zones redessinées en une seule, qui sera probablement plus grande que les zones des éléments qui se chevauchent individuellement. Plus la zone de redessinage est grande, plus la vitesse de redessinage est faible.

— Avec alpha = 0, désactivez le drapeau visible
Si vous souhaitez par exemple masquer complètement un élément avant de le révéler en douceur par transparence, supprimez le drapeau visible avec alpha, parce que éléments qui ont un drapeau visible, chevauchent toujours tous les éléments situés en dessous à partir d'événements interactifs (clics de souris) et consomment des ressources inutiles. Si l'aspect lisse ultérieur de l'élément n'est pas requis, ne modifiez pas la valeur alpha- désactivez simplement le drapeau visible.
Encore plus de ressources peuvent être économisées en excluant complètement les éléments de DisplayList au lieu de les masquer et en ajoutant show si nécessaire (uniquement si cela ne se produit pas à chaque image), mais cela peut nécessiter une certaine connaissance d'AS3 et de la POO si c'est bien fait.

- Arrêter l'animation en invisible FilmClip
Si FilmClip Avec alpha=0 et/ou drapeau désactivé visible contient une animation qui doit être jouée lors d'un événement, et pas immédiatement après le lancement du swf, alors cette animation doit être arrêtée, car un tel clip gaspillera des ressources. De plus, l'animation doit être arrêtée lorsque vous masquez ou supprimez FilmClip.

— Évitez d'utiliser des composants standards.
Si vous devez créer une liste, un curseur, etc. — si possible, n'utilisez pas de composants standards, ils sont lents et contiennent de nombreuses erreurs.

— Ne cachez pas d’éléments derrière des graphiques visibles.
Si vous souhaitez masquer un élément, ne le cachez pas derrière les autres - désactivez son indicateur visible, ou supprimer de DisplayList. Caché derrière d’autres graphiques, l’élément consomme quand même des ressources inutiles.

- Utiliser Rapport de taille pour identifier les graphiques « lourds » et autres éléments.
Pour activer la génération, cochez la case Générer un rapport de taille V Paramètres de publication pour Flash.

- Utilisez un caractère pour répéter les éléments.
S'il y a des éléments en double dans le projet, utilisez pour eux le même symbole de la bibliothèque. Si vous devez utiliser le même élément dans des couleurs différentes, utilisez Teinte ou Avancé styles Effet de couleur. Cela réduira la taille du swf et l'effort requis pour modifier l'élément.

- Évitez les twips (1/20 pixel).
Essayez de ne pas laisser x, y, largeur et hauteur des éléments dans des valeurs non entières. Cela évitera un gaspillage inutile de ressources et des problèmes d'anticrénelage.

— Ne laissez aucun élément en dehors de la zone de travail.
Si possible, ne laissez rien en dehors de la zone de travail - recadrez l'arrière-plan, les graphiques, etc., si la taille de la zone de travail ne change pas, ne placez pas d'éléments entiers en dehors de la zone de travail pour une utilisation ultérieure - discutez-en avec le programmeur. pour l'ajouter par programme. Lorsqu'ils sont en dehors de l'espace de travail, les graphiques sont toujours traités, pris en compte et gaspillent des ressources.

— Interagir avec les programmeurs.
Si vous avez des doutes sur le choix du style d'animation (logiciel ou tween classique), du style d'assemblage, des capacités de la plateforme, etc. - n'hésitez pas à en discuter avec les programmeurs qui travailleront sur le projet à l'avenir, ils pourront vous aider à faire le bon choix. Parfois, une petite quantité de code peut remplacer des heures de travail !

— Stockez le code et les étiquettes sur des calques séparés.
Ne créez pas de code ou de marques sur les calques graphiques, car ils pourraient ne pas être remarqués. Conservez le code sur son propre calque séparé et les étiquettes seules. Il est recommandé de placer ces deux calques au-dessus de tous les autres calques et de les verrouiller contre les modifications après la création, par exemple pour éviter l'insertion accidentelle de graphiques.

- Utilisez des marqueurs de cadre.
Au lieu de numéros de cadre, utilisez des balises portant des noms significatifs. Cela permettra d'éviter des problèmes si la durée de l'animation change selon l'image requise, et c'est plus clair de cette façon.

- Nommez ce que vous créez de manière significative.
N'oubliez pas de donner des noms significatifs et intuitifs aux calques, aux polices et en particulier aux symboles de la bibliothèque. C'est une bonne forme et vous aidera, vous et vos collègues, à naviguer dans le projet à l'avenir, et il sera plus facile pour les programmeurs de déboguer les erreurs associées aux éléments du projet.

— Utilisez les symboles corrects pour les noms.
N'utilisez pas votre langue maternelle (si ce n'est pas l'anglais) pour nommer les éléments - écrivez en anglais (si vous le parlez bien) ou en translittération. N'utilisez pas non plus d'espaces, de caractères spéciaux ou de majuscules. Utilisez uniquement des lettres anglaises, des traits de soulignement, des traits d'union et des chiffres. Cela vous évitera, à vous et à vos collègues, un certain nombre de problèmes, par exemple lors de l'utilisation d'un logiciel de contrôle de version pour un projet XFL qui pourrait ne pas prendre en charge votre langue maternelle.

- Créez toujours des couches de longueur égale.
Étendez la longueur de chaque calque au maximum (en ajoutant des images), même s'il ne contient aucune animation ou contenu. C’est une bonne forme et met de l’ordre dans le projet.

— Ne laissez pas de calques « vides ».
Avoir des calques sans aucun graphique peut rendre difficile l’analyse d’animations complexes sur la timeline.

— Ne créez pas d'images clés inutiles.
Gardez un œil sur vos images clés : ne laissez pas d'images clés supplémentaires qui ne contiennent pas de modifications ou qui n'ont pas été spécifiquement créées pour réinitialiser leur contenu : elles ne feront que rendre plus difficile le travail avec le contenu de la couche ultérieurement.

- N'utilisez pas plusieurs scènes.
Au lieu de scènes, utilisez FilmClips et personnels. Les scènes sont de mauvaise qualité ; elles augmentent non seulement la taille du fichier swf, mais réduisent aussi souvent l'efficacité du travail d'équipe sur le projet. Si, pour une raison quelconque, vous utilisez encore plusieurs scènes, assurez-vous d'en avertir vos collègues, qui devront travailler sur le projet à l'avenir.

- Utiliser des groupes. Sagement.
Les groupes vous aident à travailler facilement avec plusieurs éléments à la fois, par exemple lors de leur alignement. Les groupes n'affectent pas les performances car sont ignorés lors de la compilation (seul leur contenu reste, ce qui est bon pour les performances puisqu'un nouveau niveau d'imbrication n'est pas ajouté). Cependant, vous ne devez pas utiliser de groupes dans les cas où le programmeur peut avoir besoin de pouvoir faire référence à des éléments groupés en tant que groupe - dans de tels cas, utilisez FilmClip.

- Suivre Nom de l'instance dans les animations.
Si vous vous êtes approprié Nom de l'instance FilmClip, qui est impliqué dans l'animation, vous devez alors attribuer le même Nom de l'instance ce clip et sur toutes les autres images d'animation sur le même calque. Cela évitera des problèmes lors de la programmation de ce clip.

- Convertissez toujours les graphiques en FilmClip avant de créer une animation interpolation.
Si vous ne le faites pas, Flash Pro convertira automatiquement les graphiques en éléments Graphique, avec lesquels il est très difficile de travailler à partir du code. Si votre bibliothèque contient des symboles Graphique avec les noms Tween1, Tween2, etc. - ça veut dire que c'est déjà arrivé quelque part.

— Surveiller l'intégrité de l'animation interpolée.
Si l'animation est affichée « arrachée » sur la timeline, sous la forme d'une série de symboles « - », alors quelque chose ne va pas, par exemple, le nombre d'éléments sur l'image au début et à la fin de l'animation ne ne correspond pas.

— Ne stockez pas les éléments inutilisés dans la bibliothèque.
Essayez de supprimer de la bibliothèque tous les éléments dont vous n'aurez plus besoin à l'avenir afin de garder la bibliothèque en ordre et d'éviter qu'elle ne « grandisse », gaspillant de l'espace. Cette colonne peut vous aider Utiliser le nombre dans le panneau de bibliothèque et l'élément de menu du panneau de bibliothèque Sélectionnez les éléments inutilisés, ce qui ne fonctionne pas toujours correctement.

- Utilisez les dossiers de la bibliothèque.
Utilisez des dossiers pour organiser les éléments de la bibliothèque. C'est agréable de travailler avec une bibliothèque bien structurée : on peut trouver rapidement l'élément recherché.

- Évitez d'utiliser des champs de texte TLF.
Si possible, utilisez des champs de texte classiques au lieu des champs TLF. TLF est plus lent, ajoute plus d'octets au swf que les champs de texte classiques et n'est pas encore stable. Si vous avez toujours besoin d'utiliser des fonctionnalités avancées pour les champs de texte et que les capacités des champs de texte standard ne suffisent pas - avant d'utiliser le TLF lourd, essayez des analogues TLF tiers - tels que TinyTLF. Et rappelez-vous - lors de l'importation de champs de texte depuis PSD, ils sont importés au format TLF - ne vous embêtez pas à les convertir en champs classiques si TLF n'est pas requis.

- Choisissez le bon type de texte pour le champ de texte.
Lorsque vous créez des champs de texte manuellement ou à l'aide de l'importation, pensez toujours à leur objectif et choisissez le bon type, en fonction de l'objectif. Statique est destiné au texte qui ne changera jamais, dynamique est destiné au texte qui est susceptible d'être modifié dynamiquement par le code pendant l'exécution du swf. Saisie - pour les champs dans lesquels vous devrez saisir du texte.

— Surveillez les paramètres des champs de texte.
Lors de la création de champs de texte, des valeurs leur sont automatiquement attribuées espacement des lignes- 2 et Comportement- Multiligne. Pour les champs sur une seule ligne, supprimez espacement des lignesà 0 et réglez Comportement - Ligne unique.

- Ne convertissez pas les champs de texte en courbes.
Ce texte ne peut pas être modifié. Si vous en avez besoin pour créer une animation lettre par lettre, contactez d'abord un programmeur - il existe de nombreuses façons de programmer une animation de texte - vous pouvez peut-être même confier l'animation à un programmeur.

- Ne convertissez pas les champs de texte en raster.
Ce texte ne peut pas être modifié. Cela peut se produire, par exemple, lors de l'importation de champs depuis PSD. Si vous faites cela pour améliorer les performances, enveloppez ces champs dans des conteneurs et utilisez-les pour cacheAsBitmap ou Exporter en bitmap, idéalement avec un fond uni (voir la description de l'élément sur la mise en cache).

- Importez correctement les champs de texte.
Essayez de toujours importer les champs de texte en tant que champs de texte modifiables ( Texte modifiable).

- N'utilisez pas inutilement le lissage des polices pour l'animation ( Anti-alias pour l'animation).
Essayez de toujours utiliser Anti-alias pour plus de lisibilité, si le champ de texte n'est pas impliqué dans l'animation. Anti-alias pour l'animation Ne lisse pas très bien les polices.

- Surveillez la taille des champs de texte statiques.
Vous ne devez pas créer de champs de texte dont la largeur et la hauteur sont supérieures au texte du champ, sauf en cas d'absolue nécessité. Une exception, par exemple, peut être le cas lorsque le champ de texte est une étiquette sur un bouton - dans ce cas, le texte, au contraire, doit être étiré sur la largeur du bouton et utiliser un alignement de texte centré afin que les modifications ultérieures le titre du bouton ne nécessite pas de changer la position du champ de texte. Afin d'ajuster la taille du champ de texte au texte, double-cliquez sur le carré blanc dans le coin supérieur droit de la zone de texte en mode édition. S'il y a un cercle, alors les dimensions du champ de texte correspondent déjà aux dimensions du texte.

— Attention à la possibilité de surligner du texte dans les champs de texte.
Désactivez la mise en surbrillance du texte dans les champs de texte lorsque cette fonctionnalité n'est pas requise. Et vice versa : autorisez la mise en évidence du texte dans les champs prévus à cet effet, par exemple dans les champs contenant des messages d'erreur. Pour contrôler si le texte peut être sélectionné, utilisez la propriété Sélectionnable.

— Intégrez les caractères des polices utilisées dans les champs de texte dynamiques et TLF dans swf.
De plus, intégrez uniquement les caractères et groupes de caractères requis - cela évitera d'ajouter des octets supplémentaires au swf. Pour intégrer des symboles, utilisez la boîte de dialogue Texte->Intégration de polices…. N'oubliez pas de nommer correctement les polices lors de l'introduction de leurs caractères.

- N'utilisez pas de code sur les boutons et les clips (ActionScript 2).
Si vous travaillez sur un projet pour ActionScript 2, évitez d'utiliser du code sur les boutons et les clips, écrivez-le sur le cadre, à l'intérieur de ceux-ci, car Un tel code est souvent difficile à trouver et parfois plus difficile à porter vers ActionScript 3.

- Choisissez le bon ActionScript.
Si le projet sera programmé en as3, écrivez le code que vous écrivez dans le projet, par exemple pour contrôler l'animation, en as3. De même - à propos de as2 et as1. Cela évitera au programmeur les coûts de temps associés à l'adaptation de votre code.

— Soumettez le projet avec toutes les polices non standard.
Lors du transfert du projet à des programmeurs ou à d'autres spécialistes, transférez avec lui toutes les polices non standard que vous avez utilisées lors de l'assemblage - cela fera gagner du temps à vous et à ceux à qui vous transférez le projet.

— Transférez le projet avec toutes les bibliothèques et classes externes.
Et n'oubliez pas ceux que vous utilisez via les chemins globaux !

- Conservez tout le code important au même endroit et le code non important dans des endroits ciblés.
Si vous utilisez du code sur des cadres dans un projet, essayez de conserver tout le code important (par exemple, le code qui réagit aux changements de taille de la zone de travail, aux paramètres de la zone de travail, etc.), avec lequel vous travaillerez ensuite, en un seul endroit, sur une (de préférence la première) image, afin que le programmeur puisse facilement le transférer vers une classe externe si nécessaire. Et il est recommandé de placer le code responsable de l'animation d'éléments spécifiques, isolé des autres éléments du projet et qui n'aura pas besoin d'être modifié à l'avenir, directement dans les éléments auxquels il se rapporte.

- Ne laissez pas les métadonnées XMP se perdre.
Désactiver Inclure les métadonnées XMP V Paramètres de publication pour Flash si vous n'utilisez pas ces métadonnées. Cela permettra d'économiser quelques octets dans le swf.

— Faites attention à la vitesse de compilation du projet.
Lorsque vous utilisez des bibliothèques externes, essayez d'utiliser swc au lieu d'un ensemble de fichiers as (de nombreux développeurs fournissent des bibliothèques à la fois dans swc et sous forme d'un ensemble de fichiers as) pour augmenter la vitesse de compilation.
Utilisez et configurez la mise en cache pour votre équipement, apparue dans CS5.5 et disponible pour la configuration ici : Édition->Préférences->Cache de publication— il a été créé pour augmenter la vitesse de compilation.
Si votre projet utilise une grande quantité de code, sa compilation peut prendre beaucoup de temps. En perdant la fonctionnalité d'avertissement (que l'on trouve généralement dans les environnements professionnels externes pour écrire du code) dans Flash Pro, vous pouvez réduire considérablement le temps de compilation d'un tel projet. Vous pouvez désactiver les avertissements dans la boîte de dialogue Paramètres de publication pour Flash -> Paramètres ActionScript 3.0 avancés -> Indicateur du mode Avertissements.

- N'utilisez pas de chemins droits. Utilisez des valeurs relatives.
Utilisez des chemins relatifs vers des classes, vers des bibliothèques externes, vers des fichiers cibles, etc. Cela vous permettra de ne pas lier le projet à une structure de fichiers et de pouvoir facilement l'utiliser dans n'importe quel environnement sans avoir à corriger les chemins. Après avoir accepté le projet de votre part, vos collègues n'auront pas besoin de perdre du temps à personnaliser eux-mêmes le projet pour qu'il soit compilé.

— Utilisez un mode de prévisualisation approprié.
N'oubliez pas que vous pouvez modifier la qualité d'affichage du contenu de votre espace de travail pendant que vous développez votre projet. Choisissez l'option appropriée dans le menu Affichage->Mode Aperçu->…

Connaissant et mémorisant tout cela au stade de la création de contenu dans Flash Pro, vous pourrez préparer un projet au bon niveau (notamment pour une utilisation sur les plateformes mobiles) avec lequel il sera agréable de travailler avec d'autres spécialistes.
Vos collègues vous remercieront.

En anglais (certains, comme moi, ne pourront probablement pas lire les versions traduites) :
Optimisation des performances pour la plate-forme Flash
Meilleures pratiques

Merci beaucoup pour votre attention.

Récemment, de plus en plus de lettres arrivent sur le site avec des questions sur par où commencer à apprendre le flash. Je vais en publier quelques-uns, je pense que cela sera intéressant pour de nombreux débutants. Les réponses sont uniquement ma vision et mon expérience, ce qui ne veut pas du tout dire que si vous procédez différemment, rien ne fonctionnera. Pour les personnes intéressées, lisez ci-dessous (l'orthographe et la grammaire des messages ont été conservées). Et si vous n'êtes pas débutant, vous vous ennuierez certainement et vous serez fastidieux en lisant ceci :)

"bonjour)) je m'appelle Nico, je viens du Tadjikistan et j'ai une grande envie de devenir animateur flash, mais je ne sais tout simplement pas par où commencer, j'ai trouvé votre site il y a beaucoup de choses utiles, mais pour moi, débutant, ils sont encore difficiles. s'il vous plaît, indiquez-moi par où commencer à apprendre l'animation flash)) Je vous en serai très reconnaissant . et écris comment tu dessines, dois-je acheter un stylo en bambou vakom et apprendre à dessiner dessus »

Niko, tu as l'essentiel : le désir. S'il ne s'évapore pas dans quelques semaines ou mois, le résultat sera le même. Par où commencer – avec le matériel.

1. Achetez/téléchargez un didacticiel Flash sur Internet. Prenez l'une des dernières versions (Flash Cs4-Cs 6), oubliez les manuels sur Macromedia, FlashMX, c'est déjà le siècle dernier au sens littéral du terme. Bien que beaucoup de choses n’aient pas changé en flash depuis lors.

Si vous envisagez d'apprendre le script d'action (et pour un flasher, connaître au moins les bases de as, je pense, est tout simplement nécessaire) - arrêtez-vous à c As3. Comme 2 devient lentement une chose du passé, nous resterons dans l’air du temps.

Comme j'ai étudié le flash pendant longtemps, je ne peux recommander aucune publication spécifique car je ne les connais pas.

Vous serez probablement très surpris, mais tous les livres sur l'apprentissage du flash contiennent les mêmes informations :) Cela est particulièrement vrai pour les livres pour débutants.

J'ai beaucoup aimé les livres Comment tricher dans Adobe Flash en anglais de l'animateur flash Chris Georgenes (il écrit des cours sur l'animation flash pour Adobe).

Il s'agit d'une série de livres, ils sont réédités à chaque nouvelle version du flash. Si vous connaissez l'anglais Language est un excellent livre, agréable à regarder avec de superbes graphismes.

Télécharger Comment tricher dans Adobe Flash dans Cs5 avec le disque, vous pouvez.

Mon étude du flash a commencé par un tutoriel. Ce qui m'a personnellement aidé à apprendre Flash, ce n'est pas le manuel lui-même, mais le cours vidéo fourni avec le manuel. Passons donc au point n°2.

2. Cours vidéo.

Je pense que les cours vidéo sont les plus efficaces, puisque j'ai moi-même étudié Flash à l'aide d'un cours vidéo.

3. Une autre chose dans l’apprentissage de l’animation Flash est que vous ne pouvez pas vous passer d’un programme comme Swf Decompiller. Il s'agit d'un disjoncteur de fichiers SVF, c'est-à-dire d'animations prêtes à l'emploi. C'est de cela dont nous parlons. Il vous permet de visualiser (et non de voler) le travail des pros et est très utile pour apprendre le flash. Vous prenez un travail terminé et le regardez sur la chronologie pour voir comment il a été réalisé, et essayez de le répéter. L'animation ne s'affiche pas toujours correctement - masques, jumeaux, mais le principe peut être compris et pris en compte.

4. Il est très efficace d’apprendre le Flash à l’aide d’exemples spécifiques. Fixez-vous comme objectif de réaliser une animation selon un scénario imaginaire - par exemple, une animation d'une voiture en mouvement le long d'une certaine trajectoire. Lorsqu’il y a un objectif final, il est plus facile d’enseigner.

5. Si des questions surviennent au cours de l'étude, vous pouvez les laisser ici ou dans la communauté à sujet. Ou sur tout autre forum où vivent des flashers.

Le plus grand forum flash que je connaisse est flasher.ru. Alors, chers débutants, profitez des bienfaits d'Internet et de cette ressource en particulier :)

6.Et un autre point important. Pour réaliser une bonne animation, il serait judicieux de se référer aux manuels d'animation classique (surtout si l'on veut apprendre à animer des personnages, et pas seulement des blocs de texte pour bannières).

Après avoir maîtrisé le flash comme outil, vous ne deviendrez pas exactement un animateur, mais plutôt un « déménageur » qui sait déplacer des objets.

Il existe de nombreux livres sur l'animation classique - arrêtez-vous d'abord à "Le timing dans l'animation", tu peux le prendre.

Concernant où obtenir Adobe Flash. Si vous voulez trouver ou prendre quelque chose, il n’y a rien de mieux que Google. Il sait tout :)

Est-il possible d'apprendre à travailler seul avec Flash ? C'est tout à fait possible, presque tous les bons animateurs flash que je connais ont appris le flash eux-mêmes, sans cours ni examens. Patience, travail acharné - et tout est entre vos mains. Je dirai même ceci - je ne connais pas les clignotants qui ont suivi les cours, ils ont tout enseigné tout seuls.

« Merci pour le blog, j'ai trouvé beaucoup de choses utiles pour moi.

Je suis un pur concepteur vectoriel et il ne m'a pas été difficile de dessiner en Flash. Le problème a commencé avec l’animation.

Pourriez-vous faire une leçon pour les noobs les plus stupides et les plus tordus)) Pour que même moi, je comprenne))"

( Tara )

Il y aura un cours d'animation pour les débutants. Je ne peux pas imaginer comment tout intégrer dans une seule leçon, je pense que ce sera une série de leçons. J'étais sûr qu'Internet regorgeait de leçons pour les débutants, mais pour une raison quelconque, elles sont souvent demandées. Alors restez à l'écoute des mises à jour sur le site Web et

Adobe Flash Professional est un programme volumineux et multifonctionnel difficile à apprendre et à utiliser.

Adobe, comme à son habitude, ne se soucie pas beaucoup de simplifier ses programmes. Si d'autres programmeurs, par souci de simplicité, abandonnent toutes les options intermédiaires, alors rien n'est gaspillé dans Adobe. Toutes les options intermédiaires pour travailler sur le programme seront incluses dans la version finale sous la forme d'une sorte de bouton, de panneau ou de ligne dans le menu. En conséquence, le poids des programmes (en Mo) augmente et le programme devient trop compliqué. De plus, de nombreux outils se dupliquent totalement ou partiellement.

Adobe Flash Professional n'a pas fait exception à cette règle. Le programme dispose de trois modes de dessin différents, de trois modes de création d'animation différents et de nombreuses autres fonctionnalités déroutantes qui peuvent effrayer les utilisateurs potentiels du programme.

Remarque : Les auteurs d'Adobe Flash Professional ont quelque peu simplifié les dernières versions du programme - des fonctions telles que créer une animation de mouvement classique , pas de Motion Editor, un seul langage de programmation est utilisé : ActionScript 3.0, etc.

Paramètres du programme

Adobe Flash Professional est configuré par défaut, mais vous pouvez modifier ces paramètres si nécessaire.

Dans le menu Edition, choisissez Préférences (Windows) ou Flash > Préférences (Mac OS).
Parmi les nombreux paramètres, VOUS pouvez désactiver l'écran de bienvenue - Aucun document.
Dans les dernières versions du programme, vous pouvez sélectionner la couleur de la fenêtre du programme (onglet "Général" - Interface utilisateur - Sombre, Clair).
Vous pouvez modifier le nombre d'annulations d'opérations possibles (« Annuler ») - la valeur par défaut est 100.
Flash prend en charge jusqu'à 9999 annulations, mais vous n'avez pas besoin de sélectionner le maximum car... cela ralentira le programme.

Couleurs de surbrillance - Vous pouvez modifier les couleurs par défaut utilisées pour les cadres de délimitation affichés autour d'un dessin d'objets, de groupes ou de symboles.

Et plus encore.

Création d'un nouveau document

Vous pouvez créer et ouvrir des documents à l'aide de l'écran de bienvenue ou du menu Fichier.
L'écran "Bienvenue" est une rampe de lancement pour créer et ouvrir des fichiers, y compris des modèles d'animation Flash standard intégrés, des bannières et des animations pour téléphones mobiles.

Dans la colonne Créer un nouveau de la fenêtre de bienvenue, sélectionnez ActionScript 3.0.

Ou : Dans le menu Fichier, sélectionnez Nouveau.
La fenêtre Nouveau document s'ouvre.

Sous l'onglet Général, sélectionnez le type de fichier Flash que vous souhaitez créer (ActionScript 2.0 ou 3.0).
Le langage par défaut est ActionScript 2.0, mais vous pouvez sélectionner ActionScript 3.0. L'utilisation d'ActionScript 3.0 permet d'utiliser toutes les fonctions des dernières versions du programme (CS5 et CS6). Par exemple, si vous souhaitez appliquer une rotation 3D aux objets lors de la création d'une animation, vous devez sélectionner ActionScript 3.0 (ActionScript 2.0 ne prend pas en charge cette fonction).
ActionScript 3.0 exige également que les visiteurs disposent de la dernière version de Flash Player.

Remarques :
Dans les dernières versions du programme
1. ActionScript 2.0 n'est pas pris en charge.
2. Il est possible de créer une animation au format HTML5.

Sur l'onglet Créer à partir d'un modèle Vous pouvez sélectionner un modèle pour l'ouvrir pour le modifier.

Vous pouvez toujours modifier les propriétés de votre projet : dans le menu Modifier, sélectionnez Document ou utilisez le raccourci clavier Ctrl+J (Windows) ou Commande+J (Mac OS).

Dans la section Dimensions, définissez la largeur et la hauteur de votre film en pixels.
Dans la section Unités de la règle, les unités de mesure de la règle sont définies - les centimètres. mm, pixels, etc. En règle générale, l'unité de mesure des règles est le pixel.
Dans la section Couleur d'arrière-plan, sélectionnez la couleur d'arrière-plan de l'animation.
Dans la section Fréquence d'images, la vitesse est définie - images par seconde. Habituellement, la vitesse par défaut est de 24 images par seconde.
Option de sauvegarde automatique - définition de la fréquence de sauvegarde automatique de votre travail.
L'option Imprimante force votre nouveau document à correspondre au format de papier de votre imprimante.

Enregistrer un document

Votre nouveau document doit être enregistré avant de commencer tout travail ou d'ajouter du contenu.

Par défaut, les documents sont enregistrés au format Flash CS6 - .fla
1 Dans le menu Fichier, sélectionnez Enregistrer.
2 Sélectionnez un dossier pour enregistrer le projet. Donnez votre nom au projet.
Incluez toujours l'extension .fla à la fin du nom du projet.

Remarque : Vous pouvez enregistrer le projet au format Flash CS5 (cette fonctionnalité n'est pas disponible dans les dernières versions du programme).
Les documents créés dans Flash CS6 ne s'ouvriront pas dans Flash CS5 ou les versions antérieures.
Les documents créés dans Flash CS5 et versions antérieures s'ouvriront dans Flash CS6.

Ouvrir un document

Sélectionnez le menu Fichier > Ouvrir
Fichier de commande > Ouvrir récent - pour ouvrir les 10 derniers fichiers.
Vous pouvez également utiliser l'écran de bienvenue pour ouvrir des documents.

Lorsque vous installez Adobe Flash Professional sur votre ordinateur, le gestionnaire de fichiers Adobe Bridge sera installé en même temps, qui peut être utilisé lorsque vous travaillez avec des fichiers.
Dans le menu Fichier, sélectionnez Afficher dans Bridge ou Accédez au programme Bridge (Parcourir dans Bridge).
Sélectionnez le format de fichier .fla dans Adobe Bridge. Lorsque vous double-cliquez sur un fichier, il s'ouvre dans Adobe Flash.

Configuration de l'interface
Si nécessaire, configurez l'espace de travail -

Création d'animations

Modèles
Adobe Flash comprend de nombreux modèles standards.
Les modèles sont prédéfinis avec des dimensions et une version ActionScript.
Sélectionnez Fichier > Nouveau et cliquez sur l'onglet Modèles.
Consultez les modèles Flash inclus.

Dessin
Adobe Flash Professional dispose d'un éditeur graphique intégré pour les images vectorielles utilisées pour créer une animation.

Il existe plusieurs modes de dessin dans Adobe Flash, dont le travail a ses propres différences - voir Modes de dessin

Découvrez la gamme d'outils de dessin disponibles dans Adobe Flash - voir Barre d'outils .
Il n'est pas particulièrement difficile de créer des objets aussi simples qu'un rectangle (carré), une ellipse (cercle) ou une ligne.
Pour créer des objets plus complexes, vous devrez vous familiariser avec toutes les fonctionnalités du programme dans la zone de dessin - voir Dessin.

Pour créer une animation dessinée à la main image par image, vous devrez utiliser une tablette graphique pour dessiner, car... Sans cela, il est extrêmement difficile de créer une animation de haute qualité.
À propos des tablettes graphiques

Créer une animation simple

Il existe deux manières principales de créer une animation dans Adobe Flash : l'animation image par image et l'animation interpolée. À son tour, l'animation préadolescente a plusieurs variétés -.

Quelle que soit la méthode de création d'animation, vous devez étudier le travail
Chronologie (Graphiques temporels). Si vous comprenez le fonctionnement de la Chronologie, considérez que la moitié du travail d'étude du programme est effectué.
Une attention particulière doit être portée à travailler avec des calques et sur travailler avec le personnel .

Après avoir maîtrisé tout ce qui précède, vous serez en mesure de créer des éléments Flash (par exemple des bannières, des slides, etc.) à insérer dans vos pages HTML.

Vous pouvez créer tous les éléments de votre animation dans Adobe Flash Professional. Ou vous pouvez importer des éléments créés dans Adobe Illustrator, Adobe Photoshop, Adobe After Effects, etc. programmes.

L'autre moitié du succès de la maîtrise d'Adobe Flash Professional réside dans l'apprentissage du langage ActionScript 3.0. Dans ce cas, vous pourrez utiliser toutes les fonctionnalités du programme, y compris la création de sites Flash interactifs.
Une alternative inférieure consiste à utiliser les extraits de code fournis avec le programme (menu Fenêtre - Extraits de code).

Cette présentation ne contient pas de didacticiels ActionScript, mais ces documents sont disponibles en ligne.

Gestion des animations Flash

Si vous souhaitez créer quelque chose de plus complexe que de simples bannières ou diapositives animées, vous aurez besoin de :
UN. Apprenez à créer des boutons
b. Apprenez à utiliser le code ActionScript.

Des boutons (graphiques ou textuels) sont nécessaires pour qu'un visiteur de votre site puisse contrôler l'animation - voir Boutons.

L'animation dans Adobe Flash est créée à l'aide du code ActionScript. Les versions antérieures du programme utilisaient ActionScript 2.0, les dernières versions utilisent ActionScript 3.0. Ces versions présentent de sérieuses différences et sont partiellement compatibles.

Lors de la création d'une animation Flash, vous n'avez pas besoin d'écrire manuellement du code, car... Dans Adobe Flash, la plupart du travail est effectué en mode visuel. Cependant, dans certains cas, vous devrez peut-être insérer du code ActionScript. Vous pouvez utiliser les extraits de code fournis avec le programme ou écrire le code vous-même.

Le code ActionScript est utilisé pour donner aux boutons de navigation les actions correctes : passer à une image d'animation spécifique ou à une page spécifique d'un site, contrôler et synchroniser l'audio et la vidéo, et bien plus encore.

Pour une introduction rapide à ActionScript, consultez ActionScript.

Création d'un site flash

Aperçu

Vue locale

Vous pouvez rapidement prévisualiser votre animation en déplaçant la tête de lecture rouge d'avant en arrière sur la timeline des images (voir ci-dessous). Chronologie).

Pour voir à quoi ressemblera l'animation en ligne (c'est-à-dire avec toutes les animations imbriquées), choisissez Contrôle > Testez la vidéo(Test de l'animation) > dans Flash Professional (dans Flash Professional).
Dans ce cas, l'animation créée est visualisée dans le Flash Player intégré.

Pour tester Flash pour téléphones mobiles, utilisez le menu Contrôle > Testez la vidéo(Test du film) > dans Device Central.

Publication

Lorsque vous publiez, l'éditeur crée des fichiers HTML, un fichier SWF et d'autres fichiers nécessaires au bon fonctionnement de Flash.
Pour les paramètres de publication, dans le menu Fichier, sélectionnez Options de publication(Paramètres de publication).
Pour publier, sélectionnez Publier dans le menu Fichier.

Flash est utilisé pour créer des animations, des bannières publicitaires, des petits jeux, l'animation peut contenir de la vidéo, du son, se connecter à des bases de données pour créer des boutiques en ligne, des services de newsletter et bien plus encore.

Pour démarrer avec Adobe Flash Professional, vous devez étudier les supports de formation des dernières versions du programme - versions CS6, CS5.5 ou CS5.

Adobe Flash Professional peut fonctionner avec d'autres programmes Adobe tels qu'Adobe Photoshop ou Adobe Illustrator.

Flash Professional CS6 est installé avec Adobe Media Encoder.
Flash Player est automatiquement installé sur votre ordinateur lorsque vous installez Adobe Flash Professional.
Le lecteur Flash est également utilisé en complément des navigateurs populaires - Internet Explorer, Safari et Firefox. De plus, 98 % des internautes disposent de Flash Player comme programme autonome. Par conséquent, presque tout le monde peut regarder l’animation Flash que vous avez créée.

Pour les appareils qui ne prennent pas en charge Flash (tels que les iPhones et iPads), vous pouvez publier une animation Flash aux formats HTML et JavaScript. Dans ce cas, l’animation peut être lue sur presque tous les appareils.

Mais Adobe Flash Professional n'est qu'un produit parmi les logiciels de création Flash d'Adobe.
De plus, Adobe propose les programmes Flash Catalyst et Flash Builder.

Flash Catalyst est un outil de conception permettant de créer rapidement des interfaces expressives et du contenu interactif sans écrire de code.

Flash Builder (anciennement Flex Builder) est capable de créer du contenu interactif complexe à l'aide du code ActionScript.

Bien que la plate-forme de développement de ces programmes soit différente, les trois outils produisent finalement la même chose : un fichier Flash complet (fichier SWF) qui peut être visualisé dans Flash Player sur votre ordinateur ou votre téléphone portable.

Les fichiers Flash peuvent être créés pour Macintosh ou Windows.
Adobe a récemment présenté sa nouvelle technologie Adobe AIR pour créer Flash fonctionnant sur Macintosh, Windows ou Linux.

Adobe AIR peut être utilisé avec Flash CS5, qui fait partie des nouvelles fonctionnalités d'AIR 2.0.

Si vous réalisez des projets qui impliquent une conception, une vidéo, une animation complexe et nécessitent également beaucoup de cohérence (c'est-à-dire nécessitent beaucoup de code), vous pouvez utiliser à la fois Flash CS5 et Flash Builder 4 en même temps. intégré.

Bien que Flash Builder soit mieux adapté à la création de code ActionScript, Flash CS5 offre également des fonctionnalités de codage manuel. De plus, Adobe Flash Professional contient les extraits de code les plus couramment utilisés.

Une autre option pour les programmeurs expérimentés consiste à utiliser le programme gratuit Flex SDK.
- http://www.adobe.com/products/flex/flex_framework/ .

Téléchargez les documents d'assistance au format PDF à partir du site Web d'Adobe http://www.adobe.com/support/

Cette revue couvre les principales fonctions (c'est-à-dire pas toutes) de l'éditeur Adobe Flash Professional. Certaines fonctions sont abordées plus en détail, d'autres moins en détail ou seulement mentionnées.

Selon la version d'Adobe Flash Professional, l'ensemble des fonctionnalités et les outils du programme peuvent différer. La revue est basée sur les dernières versions de l'éditeur - CS5 et CS6 (version russe).

Sources principales de l'examen:

Livre "Adobe Flash Professionnel CS5"(375 pages, 22 Mo, prix 22 $, anglais, format PDF. Auteur Russell Chun, site Web de l'auteur). Le livre contient une formation détaillée sur l'utilisation de Flash Professional à l'aide d'exemples. Tout le monde peut télécharger ce livre sur Internet.

Livre "Adobe Flash Professional CS6. Digital Classroom" (482 pages, 48 Mo, anglais, format PDF).

Lorsque vous commencez à travailler dans Adobe Flash Professional, vous verrez d'abord une fenêtre dans laquelle se trouve, entre autres, une section « Aide » (image de gauche).

De plus, il existe de nombreux documents sur Internet sur l'utilisation d'Adobe Flash Professional, sur le site Web d'Adobe (

Depuis plus de sept ans, je travaille à distance avec des clients étrangers des États-Unis, du Canada, d'Australie, d'Allemagne et d'autres pays. Je dessine des ressources graphiques et des animations pour les jeux Adobe Animer CC. Auparavant, l'éditeur s'appelait Adobe Flash Professionnel CC.

Sur l'ancien blog, j'ai commencé une série de leçons similaires, mais au lieu de continuer là-bas, j'ai décidé de tout réécrire afin de partager une nouvelle expérience.

Pourquoi avons-nous besoin d’une autre série de leçons sur le dessin dans Adobe Flash ? Je fais cela depuis de nombreuses années et je pense que mon expérience peut être utile aux débutants. Surtout pour ceux qui n’ont jamais dessiné avec une tablette graphique auparavant. Si vous êtes doué pour dessiner sur papier, mais que vous n'avez jamais dessiné sur un ordinateur, alors j'ai certainement quelque chose à vous dire.

Et pour ceux qui ne savent pas dessiner sur papier, je vais essayer d'expliquer comment développer cette compétence en général, sans être lié à un éditeur graphique : construction de la perspective et de la composition, choix des couleurs, ombrages et autres sujets.

Choisir une tablette graphique

Peu importe si vous savez dessiner, vous aurez besoin d'outils : des appareils et des programmes. Commençons par le matériel. Vous possédez déjà un ordinateur, mais vous devez quand même y connecter une tablette graphique, ce qui nous donnera la possibilité de dessiner sur une toile virtuelle qui existe en RAM. En d’autres termes, il s’agit d’un autre périphérique de saisie d’informations, comme une souris ou une boule de commande. Mais la tablette présente des avantages qui permettent de dessiner comme sur du papier. Il s'agit de la sensibilité à la pression et de la forme d'un stylo du dispositif de pointage.

Il existe de nombreux fabricants de tablettes graphiques : Wacom, Genius, Huion. Je n'ai rencontré que les deux premiers. Au total, j'ai déjà essayé quatre tablettes de Wacom et une de Genius à mes débuts. Je recommande vivement Wacom : haute qualité à un prix raisonnable.

Si vous n'avez pas d'argent, n'achetez pas le Genius, procurez-vous le petit stylo Wacom Bamboo Pen d'occasion le plus abordable. J'ai utilisé presque le même, le Wacom Bamboo Pen&Touch S CTH-460. Il n'y a eu aucun problème critique en sept ans d'utilisation, un bon appareil pour commencer. Si vous pouvez économiser plus d’argent, optez pour le modèle plus grand. J'utilise Wacom Bamboo Fun Pen&Touch M CTH-670.

Que signifient les chiffres et les lettres dans les noms des modèles Wacom ?

Je vais vous expliquer la signification de certains chiffres et lettres du nom pour vous permettre de naviguer plus facilement dans le parc de modèles réduits de l'entreprise.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

M.— la taille de la zone de travail. Il y a S – Small (petit), M – Medium (moyen), L – Large (grand) ;
CP— désigne la gamme de modèles. Il existe CTL et CTH - modèles amateurs d'entrée de gamme avec boutons en option et pavé tactile, PTH - modèles professionnels, DTH et DTK - modèles professionnels avec écran intégré ;
6 — taille de la zone de travail en pouces. Il y en a 4 - Small (petit), 6 - Medium (moyen), 8 - Large (grand), ainsi que 13 et plus, mais cela ne s'applique qu'aux tablettes avec écran intégré. Parfois, les magasins en ligne et les publicités n'indiquent pas l'index des lettres, vous pouvez alors utiliser celui numérique pour comprendre les dimensions de l'appareil ;
70 - génération et modèle. Il est important de comprendre que plus ce chiffre est élevé, plus l’appareil est récent. A titre de comparaison, mon ancienne tablette a l'indice CTH-460, l'analogue moderne est CTH-490. Les générations diffèrent par 10 : 460, 470 et ainsi de suite.

Taille de la tablette graphique

Lorsque vous dessinez, la zone active de l'espace de travail est très petite. En d’autres termes, le stylet glisse constamment dans le rayon d’un petit cercle. Ce cercle peut bouger un peu. Au fil du temps, une tache se forme, visible comme une accumulation dense de micro-rayures. Cela montre que vous n'utilisez pratiquement pas la périphérie de l'appareil, tout se passe au centre.

On pourrait supposer qu'une grande tablette graphique n'est pas nécessaire puisque vous n'utiliserez jamais toute sa surface de travail et que la zone d'activité sera de la même taille que sur un modèle plus petit. Mais ce n'est pas vrai.

Lorsque vous travaillez sur une tablette, sa zone de travail est projetée sur toute la largeur du moniteur. Par conséquent, plus la tablette est grande, plus vous pouvez appliquer des traits avec précision. Et vice versa, plus le moniteur est grand et plus la tablette est petite, plus il vous sera difficile et inconfortable de dessiner. Par expérience, je peux dire qu'après être passé de la taille S à la taille M en travaillant sur un moniteur ultra-large de 29 pouces, mon travail est devenu 25 à 30 % plus confortable. Je trouve qu'il faut moins d'efforts pour dessiner un contour complexe et que l'expérience globale est plus fluide et plus agréable.

Les tablettes graphiques plus grandes devraient offrir un environnement de travail encore plus confortable, mais je n'ai pas travaillé sur les modèles L, je ne peux donc que supposer.

Différences entre les tablettes Wacom amateurs et professionnelles

En achetant un modèle professionnel, vous obtenez un appareil sans fil en plastique de meilleure qualité avec 2048 niveaux de sensibilité à la pression contre 1024 pour les modèles moins chers, un beau design, des commandes supplémentaires sous forme de boutons et une bague tactile. Je suis entièrement satisfait des modèles plus jeunes et obsolètes de la série Bamboo, qui ont été abandonnés. La différence de coût entre les versions amateur et professionnelle sera plus de deux fois supérieure. Le tableau mettra tout en ordre :

Configuration du Wacom Bamboo Pen & Touch M CTH-670

Avant de connecter l'appareil, téléchargez les pilotes sur le site officiel de Wacom.

Liste des modèles	Lien du pilote
Intuos CTL-4100/6100/4100WL/6100WL Intuos Pro PTH-451/651/660/851/860 Un CTL-471/671/472/672 Intuos CTL-480/490/680/690 Intuos CTH-480/490/680/690 Intuos 5PTK-450/650 PTH-450/650/850 Intuos 4PTK-440/640/840/1240/540WL	Fenêtres macOS
Stylo et contact en bambou CTH-460/470/471/660/661/670 Stylo en bambou CTL-460/471	Fenêtres macOS

Après avoir connecté la tablette et installé les pilotes, lancez l'application Préférences Wacom, qui peut être trouvé via la recherche Windows (Win + S) ou dans le Panneau de configuration.

Les paramètres de base des tablettes de l'entreprise ne diffèrent pas ; les modèles amateurs et professionnels sont configurés de la même manière.

Sur l'onglet Comprimé Vous pouvez configurer la tablette pour les mains droite et gauche, ainsi qu'attribuer des actions aux touches. Tout d'abord, installez-les dans Désactivé, au fil du temps, il sera possible d'attribuer des raccourcis clavier.

Sur l'onglet suivant Stylo on retrouve des paramètres importants :

Toucher la pointe- sensibilité à la pression. Laissez-le au centre. Au cours du processus, vous comprendrez quel type de dureté vous aimez et l'ajusterez à votre goût ;
Suivi— mode de suivi de la position du stylet. Installer Mode stylo— la zone de travail de la tablette s'étend pour remplir tout l'écran. Mode Souris utilisé en remplacement d'une souris;
Les paramètres restants ne sont pas si importants. Boutons du stylo permet d'attribuer une action aux boutons du stylet. Sensation de gomme— sensibilité de l'élastique au dos du stylet. Je n’utilise pas cette fonctionnalité car il est plus rapide pour moi de basculer à l’aide de raccourcis clavier.

Dans le même onglet de la section Suivi appuyez sur le bouton Cartographie... pour configurer la projection de la zone de travail de la tablette sur l'écran du moniteur. Une fenêtre s'ouvrira Détails du mode stylet.

Dans la rubrique Zone d'écran choisir Moniteur, si vous disposez de plusieurs moniteurs et indiquez le principal. S'il n'y a qu'un seul moniteur, laissez-le Tous les écrans

Dans la rubrique Mise à l'échelle assurez-vous de cocher la case à côté Proportions des forces afin que la zone de travail ne s'étire pas lors de la projection sur l'écran. Dans ce cas, une partie de la zone de travail de la tablette ne sera pas utilisée, mais nous aurons des proportions normales de 1 pour 1. Et si vous dessinez un cercle, il apparaîtra à l’écran comme un cercle et non comme une ellipse allongée.

Assurez-vous de cocher la case à côté Utiliser Windows Ink pour que la sensibilité à la pression fonctionne.

Sur l'onglet suivant Options tactiles décochez la case ci-contre Activer la saisie tactile pour passer la tablette en mode normal.

Sur les onglets restants, j'ai tout désactivé, car je n'utilise ni les gestes du mode tactile ni le menu déroulant propriétaire. Ceci termine la configuration de la tablette graphique.

Animate CC ou Flash Professional CC ?

Adobe Animate CC est une nouvelle image d'Adobe Flash Professional CC ; plusieurs innovations ont été ajoutées au programme. Même sous son ancien nom, il a acquis une énorme popularité auprès des artistes, des animateurs et des développeurs de jeux indépendants. Les principes de conception vectorielle vous permettent de créer des sprites pour n'importe quelle résolution. N'importe quelle version que vous pouvez obtenir fonctionnera pour le dessin. Les outils de dessin sont restés les mêmes pendant de nombreuses années, avec seulement des améliorations mineures. J'utiliserai Adobe Animate CC, mais tout ce qui est écrit s'appliquera également aux anciennes versions d'Adobe Flash Professional. À propos, Adobe a récemment opté pour un modèle d'abonnement mensuel pour accéder à ses produits au lieu d'une licence unique coûteuse. Adobe Animate CC coûte actuellement 20 $ par mois.

Premier lancement d'Adobe Animate CC

Après le téléchargement, créez un nouveau fichier et sélectionnez le type ActionScript 3.0. Dans la même fenêtre, vous pouvez spécifier les paramètres de la scène :

Largeur Et Hauteur— largeur et hauteur de la scène en pixels. Régleons-le sur 1920 x 1024, comme la résolution d'un moniteur ou d'un smartphone moderne ;
Unités de règle— unités de mesure, pixels définis ;
Fréquence d'images— nombre d'images par seconde, laisser 24 ;
Couleur de fond— couleur d'arrière-plan, définie sur gris.

Ces paramètres peuvent être modifiés après la création du document. Pour ce faire, vous devez sélectionner un outil Outil de sélection(raccourci V), fenêtre ouverte Propriétés et développez la section Propriétés. Si vous ne trouvez pas cette fenêtre, utilisez le menu Fenêtre → Propriétés ou le raccourci clavier Ctrl + F3.

Configuration des touches de raccourci

Pour augmenter l'efficacité de votre travail, vous devez utiliser au maximum les raccourcis clavier. Au début, cela nécessite une certaine habitude et une certaine mémorisation de nouvelles combinaisons de touches, mais à l'avenir, cela permettra d'améliorer considérablement votre efficacité. J'ai redéfini la plupart des raccourcis clavier pour qu'ils se trouvent sur le côté droit du clavier. Pourquoi à droite ? Le fait est que je suis gaucher et, par conséquent, c'est plus pratique pour moi. Si vous êtes droitier, vous devrez alors élaborer votre propre schéma. De plus, j'utilise Rapoo E9050 et le clavier sans fil Apple, qui sont fabriqués sous la forme de claviers d'ordinateurs portables, donc si vous en utilisez un de taille normale, alors, encore une fois, travaillez dur et proposez votre propre schéma - ce sera le cas. rentabilisé par un gain de temps considérable - et considérons mon projet comme exemple.

Obtenez l'idée : regroupez les commandes essentielles sur le côté pratique du clavier pour un accès rapide sans changer constamment la position de vos mains. La plupart du temps, il doit se trouver au même endroit, seuls vos doigts « marchent » dans un petit rayon en appuyant sur les boutons. Bien sûr, il y aura toujours des équipes qui exigeront un changement de position, mais elles constituent une écrasante minorité. Voici mon schéma :

Équipe	Description	Ancienne combinaison	Nouvelle combinaison
Sélectionner tout	Tout sélectionner	Ctrl+A	Ctrl + A, O
Désélectionner tout	Désélectionner	Ctrl + Maj + A	Ctrl + Maj + A, P
Défaire	Annuler l'action	Ctrl+Z	Ctrl + Z, [, Z
Refaire	Répéter l'action	Ctrl+Y	Ctrl + Y, ]
Zoom	Mise à l'échelle	Maj + Z, Z	Maj + Z, \
Zoomer	Agrandir l'image	Ctrl + =, Ctrl + Numéro =	Ctrl + =, Ctrl + Numéro =, =
Zoom arrière	Zoom arrière	Ctrl + =, Ctrl + Numéro =	Ctrl + -, Ctrl + Numéro -, -
Redresser	Redresser les courbes sélectionnées		9
Lisse	Lisser les courbes sélectionnées		0
Retourner horizontalement	Retourner horizontalement		F
Retourner verticalement	Retourner verticalement		Maj + F
Couper	Couper dans le presse-papiers	Ctrl+X	Ctrl + X, X
Symbole en double...	Symbole de clone		Ctrl+D
Échanger le symbole...	Changer le symbole		Ctrl+]

Dans la plupart des cas, de nouvelles combinaisons ne remplacent pas les anciennes, mais les complètent par plusieurs nouvelles commandes ; Vous devez le configurer via le menu Modifier → Raccourcis clavier.... Dans le champ de recherche, saisissez le nom de l'équipe, dans la colonne Raccourci Cliquez sur l'espace vide en face de la commande souhaitée et appuyez sur la nouvelle combinaison de touches.

N'essayez pas de comprendre les commandes données dans le tableau, elles seront toutes expliquées dans les leçons suivantes. À l'avenir, lorsque vous commencerez à les utiliser activement, vous les redéfinirez probablement plusieurs fois jusqu'à ce que vous trouviez l'option la plus pratique.

Paramètres du pinceau

Outil Pinceau(raccourci clavier B) - l'outil pinceau le plus utilisé lors du dessin. Les paramètres sont concentrés dans deux fenêtres :

Les réglages du pinceau sont terminés, peignons quelque chose.

Dessiner avec un pinceau

Sélectionnez une couleur appropriée à l'aide de la fenêtre Couleur (Ctrl + Maj + F9), sélectionnez l'outil Pinceau (B) et commencez par un long trait avec un peu de force pour tracer la future forme. Tracez ensuite le contour obtenu pour lisser toutes les irrégularités - le pinceau est prêt.

Veuillez noter que dans l'exemple ci-dessus, seuls trois traits ont été utilisés. Vous devez viser à effectuer des mouvements de longueur moyenne afin que votre main ne quitte pas la tablette. Essayer de faire beaucoup de petits traits est une erreur, car le contour résultant sera irrégulier et comportera un grand nombre de points supplémentaires.

Adobe Animate CC fonctionne sur les principes vectoriels. Tous les objets sont décrits mathématiquement et peuvent être mis à l'échelle sans perte de qualité, contrairement à l'approche raster. Cela nous permet de manipuler des objets vectoriels d'une manière que nous ne pourrions jamais faire aussi facilement dans un éditeur raster. Nous pouvons lisser et simplifier les contours, redresser les lignes courbes, modifier les proportions et déformer les objets graphiques sans perte de qualité. Chaque trait est automatiquement converti en courbes mathématiques que nous pouvons affiner et modifier.

Pour vérifier tout ce qui précède, activez l'outil Outil de sous-sélection(raccourci clavier A) et sélectionnez le pinceau que vous venez de dessiner. Vous pouvez désormais voir les points du chemin vectoriel et même les modifier.

Conclusion

Aujourd'hui, nous avons configuré Adobe Animate CC et sommes prêts à commencer à dessiner. Entraînez-vous un peu avant de continuer. Apprenez à dessiner des formes géométriques simples sans distorsion, essayez différentes couleurs et réglages de pinceau (expérimentez avec le paramètre Lissage).

Matériaux similaires