Découvrez les bases de l'animation dans After Effects en animant l'un des caractères les plus connus et l'état de l'App Store d'iMessage en 2018.
Lorsque l'App Store d'iMessage à la fin de l'année 2016 a été lancé, j'ai publié Kaomotion une application d'autocollants avec des kaomoji animés. Depuis la sortie de cette application, je voulais écrire un didacticiel sur la façon dont un simple caractère de texte tel que shruggie (par exemple, ¯ _ (ツ) _ / ¯ ) peut être animé. features:
L'animation Shruggie que nous allons faire. ( Grand aperçu )
Ce que vous allez lire dans cet article est un guide pas-à-pas de configuration d'une toile dans After Effects, puis de l'animation. Vous découvrirez également à quel point l'application contenant plus de 30 autocollants animés a fonctionné et quels sont les problèmes spécifiques que vous pourriez rencontrer sur l'App Store pour iMessage:
Nous commençons par la création d'une nouvelle composition ([1945 + N ) dans After Effects avec les paramètres suivants:
1000px × 1000px;
un taux de trame de 30 images par seconde;
un quart de résolution;
un temps de fonctionnement de 2 secondes.
Ce sera le canevas de base avec lequel nous allons travailler pendant l'animation. Nous choisissons un carré car c'est ce que vous devez gérer dans iMessage et l'implémentation de l'autocollant d'Apple.
Configuration de la zone de dessin After Effects. ( Grand aperçu )
2. Travailler avec un calque (texte)
Puisque les kaomoji sont des émoticônes simples basées sur du texte, nous allons copier-coller un "Shruggie" ¯ _ (ツ) _ / ¯ "de la première source peut trouver être Jeremy Burge 's Emojipedia via Google .
Après l'avoir trouvé sur Emojipedia, nous le collons comme une couche de texte dans After Effects. Il est temps d'utiliser l'outil de texte .
Le Shruggie à l’intérieur de votre canevas peut ne pas ressembler exactement à ce que vous avez trouvé sur Google ou sur Emojipedia, à cause des différences de types de polices. Nous avons choisi une police qui donne à Shruggie un aspect décent et l'a fait s'étirer sur la toile pour le préparer à son lifting: double-cliquez sur Source Name pour sélectionner tous les caractères.
19659033] Double-cliquez sur Nom de la source puis récupérez le type de police dans le menu .
Le menu de caractères. ( Grand aperçu )
Mise à l'échelle d'un calque
Sélectionnez Couche puis S + Échelle (en glissant vers la droite par exemple
Pour positionner correctement le calque, nous le remplissons en sélectionnant le calque en appuyant sur S puis sur Scale puis en déplaçant la balance jusqu’à ce que
Pour explorer plus en détail de petites modifications, regardons de plus près comment rendre notre Shruggie un peu plus connecté. Pour cela, nous étudions des options de crénage et de taille . Pour régler l'écart entre le bras et la main de Shruggie, nous utiliserons l'outil de crénage (V / A) manuellement dans le menu ou avec un autre raccourci clavier:
Crénage
Sélectionnez Espace + ALT + ← → . Lorsque nous sommes satisfaits des lacunes de crénage, nous ajusterons la hauteur des bras et donnerons l’impression que les bras sont réellement connectés. Pour relier les barres obliques avec le trait de soulignement, nous allons jouer avec l’augmentation de la hauteur de la barre oblique / échelle verticale, en la déplaçant verticalement et en ajustant potentiellement la ligne de base. Dans notre cas, nous avons augmenté la hauteur du caractère barre oblique à 120%, puis ajusté verticalement:
Les étapes suivantes sont une répétition de ce que nous avons déjà fait: nous sélectionnons la partie centrale et nous la déplaçons verticalement pour l'aligner avec les bras, les épaules et les mains de Shruggie. Cela semble plutôt bien, mais revérifions cette première impression en zoomant sur !
Zoom sur
Vous pouvez zoomer en appuyant sur ⌘ + + et aussi en appuyant sur + . clés. Dans notre cas, nous avons trouvé que nous devions le changer pour aligner correctement le visage de Shruggie avec ses bras, ce qui est une autre répétition des compétences de redimensionnement et de réalignement ci-dessus.
Devinez quoi? Nous sommes maintenant prêts à animer! 1965
Afin d’animer notre base Shruggie, nous allons utiliser l’outil Puppet Pin Tool . Essentiellement, cela nous permet de travailler sur tous les éléments vectoriels d'After Effects, y compris nos éléments de texte. Commençons par:
L'outil de la marionnette
Ce que nous voulons faire maintenant, c'est mettre des épingles à l'endroit où nous voulons que les articulations soient: les mains, les coudes, les épaules, etc. Appuyez sur [1945 + P pour faire l'affaire:
Lorsque vous obtenez un surlignage jaune, cela signifie que tout a été bien fait et After Effects reconnaît l'élément en tant que vecteur et vous pouvez donc placer vos épingles. Une chose qui mérite d’être recherchée est de vous assurer que vos épingles / images clés sont à l’heure 0 dans votre chronologie à ce stade:
La clé pour y parvenir efficacement est de commencer avec vos poses principales. Nous allons commencer avec nos poses de départ et d'arrivée. Nous pouvons le faire en en copiant les images-clés créées par nos épingles de marionnettes au début de à notre fin . La raison en est simple: il s'agit du début et de notre pose par défaut, c'est la pose à laquelle nous voulons revenir pour obtenir une animation cohérente.
Configurer le point de départ et de fin
U puis copier-coller jusqu'à l'état final.
Copie des images clés à partir de l'état initial et de l'état final. ( Grand aperçu )
Comme vous pouvez le voir dans le gif ci-dessus, sélectionnez la mise en page et appuyez sur U renvoie toutes les propriétés d'un calque contenant des images clés minuscules Ces petits ? constituent maintenant aussi votre état final.
Définir le stade intermédiaire
Pour avoir une scène que nous voulons animer, nous mettrons cela au centre:
Sélectionnez la timeline au milieu (1 sec dans notre exemple). ( Grand aperçu )
Maintenant que nous sommes au milieu de notre animation, nous allons apporter des modifications à notre état par défaut de manière à constituer notre état intermédiaire: [19659031] Cela signifie que nous allons lever la goupille de la marionnette, rapprocher un peu le coude et les bras de votre corps et donner à la main un mouvement de «haussement d'épaules» approprié. Cela créera automatiquement ces images clés à ce moment-là, qui animeront ensuite nos deux étapes par défaut.
Voici la démonstration de l'animation que nous obtenons lorsque nous déplaçons manuellement le scénario avec notre curseur:
Nous suivons exactement le même processus pour la partie droite de l’épaule de Shruggie, puis ajoutons un peu de mouvement au visage de Shruggie, ce qui lui donne un air souriant. nous l'impression de: "Meh, vous savez, rien à faire à ce sujet".
Barre d'espace pour jouer
Select layer + Space . Lorsque vous appuyez sur la touche Espace vous pouvez obtenir une première impression de notre animation:
Ce que vous remarquerez immédiatement, c’est que le personnage semble manquer des caractères. Cela est principalement dû au fait que notre animation se joue à la même vitesse pendant les deux secondes. C'est la caractéristique de l'animation la plus douteuse – vous voudrez qu'elle ne se déplace pas simplement entre deux points.
La manière la plus simple de résoudre le problème et de donner à Shruggie un peu plus de réalisme, la crédibilité consiste à utiliser une technique appelée dans et facilité (ou amortissement ou un certain nombre d'autres façons). C’est essentiellement une accélération de l’animation, puis une accélération de la vitesse avant d’arriver à la fin de la ligne de temps de l’animation.
Pour ce faire, nous utilisons un petit plugin After Effects appelé Ease and wiz qui nous permet d'appliquer un certain assouplissement sans trop de travail:
Sélectionnez toutes les images clés, puis appliquez Ease and wizz avec les options les mieux adaptées à votre animation.
Application de la facilité et du wizz et de certaines options. ( Grand aperçu )
Dans notre cas, nous avons choisi d'utiliser les paramètres suivants:
Assouplissement: Quart
Type: Dans et dehors
Clés: Toutes
Courbantes: no
Si nous relançons notre animation avec Dans la barre d'espace, vous remarquerez que vous obtenez quelque chose de très proche de l'animation intégrée au début de cet article. Cela signifie que nous avons terminé et que nous pouvons être très fiers de notre travail.
6. Lectures complémentaires À propos des bases du mouvement
Le didacticiel que vous venez de lire ne présente que les bases de l’animation en déplaçant Shruggie. Pour progresser dans l'animation, vous devez approfondir les bases du mouvement.
Vous trouverez ci-dessous un article décrivant les bases du mouvement, puis certaines qui concernent le mouvement / l'animation avec UX et les logiciels pour revenir en boucle sur le Web:
7. Lecture bonus: la vie sur l'App Store pour iMessage
Les tactiques ci-dessus ont été appliquées à un tas de kaomoji pour le déjà mentionné, comme indiqué dans l'introduction.
Après un certain support sur Product Hunt, l’application elle-même n’a pas été prise en charge par Apple ni par aucun public sur l’App Store. Je voudrais souligner deux réalités sur l'App Store auxquelles toute personne essayant de faire une application d'autocollant doit faire face:
Concurrence par les grandes marques;
La colère des utilisateurs qui ne comprennent pas le concept d'autocollants.
Problème: Prévalence des marques
Si vous voulez être constamment dans le top 50 des meilleurs autocollants payés par iMessage, alors il est utile d'être une grande marque ou un personnage notoirement connu. Je ne vais pas attacher beaucoup de sens à cela, il suffit de l'indiquer comme un fait et de fournir les preuves ci-dessous des captures d'écran recueillies en avril 2018 (lorsque j'ai écrit le premier article sur cet article) sur l'App Store suisse pour iMessage. ] Parmi les 40 premiers (c'est la catégorie mieux payée ), environ 18 sont susceptibles d'être des personnages connus faisant de ce fait des téléchargements:
Le sous-titre de cette section a été choisi de manière provocante, car il n'y a pas de problème intrinsèque, car ces caractères conviennent parfaitement aux autocollants, mais c'est un problème. contre. Bien sûr, la réalité économique montre également autour de la curation:
Curation de l'application d'autocollant. ( Grand aperçu )
La gauche montre une capture d'écran du premier lot de stickers (66% de grande marque) en avril 2018, la droite montre une capture d'écran de fin août 2018, où j'ai rencontré exactement la même configuration.
Ce n'est pas pour juger Apple, car je pense qu'ils sont devenus beaucoup mieux à la curation dans l'App Store en général. Pour résumer cette situation, je pense qu’il est juste de dire que d’autres écosystèmes tels que LINE ont permis à plus de créativité de s’épanouir et que l’écosystème d’autocollants de l’App Store est difficile à utiliser avec succès.
t obtenir (ou ne veulent pas?) des autocollants et le point suivant en témoigne:
Problème: faire face à la colère des utilisateurs
Le problème le plus ennuyant avec App Store pour iMessage reste le fait que les utilisateurs le font ne pas savoir comment les utiliser (autocollants).
Dans le cas de la Corée, Kaomotion a obtenu 80 évaluations d'une étoile en quelques jours par des utilisateurs se plaignant que l'application ne soit pas disponible sur leur téléphone.
«Je ne sais pas comment l'utiliser» ( Grand aperçu ) signifie «아니 삭제 how 업 네요 .. 삭제 좀요 사용 하는 법도 모르겟 어요»
Cela peut alors ressembler rapidement à la prochaine capture d'écran, et Apple ne semble pas vouloir nettoyer le désordre, même après avoir tenté de s'adresser aux utilisateurs en coréen:
une abondance de commentaires 1 étoile en coréen ressemble à. ( Grand aperçu )
Ils disent essentiellement tous la même chose: "L'App n'est pas sur notre téléphone." Les critiques d'une étoile vont essentiellement rester pour toujours car personne ne semble se soucier de ce que vous avez à dire. 19659032] Solutions au problème de la découvrabilité des autocollants dans l'interface
Je ne suis pas le premier ou le seul à écrire sur ce problème mais j'aimerais proposer quelques solutions possibles ci-dessous.
18 mois après l'introduction de l'App Store pour iMessage, les utilisateurs ne savent toujours pas comment envoyer et recevoir des autocollants (même si je dois dire qu'Apple a essayé de relier l'interface dans iMessage).
vous pouvez seulement essayer de résoudre ces problèmes en attaquant le problème de front et en donnant autant d'informations que possible aux utilisateurs.
Rédaction de guides sur la page App Store vous permet d'écrire un guide étape par étape sur la façon dont les autocollants sont envoyés.
Writin g Guide plus approfondi ailleurs Faites un article de blog ou un article similaire sur le même sujet avec des captures d'écran, des gifs ou une vidéo ( J'en ai créé un ici pour Kaomotion ).
Utiliser une capture d'écran ou un aperçu de l'application Enfin, vous pouvez vouloir être explicite, même sur vos captures d'écran, sur la façon dont votre application est utilisée. Even Wonder Woman semble avoir connu le même problème et a utilisé une capture d'écran pour proposer un remède:
Wonder Woman: "Comment envoyer des autocollants". ( Grand aperçu )
Vous aurez probablement encore des utilisateurs à vous plaindre, vous aurez ainsi un moyen facile de leur décrire ce qui doit être fait pour utiliser vos autocollants.
Est-ce que je devrais revenir au lancement de l'autocollant? store, je ne traverserais probablement pas les épreuves de la création de Kaomotion, cependant, je suis content d'avoir écrit sur les bases de l'animation pour After Effects!
J'espère que ce tutoriel vous a donné un aperçu intéressant d'After Effects et l'iMessage App Store. Si vous aimez ça, vous voudrez peut-être aller dans cette nouvelle communauté d'animation appelée Keyframes .
