Code Challenge: GridSplitter

by carl schooff on February 29, 2012 · View Comments

in Challenge

This movie requires Flash Player 9

Time for a new code challenge open to both ActionScript and JavaScript developers! This challenge is going to be fairly easy for those of you who have followed this blog closely, but I guarantee it will be a worthy exercise for many regardless of experience or background.

The challenge is to take a single image and break it apart into many elements that grow and colorize on roll over as illustrated in the swf above.

Full scoop inside.

Quick Video Demonstration and Tips


Watch video on youtube.com

Rules

Create an AS3 or JS script that will:

  • Take a single image and break it up into a grid of tiles
  • Make each tile grow and colorize on roll over

Although my custom classes will make this really easy, you can use whatever code and technology you like, it doesn’t matter.

Get Started!

Download the starter files (includes CS4 fla, jpg image, GreenSock,  my BitmapTileGrid and GrowAndColorizeItem classes). *note the starter fla includes the updated import statements for my custom classes.

Learn how to use the BitmapTileGrid and GrowAndColorizeItem classes.

JavaScript lovers, read the ActiveTuts+ Create an HTML5 Canvas Tile Swapping Puzzle tutorial.

Matthew Lien has a great bustify script for, well, busting up images with JavaScript.

Remember, you can use JavaScript, ActionScript, CSS3, jQuert, EaselJS, WebGL, FORTRAN, whatever.

How to Enter

Submit your files to me in a zip via email before 11:59PM EST Sunday March 4th 2012

Name your zip file YourLastName_gridSplitter.zip

Email to MyFirstName@snorkl.tv (my first name is carl)

Prizes

The prize will be a Really Green Club GreenSock Membership + bragging rights. I will be giving away 3 memberships to randomly selected winners.

Special Bonus:

Not only do you get all the great bonus plugins for the GreenSock Tweening Platform, but you also get special access to the files for the next version of the platform. Yes, you can use and test all the new features available in the not-yet-released v12 version of the platform. There are a ton of new features that are going to totally rock your world. I’m not at liberty to discuss them yet, but if you win you will know all there is to know about the upcoming release.

But… I’m a javascript guy?

Well, incase you don’t know, all of the tweening wonders us Flash folks have been enjoying with TweenLite, TweenMax, TimelineLite and TimelineMax are coming to JavaScript! Yes, that’s right. There is no better time for you to get membered-up and start learning about all the capabilities of this amazing platform that has redefined how people use Flash. It is important to note that the javascript version of the platform is not yet finished, but members will be the first to know about all the details.

Also, I firmly believe that there are a lot of Flash developers that can benefit from seeing how certain “Flash-type” things are implemented on the other side of the fence. This is a great opportunity for all of us to learn from each other. I will be linking out to a handful of creative solutions when the contest ends. Good exposure for you.

Get Going!

I look forward to your submissions and comments. Any questions, just ask below. Good Luck!

Carl

ps. I will be randomly giving away an additional 2 Really Green Club GreenSock Memberships to anyone that tweets about the contest. Be sure to use @snorkl.tv in the text of your tweet. thanks!

 

 

Post to Twitter Post to Facebook

  • Harry

    Another good challenge Carl. Thanks your classes the AS side was pretty straight forward (I did it in three lines!), currently plugging away at the JavaScript side. I can count on one hand the number of times I’ve used JS so it really is proving to be a bit of challenge!

  • http://www.snorkl.tv/ carl schooff

    Yeah, it is pretty easy when you know what you’re doing. although I didn’t get it down to only 3 lines. I’m trying to inspire folks on the “less experienced” side of the curve to just poke around and get some hands on experience with the “practical application” of concepts I have been presenting. Let them see that there are plenty of tools available that you don’t need to understand exactly how they were built or all the details behind the curtain, just how to implement them in their own projects.

    BTW I really wanted to you use your enhanced version of GrowAndColorizeItem but didn’t want to risk confusing people with new params / features that weren’t presented in the initial post.

    Thanks again for your participation and support.

    Best,

    Carl

  • Casey Corcoran

    Hey Carl, here’s my unfinished vanilla js/html/css version:
    http://jsfiddle.net/snaptopixel/JNyWN/ 

    Really all it’s missing is the grayscale part, I don’t have time to finish it with canvas etc. Oh and I assume it’s webkit only since I did it in Chrome and haven’t tested any others ;)

    Enjoy and feel free to fork and tweak it if you feel like it!

  • http://www.snorkl.tv/ carl schooff

    Thank you Casey. That is awesome. Thanks for sharing. I’ve been informed by a few folks that certain elements of this aren’t so easy in the JS/CSS side of things. I’m totally impressed by what you have done.

    I have removed your link from your comment just because it is a contest and I would like others to take a shot at it on their own. When the results are announced or maybe even sooner I will publish / link to your submission so that you get full credit and others can learn from it. 

    I am very very glad to receive your submission. Thank YOU!

    -carl

  • Harry

    I managed to get the greyscale working with canvas, and the scaling working with jQuery, so  it’s just trying to combine the two now I guess! I haven’t used Vanilla JS before (I’m an AS dev, not a JS dev) is it better suited to this challenge than jQuery or is it just your personal preference? Either way I’m hoping to get my entries submitted by tomorrow.

  • Casey Corcoran

    Heh, I’m actually an AS dev as well, although my last probably 4 months or so have been on an HTML/JS app. I’ve actually become quite a fan. By “vanilla” I just meant using no framework. It’s actually more akin to AS than jQuery is. My example would need some retooling to use Canvas. I’m resisting since I have paying work to do :)

  • Kenny

    I solved it in 4 lines. Counting brackets.

  • Kenny

    My original email was 5 lines at the end I changed the way I was loading the library graphic and didnt realize a line was required :<< cant undo email, but if i'm lucky that wont hurt me on the shinny new greensock membership

  • Marc

    Nice, did it in three ;)

  • Kenny

    Sorry to spam (multiple comments), but I really love little challenges like this. Thanks to the author for being creative with his memberships! In the end I guess you could say I’ve found someone new to “follow” :)

  • http://www.snorkl.tv/ carl schooff

    Hey Kenny. Its great to have you onboard. I encourage and support all participation in the comments. Glad you enjoy the contest. If you are super bored you can take a look at my past challenges: http://www.snorkl.tv/category/challenge/ Bisector was probably the one that ended up being much more difficult than it appeared for people.

    stay tuned, I really hope to launch one of these 1 a month.

    thanks again

    Carl

  • Kenny

     i took a glace at those yesterday ;) and yep glad to be onboard.

  • Jesús

    Oh my realy your teaching are the best things that are happening to me right now, i even applay some of them to my college proyects, i would never had so much fun learning for a program as with Flash and noticed the power and awesoness that its can hold, realy thank you for oppening my eyes to this new posibilities in my journey to becoming a good progromer , and i would definitily will try this challenge even if i am still to basic for it :b, hehehe, again thank you for giving us this teaching .

    Greetings  from Venezuela. 

  • http://www.snorkl.tv/ carl schooff

    Greetings Jesús

    Thank you so much for the kind note. Very glad you are learning from my tutorials and are having fun as well. Flash is a great program and allows so many to create fun and exciting projects with relatively little hassle. It is great to have people like you offering such great support. thank you.
    Carl

blog comments powered by Disqus

Previous post:

Next post: