Cyclonic Studios

The Dropped Beat

Cyclonic — Thu, 06 Oct 2011 22:13:53 +0000

A school friend of mine keeps a music blog where he shares music he finds, reviews concerts and music festivals, and links to his photos. Until October of 2011, he was using a default wordpress theme that didn’t do the content justice. It was clean but bland. I revamped the look of the site by adding a more interesting header and also changing the fonts and color scheme. The changed improved the overall look and feel of the site. I also added support for a post-image feature, which allow my friend to easily attach an image to each post he makes, primarily album covers and photos he takes.

Visit www.thedroppedbeat.com.

Bubblize

Cyclonic — Tue, 06 Sep 2011 21:42:18 +0000

Over the summer of 2011, I produced another commercial flash game, Bubblize. It’s essentially a mouse-avoider combined with a fragile bubble, spikes, nondescript blue boxes, powerups, and coins. Lots of coins. It had a more organized and vibrant color scheme than my previous games, and the graphics, which were done with a “blitting” engine that I made (which essentially draws each frame to a bitmap image that can be manipulated), allowed me to experiment with some effects like an animated background, bubbles that float around, and the powerup trail effect, which would have been difficult with Flash’s typical vector rendering engine.

Play Bubblize at www.arcadetown.com.

The MIT Lab for Bioinformatics and Metabolic Engineering

Cyclonic — Sun, 19 Jun 2011 18:41:12 +0000

The Bioinformatics and Metabolic Engineering Lab (BAMEL) at MIT had an outdated website – both in look and in functionality. They wanted to be able to easily edit their pages, add news posts, add “highlights,” and search the site. On the design side, they wanted to maintain the original red and tan and some original graphics, but also clean up the look. I added drop-downs for easy access to the lab’s members, research, courses, and conferences.

You can see BAMEL’s site at BAMEL.scripts.MIT.edu/GNS.

Midwest Ag Ventures

Cyclonic — Mon, 18 Apr 2011 14:12:38 +0000

Midwest Ag Ventures (MAV) is the US extension of a South American agribusiness company. Their goal in making a website was primarily to attract potential investors. I designed the site to look modern while also using a color scheme that suggests the production of corn and soybeans. MAV wanted the site to capture their vision of efficiency and innovation that will carry their 100 years of farming experience in the south into the 21st century. In order to accomplish this, I used a subtle yet sharp header design and an image of maize growing under a blue sky.

The site is located at MidwestAgVentures.com.

Cyclonic Studios Revamp

Cyclonic — Sun, 28 Nov 2010 18:14:58 +0000

My initial Cyclonic Studios website lacked character. It was a simple WordPress theme with lots of gradients, white on black text, and messy content; common pitfalls of aspiring web designers. I’ve been working on redesigning the site for a while, and I’ve finally settled on a clean design, with a nice layout, much improved typography, and an organized color scheme. The site, mainly intended to attract potential clients, suits its need by simply presenting my portfolio, an about me page, and a contact page. Feel free to explore, and contact me if you see any problems (it is a new release, after all).

Incoming

Cyclonic — Fri, 20 Aug 2010 15:06:02 +0000

My second commercial flash game, Incoming, was an arcade-style defense game. Waves of nondescript, spinning enemies circle towards your base as you build and upgrade defenders (similarly nondescript and spinning) to take them out. Featured a shop full of base upgrades and an achievement system. Unlike Wires, which was programmed using Flash’s old-fashioned frame actionscript, Incoming was programmed entirely with object-oriented programming (OOP), which is much better practice, if not more efficient.
I sold the game prematurely to FlashGamesNexus.com, before I could iron out all of the bugs and balance the difficulty. Because of that, it’s hard. If you don’t get squashed by wave 4′s boss, you will be absolutely overrun by wave 5′s attackers (challenge offered: I’ve survived past there a few times myself).

You can play Incoming at FlashGamesNexus.com.

PIN, Inc.

Cyclonic — Mon, 28 Sep 2009 17:39:47 +0000

My first freelance, albeit volunteer, web project was remaking a website for the Parents’ Independent School Network (PIN), which is a board of New England independent school parents. This volunteer organization required a website with multiple logins, in order to let different parents access different content. In order to go about doing this, I had to use WordPress’s built-in user support with some modifications to only show certain pages to certain users. This was my first real experience creating a theme with function for WordPress.

You can see the site at PIN-Inc.org.

Targeting Browsers (Namely the Different Versions of IE) with Only CSS

Cyclonic — Sun, 30 Aug 2009 19:07:28 +0000

Internet Explorer 6 has been in use for a whopping eight years, during which time the internet has grown both in size and in usability. So here we are, with 25% of people still using IE6 which hardly even begins to support modern CSS techniques.

For a long time, designers have found different ways to target IE6 and its slightly improved (but still seriously lacking) predecessor, IE7, and feed them different CSS to fix any bugs that the browsers have with normal, up-to-date styling. A popular trick is to use IE’s conditional comments to give IE6 and/or IE7 a different stylesheet. This works fine, except that it means that you need to make two stylesheets for your designs. There is a way that is less widely known that exploits the star-html hack combined with CSS 2.1 selectors to differentiate between IE6 and IE7. It looks like this:


element {
/* Standards-Compliant Properties Here
}

* html element {
/* IE6 Properties Here
}

*+html element {
/* IE7 Properties Here
}

Basically, IE6 and IE7 both think that there is an element above the html element, which is nonexistent in other browsers. So the * html selector is used to target IE6 and 7. To single out IE7, a CSS 2.1 selector (*+html) which is unsupported by IE6 can be used.

The CSS-only technique is a lot less of a pain than using a separate ie6.css file for all of your hacks. Anyway, that’s just a helpful hint I just figured out.

Web Design From Scratch’s Anti-Spam Method

Cyclonic — Mon, 27 Jul 2009 04:30:03 +0000

I just wrote a post about how to make sure that someone using your contact form is human, which utilized a validation image. While this is effective, it requires the user to spend an annoying 10 seconds deciphering the text and typing it in. Web Design From Scratch has a very clever solution.

The trick is to use javascript to make sure that the user is interacting with the form, by waiting for the user to focus or click on the form itself. Once it sees that the form has been interacted with in a human-like way, it sets a flag in a hidden input field. If the person browsing is not using javascript, then a