Animation and Objective C

I’ve been playing around with some more advanced animation tools but wanted to go over the basics of how to animate objects.

First and foremost, you have to stop thinking about animation as a traditionally called function in that there are no {} or () notating where the animation starts. It’s simplified to the point where I wasn’t sure I was doing it right until I built my code and it worked!

Essentially you need to tell your code you’re about to animate with “[UIView beginAnimations:nil context:nil];”. You should also set up time parameters and how you want the animation to happen. Then, you simply say where you want your object to animate to (in my case a UIImageView containing a tennis ball). You can animate alpha, position, size, and – getting more advanced – you can animate openGL objects in 3D planes. After all this is done you tell your code to animate with “[UIView commitAnimations];”.

Here’s the basic code that I’m firing every time the user clicks a button that I’ve assigned this action to:

-(IBAction)moveBall:(id)sender{
if(ballUp){
NSLog(@”ball is up”);
//animate the ball down

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];

CGRect offScreenFrame = theBall.frame;
offScreenFrame.origin.y = 20;
theBall.frame = offScreenFrame;

[UIView commitAnimations];

ballUp = NO;
}else{
NSLog(@”ball is down”);
//animate the ball up

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];

CGRect offScreenFrame = theBall.frame;
offScreenFrame.origin.y = 680;
theBall.frame = offScreenFrame;

[UIView commitAnimations];

ballUp = YES;
}
}

 

If you’re having trouble watching the video, click here!

 

Download the zip file with all the code here.

 

 

Questions, comments, etc… Let me know!

 

Flash SDK and Android Awesomeness

To follow suit with my previous post I’ve now managed to put Flash Action Script 3 on the Android!!!

Comparing the Android experience to the iPhone:

  • The Android device and emulator are much – MUCH – slower than the iPhone when running AS3
  • If you’re using a Mac or PC, in order to get AS3 on an Android device you actually have to use terminal or command prompt; last I checked I’m not programming with Angelina Jolie, this isn’t 1995, and (if you haven’t caught the reference yet) this isn’t the movie “Hackers
  • Permissions are MUCH easier on the Android!!!! No provisioning portal, no UDID, nothing. Just make a BS certificate.p12 file and BAM! you’re on the Android
  • On Android you actually have to load flash onto the device…. AS3 on iPhone simply compiles to a format similar to the native iPhone language (Objective-C)

So… It’s not actually that awesome. In fact, from what I’ve seen, Actions Script 3 on an android device runs only slightly faster than I’m sure it would on a PC from 10 years ago.

But alas, here is the wicked awesome app I built for it anyway!…. Presenting: Comic!

Comic accesses the accelerometer in the Android device to see when you try to punch someone (or something). It then creates a cool Batman-style onomatopoeia that makes your fist more animated. As seen below: KAPLOW!!!!

There were many trials and tribulations to getting this App on the Android device: compatibility with older version, emulator problems, accelerometer access, to name a few.

If you’re planning to build your own Flash SDK for Android app check out these blogs and videos I found extremely useful! (Keep in mind, these are generally for Mac computers)

Here are links to the files I downloaded to make it all work:

A few things to note: install every option – just to be safe. In Flash, set your app to emulator (even if it’s going on a device) and always point to the emulator Runtime.apk. When using the Android emulator make sure it’s 2.2, NOT 2.3; this simply wont work. Any other issues? Comment bellow. Otherwise good luck!!!

** Good advice: just create the app in java – it’s Android native, will run quicker, and most likely is easier to install and test. :)

Cheers!

Flash Packager on the iPhone

It’s slow, it’s Beta, but it’s still pretty cool.

 

A bit of a background on the flash iPhone packager. Flash can now compile so it can be used on the iPhone. There are A LOT of issues to do with processing and RAM and… Well, a lot. Basic apps work extremely well! Angry Birds made in flash would likely crash before the loading screen finished.

At Sheridan we have a class wide provisioning portal on the Apple Dev Center (http://developer.apple.com/). We’ve put our own apple device UDID (device specific ID) on the portal so we can test on an actual Apple Device. Cool! So now I’ve created my first flash packager iPhone app that goes on my iPhone 4!!! (not to be confused with my marble game which I was able to load onto an actual Apple Developers phone, thanks Justin – Justin’s website here and his blog here)

 

I always find myself sitting around, iPhone in hand, simply spinning it around with my thumb and forefinger. When I’m bored I probably do this as often as Angry Birds. So why not create a game out of it??

INTRODUCING…………. SPINNY!!!

 

Spinny! iPhone App Beta

Spinny is quite simple. Grab your phone, press down on the bottom button, spin your phone, and press the other button. Woooo!!! You have to hold your finger on the button the whole time or you get an “OUCH!” and have to redo your last spin.

I love this concept because it brings you outside of the device while you place. It externalizes the game, bringing it into the physical world. Other inspiration for this app came from my prof at Sheridan, Dan Zen. His iPhone app Touchy externalizes the game and gets people involved in a game of techno-keep-away.

Apps which bring users out to the real world are becoming more and more popular. Being able to use your device in physical space and with other devices – in my opinion – is the next wave of app. With theories of NFC (Near Field Communication) technology coming to the iPhone 5/iPad2 (blog example here), we could experience some really cool changes in app development!! Exciting times indeed.

 

I’m hoping to have a more creative/involved application of Spinny in the near future. Any thoughts on how it might be played? Let me know!!

 

Cheers!

Multi-User Robyn VS Robin!!!

So once again I’ve been challenged to work with some new and innovative technology in flash.

I should start with the back story; about 20 years ago – immediately after the internet was first invented – Dan Zen created Robin: a multi-user application in flash; some say the first of its kind. It’s a pretty simple program to use and is downloadable at this link.

How it works is explained fairly simply on the Robin website. The .html file used on each computer is almost entirely self-sufficient; taking mutual co-ordinates and placing them in arrays which can be accessed on each computer using the same .html file. Having access to these different variables gives the user the ability to exchange almost any piece of information.

So how I came up with the idea for my game… one of the students in our class is named Robyn. She’s been having a rough time with everyone calling out her name during class and thought it would be cool to create a game in which she fights Robin (the program)…

And here it is!!

Robyn Vs Robin

Take out all your hatred for Robin if you share a similar name with it!!!

Robyn Hitting Robin!!!

Or, if you’ve gone your whole life sharing a common name with someone else, imagine that it’s you VS that person!!! Hours of fun rolled into one game!

Robin Hitting Robyn!!!

The score works based on your speed relative to the other users speed. If your icon is moving faster than theirs when you hit them, you get the points AND it flashes a Batman style sound like Pow! or Bam!! Amazing!

Some cool flash games that have used or continue to use multi-user code in flash are Dinky Bomb in which users try to kill one-another in a cartoon turn based aim-and-shoot.

Dinky Bomb Original was an online multiplayer Flash game, built for the converged service Gamer.tv many years ago. It was one of the first real-time multiuser experiences on the web in Flash technology (originally Flash 5, connecting to a Java socket server backend with Flash’s then new XMLSocket capability)”

One multi-user game which stands out from the rest (but isn’t flash based) is Call of Duty (COD). One of the most popular multiplayer games on any platform, COD stands out from the rest. It can hold thousands of users at a time and only crashes once every – oh – every thirty seconds.

COD Black Ops

I’ve just started working on another multi-user game that will hopefully be able to work on two iPhones/iPads/iPod Touch’s when it’s finished. It’s still in the works but I’m pretty sure I’ll be calling it “TIP-OFF!”. Just a teaser until I have something more concrete to show!

Cheers!

Dieter Rams is Design

 

Simply looking for design inspiration for a new game I’m thinking of creating…. Dieter Rams to the rescue!

Tilt Technology Ported onto the iPhone from Flash = MARBLES

So I’ve been working on a mobile-based game which uses tilt to determine the roll of a marble. The marble rolls around a grid and collects glowing orbs which increase the marbles size.  Several cool features which make up this game: it’s written in flash AS3 yet can be ported onto the iPhone (sweet!), I used a mask overlay to create the look of a 3-dimensional ball without actually needing to work in 3D, and it’s the first time I’ve used multidimensional arrays with hit-tests in flash.

The tutorial I used for porting a rolling ball onto the screen is at Republic of Code – http://www.republicofcode.com/tutorials/flash/as3accelerometer/

The tutorial I used for making that ball into a move-able mask is at Atomic Robot Design: http://atomicrobotdesign.com/blog/uncategorized/creating-a-movable-mask-in-actionscript-3/

Here’s the intro screen to the game:

Marble Game Image 1

You roll the ball into the black hole to start a new level

 

A quick screen shot of the marble surrounded by white orbs.

Marble Game Image 4

The Game In Action

 

The Game Over screen shows your score and eventually re-loads the intro screen.

Marble Game Image 3

Game Over Screen

 

So that’s the game so far! I’m hoping to add more levels, save files, physics, and gravity as soon as I can find time!

 

 

More games and Flash and cool tech to come!

Cheers!

Procrastination is Me

 

Life has become a little hectic and posting online is getting pushed to the wayside; maybe I should stop telling people I’m going to blog and just do it!

Self Teaching – The New Wave of Education?

“Indian education scientist Sugata Mitra tackles one of the greatest problems of education — the best teachers and schools don’t exist where they’re needed most. In a series of real-life experiments from New Delhi to South Africa to Italy, he gave kids self-supervised access to the web and saw results that could revolutionize how we think about teaching.”

 

A seriously cool idea that brings to question why Canada’s early education system still is the way it is. Smartboard’s are the new wave but we really need to immerse our students to ensure they don’t get left behind. Numbers of students with reading levels 4 or 5 grades under where they should be and an inability to multiply and divide by middle school are steadily increasing while children in countries without education systems are teaching themselves how to speak English and add.

Wouldn’t it be amazing if we could gear our advancing technology toward a system where children don’t need to be in school to learn, where technology brings them knowledge of the world.

 

Just a thought.

Life is a Game

Firstly, I swore I wouldn’t do this…. But it’s been TWO WEEKS since my last (and first) post. I’m new at blogging and I guess It’ll take a bit to ween its way into my everyday life.

So…

I’ve decided that – at the very least – I’ll post once a week on a subject I love – education through games.

Those who know me and have heard me talk about design know that I love technology which assists people subconsciously or unknowingly to learn or better their lives. My thesis, “Vision”, is real life guitar hero. I created it two years ago in an attempt to build a system of student-product interaction which makes the student WANT to learn more. The student learns by playing a game on their computer with a Bluetooth connected guitar (details after the jump).

Learning through gaming. Vision

Like Vision on Facebook!

 

Reasons why I like love education through gaming:

  • My family is full of teachers; my dad, sister, and older brother. I have a family full of inspiration.
  • Learning the traditional way is BORING
  • Children are coming to class with the attitude of “try and teach me, just try“. Then they go home and play hours upon hours of interactive, personalized, and most importantly fun video games. Why not bridge the gap??
  • Learning CAN be fun!!! I swear
  • “Status is the best motivator”, as Seth Priebatsch – the creator of SCVNGR – says in his TED Talks video about the game layer on top of the world. Children compete and challenge each other to do better. Why not utilize this in education (in a friendlier way than rubbing grades in each others face)
  • The marriage of games and education is nearly boundless. No idea works for every field of study, everything has a solution, and each one can lead to astounding results.

Closing thoughts:

Really think about what you’re gaining the next time you play Call of Duty, Farmville, Angry Birds, etc. Yes, hand-eye coordination is a useful life skill, and studies have shown that people who play Call of Duty are able to make more split second decisions more quickly than people who don’t. But what if the game you were playing taught you how to be a concert pianist, a calculus wiz, or a fitness guru. The field of gaming is slowly changing and given time will become the go to source for educating our young and will erase the old boring methods of textbooks and memorization.

 

Tell me your thoughts!

Webcams – not just for Skype anymore!

This is my second blog ever…  My first was created under 12 hours ago in a haze and has since been abandoned.

So…

I’m taking Interactive Multimedia at Sheridan College. It’s a post-grad certificate program and so far it’s been pretty amazing.

Our prof – Dan Zen – is absolutely crazy. He really is a mad scientist. He created this program in flash called OSTRICH which actually allows you to create cursors and anamorphic blobs which follow your movement via webcam in just a few lines of code. Dan’s work is viewable and download-able from http://ostrichflash.wordpress.com/ it’s open source and really cool once you get the hang of it!

What OSTRICH allows you to do is create interactive webcam related games. I’ve seen a lot of “webcam games” that simply take the image from your webcam and stick it in a picture frame, a TV, on top of a tank that runs over people (http://www.newgrounds.com/portal/view/431668); so what? I can put googly eyes on myself. Who cares??? I have that on my mac… It’s called Photo Booth.

What’s cool about OSTRICH is it sees movement and tracks it. By comparing each webcam frame against the last and figuring out the difference OSTRICH actually tracks your movement! Pretty cool, right?

So, Dan gave our class an assignment: create something – ANYTHING – that uses the OSTRICH technology. The more you adopt the code the better.

So what did I create?

What every bartender/college student would… A drinking game!

I used two cursors with separate bounding boxes for Player1 and Player2. You use your motion to navigate your bottle into your mug. The first player to fill their mug 5 times wins! What do you win?… Well, um, pride?  Maybe the loser has to chug his beer while the winner gets to bask in sober glory!

Let me tell you, creating this program was not easy. Not being entirely sure how the game would be played mixed with not being certain on how Flash actually works combined to make quite a few frustrated nights in front of the laptop. But, after many coffee’s, writing and re-writing lines of code, I finally came out with a game that I’m proud of.

It may not be perfect but hell, 4 weeks ago I would have looked at Action Script 3 code and said “what the f#$% are those seagull shaped brackets, people actually use them?!”

So if you’re curious you can try to play my drinking game at…

While you’re at it check out the rest of my site! More games to come!!!

http://www.tysonlesliedesign.com/drinking_game.htm

More games and Flash and cool tech to come!
Tyson

Follow

Get every new post delivered to your Inbox.