Flash Animation Badge: Let’s Play Dress Up!

30 Apr
A simple dress up game was way more complicated than I anticipated

A simple dress up game was way more complicated than I anticipated

One thing that’s been on my personal bucket list for a while is to make a flash dress up game. I’m not entirely sure of the reason.  Maybe it’s because they are cute? Or I like customizing things? Regardless, I come across them a fair amount, and due to the sheer volume of them floating around online, I assumed they must be super quick and easy to make. WRONG.

The most time consuming part was making the actual artwork, which I had anticipated. I made the doll base and everything in the game in Adobe Illustrator. Having to save each object as an EPS, open it in Photoshop, save it as a PNG, them import it to Flash was downright obnoxious. I asked myself “Jeeze, someone should make like Photoshop actions for Windows 7 to do this crap for me. Hell I should do that. I would be rich.” Then I started mentally decorating my imaginary mansion…I digress.

I kept my game fairly simple: 3 different sets of ears, tails, faces, and outfit/accessory choices. I used Actionscript 2.0 (I tried 3.0, I promise, but I could not invest enough time to make it work). I made clothes/ears/tails drag-and-snap because I personally find trying to line things up by hand (or cursor?) to be a huge pain. Making them snap turned out to be much more simple than I expected.

For the actual process of building the game, I used a few different tutorials I found on DeviantArt. The first one I used was this one by KawaiiPandah, which provided a good basic overview, but has some holes in it (like providing code without too much description or explanation) if like me, you aren’t familiar with Adobe Flash. This tutorial by BonnieMcPop was much more clear, and probably the one I’d be most likely to recommend because it gives good explanations while being fairly concise. Lastly, I referenced Hapuriainen’s tutorial when I wanted a little more clarification. Hers is probably the most comprehensive, but was little bit of information overload for me.

So, by the time I was finished making all the objects, and coding them, I was just dead exhausted…hence the super plain background. To all the people who make super involved dress up games with elaborate backgrounds, music, tons of color choices, etc.: mad respect, bro.

You can play the dress up game here (where it’s the proper pretty size) or just get the file of the transmedia server here.


Mini-Site #3

10 Apr
Ask Varys, a parody of Ask Jeeves

Ask Varys, a parody of Ask Jeeves

For our third mini-site, I made a series of Game of Thrones themed pages which use the character Varys to convey how much of our personal information is being collected and stored by basic online activities.

While the main focus of the assignment was JavaScript, I can never neglect the artistic side of web design. I had a ton of fun making the Ask Varys logo (a parody of Ask Jeeves) and I congratulated myself for being so witty.

The actual JavaScript portion reminding me of scooping my cats’ litter box: I don’t really enjoy it, but if I don’t do it, this shit is going to make everything a lot messier than it needs to be. I had a general idea of what I wanted to do, and putting the actual code together was like a brain-teaser at times. I got really frustrated at times, not understanding if what I was trying to do was even possible. I would make a completely pared-down test with nothing but a small amount html and JS, eliminating a lot of code-clutter to prove to myself certain tasks were indeed possible. So why wasn’t my code working? I forgot a period. ONE DAMN PERIOD. Wasted like 20 minutes over a single little dot. Why does the Chrome debugger have to give errors that are like codes in themselves?? Why can’t it just say, “Hey, Stupid, you left out a period there. Fix that crap and go make me a sandwich.” That, I could handle.

Another road bump was the “intrusive” JS…I simply could not figure out what that means. I could not find a definition, examples, anything. Everything was like, “How to make your code un-obtrusive” …without ever clearly stating what intrusive/obtrusive JS is. So yeah, didn’t really know what to do there.

I was pretty proud of some stuff I was able to do with JS (probably elementary stuff but cut me some slack, hater). One the “Little Birds” page, I put a “warning” message from Varys that appears if the user did not select Joffrey as their desired ruler on the registration page (and why the hell would you? He’s an evil brat). The html is always there, but if the user selects Joffrey, the script changes the div to display:none to hide it.

All in all, I think I was pretty successful, and hopefully I’ll stop forgetting periods.


Responsive Web Design Badge

3 Apr
A desktop view of my artist portfolio site

A desktop view of my artist portfolio site

Responsive web design is without a doubt a huge trend right now, and something I figured would be a great skill to have. I proposed my own badge for responsive web design and it looks like it was a overall success.

For my responsive website, I made a generic online artist’s portfolio type site.

I really expected the coding process to be a struggle, but it really wasn’t nearly as horrible as I anticipated. Media queries were surprisingly simple, and using percentages and em as measurements rather than pixels just took some trial and error.

Continue reading

Javascript Mad Libs

2 Apr
My functional Mad Lib page.

My functional Mad Lib page.

Using  JavaScript to make the interactive Mad Libs was really simple, but rather tedious. I have a love/hate relationship with JavaScript in that I appreciate what it can do for me, but I find the coding process to be about as fun as a word search puzzle (Hint: I don’t like word search puzzles).

For me, JavaScript it easy to understand, but all the different variable and Id names are easy to get mixed up and make dumb mistakes with. It’s a necessary evil though, so it’s something I just have to deal with.

Scratch Game: Falling Stars

25 Mar
Catch the falling stars!

Catch the falling stars!

For my Scratch game, I made Falling Stars. The player controls a cloud with their mouse cursor and must catch the falling star sprites. The star sprites have a scared face as they fall, but once they are caught, they switch to a smile. Catching a star will earn the player 100 points. Failing to catch a star will result in their “chances” score being decreased by 1. The player is only allowed 3 failed catches before they receive the “Game Over” message. The stars fall at varying speeds and intervals.

I had wanted to make multiple stars fall at the same time, but unfortunately the clone command was only available in the browser version of Scratch 2.0 and creating multiple sprites was too chaotic.

I made the artwork for the game in Adobe Illustrator.

Missing 3 stars will result in Game Over

Missing 3 stars will result in Game Over

Wireframe Wizard Badge

21 Mar
Balsamiq makes hashing out plans both clean and fast

Balsamiq makes hashing out plans both clean and fast

After hearing the word “wireframe” come up several times in class, I figured it was something worth looking into. What surprised me was the simplicity of it. I’d already been doing this on my own, albeit in a less precise manner. I usually make some basic sketches of the basic layout I plan on making for a website before I mock it up in Photoshop, so all I really had to do was convert my messy sketches into cleaner products. I used Balsamiq to make my wireframes because it seemed the most straight forward (and I thought the style of it was just really cute too).

I made wireframes for my personal website, www.felice-regina.com, which I redesigned over the past couple weeks. I really liked using Balsamiq, and I plan on using it for the (real) planning process in the future.

Minimalist Badge

20 Mar
My minimalist Silence of the Lambs poster focuses on the Death's-head Hawkmoth.

My minimalist Silence of the Lambs poster focuses on the Death’s-head Hawkmoth.

While I generally prefer clean, simple designs, I would hesitate to say that I’m a minimalist. I am very cautious to make sure my work is never too busy, but I find I need a little more than just the bare bones. White space is one of the things I find difficult to accept, and usually prefer to add subtle textures to avoid it.

For my Silence of the Lambs movie poster, I made the decision to use only the Death’s-head Hawkmoth from the original design, and only half of it at that. I used a distressed paper background to soften the starkness that the white space left. While I normally would have preferred to use a handwritten font, I chose Avril for its straight lines and slightly rounded corners as to contrast with the delicate paper and the moth without looking too “sharp.” While the names of the leading actors worked best evenly distributed horizontally from the center, I kept the title right-aligned as to nest into the negative space left by the moth.

My desktop wallpaper offers some motivation.

My desktop wallpaper offers some motivation.

For the desktop wallpaper, I decided to make a simple motivational “badge.” I used to have a wallpaper that simply read, “Don’t be stupid. Do your work,” so it was inspired by that blunt form of motivation. While I could have just used text alone, I felt that the final product would be completely boring without something to make the message a little more interesting. I kept the background completely white, which adheres more to the minimalist design principals than the poster.

While I do enjoy minimalist design, I tend to find that it actually give me more trouble because of the level of precision and exactness…and I’m pretty OCD as it is. When I know that all the focus is going to be on just a few details, the pressure for perfection is hard to ignore.