Animations avec Adobe Edge Animate

Les utilisateurs sur le Web s'attendent à trouver des conceptions spectaculaires et à apprécier les animations qui contribuent à ces conceptions, tant qu'elles ne perdent pas de temps ou n'influencent pas négativement la navigation des pages.
Des animations bien faites attirent l'attention sur des détails importants, peuvent montrer comment fonctionne une application et faciliter la navigation si elles répondent à l'exigence précédente, où beaucoup de ces animations ont été réalisées avec Éclat et s'ils avaient la qualité nécessaire, ils étaient bien reçus par l'utilisateur.
Mais les temps ont changé et tout comme les technologies ont également fait évoluer la façon de faire des animations, c'est là qu'il entre en jeu Adobe Edge Animer, un outil qui nous permet de créer des animations avec HTML5, CSS3 et JavaScript sans avoir besoin de connaissances en programmation.
Ce qui précède peut sembler un peu compliqué, comment est-il possible d'avoir un outil qui m'aide à créer des animations dans ces technologies, sans connaissances en programmation ? Ce n'est pas aussi compliqué qu'il y paraît, mais nous devons d'abord connaître l'outil et que nous devons travailler avec, pour cela nous allons l'exécuter et nous serons reçus par l'écran d'accueil qui devrait ressembler à ceci :

AGRANDIR

Sur le côté droit, nous pouvons voir des liens pour apprendre à faire des animations avec l'outil et sur le côté droit des liens pour ouvrir un fichier ou le créer. cliquons sur le lien Créer un nouveau et nous serons dirigés vers l'espace de travail de l'outil, pour l'instant nous ne nous en soucierons pas mais nous allons sauvegarder notre projet pour pouvoir examiner la structure créée par l'outil, voyons à quoi ressemble notre structure :

AGRANDIR

Si nous sommes familiarisés avec le développement d'applications Web, nous pouvons voir certains fichiers avec des extensions connues, voyons la fonction de chacun d'entre eux dans un projet de Bord animé:
.Un fichierCe fichier est utilisé par l'outil pour garder une trace de notre projet.
fichier .htmlCe fichier décrit une page Web qui utilise du code HTML, ainsi que le reste des pages sur Internet.
fichier .JsCes fichiers contiennent du code JavaScript pour notre projet, qui définit une étape vierge pour notre animation et effectue d'autres tâches nécessaires dans les projets de Bord animé.
En plus de ces fichiers, dans le dossier edge_includes nous avons deux fichiers JavaScript supplémentaires, qui sont des bibliothèques pour notre projet et sont référencées dans notre HTML et sa fonction est d'accomplir l'action de mouvement en tant que telle.
Une fois que nous avons vu comment notre projet est structuré, il est temps de connaître les zones de notre espace de travail, voyons d'abord à quoi il ressemble :

AGRANDIR

Chaque panneau est identifié par son nom, où le Éléments, Propriétés (modifier) et la Ligne de temps Ils ont des outils et des widgets pour créer des animations. Le plus grand panneau est connu comme le stade o Étape et là, nous construisons l'animation, examinons de plus près chacun des éléments de notre espace de travail :
ÉtapeC'est là que les graphiques et le texte du projet sont affichés et animés, il a des limites dans son agencement et nous permet de masquer des éléments ou de les positionner dedans. De plus, lorsque nous sauvegardons notre projet Animer prend soin d'enregistrer le texte et les graphiques en tant que page HTML.
ÉlémentsLes éléments sont des objets que nous ajoutons à notre scène et, par conséquent, ils apparaissent sur notre page Web finale, où ces éléments peuvent être des illustrations, des photographies ou même du texte.
Propriétés (modifier)Les éléments ont des propriétés qui peuvent affecter leur position et même leur apparence sur la scène et nous pouvons les gérer à l'aide du panneau de Propriétés (modifier).
Ligne de tempsIl nous permet de conserver une trace des éléments et de leurs propriétés tout au long de notre projet.
LibrairieIci, nous pouvons conserver une trace des ressources que nous importons dans le projet et fournir un accès facile aux symboles auxquels nous croyons. Animer.
OutilsIls apparaissent en haut de l'espace de travail. Nous les utilisons pour créer, sélectionner et modifier des éléments sur scène, il n'y en a pas beaucoup mais nous serions surpris de savoir tout ce que nous pouvons en faire.
Puisque nous savons comment notre outil est distribué et que nous connaissons les concepts qu'il contient, nous pouvons nous aventurer à créer notre première animation.
Pour créer notre première animation nous allons expérimenter un peu les transitions dans une image donnée, voyons les étapes à suivre :
1- Nous allons créer un nouveau projet avec l'option nouveau fichier dans le cas que nous avons fermé dans lequel nous travaillons pour comprendre la structure et les éléments au sein de l'outil. Lorsque nous commençons un projet, notre étape est vide, nous pouvons changer cela dans les propriétés de étape sur le côté gauche de l'écran, pour cela, nous appuyons sur la case blanche et choisissons une couleur de notre préférence ou dans le cas où nous avons une couleur en notation hexadécimale, nous pouvons l'inclure comme nous le voyons dans l'image suivante :

AGRANDIR

2- Dans le cas de ce tutoriel nous avons choisi une couleur sombre pour que l'image que nous allons inclure dans le étape point culminant. Maintenant, pour inclure une image, nous allons à Archiver et nous sélectionnons importer, l'explorateur de fichiers s'affichera et nous sélectionnons l'image à inclure :

AGRANDIR

Il est important que dans les propriétés de notre scénario nous ayons le débordement u débordement dans caché depuis notre étape il présente une petite partie de tout notre HTML, donc si nous ne voulons pas voir d'éléments en dehors de la scène, il est important d'avoir cette valeur pour cette propriété. Nous pouvons également changer le nom de nos éléments dans la section de Propriétés (modifier), nous pouvons ainsi mieux les identifier dans notre projet.
3- Maintenant, nous allons à notre Ligne de temps et on vérifie que le compteur de lecture est à 0:00 pour commencer avec notre animation. C'est là qu'intervient la partie intéressante et c'est là qu'il faut porter le maximum d'attention, il faut d'abord vérifier que le mode image clé est pressant ainsi que le mode de transition automatique, que l'on peut voir sur l'image suivante :

Pour faire nos animations, nous devons utiliser la fonctionnalité de Basculer l'épingle qui est activé dans le bouton à côté de la mode de transition automatiqueEn activant ce bouton, nous activons les cadres ou la transition et il doit être accompagné du compteur jaune, car de cette façon, nous pouvons effectuer une transition de tant de secondes jusqu'à ce que nous déplacions notre Pin au même niveau que le deuxième compteur.
4- Pour mener à bien notre première transition appuyons sur le bouton Basculer l'épingle et nous allons prendre le deuxième compteur et nous allons le déplacer 200 secondes, après cela, nous déplaçons notre image vers le bas de notre écran, voyons à quoi cela ressemble :

AGRANDIR

Comme on peut le voir la partie surlignée en bleu dans le Ligne de temps représente la transition que nous pouvons prévisualiser si nous appuyons sur la touche espace. Nous voyons alors qu'il est assez facile de faire une transition, mais que se passe-t-il si nous voulons faire une deuxième transition ou plus ? Pour cela, nous devons déplacer notre Épingler vers le deuxième compteur, de cette façon nous indiquons à Animer que nous clôturons le processus de la première transition et que nous pouvons en commencer une nouvelle.
5- Nous allons faire un deuxième transition où cette fois nous allons diminuer l'opacité de notre image, pour cela nous sélectionnons notre image en diminuant son opacité à 46% et comme nous l'avons mentionné nous déplaçons le Épingler sur le deuxième compteur et répétez les étapes du point 4, voyons :

AGRANDIR

6- Enfin nous allons faire un troisième transition pour compléter notre animation. Comme nous le savons déjà, nous déplaçons notre deuxième compteur de quelques secondes, faisons glisser notre image en diagonale vers la gauche et fermons la transition en déplaçant le Épingler à propos du deuxième compteur :

AGRANDIR

7- Nous sauvegardons notre travail et appuyons sur la touche espace pour afficher notre animation, si nous ne sommes toujours pas satisfaits, nous pouvons nous déplacer dans les transitions représentées par la couleur bleue dans notre Ligne de temps et on modifie les valeurs ou si on souhaite le type de transition.
Puisque nous sommes satisfaits de notre travail, il est temps de passer à l'étape finale, à savoir l'afficher pour visualisation dans un navigateur, ce qui est l'objectif pour lequel nous travaillons.
Il y a deux façons de visualiser notre travail, la première et la plus simple peut se faire depuis l'outil, pour cela on va dans l'onglet Archiver et nous sélectionnons Aperçu dans le navigateur, qui ouvrira immédiatement l'animation dans notre navigateur Web par défaut :

La seconde est un peu plus compliquée si nous n'avons pas d'expérience en développement web, qui consiste à prendre les fichiers et à faire une intégration avec notre application web. Il est important d'être très prudent lors de cette opération et d'inclure tous les fichiers générés par Animer sinon l'animation ne fonctionnera pas.
Avec cela, nous avons terminé ce tutoriel, où nous pourrions savoir comment cela fonctionne Adobe Edge Animer, en voyant ses caractéristiques les plus importantes et en réalisant notre première animation en quelques minutes sans avoir besoin d'une seule ligne de code, en la générant avec HTML5 Oui JavaScript pour la mise en œuvre dans n'importe quelle application Web.