1 00:00:00,000 --> 00:00:05,759 hello your tech admin here and today I'm 2 00:00:03,120 --> 00:00:11,820 going to be showing you a basic tutorial 3 00:00:05,759 --> 00:00:14,610 on animating with sprites in Macromedia 4 00:00:11,820 --> 00:00:17,579 flash 8 so first off of course you're 5 00:00:14,609 --> 00:00:18,600 going to need some spreadsheets so I'll 6 00:00:17,579 --> 00:00:21,329 show you a couple of sites that I 7 00:00:18,600 --> 00:00:27,000 recommend that you use because they are 8 00:00:21,329 --> 00:00:39,539 awesome ok so the first one is video 9 00:00:27,000 --> 00:00:41,850 game sprites net video game sprites net 10 00:00:39,539 --> 00:00:46,140 now this one doesn't have a very large 11 00:00:41,850 --> 00:00:47,160 collection of sprites but if you don't 12 00:00:46,140 --> 00:00:49,950 want to go through the hassle of having 13 00:00:47,159 --> 00:00:51,779 to go through and separate all your 14 00:00:49,950 --> 00:00:52,649 sprites from the sprite sheet manually 15 00:00:51,780 --> 00:00:55,109 which I'll be showing you how to do 16 00:00:52,649 --> 00:00:56,329 later on the site already has them 17 00:00:55,109 --> 00:00:59,519 separated and you can pretty much just 18 00:00:56,329 --> 00:01:01,109 right click the mass separate in right 19 00:00:59,520 --> 00:01:03,780 click and save them as separate images 20 00:01:01,109 --> 00:01:05,728 and not as a whole bunch so if I right 21 00:01:03,780 --> 00:01:09,780 click this guy saved them it would right 22 00:01:05,728 --> 00:01:11,760 it would save just him nothing else so 23 00:01:09,780 --> 00:01:13,769 that's pretty useful if you're just 24 00:01:11,760 --> 00:01:18,290 getting started but um if you won't hold 25 00:01:13,769 --> 00:01:23,688 sprite sheets then for sure any spriter 26 00:01:18,290 --> 00:01:23,689 knows about on the 27 00:01:25,640 --> 00:01:35,670 it's writers resource so here it is 28 00:01:30,899 --> 00:01:41,039 spiders resource um there's this main 29 00:01:35,670 --> 00:01:45,780 page and this site pretty much has so 30 00:01:41,039 --> 00:01:46,859 many sprites it's ridiculous like almost 31 00:01:45,780 --> 00:01:48,329 in the game you can think of it as 32 00:01:46,858 --> 00:01:50,640 sprites for it so this is a great site 33 00:01:48,328 --> 00:01:53,548 too if you're going to going to want to 34 00:01:50,640 --> 00:01:56,640 be using whole spreadsheets so we'll go 35 00:01:53,549 --> 00:01:59,250 ahead and launch flash 8 and if you're 36 00:01:56,640 --> 00:02:01,439 using Windows 7 with Aero which you see 37 00:01:59,250 --> 00:02:03,149 I was using but on Windows 7 38 00:02:01,438 --> 00:02:04,738 automatically turned off arrow because 39 00:02:03,149 --> 00:02:07,319 our screen recording in my processor 40 00:02:04,739 --> 00:02:08,759 usage was going up and everything so 41 00:02:07,319 --> 00:02:12,060 it's which set off automatically but um 42 00:02:08,758 --> 00:02:13,919 if you're using arrow and you launch 43 00:02:12,060 --> 00:02:16,590 flash 8 inside of Windows 7 it will 44 00:02:13,919 --> 00:02:18,719 automatically turn arrow off because of 45 00:02:16,590 --> 00:02:20,729 some incompatibility with the program I 46 00:02:18,719 --> 00:02:22,889 don't know what that s doing but about a 47 00:02:20,729 --> 00:02:26,189 switch my um I don't really like the 48 00:02:22,889 --> 00:02:27,359 basic theme it kind of hurts my house so 49 00:02:26,189 --> 00:02:29,068 I'm going to switch over to something 50 00:02:27,360 --> 00:02:33,930 I'm pretty sure everybody's pretty 51 00:02:29,068 --> 00:02:37,199 familiar with which is the Luna theme 52 00:02:33,930 --> 00:02:41,310 that was default with Windows XP 53 00:02:37,199 --> 00:02:42,869 so there's that so once you open up a 54 00:02:41,310 --> 00:02:44,670 shade it's gonna look exactly like this 55 00:02:42,870 --> 00:02:46,770 you're gonna want to hit go ahead and 56 00:02:44,669 --> 00:02:49,409 just um create new flash document and 57 00:02:46,770 --> 00:02:52,890 you'll be presented with this and you'll 58 00:02:49,409 --> 00:02:56,009 see your stage right here and your 59 00:02:52,889 --> 00:02:57,839 library which is empty right now so 60 00:02:56,009 --> 00:03:00,479 first as far as you can go ahead and 61 00:02:57,840 --> 00:03:02,340 import your own your sprite sheet or 62 00:03:00,479 --> 00:03:06,799 sprites that you downloaded you're just 63 00:03:02,340 --> 00:03:09,360 going to go to import to library and 64 00:03:06,800 --> 00:03:11,459 here's a Super Mario Brothers sprite 65 00:03:09,360 --> 00:03:14,610 sheet that I downloaded from a surprise 66 00:03:11,459 --> 00:03:15,780 resource you can open that and first 67 00:03:14,610 --> 00:03:17,370 things first I'm going to right click 68 00:03:15,780 --> 00:03:20,370 this and I'm going to go to properties 69 00:03:17,370 --> 00:03:23,489 and I'm going to make sure this allows 70 00:03:20,370 --> 00:03:28,200 smoothing is unchecked and that this 71 00:03:23,489 --> 00:03:29,730 compression is a lossless PNG /give okay 72 00:03:28,199 --> 00:03:31,768 now that you make sure it's on that 73 00:03:29,729 --> 00:03:34,439 you're going to close that and go to 74 00:03:31,769 --> 00:03:36,989 insert you symbol and name this whatever 75 00:03:34,439 --> 00:03:39,500 you want I'm gonna name it Mario 76 00:03:36,989 --> 00:03:39,500 spritesheet 77 00:03:41,989 --> 00:03:49,319 okay and make sure it's the type is set 78 00:03:46,500 --> 00:03:50,909 to graphic just press ok and it's going 79 00:03:49,319 --> 00:03:52,049 to present you with a new page and 80 00:03:50,909 --> 00:03:54,299 you're going to be pretty much editing 81 00:03:52,049 --> 00:03:56,370 inside the symbol you just made we're 82 00:03:54,299 --> 00:03:57,900 going to do is grab your sprite sheet 83 00:03:56,370 --> 00:03:59,519 that you imported and just drag it over 84 00:03:57,900 --> 00:04:02,489 here and the reason I'm doing this this 85 00:03:59,519 --> 00:04:03,750 way is so that I can resize this to 86 00:04:02,489 --> 00:04:04,859 whatever size I need because you can 87 00:04:03,750 --> 00:04:06,689 tell right now the sprite sheet is 88 00:04:04,859 --> 00:04:09,150 pretty small end if you use this on a 89 00:04:06,689 --> 00:04:10,979 movie it would look pretty ridiculous 90 00:04:09,150 --> 00:04:12,150 so we're gonna go ahead and resize this 91 00:04:10,979 --> 00:04:14,548 to a bigger size and what you gonna do 92 00:04:12,150 --> 00:04:15,959 is hover over the corner and you'll see 93 00:04:14,549 --> 00:04:17,160 the little diagonal arrow come up and 94 00:04:15,959 --> 00:04:18,389 you're going to hold down shift and 95 00:04:17,160 --> 00:04:20,130 you'll see it changed a little line in 96 00:04:18,389 --> 00:04:22,048 the middle will go away you're just 97 00:04:20,129 --> 00:04:23,909 going to grab it and drag it out and 98 00:04:22,048 --> 00:04:25,918 what that does is tells it to maintain 99 00:04:23,910 --> 00:04:28,169 the aspect ratio so that doesn't get 100 00:04:25,918 --> 00:04:29,969 stretched in some weird way and looks 101 00:04:28,168 --> 00:04:31,469 all crazy so I'm just going to drag this 102 00:04:29,970 --> 00:04:35,640 out twice 103 00:04:31,470 --> 00:04:38,310 and that looks pretty good so next um 104 00:04:35,639 --> 00:04:40,529 I'm gonna head going to go ahead and 105 00:04:38,310 --> 00:04:41,670 break this apart so that can work with 106 00:04:40,529 --> 00:04:45,419 all the different pieces because right 107 00:04:41,670 --> 00:04:46,860 now it's just acting as one big symbol 108 00:04:45,420 --> 00:04:48,990 as you can see if I try to select some 109 00:04:46,860 --> 00:04:50,879 it just selects the whole thing as one 110 00:04:48,990 --> 00:04:52,530 huge picture so we're going to break it 111 00:04:50,879 --> 00:04:57,329 up into little pieces that can be used 112 00:04:52,529 --> 00:05:02,069 separately and um sorry about that was 113 00:04:57,329 --> 00:05:04,430 my sister coming in to say hi so pretty 114 00:05:02,069 --> 00:05:07,529 much I'm just kind of go to modify and 115 00:05:04,430 --> 00:05:10,740 then dump the bitmap and trace bitmap 116 00:05:07,529 --> 00:05:11,759 and then once you get to this dialog 117 00:05:10,740 --> 00:05:13,860 right here you're going to make sure 118 00:05:11,759 --> 00:05:18,389 that your color threshold is set to 100 119 00:05:13,860 --> 00:05:21,389 your minimum area is set to 1 and your 120 00:05:18,389 --> 00:05:22,889 kerb to fit is set to pixels and your 121 00:05:21,389 --> 00:05:25,259 quarter threshold should already be on 122 00:05:22,889 --> 00:05:26,879 normal so you're going to go ahead and 123 00:05:25,259 --> 00:05:27,870 press okay and then this will come up 124 00:05:26,879 --> 00:05:32,730 and you're going to let that do its 125 00:05:27,870 --> 00:05:35,879 business you have to excuse the music in 126 00:05:32,730 --> 00:05:38,240 the background there uh playing around 127 00:05:35,879 --> 00:05:38,240 in there 128 00:05:38,329 --> 00:05:41,849 okay and once that gets done you're 129 00:05:40,230 --> 00:05:43,830 gonna see everything selected like this 130 00:05:41,850 --> 00:05:45,810 and it's gonna be it's gonna look really 131 00:05:43,829 --> 00:05:49,050 funny but just because it's all selected 132 00:05:45,810 --> 00:05:50,339 so you're just gonna yeah right left 133 00:05:49,050 --> 00:05:52,889 click over it's next to it and it's 134 00:05:50,339 --> 00:05:55,319 gonna clear out and there you go you can 135 00:05:52,889 --> 00:05:57,899 pretty much grab separate parts of this 136 00:05:55,319 --> 00:06:00,110 now like this guy and do whatever you 137 00:05:57,899 --> 00:06:03,659 want to with them which is what we want 138 00:06:00,110 --> 00:06:07,500 so next I'm going to show you how to 139 00:06:03,660 --> 00:06:10,880 animate sprites to do your aha 140 00:06:07,500 --> 00:06:14,189 evil bidding so first I'm just gonna 141 00:06:10,879 --> 00:06:15,569 make Mario run pretty much so I'm going 142 00:06:14,189 --> 00:06:18,750 to slit a-runnin sprites which are these 143 00:06:15,569 --> 00:06:22,139 three right here and I'm gonna 144 00:06:18,750 --> 00:06:26,910 right-click and copy them okay then I'm 145 00:06:22,139 --> 00:06:30,509 going to go up to insert and oops click 146 00:06:26,910 --> 00:06:35,180 something mean to insert new symbol and 147 00:06:30,509 --> 00:06:35,180 I'm going to name it Mario 148 00:06:36,860 --> 00:06:42,509 running you get whatever you want of 149 00:06:40,470 --> 00:06:44,040 course but um I'm just going to stick to 150 00:06:42,509 --> 00:06:45,569 something that I'll be able to recognize 151 00:06:44,040 --> 00:06:47,520 and understand what it is now under here 152 00:06:45,569 --> 00:06:50,879 under type you're gonna make sure that 153 00:06:47,519 --> 00:06:52,889 on the tick box is on movieclip now 154 00:06:50,879 --> 00:06:54,149 you're just going to press ok and once 155 00:06:52,889 --> 00:06:57,000 again it's going to open up a new 156 00:06:54,149 --> 00:07:00,359 editing field now you can go ahead and 157 00:06:57,000 --> 00:07:02,040 paste in what you copied earlier let's 158 00:07:00,360 --> 00:07:03,540 paste that in Center and on if anybody 159 00:07:02,040 --> 00:07:06,480 is animated before you can tell that 160 00:07:03,540 --> 00:07:08,129 these sprites are out of order so I'm 161 00:07:06,480 --> 00:07:10,650 going to go ahead and fix that real 162 00:07:08,129 --> 00:07:13,759 quick this sprite goes first if you 163 00:07:10,649 --> 00:07:16,109 don't know then this one then this one 164 00:07:13,759 --> 00:07:20,099 so I'm just going to drag him out and 165 00:07:16,110 --> 00:07:22,560 select these and cut them okay so I'm 166 00:07:20,100 --> 00:07:25,080 going to turn onion skin on and I'm 167 00:07:22,560 --> 00:07:27,300 going to simply press f7 to insert and 168 00:07:25,079 --> 00:07:30,149 you blank keyframe I'm pretty sure 169 00:07:27,300 --> 00:07:32,040 that's what that does anyway it would 170 00:07:30,149 --> 00:07:33,509 just make a new frame and once you have 171 00:07:32,040 --> 00:07:35,610 onions Knable you'll see a little light 172 00:07:33,509 --> 00:07:37,529 outline where that used to be and that's 173 00:07:35,610 --> 00:07:38,850 going to be very helpful for lining up 174 00:07:37,529 --> 00:07:41,819 these sprites because they're not lined 175 00:07:38,850 --> 00:07:44,010 up right your animation is not going to 176 00:07:41,819 --> 00:07:47,399 look right so then you can just go ahead 177 00:07:44,009 --> 00:07:49,319 and go to paste again those other two 178 00:07:47,399 --> 00:07:50,729 that you cut earlier will come back and 179 00:07:49,319 --> 00:07:52,709 you're just going to grab the other one 180 00:07:50,730 --> 00:07:53,879 that goes next and you're just going to 181 00:07:52,709 --> 00:07:56,399 try to line up a good point of reference 182 00:07:53,879 --> 00:07:58,019 for lining up Mario is his hat because 183 00:07:56,399 --> 00:08:00,689 it never moves it stays in the same 184 00:07:58,019 --> 00:08:02,250 position and the way I'm moving it one 185 00:08:00,689 --> 00:08:04,259 pics a lot of Thomas by using my keys 186 00:08:02,250 --> 00:08:06,389 and if you hold shift and hold down and 187 00:08:04,259 --> 00:08:07,800 press the arrow keys it will move ten 188 00:08:06,389 --> 00:08:09,539 pixels out of time instead of one so 189 00:08:07,800 --> 00:08:12,000 that's a handy little tip for a lot of 190 00:08:09,540 --> 00:08:13,470 things up so once you're pretty sure you 191 00:08:12,000 --> 00:08:15,149 have it lined up you're just going to go 192 00:08:13,470 --> 00:08:19,320 them down here and cut this guy again 193 00:08:15,149 --> 00:08:22,409 first f7 and paste them again the 194 00:08:19,319 --> 00:08:24,120 shortcut for pasting in places ctrl 195 00:08:22,410 --> 00:08:26,070 shift V or you can just press control V 196 00:08:24,120 --> 00:08:27,360 it's up to you really or you can go 197 00:08:26,069 --> 00:08:29,790 through the menu and hit edit like I did 198 00:08:27,360 --> 00:08:33,710 earlier okay so we're just gonna go 199 00:08:29,790 --> 00:08:38,420 ahead and line him up again mmm no look 200 00:08:33,710 --> 00:08:40,790 hang on raise them up one pixel that 201 00:08:38,419 --> 00:08:42,829 looks about right now to test it 202 00:08:40,789 --> 00:08:44,480 you're gonna go to control and then go 203 00:08:42,830 --> 00:08:47,300 to loop playback and then you're just 204 00:08:44,480 --> 00:08:49,129 simply going to hit enter and there 205 00:08:47,299 --> 00:08:52,129 you're going to see the animation as you 206 00:08:49,129 --> 00:08:53,570 see he's not really doing much jumping 207 00:08:52,129 --> 00:08:55,580 around or anything so it looks like I 208 00:08:53,570 --> 00:08:57,140 pretty much did that correctly so now 209 00:08:55,580 --> 00:08:58,340 we're going to go back to scene 1 up 210 00:08:57,139 --> 00:09:01,789 here in the top and it's going to bring 211 00:08:58,340 --> 00:09:04,430 back our stage and I'm just gonna put 212 00:09:01,789 --> 00:09:06,949 Mario running in here and then to test 213 00:09:04,429 --> 00:09:11,079 any movie pretty simply pressing enter 214 00:09:06,950 --> 00:09:15,440 is not going to play on animations that 215 00:09:11,080 --> 00:09:16,910 are on that are posted pasted into the 216 00:09:15,440 --> 00:09:18,650 screen as you see when I was editing 217 00:09:16,909 --> 00:09:20,059 this it was animating when I pressed 218 00:09:18,649 --> 00:09:21,319 enter but now that I'm outside to think 219 00:09:20,059 --> 00:09:24,319 if I press ENTER it does absolutely 220 00:09:21,320 --> 00:09:28,190 nothing so what I'm gonna pretty much do 221 00:09:24,320 --> 00:09:31,010 is hit control enter and there you can 222 00:09:28,190 --> 00:09:34,730 see that's what it looks like so far we 223 00:09:31,009 --> 00:09:38,090 have Mario running in place so that's 224 00:09:34,730 --> 00:09:40,430 pretty easy and I'll probably be making 225 00:09:38,090 --> 00:09:43,430 more guides in the future probably 226 00:09:40,429 --> 00:09:46,519 pertaining to making you like Mario is 227 00:09:43,429 --> 00:09:48,379 running across a screen both by just 228 00:09:46,519 --> 00:09:52,039 simply putting them in here each frame 229 00:09:48,379 --> 00:09:54,620 and also by creating a motion tween with 230 00:09:52,039 --> 00:09:56,120 the ground below him which will actually 231 00:09:54,620 --> 00:09:58,250 move backwards while he stays stationary 232 00:09:56,120 --> 00:10:01,009 to get the illusion that he is running 233 00:09:58,250 --> 00:10:03,259 forward thanks for watching rating 234 00:10:01,009 --> 00:10:07,450 subscription comments are always helpful 235 00:10:03,259 --> 00:10:07,450 and I'll talk to you guys next time