1 00:00:00,170 --> 00:00:03,919 - hah - hah 2 00:00:09,000 --> 00:00:13,859 we are too 3 00:00:22,269 --> 00:00:29,689 hello and welcome to happy Harry's who 4 00:00:26,149 --> 00:00:32,359 are too how to's Wow try saying that 5 00:00:29,689 --> 00:00:35,628 with a mouthful of teeth this is the 6 00:00:32,359 --> 00:00:38,719 premiere episode in a new 12 part weekly 7 00:00:35,628 --> 00:00:40,909 animation tutorial series by myself 8 00:00:38,719 --> 00:00:42,948 Harry Partridge and the lovely people 9 00:00:40,909 --> 00:00:45,919 over at who are too and will be 10 00:00:42,948 --> 00:00:47,869 exclusive to their who are to channel so 11 00:00:45,920 --> 00:00:49,368 definitely subscribe if you want to 12 00:00:47,869 --> 00:00:51,618 catch all the future episodes 13 00:00:49,368 --> 00:00:53,988 and speaking of future episodes I'll 14 00:00:51,618 --> 00:00:56,149 give you a quick overview of what the 15 00:00:53,988 --> 00:00:59,478 series is about before I jump into 16 00:00:56,149 --> 00:01:01,460 today's lesson over the next 12 weeks I 17 00:00:59,478 --> 00:01:04,219 would like to share with you as much 18 00:01:01,460 --> 00:01:05,930 information as I can to get budding 19 00:01:04,219 --> 00:01:09,019 animators out there up and running and 20 00:01:05,930 --> 00:01:12,320 ready to produce their own 2d digital 21 00:01:09,019 --> 00:01:14,030 animated cartoons that are not just good 22 00:01:12,319 --> 00:01:16,069 enough to put on the web but good enough 23 00:01:14,030 --> 00:01:18,469 to be seen anywhere we're not aiming low 24 00:01:16,069 --> 00:01:20,179 here we want this stuff to be as good as 25 00:01:18,469 --> 00:01:22,879 or better than anything that's currently 26 00:01:20,180 --> 00:01:24,590 on TV and it'll take a long time to get 27 00:01:22,879 --> 00:01:25,699 there now today's episode is a little 28 00:01:24,590 --> 00:01:27,950 bit different because I'm going to be 29 00:01:25,700 --> 00:01:30,200 looking specifically at the program 30 00:01:27,950 --> 00:01:31,670 Adobe Flash although later on I'll be 31 00:01:30,200 --> 00:01:33,740 looking at more Universal animation 32 00:01:31,670 --> 00:01:38,030 techniques which I think will apply to 33 00:01:33,739 --> 00:01:40,459 any program or any kind of animation if 34 00:01:38,030 --> 00:01:42,349 you want to do stop-motion or 3d or even 35 00:01:40,459 --> 00:01:43,759 hand-drawn today though we're just 36 00:01:42,349 --> 00:01:45,709 looking at flash because I think that's 37 00:01:43,759 --> 00:01:47,780 going to be a great starting point for 38 00:01:45,709 --> 00:01:49,669 people out there that don't have you 39 00:01:47,780 --> 00:01:51,379 know a platform to jump off from so 40 00:01:49,670 --> 00:01:52,368 before I get into today's lesson first 41 00:01:51,379 --> 00:01:53,929 of all I'm going to run through a very 42 00:01:52,368 --> 00:01:56,149 quick list of things that you will need 43 00:01:53,929 --> 00:01:58,159 first of all you'll need a computer but 44 00:01:56,149 --> 00:01:59,210 as you're watching this on the computer 45 00:01:58,159 --> 00:02:01,189 I don't think that's a problem 46 00:01:59,209 --> 00:02:03,228 second of all you'll need some sort of 47 00:02:01,188 --> 00:02:05,059 program or application to be able to 48 00:02:03,228 --> 00:02:07,759 create your own 2d animation now I'm 49 00:02:05,060 --> 00:02:09,740 using Adobe Flash as I've said in fact 50 00:02:07,759 --> 00:02:12,068 I'm going to be using the free 30-day 51 00:02:09,740 --> 00:02:14,689 trial available from Adobe's website 52 00:02:12,068 --> 00:02:17,419 thirdly you'll need a tool to input your 53 00:02:14,689 --> 00:02:20,449 own artwork now I recommend a Wacom 54 00:02:17,419 --> 00:02:22,099 tablet or a Wacom Cintiq that's a screen 55 00:02:20,449 --> 00:02:24,649 that you draw directly onto although 56 00:02:22,099 --> 00:02:26,780 these can be quite pricey they're the 57 00:02:24,650 --> 00:02:28,209 best thing for the job so it's worth 58 00:02:26,780 --> 00:02:30,348 getting one if you're serious about this 59 00:02:28,209 --> 00:02:31,729 alternatively you can 60 00:02:30,348 --> 00:02:34,310 all with a mouse but I wouldn't really 61 00:02:31,729 --> 00:02:36,530 recommend it another option is actually 62 00:02:34,310 --> 00:02:38,449 hand drawing your art and then scanning 63 00:02:36,530 --> 00:02:40,030 it into a computer and cleaning up in 64 00:02:38,449 --> 00:02:42,619 flash or whatever program you use 65 00:02:40,030 --> 00:02:45,019 finally if you'd like to record your own 66 00:02:42,620 --> 00:02:47,060 voices you will need to invest in a 67 00:02:45,019 --> 00:02:49,010 decent recording setup but that's 68 00:02:47,060 --> 00:02:51,139 something that we'll come to later on in 69 00:02:49,009 --> 00:02:56,449 the episodes now I think we're finally 70 00:02:51,139 --> 00:02:58,459 ready to take a look at flash ok that 71 00:02:56,449 --> 00:03:01,009 isn't particularly funny we'll bring 72 00:02:58,459 --> 00:03:05,030 over the real flash Adobe Flash 73 00:03:01,009 --> 00:03:07,218 Professional cs6 now this is a program 74 00:03:05,030 --> 00:03:10,789 that can be used to make interactive web 75 00:03:07,218 --> 00:03:12,948 content like games animations or things 76 00:03:10,789 --> 00:03:15,650 like banners and advertisements that you 77 00:03:12,949 --> 00:03:17,810 probably block nowadays using 78 00:03:15,650 --> 00:03:18,949 third-party software but that's not what 79 00:03:17,810 --> 00:03:21,229 we're worried about today we're going to 80 00:03:18,949 --> 00:03:23,419 be looking at making animations so quick 81 00:03:21,229 --> 00:03:25,789 go to create new and pick actionscript 82 00:03:23,419 --> 00:03:26,629 3.0 or 2.0 doesn't matter which one 83 00:03:25,789 --> 00:03:30,590 let's go for three 84 00:03:26,628 --> 00:03:33,530 and we're met by this rather bleak 85 00:03:30,590 --> 00:03:35,479 looking selection of gray squares now if 86 00:03:33,530 --> 00:03:38,030 you've never used an animation program 87 00:03:35,479 --> 00:03:39,470 before don't worry I'm going to try and 88 00:03:38,030 --> 00:03:42,318 keep things as streamlined as possible 89 00:03:39,469 --> 00:03:44,419 and not load you down with information 90 00:03:42,318 --> 00:03:46,638 that isn't really going to serve any 91 00:03:44,419 --> 00:03:47,930 purpose for what we want we're just 92 00:03:46,639 --> 00:03:49,370 going to be talking about the tools that 93 00:03:47,930 --> 00:03:50,930 I think are useful for getting you 94 00:03:49,370 --> 00:03:52,878 started with creating animation if 95 00:03:50,930 --> 00:03:54,979 you've used a program like Adobe 96 00:03:52,878 --> 00:03:56,388 Photoshop or paint before a lot of these 97 00:03:54,979 --> 00:03:59,120 things will probably seem fairly 98 00:03:56,389 --> 00:04:01,219 familiar so this big white square here 99 00:03:59,120 --> 00:04:04,989 in the center of the screen is the stage 100 00:04:01,219 --> 00:04:09,079 and it's basically the screen or the 101 00:04:04,989 --> 00:04:12,199 theater or whatever that our animations 102 00:04:09,079 --> 00:04:14,169 are going to take place in if I go here 103 00:04:12,199 --> 00:04:18,489 and select a drawing tool like the brush 104 00:04:14,169 --> 00:04:22,250 cleverly indicated by the brush icon and 105 00:04:18,488 --> 00:04:23,839 draw here a little squiggle that is 106 00:04:22,250 --> 00:04:26,389 going to appear in our film because it's 107 00:04:23,839 --> 00:04:30,379 in within the confines of the stage if I 108 00:04:26,389 --> 00:04:33,918 draw offensive filth here outside of the 109 00:04:30,379 --> 00:04:36,620 confines of the stage and preview the 110 00:04:33,918 --> 00:04:38,870 film by hitting ctrl alt and enter as 111 00:04:36,620 --> 00:04:40,009 you can see that horrible filth is 112 00:04:38,870 --> 00:04:42,889 nowhere to be found 113 00:04:40,009 --> 00:04:44,180 let's just click off of that and by 114 00:04:42,889 --> 00:04:46,939 dragging with the black 115 00:04:44,180 --> 00:04:49,430 O'Toole here found at the top left with 116 00:04:46,939 --> 00:04:51,079 your tools by dragging and highlighting 117 00:04:49,430 --> 00:04:54,620 and then hitting delete we can get rid 118 00:04:51,079 --> 00:04:56,870 of all of that lovely art work now if 119 00:04:54,620 --> 00:04:59,000 you want to turn off this sort of gray 120 00:04:56,870 --> 00:05:01,280 no-man's land here and just worry about 121 00:04:59,000 --> 00:05:05,120 what you're going to see you can go to 122 00:05:01,279 --> 00:05:07,638 view and turn off pasteboard and there 123 00:05:05,120 --> 00:05:09,319 see we're not going to see any of this 124 00:05:07,639 --> 00:05:11,689 other area we're only going to see what 125 00:05:09,319 --> 00:05:14,538 actually will end up within the confines 126 00:05:11,689 --> 00:05:16,579 of the stage alternatively by the way if 127 00:05:14,538 --> 00:05:18,379 you want to get rid of everything on one 128 00:05:16,579 --> 00:05:20,659 single frame and we'll talk about frames 129 00:05:18,379 --> 00:05:21,949 in a moment you can grab the frame in 130 00:05:20,660 --> 00:05:25,360 the timeline and we'll talk about the 131 00:05:21,949 --> 00:05:29,360 timeline later on and again hit delete 132 00:05:25,360 --> 00:05:30,860 now before I move on to talking about 133 00:05:29,360 --> 00:05:36,199 timeline of frames we're going to go to 134 00:05:30,860 --> 00:05:38,210 modify and go to document and here is 135 00:05:36,199 --> 00:05:41,180 where we can actually modify the stage 136 00:05:38,209 --> 00:05:44,629 itself it's currently set to 550 pixels 137 00:05:41,180 --> 00:05:46,519 wide by 400 pixels high and that's a bit 138 00:05:44,629 --> 00:05:48,978 of an odd setting I don't know why flash 139 00:05:46,519 --> 00:05:51,288 has that as the default but because we 140 00:05:48,978 --> 00:05:56,408 want to create a film or an animation 141 00:05:51,288 --> 00:05:59,509 we're going to send it to 1920 wide by 142 00:05:56,408 --> 00:06:01,639 1080 high and that will give us a high 143 00:05:59,509 --> 00:06:03,560 definition resolution and you'll see in 144 00:06:01,639 --> 00:06:05,870 a minute when we click OK the stage will 145 00:06:03,560 --> 00:06:07,699 suddenly become much larger but before I 146 00:06:05,870 --> 00:06:09,649 do that I'd like to talk to you about 147 00:06:07,699 --> 00:06:11,120 adjusting background colors and frame 148 00:06:09,649 --> 00:06:12,948 rates as you can see our default 149 00:06:11,120 --> 00:06:14,329 background is white and we'll keep it as 150 00:06:12,949 --> 00:06:17,870 white for the time being but if you want 151 00:06:14,329 --> 00:06:19,819 it to be gray or pink or orange let's 152 00:06:17,870 --> 00:06:21,949 just make it Orange now see it's gone 153 00:06:19,819 --> 00:06:24,079 much bigger I'll have to zoom out here 154 00:06:21,949 --> 00:06:26,598 using the magnifying glass tool and 155 00:06:24,079 --> 00:06:30,050 select reduce click a few times to zoom 156 00:06:26,598 --> 00:06:32,329 out you can actually drag the area that 157 00:06:30,050 --> 00:06:34,908 you want to see whether you're using the 158 00:06:32,329 --> 00:06:37,008 reduce or enlarge magnifying glass and 159 00:06:34,908 --> 00:06:39,560 that all sort of snap you back in which 160 00:06:37,009 --> 00:06:43,610 is quite useful but now we have a nice 161 00:06:39,560 --> 00:06:45,110 1920 by 1080 P stage and we've got 162 00:06:43,610 --> 00:06:46,908 ourselves a nice orange background again 163 00:06:45,110 --> 00:06:51,229 I'm going to go to modify document and 164 00:06:46,908 --> 00:06:53,718 select actually gray or yeah it's going 165 00:06:51,228 --> 00:06:55,339 to get a nice darker gray actually don't 166 00:06:53,718 --> 00:06:56,839 like using too much white on the screen 167 00:06:55,339 --> 00:06:58,128 if I can help it because when you're 168 00:06:56,839 --> 00:06:59,448 animating and looking at the screen 169 00:06:58,129 --> 00:07:01,338 for hours on end it's nice not to 170 00:06:59,449 --> 00:07:03,139 bombard your eyes with white I'm going 171 00:07:01,338 --> 00:07:06,379 to turn off pasteboard so we can again 172 00:07:03,139 --> 00:07:08,360 see the stage within the surrounding 173 00:07:06,379 --> 00:07:12,139 area and drag with a magnifying glass to 174 00:07:08,360 --> 00:07:14,869 get ourselves looking pretty much dead 175 00:07:12,139 --> 00:07:17,629 on at the stage here and finally I am 176 00:07:14,869 --> 00:07:19,969 going to begin to explain the timeline 177 00:07:17,629 --> 00:07:21,800 now what is the timeline well to begin 178 00:07:19,968 --> 00:07:23,468 to talk about the timeline I first will 179 00:07:21,800 --> 00:07:25,939 have to talk a little bit about 180 00:07:23,468 --> 00:07:28,519 animation and films and how they're made 181 00:07:25,939 --> 00:07:30,528 as you probably know when you look at a 182 00:07:28,519 --> 00:07:32,718 film or in animation you're not looking 183 00:07:30,528 --> 00:07:35,509 at recorded movement there is really no 184 00:07:32,718 --> 00:07:37,129 movement involved other than what the 185 00:07:35,509 --> 00:07:38,449 actors and actresses are doing on the 186 00:07:37,129 --> 00:07:43,819 set if you're recording a live-action 187 00:07:38,449 --> 00:07:46,278 film instead the camera creates 24 still 188 00:07:43,819 --> 00:07:49,009 images a second which when played back 189 00:07:46,278 --> 00:07:51,408 at 24 images a second give the illusion 190 00:07:49,009 --> 00:07:53,149 of movement and life an animation is 191 00:07:51,408 --> 00:07:55,188 really no different to live-action film 192 00:07:53,149 --> 00:07:58,728 the only difference is that an animator 193 00:07:55,189 --> 00:08:01,039 or someone creates those 24 images per 194 00:07:58,728 --> 00:08:04,428 second rather than filming them with a 195 00:08:01,038 --> 00:08:06,978 camera so the timeline is simply just 196 00:08:04,428 --> 00:08:10,938 the timeline of the frames in our 197 00:08:06,978 --> 00:08:13,579 animation and by hitting f6 on your 198 00:08:10,939 --> 00:08:18,889 keyboard you can create lots and lots of 199 00:08:13,579 --> 00:08:20,418 blank keyframes or blank frames now they 200 00:08:18,889 --> 00:08:22,069 currently have nothing in them and you 201 00:08:20,418 --> 00:08:23,899 can scroll through them with this red 202 00:08:22,069 --> 00:08:25,459 cursor here by dragging it but you're 203 00:08:23,899 --> 00:08:28,728 not going to see anything because there 204 00:08:25,459 --> 00:08:32,740 is no animation there but if by going 205 00:08:28,728 --> 00:08:35,509 and getting the brush tool and by 206 00:08:32,740 --> 00:08:36,979 drawing into a frame by moving the 207 00:08:35,509 --> 00:08:38,658 cursor and drawing into another frame 208 00:08:36,979 --> 00:08:40,550 moving the cursor drawing into another 209 00:08:38,658 --> 00:08:46,610 frame moving the cursor drawing into 210 00:08:40,549 --> 00:08:50,389 another frame etc etc and then by either 211 00:08:46,610 --> 00:08:53,269 hitting Enter for a preview or hitting 212 00:08:50,389 --> 00:08:56,000 ctrl alt + Enter to export the thing out 213 00:08:53,269 --> 00:08:58,129 let's actually just hit Enter drag back 214 00:08:56,000 --> 00:09:01,188 to the beginning hit enter you can play 215 00:08:58,129 --> 00:09:04,370 our animation and that's been made by 216 00:09:01,188 --> 00:09:06,289 creating these sequential frames in the 217 00:09:04,370 --> 00:09:07,879 timeline now there are lots of fancy 218 00:09:06,289 --> 00:09:09,980 things that you can do with these frames 219 00:09:07,879 --> 00:09:11,899 in the timeline you can actually drag 220 00:09:09,980 --> 00:09:15,050 specific frames out to 221 00:09:11,899 --> 00:09:16,909 last longer this is playing back at 24 222 00:09:15,049 --> 00:09:18,979 frames per second so these frames are 223 00:09:16,909 --> 00:09:21,289 flicked by very quickly but if you grab 224 00:09:18,980 --> 00:09:23,389 one particular frame and go to insert 225 00:09:21,289 --> 00:09:25,099 frame you'll actually see it's been 226 00:09:23,389 --> 00:09:28,340 dragged out to last twice as long and if 227 00:09:25,100 --> 00:09:33,710 we do that to each frame our movement 228 00:09:28,340 --> 00:09:36,920 will be effectively playing back at 12 229 00:09:33,710 --> 00:09:39,170 frames per second even though we're 230 00:09:36,919 --> 00:09:41,240 still animating within 12 24 frames per 231 00:09:39,169 --> 00:09:42,439 second because these frames are dragged 232 00:09:41,240 --> 00:09:44,899 out to twice as long 233 00:09:42,440 --> 00:09:46,970 animators call these twos you animate on 234 00:09:44,899 --> 00:09:48,740 twos or you animate on ones some people 235 00:09:46,970 --> 00:09:50,330 even animate on threes and it makes the 236 00:09:48,740 --> 00:09:52,490 movement a little bit choppier but we're 237 00:09:50,330 --> 00:09:54,500 still animating within a 24 frames per 238 00:09:52,490 --> 00:09:56,269 second animation so we're hitting Enter 239 00:09:54,500 --> 00:09:58,250 we can see the same animation play back 240 00:09:56,269 --> 00:09:58,970 a little bit choppier but it still looks 241 00:09:58,250 --> 00:10:02,120 pretty good 242 00:09:58,970 --> 00:10:04,160 much better for creating slow movements 243 00:10:02,120 --> 00:10:06,289 now I'm going to begin to talk about 244 00:10:04,159 --> 00:10:10,069 tools next but first of all I'm going to 245 00:10:06,289 --> 00:10:12,469 grab our frames and go to remove frames 246 00:10:10,070 --> 00:10:14,360 to clear those away before I do that I'm 247 00:10:12,470 --> 00:10:17,180 going to quickly talk about how flash is 248 00:10:14,360 --> 00:10:21,200 sort of modular if you want you can grab 249 00:10:17,179 --> 00:10:23,449 the timeline and move it down until it 250 00:10:21,200 --> 00:10:24,740 highlights this blue bar here and sort 251 00:10:23,450 --> 00:10:27,620 of sticks to the bottom of the screen if 252 00:10:24,740 --> 00:10:29,810 you like having your timeline at the 253 00:10:27,620 --> 00:10:31,639 bottom alternatively you can grab the 254 00:10:29,809 --> 00:10:33,589 toolbar and move it over here if you 255 00:10:31,639 --> 00:10:35,600 like having your tools on the right but 256 00:10:33,590 --> 00:10:38,540 I actually prefer having them on the 257 00:10:35,600 --> 00:10:41,090 left I like having my tool on the left 258 00:10:38,539 --> 00:10:42,379 doesn't sound good does it so that's 259 00:10:41,090 --> 00:10:46,129 like something a tailor would ask you 260 00:10:42,379 --> 00:10:47,840 right it does actually take a bit of 261 00:10:46,129 --> 00:10:50,059 fiddling to get it to stick where you 262 00:10:47,840 --> 00:10:51,470 want so you can drag the boxes and make 263 00:10:50,059 --> 00:10:52,789 them all kind of different sizes and 264 00:10:51,470 --> 00:10:55,550 shapes but again I'm going to move the 265 00:10:52,789 --> 00:10:58,669 timeline up here and we'll begin talking 266 00:10:55,549 --> 00:11:00,319 about tools right as we've discussed 267 00:10:58,669 --> 00:11:02,629 this bar here on the left is the tool 268 00:11:00,320 --> 00:11:05,090 bar and there are a lot of things down 269 00:11:02,629 --> 00:11:06,950 here and some of them I don't even know 270 00:11:05,090 --> 00:11:09,500 what they do and I've been using flash 271 00:11:06,950 --> 00:11:11,509 for 10 years so I'm only going to run 272 00:11:09,500 --> 00:11:12,830 down the basics and really talk about 273 00:11:11,509 --> 00:11:15,049 the things that I think are going to be 274 00:11:12,830 --> 00:11:16,850 useful for you we've already discussed 275 00:11:15,049 --> 00:11:22,129 this black arrow here which can be used 276 00:11:16,850 --> 00:11:23,750 to change or highlight art let's just 277 00:11:22,129 --> 00:11:24,860 give ourselves a frame here to work into 278 00:11:23,750 --> 00:11:26,149 if you don't have a frame 279 00:11:24,860 --> 00:11:29,959 you won't actually be able to draw 280 00:11:26,149 --> 00:11:32,149 anything in the stage so by I don't know 281 00:11:29,958 --> 00:11:34,159 what that is but by grabbing the arrow 282 00:11:32,149 --> 00:11:36,350 tool here we can highlight the art and 283 00:11:34,159 --> 00:11:38,629 then by right-clicking you can go to 284 00:11:36,350 --> 00:11:42,379 free transform which is always useful 285 00:11:38,629 --> 00:11:45,019 for rotating your art or scaling your 286 00:11:42,379 --> 00:11:47,059 art up and by the way hold down the 287 00:11:45,019 --> 00:11:49,159 shift key if you want to scale without 288 00:11:47,059 --> 00:11:53,899 actually stretching or distorting your 289 00:11:49,159 --> 00:11:55,370 art scale up or down rotate some 290 00:11:53,899 --> 00:11:58,759 interesting things like the envelope 291 00:11:55,370 --> 00:12:03,110 tool again by right click and you can 292 00:11:58,759 --> 00:12:04,669 sort of morph and warp the art which I 293 00:12:03,110 --> 00:12:07,070 picked a better image here to begin 294 00:12:04,669 --> 00:12:10,069 playing with this sort of whoopee 295 00:12:07,070 --> 00:12:12,410 cushion that's become deflated here so 296 00:12:10,070 --> 00:12:14,510 all that stuff's pretty useful again 297 00:12:12,409 --> 00:12:16,850 highlight with the arrow tool hit delete 298 00:12:14,509 --> 00:12:19,069 to get rid of now there are two ways you 299 00:12:16,850 --> 00:12:22,129 can kind of create most of the art in 300 00:12:19,070 --> 00:12:24,680 flash and that's by using the brush tool 301 00:12:22,129 --> 00:12:27,528 or a line tool now the brush tool I 302 00:12:24,679 --> 00:12:30,469 believe is the superior way of creating 303 00:12:27,528 --> 00:12:32,539 art and we create that with sorry we 304 00:12:30,470 --> 00:12:35,060 select that by picking the brush tool 305 00:12:32,539 --> 00:12:38,539 here and as you see we can draw lots of 306 00:12:35,059 --> 00:12:42,588 interesting shapes and begin throwing in 307 00:12:38,539 --> 00:12:45,708 exciting looking characters for 2013 308 00:12:42,589 --> 00:12:50,300 he's hip he's cool he's listening to 309 00:12:45,708 --> 00:12:51,559 beats by dre get rid of him he's 310 00:12:50,299 --> 00:12:53,328 obnoxious actually I don't like him at 311 00:12:51,559 --> 00:12:56,000 all again you can select the frame and 312 00:12:53,328 --> 00:12:58,489 hit delete but you can also select or 313 00:12:56,000 --> 00:13:01,490 create art sorry with the line tool now 314 00:12:58,490 --> 00:13:03,950 the line tool is a lot more sort of 315 00:13:01,490 --> 00:13:07,519 mathematical you can create straight 316 00:13:03,950 --> 00:13:10,220 lines by dragging and then go in and 317 00:13:07,519 --> 00:13:12,528 Bend those lines after the fact by 318 00:13:10,220 --> 00:13:14,690 warping them with the arrow tool we've 319 00:13:12,528 --> 00:13:17,299 already talked about and of course 320 00:13:14,690 --> 00:13:21,380 highlight and delete as always we can 321 00:13:17,299 --> 00:13:24,469 create geological mathematical Oubre 322 00:13:21,379 --> 00:13:27,220 boring squares and circles with this 323 00:13:24,470 --> 00:13:32,209 square tool here and by holding down our 324 00:13:27,220 --> 00:13:35,360 mouse we can select ovals and circles 325 00:13:32,208 --> 00:13:36,979 again if you want a nice even circle 326 00:13:35,360 --> 00:13:39,250 hold down shift so you don't get these 327 00:13:36,980 --> 00:13:42,080 weird sort of 328 00:13:39,250 --> 00:13:44,500 oval shapes control-z 329 00:13:42,080 --> 00:13:47,420 to get rid of those alternatively and 330 00:13:44,500 --> 00:13:50,120 the line tool does use a different 331 00:13:47,419 --> 00:13:53,120 palette to the paint tool or the brush 332 00:13:50,120 --> 00:13:56,330 tool and you can change that by going 333 00:13:53,120 --> 00:13:59,289 here and selecting black so actually 334 00:13:56,330 --> 00:14:01,580 this will give us a nice black lines and 335 00:13:59,289 --> 00:14:03,589 if we want to change the color of our 336 00:14:01,580 --> 00:14:05,389 brush we go ahead of the bucket fill 337 00:14:03,590 --> 00:14:08,690 tool and we can have a nice red brush 338 00:14:05,389 --> 00:14:12,080 now as you're probably aware when you 339 00:14:08,690 --> 00:14:14,930 color in with a program like this there 340 00:14:12,080 --> 00:14:19,389 is a nice easy way to do that using a 341 00:14:14,929 --> 00:14:24,309 bucket fill tool for example let's draw 342 00:14:19,389 --> 00:14:24,309 some sort of mutant Bart Simpson here 343 00:14:29,320 --> 00:14:34,190 looks like how Bart was drawn in the old 344 00:14:31,789 --> 00:14:37,039 Tracey Ullman Show it's kind of and by 345 00:14:34,190 --> 00:14:40,010 colouring him in we can go to the bucket 346 00:14:37,039 --> 00:14:41,870 fill tool and select let's make him a 347 00:14:40,009 --> 00:14:44,299 nice blue the color that the Simpsons 348 00:14:41,870 --> 00:14:46,070 are famous for and there we go we've 349 00:14:44,299 --> 00:14:48,199 just clicked into him directly and 350 00:14:46,070 --> 00:14:51,040 filled him in without having to color 351 00:14:48,200 --> 00:14:51,040 manually ooh 352 00:14:51,169 --> 00:14:55,849 there's a hole here present in Bart's 353 00:14:54,049 --> 00:14:57,709 either which we're not able to fill in 354 00:14:55,850 --> 00:15:00,409 obviously because there is a gap but 355 00:14:57,710 --> 00:15:02,600 actually flash can cut us a break here 356 00:15:00,409 --> 00:15:05,389 and by selecting the bucket fill tool 357 00:15:02,600 --> 00:15:08,180 and then going down to gap size we're 358 00:15:05,389 --> 00:15:10,340 able to select close large gaps and that 359 00:15:08,179 --> 00:15:15,319 will color in despite the hole not 360 00:15:10,340 --> 00:15:17,840 actually being fully closed zoom out now 361 00:15:15,320 --> 00:15:19,790 if you're using a Cintiq or a drawing 362 00:15:17,840 --> 00:15:22,160 tablet one of the cool things about that 363 00:15:19,789 --> 00:15:24,289 is you can actually have your lines 364 00:15:22,159 --> 00:15:25,699 taper in and out now we're going to 365 00:15:24,289 --> 00:15:31,789 select the brush tool let's have it 366 00:15:25,700 --> 00:15:34,670 black be black again and by hitting this 367 00:15:31,789 --> 00:15:37,129 sort of water droplet icon here we can 368 00:15:34,669 --> 00:15:38,599 actually turn on pressure sensitivity so 369 00:15:37,129 --> 00:15:41,299 without pressure sensitivity we get 370 00:15:38,600 --> 00:15:43,040 these very consistent lines and they're 371 00:15:41,299 --> 00:15:45,829 not necessarily ugly that might be what 372 00:15:43,039 --> 00:15:48,319 you're going for but by turning on 373 00:15:45,830 --> 00:15:49,769 pressure sensitivity we can have lines 374 00:15:48,320 --> 00:15:52,439 that are thin 375 00:15:49,769 --> 00:15:55,318 and fat and then thin again if we want 376 00:15:52,438 --> 00:15:58,110 by applying a more pressure or even a 377 00:15:55,318 --> 00:15:59,969 line that starts off then starts off 378 00:15:58,110 --> 00:16:05,009 thick rather goes thin in the middle and 379 00:15:59,970 --> 00:16:11,119 then ends up fat and we've accidentally 380 00:16:05,009 --> 00:16:14,308 created a corporate logo fantastic so 381 00:16:11,119 --> 00:16:17,610 other than the line tool and the brush 382 00:16:14,308 --> 00:16:19,499 tool that's really all you need to know 383 00:16:17,610 --> 00:16:23,610 along with the bucket tool you can also 384 00:16:19,499 --> 00:16:27,269 of course create text in flash by using 385 00:16:23,610 --> 00:16:29,639 the text tool here dragging the box that 386 00:16:27,269 --> 00:16:37,019 you wish to type your text into and then 387 00:16:29,639 --> 00:16:38,428 saying look ma no brains fantastic now 388 00:16:37,019 --> 00:16:40,860 one thing I should mention before we 389 00:16:38,428 --> 00:16:42,688 move on is the properties box which you 390 00:16:40,860 --> 00:16:44,489 can bring up by selecting window and 391 00:16:42,688 --> 00:16:46,889 then properties and it brings up a 392 00:16:44,489 --> 00:16:48,509 context-sensitive box which will change 393 00:16:46,889 --> 00:16:50,428 depending on which tool you're currently 394 00:16:48,509 --> 00:16:53,308 using because we're using text at the 395 00:16:50,428 --> 00:16:55,649 moment it is text centric and we can 396 00:16:53,308 --> 00:16:58,588 change the color of the text or we can 397 00:16:55,649 --> 00:17:02,369 change the position etc etc and the font 398 00:16:58,589 --> 00:17:06,588 as well if you so desire and if we were 399 00:17:02,369 --> 00:17:08,548 to be using the brush tool instead 400 00:17:06,588 --> 00:17:09,838 effectively by changing the color for 401 00:17:08,548 --> 00:17:11,548 the brush tool we have changed to color 402 00:17:09,838 --> 00:17:13,019 for the text as well so you don't really 403 00:17:11,548 --> 00:17:14,519 need to bring up the properties box to 404 00:17:13,019 --> 00:17:16,318 change the color of the text just a 405 00:17:14,519 --> 00:17:18,778 quick aside there now if we to bring up 406 00:17:16,318 --> 00:17:22,349 the properties box again it has changed 407 00:17:18,778 --> 00:17:24,359 to have much more to do with our brush 408 00:17:22,349 --> 00:17:26,458 setting but I'm actually happy with that 409 00:17:24,359 --> 00:17:28,229 for the time being as it is now we're 410 00:17:26,459 --> 00:17:30,288 going to move on and begin to look at 411 00:17:28,230 --> 00:17:32,759 how you create animation in flash 412 00:17:30,288 --> 00:17:34,259 finally we're getting somewhere 413 00:17:32,759 --> 00:17:37,048 now there are two ways you can create 414 00:17:34,259 --> 00:17:39,898 the flash animation and those are frame 415 00:17:37,048 --> 00:17:43,200 by frame and tweening and if those don't 416 00:17:39,898 --> 00:17:45,479 sound immediately familiar don't worry 417 00:17:43,200 --> 00:17:48,269 I'll explain what they mean essentially 418 00:17:45,480 --> 00:17:51,419 they're two ways of creating animation 419 00:17:48,269 --> 00:17:53,278 by generating frames and frame by frame 420 00:17:51,419 --> 00:17:55,649 what that means is and we've sort of 421 00:17:53,278 --> 00:17:59,329 seen it already is if I introduce lots 422 00:17:55,648 --> 00:18:02,308 of blank keyframes I can simply have a 423 00:17:59,329 --> 00:18:03,058 frame followed by another frame followed 424 00:18:02,308 --> 00:18:04,408 by another followed 425 00:18:03,058 --> 00:18:07,470 another followed by another followed by 426 00:18:04,409 --> 00:18:10,620 another another another another and we 427 00:18:07,470 --> 00:18:12,480 get this effect where we create 428 00:18:10,619 --> 00:18:13,949 animation by drawing all the frames by 429 00:18:12,480 --> 00:18:16,319 hand I don't know what it is about this 430 00:18:13,950 --> 00:18:18,269 little dot that flies around it always 431 00:18:16,319 --> 00:18:20,369 seems to be my go-to for representing 432 00:18:18,269 --> 00:18:22,829 frame by frame animation to people the 433 00:18:20,369 --> 00:18:24,569 other way is twinned animation and 434 00:18:22,829 --> 00:18:27,778 that's where the computer kind of 435 00:18:24,569 --> 00:18:29,519 creates the in-between images and that's 436 00:18:27,778 --> 00:18:32,519 where the word tween came from in 437 00:18:29,519 --> 00:18:34,980 between and we do that by getting rid of 438 00:18:32,519 --> 00:18:38,009 these frames to begin with creating a 439 00:18:34,980 --> 00:18:42,470 new frame and let's again create that 440 00:18:38,009 --> 00:18:47,190 circle except we're going to select 441 00:18:42,470 --> 00:18:49,618 create classic tween and by inserting 442 00:18:47,190 --> 00:18:52,320 frames we can see that we no longer have 443 00:18:49,618 --> 00:18:56,819 a gray frame it's actually changed this 444 00:18:52,319 --> 00:18:59,609 with a very pale lilac color and by then 445 00:18:56,819 --> 00:19:03,378 selecting a future frame we're on frame 446 00:18:59,609 --> 00:19:06,569 10 here and highlighting and 447 00:19:03,378 --> 00:19:08,878 right-clicking we can insert keyframe 448 00:19:06,569 --> 00:19:11,519 and it sort of created this line from 449 00:19:08,878 --> 00:19:15,648 frame 1 to frame 10 here and if we move 450 00:19:11,519 --> 00:19:18,569 the circle on the tenth frame that will 451 00:19:15,648 --> 00:19:21,748 effectively create all the in-betweens 452 00:19:18,569 --> 00:19:23,609 for us people create very complicated 453 00:19:21,749 --> 00:19:25,860 animation this way by effectively 454 00:19:23,609 --> 00:19:27,508 building a character out of individual 455 00:19:25,859 --> 00:19:30,898 pieces almost like you would a puppet 456 00:19:27,509 --> 00:19:33,118 and tweening each individual body part 457 00:19:30,898 --> 00:19:34,408 now this isn't actually a form of 458 00:19:33,118 --> 00:19:35,788 animation I have a whole lot of 459 00:19:34,409 --> 00:19:37,169 experience with and we'll be 460 00:19:35,788 --> 00:19:39,419 concentrating on frame by frame 461 00:19:37,169 --> 00:19:41,220 animation throughout this tutorial it's 462 00:19:39,419 --> 00:19:43,080 a lot more work and it does take longer 463 00:19:41,220 --> 00:19:45,179 to produce but I ultimately think it's 464 00:19:43,079 --> 00:19:48,259 more rewarding we will however be coming 465 00:19:45,179 --> 00:19:51,179 back to tweens when we look at creating 466 00:19:48,259 --> 00:19:53,038 camera pans or moving elements like a 467 00:19:51,179 --> 00:19:55,769 cloud moving by in the background or 468 00:19:53,038 --> 00:19:59,099 something like that so we're not quite 469 00:19:55,769 --> 00:20:01,019 done with tweens yet however before we 470 00:19:59,099 --> 00:20:02,609 wrap up today I would still like to look 471 00:20:01,019 --> 00:20:05,638 at one more thing and that's working 472 00:20:02,609 --> 00:20:07,949 with layers now I just selected a new 473 00:20:05,638 --> 00:20:10,558 layer and I'll do that again in a moment 474 00:20:07,950 --> 00:20:12,990 and show you what I did by selecting 475 00:20:10,558 --> 00:20:15,509 this button here which is labeled 476 00:20:12,990 --> 00:20:16,799 surprisingly new layer we're able to 477 00:20:15,509 --> 00:20:19,079 build up layer after layer 478 00:20:16,799 --> 00:20:21,869 in the timeline which we can shift 479 00:20:19,079 --> 00:20:24,539 around if we so desire and reorder them 480 00:20:21,869 --> 00:20:27,179 and effectively they act like plates of 481 00:20:24,539 --> 00:20:30,930 glass which you can create artwork on 482 00:20:27,180 --> 00:20:34,110 top of and whatever is on the top layer 483 00:20:30,930 --> 00:20:36,090 will effectively obscure things on the 484 00:20:34,109 --> 00:20:39,779 layer below it I'll show you what I mean 485 00:20:36,089 --> 00:20:41,369 by that BAM and we are back now I know 486 00:20:39,779 --> 00:20:43,170 that pigs are not going to lose any 487 00:20:41,369 --> 00:20:46,199 sleep over this but hopefully it should 488 00:20:43,170 --> 00:20:49,080 prove useful in helping me illustrate my 489 00:20:46,200 --> 00:20:51,480 points about layers as you can see by 490 00:20:49,079 --> 00:20:53,069 selecting this dot here under the eye 491 00:20:51,480 --> 00:20:56,069 we're able to actually make layers 492 00:20:53,069 --> 00:20:58,139 invisible or visible and you can see we 493 00:20:56,069 --> 00:21:00,779 have a background layer we have a 494 00:20:58,140 --> 00:21:03,300 tweened cloud layer we have a little man 495 00:21:00,779 --> 00:21:04,920 who i frame-by-frame animated to look 496 00:21:03,299 --> 00:21:08,309 like he's running away in fear of 497 00:21:04,920 --> 00:21:11,340 realizing how badly animated he is and a 498 00:21:08,309 --> 00:21:14,309 little shrubbery here just in front of 499 00:21:11,339 --> 00:21:18,149 him to add a little bit of depth and if 500 00:21:14,309 --> 00:21:22,589 we select loop playback and hit enter we 501 00:21:18,150 --> 00:21:24,630 can watch our little film unfold so 502 00:21:22,589 --> 00:21:27,509 we've got a combination thereof animated 503 00:21:24,630 --> 00:21:28,920 layers non-animated layers and also 504 00:21:27,509 --> 00:21:30,960 tweening and it's all come together 505 00:21:28,920 --> 00:21:34,259 using the stuff that we've learnt today 506 00:21:30,960 --> 00:21:37,110 to help make the very very crude short 507 00:21:34,259 --> 00:21:40,079 you see playing in front of you now we 508 00:21:37,109 --> 00:21:43,500 are at the tallest point of the highest 509 00:21:40,079 --> 00:21:46,079 peak of the biggest tallest mountain on 510 00:21:43,500 --> 00:21:48,509 the biggest iceberg imaginable but we 511 00:21:46,079 --> 00:21:50,519 have a long way to go and things are 512 00:21:48,509 --> 00:21:53,190 going to heat up a lot more next week 513 00:21:50,519 --> 00:21:54,869 when I start to break down animation 514 00:21:53,190 --> 00:21:56,820 frame by frame animation in a lot more 515 00:21:54,869 --> 00:22:00,179 depth we're going to begin to look at 516 00:21:56,819 --> 00:22:02,730 sort of the principles behind animation 517 00:22:00,180 --> 00:22:05,210 animating objects and sort of getting 518 00:22:02,730 --> 00:22:07,200 real flow and groove in our movement and 519 00:22:05,210 --> 00:22:09,420 eventually we're going to move on at the 520 00:22:07,200 --> 00:22:12,210 end of that episode to look at animated 521 00:22:09,420 --> 00:22:16,110 cartoon characters who look a lot better 522 00:22:12,210 --> 00:22:18,509 than this guy so tune in next week for 523 00:22:16,109 --> 00:22:20,889 more happy Harry's who's has two's house 524 00:22:18,509 --> 00:22:25,890 twos Harry's 525 00:22:20,890 --> 00:22:25,890 I'll be happy to