Clever Code: (Relatively) Simple Throw Scrolling (ActionScript 3.0)

Finally… “episode 2” of my Clever Code series thing!

This time I’m going to be building on what I did in my first “Clever Code” post, and adding a few things to turn “pretend tweens” into a really nice looking “throw scrolling” effect. If you haven’t seen my first Clever Code, you might want to check it out first, over here: https://benbateson.wordpress.com/2013/04/19/clever-code-1/

This is the code I came up with for my app for the Capitol Centre, in North Bay, Ontario, so I will be using the source code of this app as an example, and I will explain everything so it hopefully makes lots of sense. The concept here is quite simple: I’m using the same code from my “pretend tweens” article to keep things sliding when you lift your finger, by simply passing it a new position determined by how fast your finger was moving when it lifted. While your finger is down, this “pretend tweening” is disabled, so you can push the content wherever you like. So, let’s get to the code…

First off, here are all the variables I’m going to be using:

“posNewPerformanceContainer” is the variable I used last time to assign a new position to a movieclip. To start, we don’t want the movie clip to go anywhere, so I’ve defined the variable as the current position of the movie clip.

“scrollTop” and “scrollBottom” are the limits that keep things from scrolling right off the screen forever. When defined, they are the same, but when my app runs I have a for loop that populates “mcNewPerformaceContainer” with a list of upcoming performances, and after the loop has run, there’s a line that looks like this:

“newNum” is incremented each time the for loop runs, so by the end it is the total number of items added to the container. 160 happens to be the center position, and 320 is the height of the movieclips the loop is adding to the container.

“momentum” will be a record of how fast your finger was moving, defined by “lastPos” and “mcNewPerformanceContainer.y”

Now for the fun part; some functions!

First off, there’s a loop function called on enter frame:

In this case I have a lot of random stuff in my loop function, but this is the relevant part:

This is the same thing I showed y’all last time, so I won’t go into detail here, I’ll just move right along!

Here’s how we start scrolling. First we have to remove the “ENTER_FRAME” listener and stop the loop function (otherwise it keeps trying to go back to where it was) and replace it with an almost identical listener that calls the “trackMomentum” function. Then we just use the “startDrag” function to let users drag the content up or down. It is very important here that the “false” is there between the brackets after “startDrag,” because we do NOT want the container’s registration point jumping to the user’s finger.

So what’s this “trackMomentum” function?

This function just keeps track of how fast your finger is moving by comparing where “mcNewPerformanceContainer” is on the current frame to where it was on the last frame. When I define the “momentum” variable, I multiply it by 5, since otherwise it’s a really small number and you won’t get much “glide” when you lift your finger. You can play with this number, depending how much glide you want.

One other thing I had to add here is line 273, since this line needs to be running all the time (assuming you don’t want your scrollable stuff to go sideways) and I just disabled the loop function where it was previously running.

Now we need to be able to stop scrolling.

The first thing to do here is to swap event listeners back, to reverse what we did in the “startScrolling” function. Of course we’re going to use “stopDrag()” as well to stop dragging the content container. The cool part happens at line 278, where we assign a new position to the container, which is the current position, plus the momentum. This makes it keep sliding when you lift your finger. That’s where the magic happens. The if statements here just make sure we don’t lose the content off the top or bottom of the screen, and it just so happens, that when we assign “scrollBottom” or “scrollTop” as the new position if the user dragged the content past the boundary, my old “tweening” code makes it slide back nice and smooth.

One more thing I almost forgot, we need these 2 event listeners, of course.

And that’s pretty much it! Have some fun with it, and If you have any trouble getting it to work, or just think it’s really cool, leave me a comment!

Clever Code: Pretend Tweens (ActionScript 3.0)

I’m thinking I might make this a regular thing, where I post interesting little code tricks I discover; kind of like a geeky little newspaper column. If it’s popular, and I keep finding clever things that I think are worth sharing, I’ll keep it up. It’s not quite going to be tutorials, that’s too much work for when I’m not getting paid, but I’ll post some code and explain how it works, and hopefully you’ll be able to understand it and make good use of it.

In the first “episode” I’ll be explaining how I did something that looks like tweens, but really isn’t. This method can’t do everything real tweens can, but it’s simple, easy to code, so far very bug-free, and still pretty versatile. You can use this code to move objects around the stage, or on and off the stage, and have them slide gracefully into position. You could also use it to spin and scale things, or make them fade in and out… basically any property that can be modified through code could be made smooth and sexy with this technique, but I’m gonna keep it simple for now.

Unfortunately I can’t post a .swf file on WordPress, or I would have a working movie here so you can see it in action. Oh well…

To start, you’ll just need one variable, and an event listener:

The variable should be named after the movie clip you’re going to be moving, just to avoid confusion. The name I’ve given it here is arbitrary. Then there’s the loop function:

And believe it or not, that’s just about it. How it works is the variable posPretendTweenY keeps track of where movie clip is supposed to be, and if it is not where it’s supposed to be, it moves it a little closer. Of course running on every frame, and moving it a little closer on every frame, makes for a nice smooth animated transition. The “+ 1” and “- 1” and the end of each condition are just there to keep it from updating in infinitely smaller increments once it get’s very close to the desired position. If your object is less than one pixel away, the if statement says “close enough” and stops moving it, to save battery life and computing power for something more important.

The line inside the braces of the if statement is very similar to the formula to find the average of two values (a+b/2) but since that would get us there in about 5 frames, I wanted to slow it down a little. Instead I’m finding the average of 10 values, 9 of which are the current location, and only one of which is the new location. It is effectively like doing this: (a+a+a+a+a+a+a+a+a+b/10). This would obviously give us an “average” much closer to a, except instead of writing out “a” 9 times, we just multiply it by 9, add b and divide by 10. The end result being that the motions comes out slower and smoother, and you can adjust the speed by changing the values that I have at 9 and 10 to whatever you like.

Then there’s just a little more you have to do to get it functional. Add a button that calls a function that simply changes the value of posPretendTweenY and when the button is pressed, you movie clip will slide smoothly instead of just “popping” over.

A function like this, for example, will make the movie clip slide off the top of the screen. You could them make another function that’s the same, only set the value positive, and it’ll slide right back.

So have some fun with it, and if you do something really cool, or if it doesn’t work, tell me all about it!

In the next “Clever Code” I’ll be expanding on what I did here to make relatively simple “throw scrolling.”

Mobile Gaming: How big will it get?

Traditional console gaming has been suffering for the past couple years. Nintendo’s Wii U was a notable disappointment, and experts are not optimistic about the upcoming “xBox 720” and PS4 either. A lot of games are also suffering from creative stagnation. Console game developers (who put millions of dollars into each game) are reluctant to take risks, and often opt for tried and true formulas for games that will definitely break even, instead of going out on a limb and making a game that might be revolutionary.

Mobile gaming, on the other hand, is continuing to explode. Rovio Entertainment Ltd. (makers of Angry Birds) reported doubling their revenue in 2012, up to $152 million euros (just over $200 million Canadian). Mobile gaming is reaching a much wider market, and thanks to mobile, the gaming industry is actually doing well, despite consoles suffering.

What makes the future of mobile gaming even more interesting is that Nvidia has stated that their next generation of mobile processors (Tegra 4) will actually outperform the current console kings, xBox 360 and PS3, and this is phones we’re talking about!

So my question is, how far will it go? How much potential do mobile games have?

One factor that is still limiting mobile games is storage space. Compared to PS3 games, which come on Blu-ray discs capable of holding up to 50GB, most phones and tablets still don’t come with any more than 32GB of storage. This makes the epic scale of some console games impossible on mobile platforms.

Another factor is price. Mobile gamers have become so used to $0.99 price tags that if a game were released on Google Play for $30, let alone $60 (the current standard console price tag) people would be outraged. This also limits the scale of mobile games, but the question here is, do most people even want big games, or do they just want quick, fun and innovative games? Based on current market trends I would say no, most people don’t want big games. The casual gamer doesn’t want to be engrossed for hours at a time, they don’t have the time and/or patience for that, they just want a fun and convenient way to spend a few spare minutes.

So what do you think? What does the future of mobile gaming hold?

Rats in the Wall!

Ever heard of the game “Plumber Crack”? It’s a silly mobile game based entirely on throwing objects in to people’s butt cracks. The funny thing is, its makers claim over 18 million downloads. That’s more than half the population of Canada, flinging stuff at butt cracks.

But of course that’s not much compared to Angry Birds, the single most inescapable mobile game phenomenon, and what is it all about? Throwing birds, at pigs. So how do you predict what people will enjoy, and what will really catch on? Well, I’m taking a wild guess and saying “Rats in the Wall!” is going to be a hit, and I hope I’m right, ’cause then I’ll be rich, too!

To be honest, I don’t think subject matter has that much to do with the success of a game at all. I think mostly it’s in the promotion and hype a game gets. As long as the game is reasonably enjoyable, if people are talking about it and tweeting about it, it won’t be long before they’re playing it. So, that said, I’m going to try to get you all excited about a new game I’m working on!

So yes, “Rats in the Wall!” is this new game. In it you’ll be helping Cletus (100% redneck stereotype) blast all the rats out of his walls with a shotgun. The concept idea came out of the blue while pondering what to do for that #MAD405 “masking assignment,” and kept developing in my brain until it became a full-sized mobile game.

So how does it work? Well, You’ll tilt your device to guide the “rat x-ray” around using the accelerometer and find the rats hiding inside the wall, and as soon as the x-ray is centered on a rat, tap the screen and Cletus will shoot it. To keep it interesting and challenging there will be different types of rats that will show up, from the basic rats in hammocks, and rats eating stuff, to military rats in camouflage, and ninja rats with smoke bombs! (Somehow, the smoke bombs even work while being x-rayed… I guess that’s just ninja skills) and of course you’ll be awarded for speed and accuracy.

I’m thinking there will be random bonus levels too, incorporating different types of gameplay. One idea is that hundreds of rats will suddenly start jumping at you, and you have to tap each one before it bites your face; a short but super faced-paced panic level. There will also be humorous dialogue in the background involving Cletus’s wife, and lots of redneck jokes.

So, do you wanna play it? I’ll be sure to promote the crap out of it as soon as I get it on to an app store, and I hope you’ll give it a try.

Time to start blogging again!

I originally made this blog as part of a graphic design course, and now I’m reviving it as part of a some even more exciting education; Mobile App Development!

It certainly is an exciting time to be getting in to the mobile apps business. The industry is only a few years old, and it’s already huge, but still only a fraction of the size it will surely be in another few years. I saw a random thing somewhere that said “We call smartphone developers ‘smart developers.’ What do we call other software developers? Unemployed.” While somewhat exaggerated,  it is nice to be one of those in the “smart” category, as opposed to the “unemployed” one.

The advancement of technology is kind of insane, really. There’s this “augmented reality” thing we’ve been learning about, where, for example, your phone will be programmed to recognize a certain image, and when its camera sees this image it plays an animation right on top of the live video so it looks like random graphics are growing out of someone’s t-shirt. Pretty intense, but nothing compared to what could be done with something like these.

This site mentions the Terminator movies, and if you’ve ever played the game ‘Heavy Rain’ you will have seen another super cool concept of what this sort of technology could be capable of once it’s perfected (the side effects in the game are pretty nasty though, which is another thing worth thinking about.) Although the article mentions they were supposed to have been ready by 2010, which I’m pretty sure did not happen, I have heard from other sources that the technology is definitely coming at some point.

What about interstellar space travel? I’m sure you were NOT going to ask that, but hey, I found this video which talks about humans visiting other star systems, and includes a very educated-looking estimate of how long it will be until that happens. The estimate is at just over a thousand years though, and involves some really mind-bending sci-fi-ish methods of transportation. That’s a super long time, and even that is a very generous/short estimate, so there’s a pretty good chance the human race as we know it won’t even last long enough to explore outside our solar system, but it’s just fun to try to understand all that space-time bending and stuff.

The video is here.

I also found the description of what it would really look like to travel at light speed really fascinating. Needless to say, Star Wars got it totally wrong, but that new Cineplex “100 years of film” intro animation they play before every movie does look really awesome in 3D.

Now I’m completely off-topic, so here’s another video from the really animated bearded guy that should either fascinate you or give you a headache: http://www.youtube.com/watch?v=3pAnRKD4raY

So what do you all think of all this mind-bending science, and more relevantly, the crazy, exciting and sometimes scary advancement of technology?

Green

“Taste the colour of Awesome.”

Green is a drink that doesn’t pretend to be anything other than what it simply is: green and delicious. Green was created out of the love of the colour green that a friend and I share, and though the only bottles of Green that ever existed were re-labeled Lime Crush, that doesn’t make it any less awesome.

The illustration shows here is a 3D computer-generated rendering, with the label I created in Adobe Illustrator applied to it.

Algonquin North

Algonquin North is a Wilderness Outfitter located near Mattawa, Ontario, serving people visiting the norther regions of Algonquin Park. I’ve been working on this website with Northern Computer Services in North Bay, Ontario. My job is to design the look of the site, create all the graphics and basically, to make it pretty. Check it out at: http://algonquinnorth.com/

Molly’s

In my first year of graphic design at Canadore College the owner of Molly’s Bistro Bakery (Minden, ON) offered students in my class as well as one or two other classes a chance to design a logo for her business, as a contest. There were about 20 entries and mine was selected as the winner. She makes really good cookies, too.

Some Random Cool Photos

I’ve been far too busy to update my blog lately, so here’s some random cool photos…

This photo was a random impulse shot of a car driving by in a snow storm. I didn't have time to set the shutter speed or focus properly, but I love the way it turned out anyway.

 

This was taken near the Brent Crater in Algonquin Park, Ontario Canada. To create the "fisheye" look without a fisheye lens I took 3 photos at the widest setting my standard lens can go to (18mm) and stitched them together in Photoshop.

 

I though this illustrated alleyway in North Bay, Ontario was worth photographing, especially in the evening with the interesting lighting.

Telethon Poster

My entry for the poster design contest for the telethon held at the college.

Incongruity

This was taken for a school project which required a photo representing “incongruity,” or things that don’t go together.

Windsong

Entries for a logo design contest for the Windsong Music Festival in Powassan, Ontario.

Night Photography 2

More night photography; this time with crazy telephoto lens lens compression. Taken at the Pembroke Marina, Pembroke, Ontario.

Camera: Canon Rebel XSi – 6 sec – f/8 – 238mm – 200 ISO

Night Photography 1

I love night photography because the simplest things can become so dramatic, and in daylight you’d never guess they would be worth photographing. This was taken in a small park near downtown Pembroke, Ontario.

Camera: Canon Rebel XSi – 4 sec – f/13 – 35mm – 200 ISO.

Seven Seas Spiced Rum

Fictional brand of rum created based on my love of anything piratey.

Label created in Adobe Illustrator (except background map which is pen on paper), bottle illustration created in 3D, rendered in E-on’s Vue 6, Poem by William Archer.

“North Bay Landscape”

This assignment was to create an illustration of what North Bay means to me, as I summed it up: busses, education, bad weather and romance.

Adobe Illustrator and Photoshop, 9×12.