Ce que vous devez savoir pour créer quelque chose comme ça dans After Effects:
Comment faire un projet et des compositions
Lorsque vous démarrez AE, vous pouvez appuyer sur Cmd+Npour créer un nouveau projet contenant une composition.
Si vous avez déjà un projet ouvert, appuyez Cmd+Nuniquement sur pour créer une nouvelle composition.
Dans ce projet, j'ai utilisé 2 compositions. GUIcomp pour contenir l'interface graphique et ses animations. iphonecomp pour contenir les deux, le fond et GUIcomp.
La deuxième composition avec les animations de l'interface graphique doit avoir la même taille que l'écran ou au moins avoir le même rapport d'aspect. Plus tard, lorsque vous allez le placer à l’écran, il risque de s’étirer de façon étrange si le rapport de format est désactivé.
Importation d'images dans AE
After Effects possède un très bon système pour importer des fichiers .psd, mais je n'aime pas l'utiliser parce que, si vous égarez, déplacez ou renommez le fichier .psd, les effets secondaires ne le trouvent pas et vous devez remplacer le métrage à chaque fois. couche séparément.
Si vous importez un dossier d'images dans les projets et vous, par exemple. Pour renommer le dossier d’images, il suffit de remplacer une image et toutes les images manquantes sont restaurées (tant que toutes les images manquantes existent dans le même dossier). Aussi, de cette façon, il y a moins d'encombrement.
Comment importer des images dans un projet
Cliquez avec le bouton droit de la souris dans le panneau Projet de gauche, puis choisissez: Import > Multiple files
... ou vous pouvez simplement faire glisser des fichiers dans ce panneau
J'ai utilisé slicy pour exporter mes images hors de Photoshop.
Quels objets devriez-vous enregistrer en tant que fichiers image séparés
Essentiellement, vous voudrez enregistrer tous les objets en mouvement séparément. Vous devrez peut-être également enregistrer quelques objets statiques séparément.
Dans ce projet, j'aurais pu potentiellement sauvegarder l'en-tête et le pied de page comme un seul, mais l'en-tête avait une ombre qui recouvrait le premier bouton, je devais donc les enregistrer séparément.
Voici un aperçu de la façon dont j'ai sauvegardé mes fichiers image dans Photoshop avant de les importer dans AE.
Animer 101
Animation de position:
- Animation de position:
- Sélectionnez votre objet dans la liste à gauche de la timeline.
- presse P
- Cliquez sur l'icône du chronomètre située sous la couche sélectionnée. Cela ajoute automatiquement la première image clé, où que soit l'indicateur de temps (la ligne rouge dans la chronologie).
- déplacer l'indicateur de temps dans la chronologie. Faites-le glisser ou Cmd+{Arrow left or right}ouCmd+Shift+{Arrow left or right}
- dans le visualiseur de composition, faites glisser votre objet à la position souhaitée (vous pouvez également utiliser Shift+arrow keys, comme dans Photoshop ou en faisant glisser les valeurs numériques).
- Une autre image clé apparaît dans la chronologie et vous avez maintenant une animation.
- Vous pouvez jouer l'animation en appuyant sur space
Rapprochez les images clés pour accélérer l'animation ou éloignez-vous les unes des autres pour la ralentir.
Poursuivre les animations après une pause.
un scénario: vous avez animé quelque chose de A à B et vous souhaitez faire une pause de X millisecondes, puis passer de B à C.
Lorsque vous avez animé B, avancez dans la chronologie et cliquez sur l'icône de l'image clé sur le côté gauche, ici: 
Cela devrait sembler grisé, alors ne vous inquiétez pas. Cela signifie simplement qu'il n'y a pas d'image clé dans cette position
Comme l'image clé n ° 2 et la transformation d'image clé n ° 3 nouvellement créée ont les mêmes valeurs, il y a maintenant une pause entre ces deux images clés. Ensuite, vous pouvez continuer à animer normalement, en progressant dans la chronologie et en modifiant à nouveau les valeurs.
Animer d'autres choses, comme la rotation ou l'opacité
Je voulais juste prendre ce temps pour vous dire que tous fonctionnent comme des animations de position (... moins le glissement).
Utilisez simplement les curseurs numériques qui apparaissent lorsque vous appuyez sur les touches de raccourci ci-dessous.
Touches de raccourci pour différentes méthodes de transformation:
- P - Position
- T - l'opacité
- R - Rotation
- S - Échelle
- A - Point d'ancrage
Il suffit de sélectionner un ou plusieurs objets, d’appuyer sur l’une de ces touches de raccourci et de commencer l’animation. Si vous ne sélectionnez rien, il révèle les méthodes de transformation pour chaque objet de la composition.
Comment asservir des objets à d'autres objets
Dans le panneau Composition, vous remarquerez une liste déroulante Parent sur chaque objet.
Vous pouvez l'utiliser pour définir un parent pour un objet.
Si vous déplacez ensuite le parent, vous remarquerez que l'élément enfant se déplace maintenant avec lui. Il en va de même pour les animations que vous attachez à l'élément Parent.
Si vous animez l'objet parent en rotation, l'enfant suivra ...
Ajouter de l'élasticité à votre animation
Alors peut-être avez-vous remarqué que l'animation des boutons ne s'arrête pas à un mur, mais s'arrête de manière très élastique.
Les effets After Effects peuvent être utilisés pour atteindre cet objectif (cela peut aussi faire beaucoup plus).
Pour appliquer le script d'expression à une animation, Alt+{mouse click}utilisez le chronomètre et collez-le dans le script.
L'expression que j'ai utilisée dans mon animation de bouton
Les 3 premières variables amp, freq, decaypeuvent être éditées pour obtenir différents résultats.
Vous pouvez appliquer ce même script aux animations basées sur les mouvements. Par exemple, l'animation d'opacité n'est pas affectée.
Peut aussi être trouvé ici.
amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}
Soulager ....
C'est donc une autre chose qui peut rendre l'animation beaucoup moins linéaire, tout comme le script Expression ci-dessus.
J'ai utilisé Ease Ease dans ce "cercle d'indicateurs tactiles" pour lui donner un aspect un peu plus humain.
Vous pouvez sélectionner une ou plusieurs images clés et cliquer avec le bouton droit de la souris sur l'une d'entre elles.
Puis de la liste: Keyframe assistant > Easy Ease
J'utilise souvent Easy easy, parce que je suis paresseux ...
Des photos ou ne sont pas arrivées ...
Voici une animation de position simple démontrant comment le soulagement et ce script d’expression particulier peuvent avoir un impact considérable sur l’animation.
Placement de compositions / métrages animés sur un écran
Ainsi, une fois l'interface graphique animée, il est temps de la placer sur l'écran de l'appareil.
- Placez la composition graphique dans la composition iPhone, tout comme vous placez des images dans une composition.
- Double-cliquez sur iPhone comp dans le panneau Projet.
- Sélectionner une composition graphique
- Du menu du haut
Effects > Distort > Corner pin
- Ensuite, faites simplement glisser chaque coin pour faire correspondre les coins de l'écran du périphérique.
Exporter au format .gif
AE n'a pas de méthode native pour le faire, mais ne vous inquiétez pas, il existe des moyens.
Je préfère faire ceci:
- Cliquez sur une composition dans le
Projects panel
Composition > Add to render queue Cmd+Ctrl+M- Ensuite, au bas de la chronologie, vous choisissez ce que vous souhaitez exporter et où.
- J'exporte habituellement un .mov sans perte
- Si vous cliquez sur "Paramètres de rendu", vous pouvez choisir un framerate, sinon il utilisera le framerate Comp
- Ensuite, appuyez simplement sur render dans le coin supérieur droit ou ce panneau.
- Recherchez le fichier exporté et ouvrez-le dans photoshop.
- Enregistrer pour le Web Cmd+Shift+Alt+S
C'est franchement pas si mal que ça ...
Exporter en fichier vidéo
Ainsi, même si la méthode ci-dessus vous montre comment exporter un fichier sans perte, ce n'est pas la façon dont vous devriez exporter des fichiers vidéo.
Vous faites ça comme ça:
- Enregistrez votre fichier de projet.
- Cliquez sur une composition dans le
Projects panel(si vous en avez plusieurs)
Composition > Add to adobe media encoder queue Cmd+Alt+M- Faites glisser un préréglage de la colonne de droite vers la colonne de gauche
- Appuyez sur PLAY.
- Si vous ne choisissez pas le dossier d'exportation, par défaut, il se trouve juste à côté du fichier de projet.
Comment remplacer les images
Donc, AE ne peut pas trouver vos fichiers? Faire ceci:
- Cliquez avec le bouton droit sur l'une des images manquantes dans le panneau Projet.
- De la liste
Replace footage > File...
- Localisez vos images et trucs
Autres raccourcis utiles
- U- Affiche toutes les images clés utilisées dans la composition (si rien n'est sélectionné). Vraiment utile lorsque vous devez déplacer plusieurs images clés à la fois, par exemple.
- U( Double tap ) - Révèle tout ce qui a été changé.
- E( Double tap ) - Révèle toutes les expressions utilisées.
- J - Passe à l'image clé précédente.
- K - Passe à l'image clé suivante.
- space - Joue comp
- Iou hometouche - Déplace l'indicateur de l'heure actuelle au début de la chronologie.
- Cmd+K - Paramètres de composition actuels.
- Cmd+I - Importer des fichiers.
- Alt+{Arrow keys left and right} - Sélectionnez une ou plusieurs images clés et appuyez sur les touches de raccourci pour les déplacer.
- Alt+Shift+{Arrow keys left and right} - Sélectionnez une ou plusieurs images clés et appuyez sur les touches de raccourci pour les déplacer.
Les fichiers du projet peuvent être trouvés here.
