1 00:00:00,030 --> 00:00:04,650 magic it's in the title of the show and 2 00:00:03,060 --> 00:00:07,108 it's a pretty big part of the show 3 00:00:04,650 --> 00:00:08,490 itself there's no shortage of magic 4 00:00:07,108 --> 00:00:12,719 being used to float stuff around at any 5 00:00:08,490 --> 00:00:14,609 given episode among other things so in 6 00:00:12,718 --> 00:00:16,858 honor of unicorn Appreciation Day the 7 00:00:14,609 --> 00:00:18,089 holiday that I just made up let's spend 8 00:00:16,859 --> 00:00:19,980 some time and go over all the elements 9 00:00:18,089 --> 00:00:23,309 it takes to put the magic in friendship 10 00:00:19,980 --> 00:00:26,070 is magic it must be the unicorns they're 11 00:00:23,309 --> 00:00:27,868 doing it with their awesome magic first 12 00:00:26,070 --> 00:00:29,399 off is the effect on the horn which is 13 00:00:27,868 --> 00:00:31,559 just a little 10 frame cycle with some 14 00:00:29,399 --> 00:00:33,420 gradients applied let's start with the 15 00:00:31,559 --> 00:00:35,429 main shape which I drew out here I 16 00:00:33,420 --> 00:00:37,170 really don't have any tips on how to 17 00:00:35,429 --> 00:00:38,729 draw wave cycles like this since all I 18 00:00:37,170 --> 00:00:41,039 did was trace it off of screencaps 19 00:00:38,729 --> 00:00:42,419 I did try to use as few points as 20 00:00:41,039 --> 00:00:44,100 possible to make it easier to manipulate 21 00:00:42,420 --> 00:00:46,559 and follow the waves up through the 22 00:00:44,100 --> 00:00:48,059 frames I then copy the frames to a new 23 00:00:46,558 --> 00:00:50,099 layer and use the edit multiple frames 24 00:00:48,058 --> 00:00:52,709 tool to uniformly scale down all the 25 00:00:50,100 --> 00:00:54,090 frames at once then we can copy and 26 00:00:52,710 --> 00:00:55,649 paste those lines back into the original 27 00:00:54,090 --> 00:00:57,300 layer and fill everything in with the 28 00:00:55,649 --> 00:01:00,420 paint bucket tool to make solid inner 29 00:00:57,299 --> 00:01:02,179 and outer shapes like this now we can 30 00:01:00,420 --> 00:01:04,290 start building the final artwork on 31 00:01:02,179 --> 00:01:06,329 another new layer I drew a rectangle 32 00:01:04,290 --> 00:01:07,590 with a radial gradient with the Alpha 33 00:01:06,329 --> 00:01:09,658 turned down to put a hole in the middle 34 00:01:07,590 --> 00:01:12,540 and use the transform gradient tool to 35 00:01:09,659 --> 00:01:14,189 adjust the position then we can use the 36 00:01:12,540 --> 00:01:16,409 inner shape we made as a mask and make 37 00:01:14,188 --> 00:01:17,728 the whole thing into a symbol the outer 38 00:01:16,409 --> 00:01:20,549 shape is really the same deal as the 39 00:01:17,728 --> 00:01:22,109 inner but with a linear gradient then we 40 00:01:20,549 --> 00:01:25,049 combine those two symbols into one more 41 00:01:22,109 --> 00:01:26,579 symbol and that's it looks pretty good 42 00:01:25,049 --> 00:01:34,079 all that's missing are the little 43 00:01:26,579 --> 00:01:35,548 sparkles I drew out one little shard and 44 00:01:34,078 --> 00:01:37,618 copied it a few times to build up a 45 00:01:35,549 --> 00:01:39,659 sparkle then I can convert it to a 46 00:01:37,618 --> 00:01:41,280 symbol then go inside and animate it 47 00:01:39,659 --> 00:01:43,799 just by scaling and moving each piece 48 00:01:41,280 --> 00:01:45,299 every couple frames there's no hard or 49 00:01:43,799 --> 00:01:46,649 fast rules on how these are built so 50 00:01:45,299 --> 00:01:49,740 feel free to experiment and see what 51 00:01:46,649 --> 00:01:52,019 works there's not a lot written on 52 00:01:49,739 --> 00:01:53,459 traditional effects animation I do 53 00:01:52,019 --> 00:01:54,780 highly recommend Joseph Gillan's 54 00:01:53,459 --> 00:01:56,669 elemental Magic books if you're 55 00:01:54,780 --> 00:01:59,700 interested in animating splashes flames 56 00:01:56,670 --> 00:02:01,079 or sparkly pixie dust stuff there's also 57 00:01:59,700 --> 00:02:04,079 a link to his and another interesting 58 00:02:01,078 --> 00:02:06,868 effects blog in the description here's a 59 00:02:04,078 --> 00:02:07,828 few more sparkles that I built and 60 00:02:06,868 --> 00:02:09,810 you're not just limited to this of 61 00:02:07,828 --> 00:02:12,419 course here's a really cool and I just 62 00:02:09,810 --> 00:02:13,960 traced off of the screen caps inside the 63 00:02:12,419 --> 00:02:15,639 magic symbol I extended things 64 00:02:13,960 --> 00:02:17,469 a couple of loops to make it a 30 frame 65 00:02:15,639 --> 00:02:19,989 cycle and dragged in some sparkles 66 00:02:17,469 --> 00:02:21,520 starting at different times if the 67 00:02:19,990 --> 00:02:22,930 animation goes past the last frame I 68 00:02:21,520 --> 00:02:26,110 just put those extra frames back at the 69 00:02:22,930 --> 00:02:29,860 beginning so here's the final effect 70 00:02:26,110 --> 00:02:31,270 laid over a screen cap of Twilight that 71 00:02:29,860 --> 00:02:32,680 does it for the effect on the horn which 72 00:02:31,270 --> 00:02:34,630 can easily be animated along with the 73 00:02:32,680 --> 00:02:36,870 head reused over and over as well as 74 00:02:34,629 --> 00:02:39,009 tinted and reused on other characters 75 00:02:36,870 --> 00:02:41,460 but what about the magic effect on 76 00:02:39,009 --> 00:02:44,349 objects is that done the same way 77 00:02:41,460 --> 00:02:45,820 thankfully no the magic effect used on 78 00:02:44,349 --> 00:02:47,889 objects and such is custom for each 79 00:02:45,819 --> 00:02:49,870 instance so you can go through all this 80 00:02:47,889 --> 00:02:51,789 every single time and you can see how 81 00:02:49,870 --> 00:02:53,289 the effect is sort of fluid and if two 82 00:02:51,789 --> 00:02:55,269 objects are close enough they just meld 83 00:02:53,289 --> 00:02:57,669 together which we can't do with this 84 00:02:55,270 --> 00:02:59,050 method at least not easily it's actually 85 00:02:57,669 --> 00:03:00,489 not that hard of an effect to pull off 86 00:02:59,050 --> 00:03:03,250 but we'll need to venture out of Flash 87 00:03:00,490 --> 00:03:04,719 and into After Effects to do it so let's 88 00:03:03,250 --> 00:03:06,870 start by making a comp to put whatever 89 00:03:04,719 --> 00:03:09,909 elements we want to apply the effect to 90 00:03:06,870 --> 00:03:12,360 we can go composition new composition or 91 00:03:09,909 --> 00:03:14,650 you can click the make comp button I'll 92 00:03:12,360 --> 00:03:16,180 call it input and we'll set it to 93 00:03:14,650 --> 00:03:19,180 whatever our final output size will be 94 00:03:16,180 --> 00:03:22,240 in my case that's 1280 by 720 square 95 00:03:19,180 --> 00:03:23,650 pixels 24 frames per second and let's 96 00:03:22,240 --> 00:03:26,129 make it like a minute long to cover any 97 00:03:23,650 --> 00:03:28,420 potential scene that might come up 98 00:03:26,129 --> 00:03:29,829 having this is a comp instead of just a 99 00:03:28,419 --> 00:03:31,299 layer means we can easily swap the 100 00:03:29,830 --> 00:03:34,870 contents in and out without having to 101 00:03:31,300 --> 00:03:35,980 change anything in the effect I just 102 00:03:34,870 --> 00:03:39,969 drew a few shapes with the shape tool 103 00:03:35,979 --> 00:03:41,949 act as a placeholder for now let's 104 00:03:39,969 --> 00:03:45,370 trigger input comp into another new comp 105 00:03:41,949 --> 00:03:49,719 and call it magic so let's add a simple 106 00:03:45,370 --> 00:03:51,280 choker effect mat simple choker this can 107 00:03:49,719 --> 00:03:53,650 be used to expand or contract the shapes 108 00:03:51,280 --> 00:03:57,219 edges we'll drag it out to about 109 00:03:53,650 --> 00:03:58,990 negative 50 now like the effect on the 110 00:03:57,219 --> 00:04:00,370 horn we want to create a hole to see the 111 00:03:58,990 --> 00:04:02,860 original through when we lay this on top 112 00:04:00,370 --> 00:04:05,289 of it we'll drag out another copy the 113 00:04:02,860 --> 00:04:06,910 input comp onto the first go to the 114 00:04:05,289 --> 00:04:09,340 track mat for the bottom layer and set 115 00:04:06,909 --> 00:04:12,009 it to alpha inverted this is a good 116 00:04:09,340 --> 00:04:13,479 start let's soften the edges some will 117 00:04:12,009 --> 00:04:15,549 add another simple choker on the top 118 00:04:13,479 --> 00:04:16,810 layer set it to about negative 15 to 119 00:04:15,550 --> 00:04:20,410 pull it out a little farther and add a 120 00:04:16,810 --> 00:04:24,519 blur effect learn sharpen fast blur and 121 00:04:20,410 --> 00:04:26,979 set that to about 20 122 00:04:24,519 --> 00:04:29,500 let's precompose those two layers into a 123 00:04:26,978 --> 00:04:32,050 new comp which I call mat for some 124 00:04:29,500 --> 00:04:33,668 reason the reason for putting this in a 125 00:04:32,050 --> 00:04:35,228 separate comp is so when we distort the 126 00:04:33,668 --> 00:04:36,639 shape later it'll also distort the 127 00:04:35,228 --> 00:04:39,279 inside of the shape instead of just the 128 00:04:36,639 --> 00:04:40,978 outside so let's start whipping this 129 00:04:39,279 --> 00:04:44,888 effect into shape by changing the color 130 00:04:40,978 --> 00:04:48,310 effect generate fill and we'll set it to 131 00:04:44,889 --> 00:04:51,189 a sort of purpley Twilight color now for 132 00:04:48,310 --> 00:04:53,430 the actual distortion effect distort 133 00:04:51,189 --> 00:04:56,050 wave warp 134 00:04:53,430 --> 00:04:59,978 that'll give us these wavy edges and it 135 00:04:56,050 --> 00:05:02,490 animates automatically going through the 136 00:04:59,978 --> 00:05:04,689 parameters will leave wave type the same 137 00:05:02,490 --> 00:05:06,009 you can fiddle with the wave height and 138 00:05:04,689 --> 00:05:07,478 width depending on how far away the 139 00:05:06,009 --> 00:05:09,520 effect is supposed to be from the viewer 140 00:05:07,478 --> 00:05:13,149 but I think six and thirty five is a 141 00:05:09,519 --> 00:05:15,068 good start direction can depend on the 142 00:05:13,149 --> 00:05:18,788 angle is shot but 90 is a good default 143 00:05:15,069 --> 00:05:20,310 and we'll leave the speed at 1 if you 144 00:05:18,788 --> 00:05:22,000 look at the effect in the show it has a 145 00:05:20,310 --> 00:05:23,769 semi-transparent edge to it that 146 00:05:22,000 --> 00:05:28,180 actually tints the object it's affecting 147 00:05:23,769 --> 00:05:29,589 so we'll need one more layer for that to 148 00:05:28,180 --> 00:05:31,860 achieve that we'll drag out another copy 149 00:05:29,589 --> 00:05:33,848 of our input comp and label it tint 150 00:05:31,860 --> 00:05:35,680 basically want something similar to our 151 00:05:33,848 --> 00:05:38,259 mat comp but without the track mat to 152 00:05:35,680 --> 00:05:40,598 put the hole in it we can just copy the 153 00:05:38,259 --> 00:05:42,729 effects the simple choker the fill and 154 00:05:40,598 --> 00:05:46,000 the wave warp and paste them onto this 155 00:05:42,728 --> 00:05:47,680 layer then we'll add another simple 156 00:05:46,000 --> 00:05:50,620 choker to bring it out another 15 pixels 157 00:05:47,680 --> 00:05:51,939 or so and it looks like we'll have to 158 00:05:50,620 --> 00:05:55,959 drag the fill down to the bottom of the 159 00:05:51,939 --> 00:05:57,550 effect stack and finally let's hit the T 160 00:05:55,959 --> 00:06:02,589 key and take the opacity down to about 161 00:05:57,550 --> 00:06:03,728 25% we're basically done but since this 162 00:06:02,589 --> 00:06:05,978 is an effect that's attended to be 163 00:06:03,728 --> 00:06:07,449 reused let's take a few more steps now 164 00:06:05,978 --> 00:06:11,079 to make it more user-friendly down the 165 00:06:07,449 --> 00:06:16,449 road let's add a null layer new null 166 00:06:11,079 --> 00:06:18,129 object and label it controls then we can 167 00:06:16,449 --> 00:06:20,050 go into the expression controls either 168 00:06:18,129 --> 00:06:22,959 in the effects menu over here in the 169 00:06:20,050 --> 00:06:24,158 search menu and dragging controls for 170 00:06:22,959 --> 00:06:26,948 all the parameters we want to manage 171 00:06:24,158 --> 00:06:28,930 color control for the fill angle control 172 00:06:26,949 --> 00:06:30,158 for the direction slider controls for 173 00:06:28,930 --> 00:06:32,228 the height and width cetera et cetera 174 00:06:30,158 --> 00:06:34,680 and we'll link the effects to these 175 00:06:32,228 --> 00:06:34,680 controls 176 00:06:34,860 --> 00:06:38,530 let's lock this window so it doesn't 177 00:06:37,089 --> 00:06:40,029 change when we click around if we go 178 00:06:38,529 --> 00:06:42,188 into each effect and find the parameter 179 00:06:40,029 --> 00:06:44,079 we want to link to alt click on the 180 00:06:42,189 --> 00:06:47,860 stopwatch and use the pick whip to link 181 00:06:44,079 --> 00:06:48,788 it to the control air I'll skip ahead so 182 00:06:47,860 --> 00:06:51,879 you don't have to watch me do this 183 00:06:48,788 --> 00:06:53,288 another dozen or so times this way 184 00:06:51,879 --> 00:06:54,189 effects on both the matte and tint layer 185 00:06:53,288 --> 00:06:55,870 stay synched up 186 00:06:54,189 --> 00:06:57,490 you see if I change the color here it 187 00:06:55,870 --> 00:06:59,620 changes both layers at the same time and 188 00:06:57,490 --> 00:07:00,728 we have all the controls we need in one 189 00:06:59,620 --> 00:07:03,490 place we don't have to go hunting 190 00:07:00,728 --> 00:07:05,050 through different layers as an added 191 00:07:03,490 --> 00:07:06,668 detail I also put a small wiggle 192 00:07:05,050 --> 00:07:09,569 expression on the speed to make the 193 00:07:06,668 --> 00:07:11,918 animation feel a little less mechanical 194 00:07:09,569 --> 00:07:15,460 so let's try out our new effect with a 195 00:07:11,918 --> 00:07:17,258 practical example I made a quick mock-up 196 00:07:15,459 --> 00:07:19,829 of this abacus shot in flash and 197 00:07:17,259 --> 00:07:21,939 rendered it out as an image sequence I 198 00:07:19,829 --> 00:07:23,709 then singled out just the parts for 199 00:07:21,939 --> 00:07:26,019 applying the effect to these four beads 200 00:07:23,709 --> 00:07:28,778 here and rendered out a PNG sequence 201 00:07:26,019 --> 00:07:31,089 which I called mask for some reason with 202 00:07:28,778 --> 00:07:33,509 an alpha Channel and when you do this be 203 00:07:31,089 --> 00:07:35,859 sure to render the full document size 204 00:07:33,509 --> 00:07:38,379 now before we leave flash let's do the 205 00:07:35,860 --> 00:07:39,580 sparkle effect in a new symbol I'll 206 00:07:38,379 --> 00:07:41,289 build a little patch of some different 207 00:07:39,579 --> 00:07:44,228 sparkles roughly the shape of what we're 208 00:07:41,288 --> 00:07:44,949 affecting with varied sizes and starting 209 00:07:44,228 --> 00:07:47,918 at different times 210 00:07:44,949 --> 00:07:50,528 I made it another 30 frame loop like I 211 00:07:47,918 --> 00:07:51,968 did with the horn then I'll make a copy 212 00:07:50,528 --> 00:07:53,468 of the layer I want to attach it to 213 00:07:51,968 --> 00:07:54,848 and just swap the sparkles for the 214 00:07:53,468 --> 00:07:57,610 original symbol so it has the same 215 00:07:54,848 --> 00:07:59,259 animation and that can change the start 216 00:07:57,610 --> 00:08:02,680 frame of the cycle to offset the timing 217 00:07:59,259 --> 00:08:04,509 if I want to reuse them and I did render 218 00:08:02,680 --> 00:08:07,028 all this out in its own passes of PNG 219 00:08:04,509 --> 00:08:08,759 sequence as well now back in After 220 00:08:07,028 --> 00:08:10,838 Effects I imported the image sequences 221 00:08:08,759 --> 00:08:12,009 you may have to go into the interpret 222 00:08:10,838 --> 00:08:13,870 footage setting to ensure the correct 223 00:08:12,009 --> 00:08:15,699 framerate and I place the masked 224 00:08:13,870 --> 00:08:17,978 sequence in our input comp and delete 225 00:08:15,699 --> 00:08:19,598 the placeholder since the angle this 226 00:08:17,978 --> 00:08:22,050 shot is a bit tilted I'll change the 227 00:08:19,598 --> 00:08:24,218 direction setting to about 60 degrees 228 00:08:22,050 --> 00:08:26,379 let's make a new comp out of our full 229 00:08:24,218 --> 00:08:28,240 render then we can add the magic comp 230 00:08:26,379 --> 00:08:29,919 and the sparkle pass and finally animate 231 00:08:28,240 --> 00:08:31,709 the opacity on the magic of sparkle 232 00:08:29,918 --> 00:08:34,379 layers to fade them in and out and 233 00:08:31,709 --> 00:08:36,549 here's the composite of the final shot 234 00:08:34,379 --> 00:08:39,490 there now you can build your own 235 00:08:36,549 --> 00:08:40,799 reusable magic effects or you can just 236 00:08:39,490 --> 00:08:44,909 use my versions which are 237 00:08:40,799 --> 00:08:47,039 description either way go out there and 238 00:08:44,909 --> 00:08:49,370 make this the best unicorn appreciation 239 00:08:47,039 --> 00:08:49,370 day ever