Posting this here quick to show my final product; I’ll update the post with explanations later because it’s 2am and I really need sleep
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.
Hey, today I’m going to be analyzing an award winning website to get a better understanding of what exactly a good website needs/looks like. The website I chose to analyze is one featured on http://www.awwwards.com/ http://www.nerisson.fr/ is a website showcasing the work of Art Director and Graphic Designer Jimmy Raheriarisoa, the site has won numerous awards from various sites including the previously mentioned awwwards.com and http://www.thefwa.com (Favourite Website Awards).
From navigating through the site you can easily tell that the motivation style used for this site economic. This is because the site was made to show case and sell the services of Jimmy Raheriarisoa. In addition to the motivation style of the site, I have mixed feelings about what the communication style of the site is. On one hand, the style of it could be informative because the site is informing its viewers of who the site belongs to and what he is offering. However, on the other hand, the style of the site could be interpreted as an entertaining site. What I mean by this is that I think the communication style can be different depending on who is actually visiting the site; but I think that the designer/owner of the site intended it to be an informative site. An example of this site having an entertaining style would be me visiting the site not looking for Jimmy’s services, but instead looking to admire and be entertained by his work.
I can easily see why this site won a handful of “site of the day” awards. The site is very fun to navigate through, there are some issues I have with it but I’ll get to that later. The composition of the site really depends on what page you’re on. With that said it’s still pretty nice. For example, once you go to his site everything looks very organized right off the bat. The same can be said about his “contact” and “about” pages. Both of them have, in my opinion, a very solid composition. However, there is something about his “links” page that I find kind of strange. Maybe I just don’t like things that asymmetrical, like the three different sized characters on the page; I find them a tad bit distracting.
Speaking of his characters, I need to take a minute and say how much I love how Jimmy’s website looks. I really like how he used his work (at least I think it’s his work) to stylize his pages. I think it does a good job of showing off his style and what he can accomplish.
Another thing I like about this website is his use of hierarchy. There’s not a lot to say about this other than the fact that I feel that the site does a good job directing your eyes to what’s most important on the site, that being his work. His navigation menu at the top is still there and very noticeable and there is still the extra stuff at the bottom, but I really like how what really stands out on the site is his work.
The Interactivity of http://www.nerisson.fr/ is great as well. Visitors can interact with a lot of different buttons on the site, including one’s most people wouldn’t even think to click on.
One of the last things I would like to comment on is the colour and contrast of the site. I really like how simplistic he kept his colour palette very sleek and simple. Using mostly black, white and grey while still having some bits of colour. I feel the darker colours also make the site a lot easier to look at for a long time.
One thing that I think should be changed on the site is the navigation. I feel that some buttons on the site blend way too well into the background of the site and may be a little bit hard to notice sometimes. Thankfully there aren’t too many of easily missed buttons on the site.
In conclusion, I can see why this site won awards. It is very well designed both in structure, style, colour, and every other element I mentioned; and It makes me determined to make my site at least have as cool as this one. Thanks for reading!