shadow layer with its Track Mattes (based on the ball layer) and Position Keyframes<\/figcaption><\/figure>\nAdding layers from another Illustrator file into the Composition<\/strong><\/p>\nIn the finished example, our goal is to smoothly transition from one vector icon to another (see finished example video at the top of this page). In order to do this, we’ll need to import the second Illustrator file and copy its layers onto the Composition we already started animating:<\/p>\n
\nGo to\u00a0File > Import > File…<\/em><\/li>\nSelect the second Illustrator file (i.e: earth-globe.ai), set the Import As<\/em>dropdown to\u00a0Composition – Retain Layer Sizes,\u00a0<\/em>and check the\u00a0Create Composition\u00a0<\/em>box.<\/li>\n\u00a0Double-click the newly created “earth-globe” Composition<\/li>\n Select all the layers and Copy them (Command + C)<\/em><\/li>\nDouble-click the “basketball” Composition in the Project panel to open it<\/li>\n Paste all the layers from the “earth-globe” Composition\u00a0(Command + V)<\/em><\/li>\nWe’ll change the color of the “earth-globe” layers to differentiate them from the basketball ones:\n\nWhile all the layers are still selected (or select them again), click on the little Color Swatch to the left of the layer name and select a different color.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nNewly added earth-globe layers set to a different color by clicking on one of their color swatch<\/figcaption><\/figure>\nWe’ll crop these new layers’ Timeline until we want to start using them:<\/p>\n
\nSet the Time Indicator to when the first “earth-globe” layer will start appearing on the screen (0;00;02;10)<\/li>\n Make sure all the “earth-globe” layers are still selected<\/li>\n Press Alt\u00a0+ [<\/em>to cut anything to the left of the Time Indicator<\/li>\n<\/ul>\nCropped earth-globe layers<\/figcaption><\/figure>\nTransitioning from one vector icon to another<\/strong><\/p>\nNext we’ll work on transitioning from the basketball to the globe.<\/p>\n
We’ll start by removing each detail (starting from the most recent and working our way backwards) until we are left with only the orange ellipse.\u00a0Let’s start with the shadow:<\/p>\n
\nWe’ll first hold the basketball in its finished state for a few frames:\n\nSet the Time Indicator to where you’d like the shadow to start disappearing (i.e:\u00a00;00;01;20)<\/li>\n Activate the shadow layer and press the P<\/em>Key to open up its Position property<\/li>\nWithout moving the Time Indicator, select the last Keyframe on the layer’s Position Timeline, copy it (Command + C)<\/em>and paste it\u00a0(Command + V)<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\nTwo identical Keyframes on the shadow layer to freeze the basketball in place for a few frames<\/figcaption><\/figure>\n\nNow let’s have the shadow recede from where it came from:\n\nSet the Time Indicator to where you’d like the shadow to be completely gone (i.e:\u00a00;00;01;23)<\/li>\n Increase the value of the Position’s X value, until the shadow\u00a0is to the right of the ball\/invisible (i.e: 1320). Alternatively, you could copy and paste the Keyframe from the point where you started the shadow animation (0;00;01;00)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nAll the Keyframes on the shadow’s layer (the values of the 1st-4th & 2nd-3rd match)<\/figcaption><\/figure>\nNext, we’ll remove the white lines. Instead of animating them separately, we’ll get all of them to slightly expand and then scale down at the the same time:<\/p>\n
\nSelect the “rightCurve”, “leftCurve”, “centerHorizLine” and\u00a0“centerVerticalLine” layers (by holding the\u00a0Command<\/em>key)<\/li>\nPress the\u00a0S<\/em>key to open up their Scale property<\/li>\nSet the Time Indicator to where you’d like the lines to start expanding (i.e:\u00a00;00;01;20)<\/li>\n Click on the little Stop Watch to set a Keyframe. Since the “leftCurve” and “rightCurve” layers already have some Keyframes on their scale property, you’ll have to click on the little diamond at the very left of the Timeline window to add a Keyframe<\/li>\n<\/ul>\nNew Scale Keyframes on the white line layers (Stop Watch and Diamond icons used to create them)<\/figcaption><\/figure>\n\nSet the Time Indicator to where you’d like the lines to end their expansion and start disappearing (i.e:\u00a00;00;01;25)<\/li>\n Increase the value of one of the layer’s Scale property (i.e: 140.0, 140.0%). If they are still all selected, the change in value and new Keyframe should be applied to all four layers.<\/li>\n Set the Time Indicator to where you’d like the lines to be completely gone (i.e:\u00a00;00;02;00)<\/li>\n Decrease\u00a0the value of one of the layers’ Scale property (i.e: 0.0, 0.0%). Again, if they are still all selected, the change in value and new Keyframe should be applied to all four layers.<\/li>\n Select any Keyframe that isn’t set to Easy Ease yet and press F9<\/em><\/li>\n<\/ul>\nAll the new Keyframes created to expand and remove the white lines<\/figcaption><\/figure>\nNow that all we have left is our orange ellipse, let’s have it expand slightly and then decrease to the size of the globe:<\/p>\n
\nSet the Time Indicator to where you’d like the ball to start its expansion (i.e:\u00a00;00;02;00)<\/li>\n Select the “ball” layer and press the\u00a0S<\/em>Key to open up its Scale property<\/li>\nCopy and Paste the last Keyframe on the Timeline (or click on the little Diamond icon on the left) to add a Keyframe without changing the current values.<\/li>\n Set the Time Indicator to where you’d like the ball to reach the end of its expansion (i.e:\u00a00;00;02;05)<\/li>\n Increase the Scale values (i.e: 120.0, 120.0%)<\/li>\n Set the Time Indicator to where you’d like the ball to match the globe’s size (i.e:\u00a00;00;02;10)<\/li>\n Decrease the Scale values until the two ellipses match (i.e: 69.0, 69.0%) (zoom into the Composition to make sure you are precise)<\/li>\n<\/ul>\nThe final step of the transition (before just focusing on adding the globe details), is to get the globe’s blue ellipse to cover the ball’s orange one:<\/p>\n
\nHide all the “earth-globe” layers except for the “earth” one<\/li>\n Set the Time Indicator to where you’d like the blue ellipse to fully cover the orange one\u00a0(i.e:\u00a00;00;02;15)<\/li>\n Activate the “earth” layer and press the\u00a0S <\/em>Key to bring up its Scale property<\/li>\nClick on the little Stop Watch to set a Keyframe<\/li>\n Set the Time Indicator to where you’d like the blue ellipse to start appearing (i.e:\u00a00;00;02;10)<\/li>\n Decrease the Scale values to 0.0, 0.0%<\/li>\n<\/ul>\nEarth’s layer Scale property and Keyframes<\/figcaption><\/figure>\nNow that we’ve completely removed the “basketball” layers from view let’s crop them:<\/p>\n
\nSet the Time Indicator to where no basketball layer is visible anymore (i.e:\u00a00;00;02;15)<\/li>\n Activate all the basketball layers<\/li>\n Press Alt\u00a0+ ]\u00a0<\/em>to cut anything to the right of the Time Indicator<\/li>\n<\/ul>\nCropped basketball layers<\/figcaption><\/figure>\nNext, we’ll get all the continents to pop up on the screen:<\/p>\n
\nReveal and activate the “Americas”, “Europe”, “Africa” and “England” layers<\/li>\n Press on the\u00a0S\u00a0<\/em>Key to bring up their Scale property<\/li>\nSet the Time Indicator to where you’d like all these layers to reach their full scale (i.e: 0;00;03;00)<\/li>\n Click on one of the little Stop Watch icon.\u00a0If all the layers are still selected, the Keyframe should be applied to all four layers.<\/li>\n Set the Time Indicator to where you’d like all these layers to start appearing on the screen\u00a00;00;02;25)<\/li>\n Decrease\u00a0the value of one of the layer’s Scale property (i.e: 0.0, 0.0%). Again, if they are still all selected, the change in value and new Keyframe should be applied to all four layers.<\/li>\n Select all the new Keyframes and press\u00a0F9\u00a0<\/em>to set them to Easy Ease<\/li>\nThe animation will be a little more fun if each layer’s appearance is a bit staggered. Select and shift each layer’s set of frames slightly<\/li>\n<\/ul>\nLand-related layers’ Scale property and Keyframes (each set slightly staggered)<\/figcaption><\/figure>\nNow let’s get our “metal” and “stand” layers around the earth. The metal piece will come from the right, the stand from the bottom:<\/p>\n
\nReveal the\u00a0“metal” and “stand” layers<\/li>\n Set the Time Indicator to where you’d like the stand and metal to reach their final position (i.e: 0;00;03;05)<\/li>\n Activate the “metal” and “stand” layers and press the P<\/em>\u00a0Key to bring up their Position property<\/li>\nClick on one of the layers’ Stop Watch to set a Keyframe on both Timelines<\/li>\n Set the Time Indicator to where you’d like the metal layer to start entering the Composition (i.e: 0;00;03;00)<\/li>\n Make sure\u00a0only the “metal” layer is active<\/li>\n Increase the “metal’s” Position propert’s X value until the metal is out of view (i.e: 2110)<\/li>\n Set the Time Indicator to where you’d like the stand layer to start entering the Composition (i.e: 0;00;03;03)<\/li>\n Make sure\u00a0only the stand layer is active<\/li>\n Increase the “stand’s” Position property’s Y value until the stand is out of view (i.e: 1130)<\/li>\n Select all the Keyframes you just created and set them to Easy Ease by pressing\u00a0F9<\/em><\/li>\n<\/ul>\nThe metal and stand layer’s Position property and Keyframes<\/figcaption><\/figure>\nFinally, let’s add the “earth’s” and “stand’s” shadows:<\/p>\n
\nReveal the “earthShadow” and “standShadow” layers<\/li>\n Add a Track Matte to both layers, using a copy of the “earth” layer for the “earthShadow” and one of the “stand” layer for “standShadow”<\/li>\n Set the Time Indicator to where you’d like both shadows to reach their final position (i.e: 0;00;03;10)<\/li>\n Activate the “earthShadow” and “standShadow” layers and press the P<\/em>\u00a0Key to bring up their Position property<\/li>\nClick on one of the layers’ Stop Watch to set a Keyframe on both Timelines<\/li>\n Set the Time Indicator to where you’d like both layers to start entering the Composition (i.e: 0;00;03;05)<\/li>\n Make sure only the “earthShadow” layer is selected<\/li>\n Click and drag the earth’s shadow in the Composition so that it comes at an angle from the top left of the earth. Notice that this will automatically create a new Keyframe<\/li>\n Make sure only the “standShadow” layer is selected<\/li>\n Click and drag the earth’s shadow in the Composition so that it comes from the right side of the stand.<\/li>\n Select all the Keyframes you just creates and set them to Easy Ease by pressing\u00a0F9<\/em><\/li>\n<\/ul>\nThe standShadow and earthShadow layer, with their respective Track Mattes and Keyframes<\/figcaption><\/figure>\nPreview your animation. You should now have a smooth transition and a completed globe.<\/p>\n
Converting an Illustrator Layer into an editable Path<\/strong><\/p>\nOne challenge we didn\u2019t encounter in this example, but that could come up, is what to do if changing a layer\u2019s basic Transforms (i.e: Scale, Opacity, Position etc.) is not enough. What if we need to change an Illustrator Layer’s overall shape (i.e: going from a ball to a coffee cup)<\/p>\n
Illustrator Layers are imported as parametric shapes, but we can turn them into editable Bezier Paths:<\/p>\n
\nRight-click on the Illustrator layer you want to transform into an editable Path and select Create > Create Shapes from Vector Layers. <\/i>You\u2019ll notice that the original layer is now hidden and that a new one called \u201cnameOfOrigianLayerOutlines\u201d was created right above it.<\/li>\nToggle the arrow to the left of the new Layer and go to\u00a0Contents > Group 1 > Path 1<\/i><\/li>\nSet your Time Indicator tho where you’d like the shape to start morphing<\/li>\n Click on the Path1\u2019s Path\u2019s Stop Watch icon to set your first Keyframe<\/li>\n Set the Time Indicator to where you\u2019d like the morph to be complete<\/li>\n Use the Pen, Add\/Remove Vertex, Convert Vertex and Selection tools to edit and move Vertex points to change the overall shape.<\/li>\n<\/ul>\nNew Bezier Path layer generated from the original layer and hidden original layer<\/figcaption><\/figure>\nAdded and edited Vertexes<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"While you can create shapes and designs to be animated directly in After Effects, doing so in Adobe Illustrator can be easier (since Illustrator is a software solely dedicated to creating vector Graphics). In this tutorial we’ll analyze, import and animate two icons created in Illustrator. ou can watch the finished example below and download … Continue reading “Adobe After Effects: Importing and Animating Illustrator Layers”<\/span><\/a><\/p>\n","protected":false},"author":21,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"class_list":["post-66","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/wp-json\/wp\/v2\/pages\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/wp-json\/wp\/v2\/pages\/66\/revisions"}],"predecessor-version":[{"id":172,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/wp-json\/wp\/v2\/pages\/66\/revisions\/172"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-s2019\/wp-json\/wp\/v2\/media?parent=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-1-02-39-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-1-13-19-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-1-15-36-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-1-28-31-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-1-40-31-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-1-51-24-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-2-02-49-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-2-09-13-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-2-26-06-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-2-31-41-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-2-40-03-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-2-54-40-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-3-03-20-pm1.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-3-11-23-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-3-49-06-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-3-48-16-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-3-57-24-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-7-43-10-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-29-at-7-55-27-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-31-at-12-36-31-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/08\/screen-shot-2018-08-31-at-12-38-38-pm.png\")