After Effects Tutorial - Animating iPhone text messages

[Music] hey everyone welcome back to camp chief Raymond in today's video I'm going to create this iPhone iMessage speech bubble animation and I'm just going to design it in Illustrator first and now I'm just going to head on into After Effects and animate this for the first time so I'm just going to try to figure out how to do this the best way possible so bear with me if it's not fully scripted and done or something it's just me kind of trying how to do this for the first time so here we are in Illustrator and I've designed this speech bubble thingy here we have the background layer we have this another background layer we have the iMessage text here and if this way you can type your message and the send button we have the loading bub speech bubble let's Lock this which consists out of one two three elements and a three loading bar dots and we have the speech bubbles themselves and I've divided those all into separate layers also these ones are all separate layers this is one layer because they don't we no need to animate that thing this is one layer and this is one layer I did not add all the text in here because I'm going to do that in After Effects ok so now we're going to save this and we're going to open it up in after-effects here we go and and let's see I've opened the the comp and opera effects here in my timeline so let's first check all of these boxes to make it all nice and crisp and we can locked to background layers yeah so now we only have these to work with so we don't need to see this for now we're going to lock them for now we do need them and we're going to lock them as well first I'm going to animate this little loading bubble we could animate that once I think and now we can use it multiple times because there are three messages so we need it needs to pop up three times but I only need to animate it at one time and then comp it together and I can duplicate it two times okay so let's jump in here I'm just going to give these separate colors so I can see them better blue is fine okay and I'm going to parent these one to the big one yep and these can have a scale I'm going to scale them up from 0 to 100 really slowly okay let's just give that an exponential growth all right yeah that's fine and this one I'm going to scale it from up here scale press on the keyboards open it up and then let's put it at zero select the I'm giving my exponential as well I'm using the flow plugin by the way all right maybe this can be a bit faster and then we're going to I want to this bubble first then this one and then this one yeah maybe this one yeah something like this just trying what looks best here I'm not trying to exactly recreate the Apple the animations that are in iMessage while my After Effects is loading alright hello beach ball of death ah there we go I'm not trying to recreate the exactly what what happens in your eye message with Apple it just needs to kind of look like it that's fine okay cool and then these speech bubbles they like kind of pulse they become a darker gray one after the other so we're going to right-click it and go to layer style and then color overlay which gives it a color overlay I open it up and then I can click on this thing I don't know what it's called anymore sorry go there make it the same gray and then just make it a bit dark eyedropper tool that's it sorry I'll trap it too okay so now that's more dark and I'm going to animate this color overlay so I'm going to do a pasty and go hit a stopwatch for 100 and let's go back with command and then the left arrow 1 2 3 4 5 6 or something go to 0 so now it kind of fades in and then 1 2 3 4 5 6 I don't know why 6 just feels good then again so now you can see pulsing and I'm going to copy these come on see and I'm going to this one I'm going to put my arrow right here my talam scrubber and I'm going to press command-v so I paste those keyframe but they started right there and these ones I'm going to paste right here so I think this will give me a nice pulsing effect right after each other yeah okay cool what I can do is copy them and then paste them again here so now then it starts all over again but I'm going to add a looping expression and how do I do that is selecting these keyframes or go to opacity so no matter pressing alt or option on your keyboard and clicking on the stopwatch that opens my expression box and I'm going to add the loop expression which is loop capital o out open parentheses type space is space and cycle like that I'll edit in the description down below so you can copy it and now this one will keep looping but it it well it's pulsating too fast which what what is what I thought so I'm going to go one two three four five six one two three four five six and then I'm going to add another keyframe so now at this point it will start again because now this is the whole animation so this will loop and before if I do not add this keyframe only this part these three will loop but I need here all of this part to do because at this moment the last one is done so this one needs to begin again so I'm going to do this for this one as well one two three four five six add a keyframe one two three four five six add a keyframe and if I copy this and then I paste it here and in here and I think that it should work properly nice cool okay wait wait wait let's just move on yeah so now I'm going to put them in front actually so they start looping it I'm building immediately yeah okay yeah nice so I'm going to a select them all and command shift C or right-click pre-compose loading blabble alright so that's done I think great okay but the blue one needs to go first so we're going to lock this now just unlock everything but not the backgrounds and this one so now we're going to have to type something in here an iMessage needs to stay here while you're not typing while you're not typing it says iMessage in this gray color and so this thing we can also lock this because we don't need that that will be the I'm iMessage border great and let's just name these we have the send button what's this this is iMessage text yeah Bobbo want with it okay cool so this I message text needs to stay there but it needs to disappear when we're typing something so I'm going to press command D to duplicate it and I'm going to make it black or maybe not extra blue just like those like this do not do that hello oh wait it's not a text it's just an illustrator layer so we're going to back to illustrator and we're going to double click select them all press command-c then go back and now we are going to press command T to open the text tool click once and then command V there you go now it's the exact same font the exact same hive with everything sighs by the way the font is the what is it the San Francisco compact display it's a custom fault mate font made by Apple you can download it for free on their website and it's the regular I'm using right here this one we can turn into a really dark grey black color I'm going to put it right on top and then we can delete the iMessage text because now this is customizable all right and this needs to be actually wait I'm going to duplicate it and turn it off and the bottom one needs to be that color and iMessage text I have this real thing now I want everything to be in caps I don't know why leave me alone okay and then this text needs to be the text we're going to type first so that's going to be hey know this one hey hey okay so we're going to start off with this and then the iMessage text needs to be trusty and then we're going to go one frame further and go to zero loop and then this one can start here so if it yeah but this needs to be typed in so we're going to go to what effects and presets and type in typewriter anim the entire writer and you can drag it on to your text and if you open press you and your keyboard you open the keyframe for it hello yeah and it creates these keyframes and it's from 102 from 0 to 100 which will animate your texts so this one needs to be a lot shorter so it types it in maybe a bit yeah okay so now hey all right nice okay and when you send something then this arrow this blue becomes a little bit less blue so we're going to tarnish now like we have iMessage standing there and then it's gonna type hey grip and then he's going to send something so I'm going to go to the opacity by pressing T on the keyboard and hitting a stopwatch and then go a few frames further and then go to or maybe like no not ad maybe 60 you know what 1 2 3 4 1 2 3 4 and then go back to 100 again so now it has this little animation which I do not like someone come and they copy this and come on free to paste it so it needs to stay there for a while yeah maybe this needs to be faster I don't know yeah that's better people all right so now it's it's pressed you press send so now this needs to turn into this with the text in it so how are we are we going to do this I'm going to select this one and I'm going to put it down now let's just copy it because then I can save these all of these are going to press command D to duplicate it and put it down here and I'm going to right click and create a shape from the vector layer I'm going to leave the lead that factored layer because now I can make this thing bigger which it needs to be yeah okay so I'm going to put this right here cut it off because now we we type in hey and then you can send it hey maybe a bit earlier okay and now this one needs to come in and we're going to go to the opacity from 100 and it needs to start at 0 of course so it fades in yeah and then I want this text to be parented to that speech bubble because the speech bubble is going to move right here and the hey the text needs to be needs to stick to that the text as well needs to change color so I'm going to give it as well a right-click layer style color overlay and that needs to go from that needs to be white and also that opacity needs to go from 0 to 100 yeah and then while this speech bubble is moving up this of course needs to be moving to the right oh so I'm going to animate go to position for the speech bubble I have this annoying as line let's open it up go to contents Group one and then group one delete that I only want the path one okay nice and where was it yeah I'm going to go to position piano keyboards and I'm going to a bit further and then I'm like dragging this up maybe I don't know where something right here so now this one moves up and it kind of transforms yeah so it also needs to like shove to the right so the text needs to go to the right with the position and yeah something like yes let's just go press command or to open our rules and set a ruler here so we know where the end of the text need to be running needs to align for future reference and then because I made this into a shape layer I could open it up go to contents group one path one and then I can I'm going to go here path and right here I'm going to select all these points and drag them way in yes yes yes okay now there's no easing on that of course so we'll go to add that right now maybe this needs to further great okay so what now yeah I'm going to go put some ease on this so we got a hey we got our speech bubble I'm going to name that speech bubble and the iMessage text we don't need to do that right now that it's the street people and the hey yeah those need to be animated right now we have need to put some ease on that so what's this this one is the opacity so at first let's first put the timing so it needs to well that's kind of great so it needs to first need to pop in with it and then it needs to move up and to the right I think so let's just give this all some easy ease how does that look okay so I think the position of this one and these ones two paths in a position it'll be a bit earlier so it kind of goes at the same time it's faster maybe yeah we need some easy some more ease I think in the position if I select these and I go to the graph editor maybe it needs to start slowly and go fast mmm be too much maybe maybe now it's just trial and error you guys just trying what looks best oh I'm gonna put them because now the it's a pillow the hay moves a bit late so I'm going to like this I think yeah that looks I sorry all right yeah fine that's fine let's go I don't want to be sitting here sitting here for two hours to create the perfect speech bowel movement I'm just watching it back like 100 times now to really check if it's crew if it's good enough yeah I think it's cool okay so if we're going to look back at this whole thing then we have iMessage it's standing there and then we're typing in hey send bloop cool so now we can I think we can yeah let's do it that's just mmm yep count them together I think - hey that's alright so this one needs to be it should not be visible so we can start off right here we go to delete this afterwards we're going to start off here and then we're going to start typing something which can be earlier so okay yeah so now this one is to move back as well alright so now if this one moves up iMessage needs to be visible again so we're going to do that right here I think when if I'm going to add a key for opacity and then right here it's gonna be 100 again yep all right hey so now we're going to need this the loading bubble put it on top so it's typing is hey and boom is it too slow you know and then wait a second the speech bubble comes in so when the speech bubble comes in this one needs to move up so we're going to yeah when a speech bubble comes in this hey needs to go up by using P for position and okay so I can I think it's gonna need to be run here and now we're going to time this right Wow great perfect movement yeah maybe some exponential in and out a bit faster and a bit later it's all about timing alright yeah we're going to turn this one off for a sec so we can get a better view of things okay so this one how it's gonna look hey blue and then that starts loading alright so now we're going to need only this one so this one needs to contain some text so we're going to go on my message text duplicate that and we're going to delete all these key frames and we're going to go to a Hey because this text color is to copy copy this one I'm going to give the iMessage text number to that color yeah that needs to be here and it needs to say well uh what's up okay and we're going to parent that of course to this speech bubble this is gray bubble one and and this is what's up okay uh-huh oh I've done something terribly wrong yeah that's it okay what's up and then we're going to need to figure out how so if hey what's up so do we need to lead we need to see that the loading bar for awhile and then the speech bubbles I think yeah so just hey what's up can just I'm going to group them together as well calm down come on shift see like of like what's up and check the box always and that one can go with a position from from right here and exponential or what does this one be yeah needs to be the same as that well I was that yeah there was an exponential this is same yet cool group alright so when this this is happening the speech bubble must must move away so how it may be give this an opacity I don't know from a zero as well and then the speech the loading bubble needs to I think if I gonna put the anchor point right here and scaled it down well this one moves up no oh now of course because of the the speech bubble must turn into this the loading bubble sorry much must turn into the speech bubble it doesn't need to move up because it could just stay there yeah so that means that this position just needs to go away and we don't need this as well I want to put this on top yeah okay and then when that happens the loading Bubba can this we cut off I'm pretty harsh no not like that maybe like this mmm maybe it just needs to be a hard cut and I think they can both go to opacity 100 and now I just what's up it needs to start at zero and then that goes up to 100 and this one goes down to zero yeah nice okay what's up all right loading what's up okay and now I'm going to parent the hay to the what's up because now we're going to type something and again and I'm going to go to hey copy the hey text now we're going to actually copy all of this copy go and see and then paste yeah because yeah we just need to we need the same animation again so now we're going to say what we're going to say what has four wheels what has happened nice this not showing up he's weird what has four wheels and flies yeah Jesus I can't type what has four wheels and flies I have no idea why it's not why it's not what's happening okay let's just delete this then duplicate this what has four wheels and flies question mark and we're going to give this that color alright we have a problem because now it's not fitting anymore alright so okay I know I know which problem was I think just gonna go back yeah and I'm going to there ya go of course it was the type in effect what was throwing all my throwing it off all right cool all right so let's store this position right there hmm this is a nice instant interest interesting thing because it actually needs to so we're going to maybe do this because it needs to take a lot longer to type this of course all right let's just go to the you and I message text and then command C command V this what has four wheels and flies mark what has four wheels and flies what has four wheels and flies and flies but now the text is too long for this for this mmm part for this thing doesn't fit in there so I want to say so how we're going to solve this that's a really good question man let's see okay what has so first of all first off this open it so good there what has four wheels and I may be around here we're going to go to the position and move it to the left or something and then we're going to copy this position and place it here as well so that doesn't screw this thing up Wow all right horrible-looking you some exponential yeah now we're gonna just try to make this look good mmm mmm both close up miss four wheels and what as far as it flies what has four wheels and flies okay great let's just leave it at that for now I'm at this border right click and create a shape layer delete this one and we're going to go to the path options content group one path and then we're going to go here to the first keyframe where the text start moving path and then this one and this one I needs to get out of here all right and also give this some exponential so I think yeah what has four wheels and flies mmm I don't know if this looks kind of realistic on how it would look on the Apple I passage app but you know what I don't really care anymore this way takes way too long what has four wheels and flies all right and now it gets send it up and then it moves up but this one is way too big and this one moves away too much to the right so we're going to press command double point what is a cult : or something : yeah and then it will open our rulers again and I'm gonna put it right there yeah and then this one needs to the path of this it's not really small but we don't need that so we're going to select these paths these anchor points and move them up I can't see anything thank you very much so what we're going to do is we're going to we earlier we parented the hay layer to the what's up player it's parented to what's up so now we're going to parent and what's up layer to our I message speech bubble text what's up to speech bubble so now it moves up correctly all right oh and now of course the starting position for this is all wrong starting path whoops so I'm going to select them whilst while I'm standing on the first free from a keyframe of this path power of path I'm like switching between British and American English mid-sentence okay yeah that's there you go what has four wheels of flies and now we need to descend button press you I'm going back and copy these so it stops typing and then paste them so it sends it up maybe a bit later like this send bloop there ya go what is four wheels and flies that's mmm let's not do that yeah I want this to be a bit faster earlier okay great we're going to come these together as well four wheels and then let's not forget to parent this what's up yet again to the four wheels because I parented it earlier to the layer inside it but now the parent is gone so now we need to pair it parent it again so it it of course doesn't work because it's not moving up of course that's dumb that's dumb so I'm not going to come this together because then I I lose my parents I can solve this by just removing the position here and then or just positioning this one up but let's just leave it at this I'm going to stop this tutorial now because we're we are in here like five and a half hours I think you get the gist of it and now here we text yet back back again so come on see and then come on V or something no that's that's you you can go to this one and open it up come on see come on V and then maybe just the normal size again I don't know maybe just in one frame so when it leaves it's already there OOP yeah so that's basically it I will finish a joke for you hey what's up what has four wheels and flies and I don't know what a garbage truck dot dot oh my god okay and so that's the thing the the gist of it is like using the typewriter effect to type out these words creating a speech bubble which moving up and now you can parent these speech bubbles to each other and we have the this one here so if I want to use this one again right now I'm I can just go to my project files and I have the loading bubble in here and I can drag it back in so it there it is again and always check little star and so now what has four wheels and flies and now this one comes back in which means that the what's ahead what has four wheels and flies needs to go up so position and move up financially and that needs to so what is four wheels and flies then speech but loading bubble again and while the loading bubble comes in this needs to go up yeah looks great doesn't it I think so so that's it if you have any questions about this please leave them in the comments below and I'm gonna leave you off with thanking you for watching I hope you learned something from this and I hope it wasn't too hectic or something yeah that's it thanks for watching and I hope to see you on the next camp key frame [Music] you [Music]

Channel: Camp Keyframe

Views: 69,297

Keywords: animation, aftereffects, after, effects, adobe, howto, tutorial, vector, illustrator, learn, keyframe, class, tutorials, how to, iphone, imessage, sms, text, message, app

Id: 3wQ56zPf-DU

Length: 40min 43sec (2443 seconds)

Published: Mon Apr 16 2018