Olliekoalas.com was a really fun and intense project. It was more of a promotional site then, as nobody KNEW what Ollie Koalas was in Jacksonville, and it had to be extremely enticing to kids.

This site was almost completely in flash, but still extremely lightweight and fast loading. Everything that could have been redrawn as a vector, was redrawn as a vector, art assets and fonts were shared so they only had to be loaded one, photographic images were all being pre-loaded during the appropriate lulls….a LOT went into this site.

However, if I was to do this site today, I would definitely make it more of a hybrid site. The SEO wasn’t great for Olliekoalas.com, and the updates were a beast. Flash deeplinking would be great, not just to re-enable the back and forward buttons on the browser, but also to create landing pages. An XML driven nav, and all XML driven content would also have helped in upkeep.

Overall, I’m still really happy with the site. It accomplished the goal of creating an experience that kids welcomed (and offered financial incentives for those kids to push their parents to go to Ollie Koalas), and completely killed anything Chuck E. Cheese had up at the time.

This really make me want to redo my current site into something more animation friendly…hhhhmmmmmm…

Flash AS3 Contact Form and Text Event Listeners

For those of you new to Flash who just want to knock out an AS3 contact form…here you go!

Once you download the file, you’ll notice you can use either 1) normal text fields or 2) UI components from the components panel.

There’s also ton of additional methods, properties, and event handlers commented within the file.

Lastly the code you’ll need for the php file, is commented within the file itself. Use that code to create a file called “mail.php” and 1) remember to enter in the email address you want the form to go to and 2)  remember where you upload it!

If you have any questions, hit me up in the comments below. Otherwise, download and enjoy!

http://bit.ly/flash-as3-contact-form

You want to make a button in flash using AS3? It’s easy!

1)MAKE SURE you’re movie clip has an instance name!

Also, please please please make sure you’re dealing with an actual “movie clip” and not a “button”.

The next step is to go to the Actionscript layer (you should have a layer label “actionscipt”, “as”, or something of that nature to hold all of your actionscript) and insert the following code:

instanceNameOfMovie_mc.addEventListener(MouseEvent.CLICK, nameOfFunction);

function nameOfFunction onClick(event:MouseEvent):void

{

trace(“You just made an event handler to handle mouse click events!”);

}

And you’re done! You’ve made a movieclip that acts like a button with event handlers!

Now, some of you may ask, “Why not just use a button?”. The reason, the gives you more flexibility, and this is your first step in learning how to control event handlers. There may be times when using a button may be more appropriate, but for now, this is the way to go.

You can see a list of what other “Events” can be paired with the “MouseEvent” listener here. Experiment!

A lot of you were looking at me with a weird face when I said that you were going to learn variables in Flash. So here’s a more indepth explanation.

A variable is a symbol, or container, for another set of data. For instance, we can say the variable “myName” = Ryan Paul Thompson.

Do you remember when we started doing math in school? Once we got to Algebra, we started using variables. We would get problems such as “1 + b = 3″, and then we would be tasked with figuring out what “b” truly was (2 in this case).

Now in Actionscript 3, creating variables is a little bit different from in actionscript 2. We used to be able to get away with simply typing myname = “Simon Belmont”;

Not anymore. In actionscript 3we are REQUIRED to use the var keyword first.
Translation: Use var to tell flash, HEY!, I’m creating a variable!
example: var myVariable;
this creates a variable named “myVariable”

Next to note, is that you also have to define what KIND of variable this is, what is it’s data type. You can define a data type as a String, is it going to be Number, a boolean, etc.,etc.
Translation: You have to tell Flash what kind of data, the variable is representin.

example: var myWord:String = “Words flash will then remember, in the EXACT same way that you type them”;
This creates a variable named “myWord”, and flash understands that “myWord” is a “String” with a value of “Words flash will then remember, in the EXACT same way that you type them”

example: var myNumericalValue:Number = 7;
This creates a variable named “myNumericalValue” that has a value of 7. Notice that 7 did NOT have quotation marks around it.
The second you put quotation marks around 7, flash understands it as a String, as a word, and can’t use it to count.

What good are variables? Let’s say you’re filling out an form…there is a variable that holds your email address, and pushes that data to a database so you’re client can receive that information. When you receive emails that say “Hello, Mike”, it’s pulling your information from a database full of variables. When you play Modern Warfare 2, and youg et a headshot, there are variables holding how many points that it was worth, and then adds your points up to level you up. The uses for variables are endless, and will become more apparent the farther along we go.

So that’s variables in a quick down and dirty nutshell.In the next lesson we’ll go over the trace command, and you can start putting those variables to use.

Ok kids gather round. This weeks flash/actionscript homework is a simple banner ad.
I want each of you to create a banner ad in flash for one of the following Television shows.

Arrested Development
Chapelle Show
WWE Raw
Oprah
Captain Planet

Here are the specs

300px height x 250px width
“Background” color MUST change from #FFFFFF to #333333 at some point in the movie.
Have at least one movieclip, where the insance name ends in “_mc”
Have one movieclip that is off the stage, that is placed on the stage by actionscript when the movie actually runs
At Least one object must be tweened. This does not have to be in terms of location (moving across the screen). You can tween alpha, brightness, tint, etc. (look at your properties panel after you create your movie clip and click it).
FPS must be 30
No more than 25 seconds.
File Size can NOT exceed 80k. (figure it out)

There can be pictures, or there can be words, all of that is up to you. This banner does NOT need a button, but if you feel up to the challenge, make a button that will send people to a site about the show you choose for brownie points.

And if you have any questions, drop them in the comments below, or email me.Good luck!

Happinated was one of the biggest illustrative and animation based flash projects I had taken on in quite some time.And the project itself wouldn’t have been that big of a deal if it wasn’t for a factors. ONE. The timeline for this project was cut DRAMATICALLY shorter than originally scoped. TWO. I had never drawn nor animated in an isometric inspired style.

Something else that ended up taking a little bit more time than expected was the actual character design. We had originally had something a little different in mind in terms of style, but then we realized that once the graphics were shrunken down to a size that would allow the user to actually 1)navigate the game and 2)navigate the site itself, we realized that design cuts were going to have to be made.

If you look at the sketches below, you can see how we went back to emphasize certain characteristics of the character, particularly in the face. The face was going to display several different “statuses” that the gamer was in (“Happinated”, “ok”, and “sad”).For the user to be able to quickly glance and recognize this, we went back and enlarged the Head to a much more disproportionate relation to the body.

What also had to be considered was how this style was going to translate into other characters, and this had to be a “future-proofed” style, in the event that this could get expanded to the point where others could make their own custom character and implant them into the game.

We also needed an art style where we could quickly illustrate people that we found on Twitter, and offer illustrations of them as incentives for them to participate with us online.

As for the process itself, there was actually very little sketching done on paper with pencil. I would have loved to have created a fully hand drawn look and animation, and then retraced it into illustrator and animate it with Flash, but the timeline, budget, and possible future uses of the artwork prohibited that.

It’s surprising just how much you can do when you’re forced to.

Happinated.com Project