CSS3 animations are fun. They run well, look really nice, and can be hardware accelerated on devices. While they can’t yet accomplish things totally on par with Flash (yet), they are still very functional and worth looking into.

Now before I start, here’s the working version of the page we’re workin on in this article.

So let’s say you have a lovely CSS3 animation, like below:

The above CSS code will make whatever you give the class of .moveLeftAnimation move to the right, at a constant speed (linear), during a time of 5 seconds. This will repeat forever.

Now, let’s say you’re tired of that moving thing, and you want it to stop. Not only do you want it to stop, but you want to stop it on the fly. That’s where JavaScript comes in.

Let’s make this nifty JS function:

Beautiful!

There’s only two states to a CSS3 animation: running, and paused. Easy peasy, right?

For the simple way of integrating it in the page, we can put some inline JavaScript on a link to toggle the animation, like so:

And there you have it.

Now for the whole thing:

Hot.

For a big touch screen like that, I thought surely it would function well as a tablet or a note taking tool, and it does. However, there’s only so much detail you can get using your finger on the iPad.

Thus, I purchased my Pogo Sketch. Am I’m very happy with it.

Pros:

• Light and solid feeling
• Nice aluminum design
• Clips onto pockets, etc.
• Has a hole on end of clip which could be useful for attaching a string, maybe to put around your neck for quick access to the pen.

Cons:

• Wide, non-precise tip.
  However, I later found out the reason for this is because of a somewhat large touch area on Apple products is required to prevent accidental input.
• Pocket clip seems a little flimsy, may break easily.
• A little pricey. (About $15)

After weighing the pros against the cons I’ve determined of the product, I hardly think the cons are anything major.

Writing with your finger can start to wear on you, not to mention your finger won’t always glide on the screen so easily and you’ll get that annoying “traction”. This stylus makes it feel almost as good as the old pen and paper, and even though it doesn’t seem like the wide tip can be very precise, it’s actually pretty easy to find the sweet spot.

For what it does, it does it all very nicely. I believe it’s the perfect companion to the iPad, especially when you want to take notes or draw anything with any bit of efficiency.

You can get your own Pogo Sketch right here from TenOneDesign. (Wow, look! An advertisement!)

Now for some photos. ;D

Sketchbook Pro with Pogo Stylus(ignore my terrible art skills)

Penultimate with Pogo Sketch(I'm gonna have to use this at work! I love how I can just email these after writing them.)

I mean, after all, isn’t it just a glorified iPhone?

It seemed like it did just what the pocket sized iPhone or iPod touch does. But with a bigger screen. And no camera.

However, as I began to investigate more, I realized- it’s a very different animal after all.

Where I believe the real potential of the iPad lies is in it’s apps, and how they utilize the lovely large sized iPad screen. As a web developer, I was instantly impressed when I saw the Gusto app, which is kind of like Coda or Dreamweaver, but slimmed down and put on the iPad for mobile development. After I bought my iPad, I greatly enjoyed bringing my new toy to a coffee shop with a friend and tinkering with my websites. No more lugging my laptop around to do the same simple work on the go.

Of course I have lots of other development apps I can ogle about, like Sketchbook Pro which let’s me draw out my ideas and zip it over to an artist by email or send to a client for approval or adobe ideas which has similar functionality. But instead I want to also touch on the entertainment factor of the iPad.

I. Love. The ABC and Netflix apps.

There’s few things I enjoy more than relaxing and watching movies and TV shows, and with these apps I can do that ANYWHERE with an Internet connection. I’ve already enjoyed watching things while lying in bed and sitting on the couch. Plus, with my Bluetooth headphones, there are no wires to fumble with. I only wish that other networks, like NBC and FOX would jump on the bandwagon.

My final point in my mediocre review is the portability factor of the device. The iPad is one of the few devices I can honestly consider highly portable. The battery life on this thing is crazy. I feel like I rarely need to charge it at all. Even watching movies, I get amazing battery life (10-12 hours on a single charge). This means when I take it somewhere, like a coffee shop, there’s no need to bring any cables or worry if there’s an outlet by my table or chair.

The thing also doesn’t seem to generate much heat at all, if any. I can’t say I enjoy when my laptop nearly sets my lap on fire, and my iPad stays cool no matter what I’m doing with it. Plus it’s very light and seemingly sturdy.

Overall, the iPad is exceeding my expectations and definitely meeting my needs. I can’t say it will be the same case for everyone, but for what I do everyday, this is the perfect in between machine.

And… I’ll probably regret saying this, but I don’t miss flash on my iPad.

So here it is.

So far, I’m very happy, it’s fast, I love the control panel, and the move was relatively easy. Looking forward to some great hosting.

 

07-11-08 Korea 07, originally uploaded by goodalefampics.

Wow, ever since the start of their 2D Side-Scrolling MMORPG (Massively Multiplayer Online Role Playing Game) MapleStory, developed by Wizet, I’ve been interested in this company from South Korea. They seem to just continuously pump out great websites, great games, and the obviously top of the line setups for conventions!

They have a North American division, and it started as NX Games and changed later to Nexon America. Their flagship product was MapleStory, and to my knowledge it is still their biggest and most popular game, at least in America.

Wouldn’t it be cool to work for this company?

Lately I’ve gotten into making simple illustrations for sites (like this one!).  I know that to most, my art isn’t amazing, but it works and it can be used to make a creative, cleanly designed website.

This is kind of a mini-tutorial, and isn’t terribly detailed, but shows the basics of how I make my humble art.

     1. Draw it on paper!

Here’s a little sample I sketched before:

This is the easiest part for me.  I am not that great of an artist, but it’s definitely easier to draw something on paper compared to trying to draw with a tablet or mouse.  Whatever you’re drawing, whether it be a logo or a potato, paper lets you be messy.  Go ahead, scribble or sketch, it’ll be refined later!

     2. Scan it or take a picture of it with a digital camera.

(Below is a Canon PowerShot SD1000; Just an example of a nice Digital Camera.)

 Instead of a digital camera, I use the iSight camera on my Apple iMac.  It’s conveniant (built in) and simple.  Just hold up the paper and snap a pic.  However, a camera or scanner will do just fine.

     3. Open up Illustrator and drag your scanned/captured image onto the canvas in a new layer.

A new layer should be used so you can adjust opacity and see what you’re going to draw over it more clearly.

     4. Pen Tool!

Using the pen tool, trace over the outlines of the things you drew on paper (make sure to keep your pen tool created lines in a new layer over the original drawing!).  Also try to connect/close your pen tool shapes so you can fill them with colors or patterns after you’re done tracing.

     5. Color it!

If you’ve closed/connected the shapes you drew with the pen tool, just fill everything with color you think would look good.  Adjust the order of your shapes in the layer if needed.  Be free and creative!

     6. Look at your finished product.

Does it look good? Is it how you like it?  If not, go back and fix or add some things.  Be creative with it.  Have fun.

And that’s it.  Yes, I know, this tutorial isn’t much better than the quality of my art, but I hope to help others learning to do Illustration like me. Good luck!  (By the way, I can probably attach pictures of using the pen tool and Illustrator, so let me know if that would be helpful to do.)

What We’re Making Today:
We’re going to be making a small script comprised of a class, called Pet, with variables and functions inside of it to perform actions. Also keep in mind that this is extremely simple and most likely cannot be used for anything outside of practice without heavy modification.

Let’s Begin, Shall We?

1. Create a new file. Let’s call it pet.php.
2. Open up the file and prepare for editing! (I use Dreamweaver for most code editing, but you can use plenty of other programs like the built in TextEdit (Mac) and NotePad (Windows).
3. Always remember to save it as a PHP file! Saving it accidentally as .txt or .rtf will make it not work at all.

Now for some code.

We’ve now started the file and recognized it’s a PHP document. Then we initiated the class “Pet”.

We’ve now created the variables name, age, fullness, and health for the class to use, and a public variable ‘dead’.

Now we have a public function (A function that can be used outside of just inside the class code) called SetName. By calling the function with a string parameter, you assign that string to the class variable $name. It also echoes some text telling you about the pet.

Since the variables we set earlier in the class (like $name) are not public, we can only access them through the inside code. So, using this simple function called GetName(), we can retrieve the contents of the $name variable for that object.

Every pet needs to be fed, right? Well, since I said this is simple, we are just picking a number between 5 and 10 to add to it’s Fullness total.

Alrighty, this is a fun one. We’re pretty much giving a little illustion that there’s time with our little pet. We’re decreasing it’s fullness by 10% plus 5 (so it can die eventually), decreasing it’s hunger by a random percentage between 10% and 25% plus 2 (same reason as fullness), and using the php function ceil to round the numbers up so they are whole numbers. We’re then increasing age by one count (a day perhaps?), making the text color gray, and echo’ing out what happened to the screen.

This function checks to see if the pet has died due to hunger and health failure. Once it’s fullness or health reach 0 or lower, the pet “goes to a better place”. Notice that it’s variable $dead is set true. This will be used for exiting the loop later on.

Close up our class and we’re ready for the main part: The Loop!

We’re going to be using a loop to simulate a created pet’s life. This loop will keep going as long as the pet is alive, and stop when it dies.

We’ve created our pet and set his name to “Fluffy The Sheep”.

The final part is the loop. Like I said before, the loop keeps going as long as the pet is alive. Once it is dead (determined by the Killed() function), it’s state changes and the loop exits.

And there you have it! Try running the program and see your little pet in action. Feel free to also customize the experience (name it!). I hope you were able to learn something new out of this. Happy coding!

(By the way, using these settings my pet lived to be around 12-14 age.)

Try it here.