Creating Animations in Microsoft Expressive Pixels (4 of 9)

Key Takeaways

[Music] hello again stacy here now that you know how to create an image we're ready to bring it to life in your my animation screen let's go back to the heart that we created earlier i'll hover over the image and we can see the options menu below i'll select edit animation icon in the middle and this will take us directly to the authoring screen and we can now see the image in the active frame panel at the top and the image is also showing up in the animation timeline down below now in order to animate an image i'll want to add more frames and make each frame a little different than the one before you can make a simple animation which is two frames or make it as complex as you like using many frames let's check out some of the actions we can take in the timeline toolbar we can add a new frame import frames from other images which we'll cover in another tutorial add a waiting period between frames add a fade out transition and copy and paste frames there are also some additional options that you'll see on the side of each frame when you hover over it here we can delete a specific frame duplicate the frame to the right and mark which frame you want as your keyframe meaning it will be the frame that shows up in the animation galleries okay so i could add a frame and draw something new but since i want to make my heart beat i will just duplicate the frame and make some changes to it so i will copy my frame to the right and now i have two identical frames select the frame that you want to make changes to and be sure it's highlighted otherwise you might be making changes to the wrong one now to make it look like it's beading i'm going to adjust the size and there are a number of different ways to do this first i'm going to use my selection tool and draw a square around my image now with the selection tool highlighted we can see some options for actions that can be taken up at the top here you can copy and paste a selection create a fragment which we'll learn more about in a later tutorial cut out a selection and resize and this is the one we're going to choose now when you choose resize you'll notice that when i hover over the edges an arrow will show up and with my cursor held down i can drag my selection in or out okay and then to deselect you can click anywhere outside of the selection within your canvas or just right click all right now you'll notice the image may need to be touched up just a bit afterwards so i'm going to select it again i still have my selection tool highlighted and just move it to the center just a little bit so i have more room and deselect okay so i think i need to fix up the outer edges first and the best way to do that is if you'll remember in our media panel we have our active palette our active palette shows us all of the colors that we're currently using in this animation so first i'm going to clean up the outer edges with my paint brush okay and now i will fill in the purple i think in this frame i will just get rid of the highlighted area and fill in some of the squares here okay and remember if we're using our paintbrush and we want to erase you can also just select set to transparent and that way i can still use my paintbrush tool here and i think i'm going to enlarge it just a little bit more by bringing it down okay great now we have a larger heart so let's take a look and see if it looks like it's beating great now i think i want to add one more frame just for fun and color in the center let's see so again i'm going to copy the frame to the right and i will add a new heart in the center with the yellow that was my highlight so again i'll just use my paintbrush tool and then i will mirror that on the other side and okay so now we have a heart in the middle and let's just color that in and we can color that in with a new color i'm going to go to my color picker choose a bright orange and this time with my paint bucket tool i can color in the entire heart orange okay i think that looks good let's preview the animation if you want to make some adjustments to the animation behavior you can do this in the animation controls down at the bottom left the first button controls the frame rate and that's the speed at which the animation will run this will determine how many frames will be shown per second you can adjust this on the slider right here the more frames per second the faster your animation will be the second button determines how many times your animation will loop on the device let's set this one to five that means it will play all the way through loop back and play from the beginning again and again five times before it stops okay now that we have our animation we can choose which frame we want to be our key frame so i think i will choose this one that we have all colored in and i'm going to select mark this frame as preview key okay there you have it now when we save it this is the frame that shows up in our animation gallery and when you hover over it you can see how it will animate alrighty now try creating your own animation and explore the different ways to create cool transitions and customize your animations learn more about advanced editing features in our other tutorials and visit us at aka dot ms wac expressive pixels to find out more you