I’ve been trying to get better at flash and action script so I have took on a self inclined project to make preloaders using the logos of every NBA team. I have already made a basic Toronto Raptors and Miami Heat preloaders but I intend on making more advanced ones further down the road.
To create the Heat Preloader I started by creating a new AS3 file in flash and importing a picture of the Miami Heat Logo to the stage. I then began tracing it out using Flash’s pen tool.
Something I really need to work on is my masking. For some reason I have a lot of trouble understanding how masking works in flash. I bring this up because in order to get the colour/fill of the logo to look right I made a separate white layer for the background; next I copied the outline of the heat logo and pasted it in place on the background layer. Next I clicked inside the outline and deleted it and the white inside so when I put the fill on another layer, it would only show as if inside the logo.
Next I planned out the progress my preloader both in black and white and in colour.
Next I hopped into action script in order to make everything come together.
Something I noticed after last night was that I made a mistake, a big mistake. Good thing this wasn’t for a client or a project. I actually made the logo wrong haha, so I jumped back into flash this morning and fixed my flash file.
I’m not going to post another gif showing it because I’d need to fix a separate file but here is a screenshot of the preloader in action.
I’ve been trying to polish up my flash/actionscript skills by working on some basic preloaders; here’s the first one I made. I needed to create a separate project to show how it works; the actual preloader has percent bar on it.
Hey again, If you read part one of this post you already know how badly my first attempt at a walk cycle turned out and that I had to restart. Fortunately I thought of a way to use what I already had instead of starting over completely from scratch. A week ago when my professor was checking everybody’s progress he said it would be funny if my AT-AT ran like a dog (know you know where this is going) I did not have the time to restart so I looked up a quadruped run cycle to begin manipulating my old illustrator file.
Thankfully, this cycle didn’t have 44 frames however it still took me a couple hours to manipulate each frame.
Like in my previous post, once I finished my run cycle I exported the file as SWF frames in order to bring it into flash. In addition to this run cycle I also made a second one in which the body of the AT-AT moved up and down. Here is a comparison between the two.
I decided to go with the one on the right because I felt, while the one of the left was hilarious, everything would look a lot smoother with the one on the right.
After importing my SWF frames and fixing the positioning of all of them I began working on my parallax background. I wanted to have a few things moving in the background so I made layers containing snow banks, mountains, and clouds (and more later on). I also added a shadow for my AT-AT
Something I had a LOT of trouble with was getting the background to loop properly (it still isn’t perfect, but it’s close)
When I get some time I’ll publish and upload a gif of all my failed attempts for everyone to see.
I had a hard time grasping that the end of my second background had to match the start of my first background….I think. I think the answer to this is very simple but I just ended up complicating it.
Anyways, once I got it to somewhat run smoothly I began working on my “extra” assets. In part one of this post you’ll see that I made vector images of turrets and a snow speeder.
I did a lot for these. I made a lot of embedded movie clips (animation in animation) in order to bring more life to my background. To do this I made a “laser” animation and stuck it inside the movie clips of both the snow speeder and one of the turrets to make them fire.
Initially I made both lasers red. But I kind of geek out when it comes to Star Wars and I’m pretty sure in the movies the Imperials had green blasters, and the rebels had red lasers at least in some scenes, anyways I got to add some more colour to a normally white and white (ha) scene.
In my opinion this still wasn’t enough so I two more embedded movie clips, both of explosions. I added in more animation to show a snow speeder destroying the other turret I made and a second snow speeder getting shot down and crashing in the mountains.
Below is a gif of my (almost) finished animation. I am aware that it isn’t perfect but I really needed to get this handed in tonight. Try to see how many bugs you can find and point them out :P.
As always thanks for reading my posts! And feel free to ask questions or leave comments!
Also, quick shout out to my buddy Scott for helping me out and my professor Joe for giving me the idea 😀
Ok get ready for a very long post; a post so long it Requires two parts. For my Flash class I had to create a frame by frame animation by drawing out a character and editing it in illustrator then manipulating it “frame by frame” in flash in order to create a looping animation.
Now originally, I chose Wolverine as my character to animate; but somehow, every time I choose Wolverine for something he ends up screwing me over somehow haha (see Digital Ink post). Also, I wanted to try something out of the box (which went REALLY far out of the box later on) so I went with the AT-AT from Star Wars: The Empire Strikes Back.
To start my project I looked up some reference pictures so I could begin drawing out the AT-AT by hand. I decided to draw it out in separate parts (i.e. body, legs, feet) in order to have an easier time manipulating it in illustrator.
As soon as I finished drawing and inking the AT-AT I scanned it and brought it right into illustrator to begin my digital ink putting everything together, as most of you saw in my post preview.
Once I finished inking everything out I had to think about how I wanted to colour it. I was originally going to use cell shading but I instead used a gradient mesh. I decided to switch because I feel that everything looks so much nice when using a mesh. I used different shades of grey for the body and head, Red for various parts of the head, and a solid grey for the legs/feet.
Once I finished my basic structure I started on my actual walk cycle. This is where things got very complicated for me and very, very frustrating. What I wanted to do was have the AT-AT move like it did during the Hoth battle in The Empire Strikes Back. Which mean I needed each leg to have its own cycle (i.e. one leg up, forward, bend, down,).
I continued to alter each leg one by one until I had a completed walk cycle. My firstcycle consisted of 15 frames, as you can see below.
When I thought everything looked good I exported my illustrator file into SWF frames so I could start working on everything in flash.
When I brought the file into flash I discovered that something wasn’t right (look at all those frames…). It took me a while but I figured out that to bring it in properly my layers had to be grouped in illustrator.
Everything looked a lot better once I exported the grouped ai (adobe illustrator) file but still, LOOK AT ALL THE FRAMES. I had to fix the positioning on all of them; it took forever.
This is when everything started to go downhill. This is what the shockwave file looked like for this particular set of frames
Everything up to this took a lot of work, unfortunately it turned out looking choppy. I asked for help from a friend and he told me that everything would look better if I made each leg movement 10+ frames. So it was back to Illustrator.
Some people said I went a little crazy on this and they were probably right. I followed my friend’s advice and ended up making an insanely huge illustrator file.
So Illustrator stopped working……. I don’t want to flood this post with the profanity I spewed at this moment so I’ll leave you with this site that pretty much summed up the experience
LUCKILY. Backups, I’ll stress it again, save your work and make backups. If you don’t, well, book mark the site I linked above.
After I opened up my backup I began working again. I’m not showing exactly what I did because it was just the tedious process of me rotating the legs in different yet similar positions. Here is a screenshot of my finished illustrator file.
After THAT, I thought about what I wanted to happen in the background; as we had to include a moving parallax background (which we’ll get into later). Since my scene was going to take place on Hoth, I created a new illustrator file and created some assets to use.
I’ll come back to these assets later.
I wanted to get my attention back to the AT-AT because it was the main focus of my animation.
Like the previous animation I exported the ai file into SWF frames and opened it up in flash. The process for getting the walk cycle is pretty much the same as the last one so I wont get into it again.
Heh, really thought after all that work the walk cycle would look a little better. It didn’t. This is where I felt everything crashing down above my head, I spent weeks on, that. I was running out of time and ideas and tried fixing my walk cycle in various ways including different backgrounds and completely re-doing my illustrator file; more than once. It isn’t that important but below was my final attempt at fixing this walk cycle.
For this particular cycle I tried to make the ground stop when each leg hit the ground. I didn’t finish it completely because no matter what I tried the cycle still looked awful. So I did the only thing I could think of, start over.