ClickPopMedia » Just for Fun!

ClickPop

VQ — Thu, 24 Sep 2009 19:04:48 +0000

I just posted two shirt designs to the Threadless loves Geeks competition onThreadless. If you like it, jump on and rate it to help get it printed.

” />

CPM’s Chris Vasquez Has A Shirt Up On Threadless! VOTE FOR IT!

Weese — Fri, 10 Jul 2009 23:24:33 +0000

Hope people get on top of this, and vote for this hot dawg of a shirt. It’s a great design from CPM’s very own Chris Vasquez!

How To Make A Spraypaint Panel

Weese — Tue, 24 Jun 2008 20:21:48 +0000

So over the past two months I’ve been painting these Panels of VQ’s Vectors. That got the boys and I over at ClickPop talking about how it was time to teach you how to create them too. It’s pretty simple, all you’ll need is:

-Panel, which can purchased online or at your local arts and craft store (Michaels, A.C. Moore, etc.)

-A can(s) of spray paint

-Black Chisel Tip marker (I prefer Grand & Toy, or Sharpie).

Below is just a shot of my panel.

Next you’re going to sketch out your drawing with a regular black marker, I used a sharpie for this part. My inspiration for this panel is from VQ’s vector of Paul and his Nuclear Warning vector

Next, go over your initial sketch with your Chisel Tipped Marker (Grand & Toy seem to work really well for this). Make sure your perimeter lines are at least the width of your chisel tip.

Now, grab your can of spray, and work from the outside of the canvas inward. Your paint is going to start drying before you finish painting the whole canvas, so be looking for any white that might come through. Be sure to get even lines. If you spray over your drawing, don’t worry about it, actually you can get some cool cell-shading effects by going over the lines a little.

Finish spraying the whole canvas. Let it dry for about 20 minutes (if your location is colder it may take longer).

Then take your canvas and go over all of your lines again with your Chisel Tipped Marker.

And then you’re done! Below is all four panels for the ClickPop Office. If you end up making millions on your panels, be sure to let me know. Enjoy! God bless you guys. -Weese

2-D Sean!

Weese — Thu, 15 May 2008 22:47:24 +0000

This week is the third installment of Painting Panels!!! (I just made that name up, yea, I know, I’m pretty clever…I should start a TV show) What we’ve got for you is a spray painted vector character of Sean with some of VQ’s famed speech bubbles. To be honest, the boss man (VQ) came up with all the characters too, I just painted them…

Maybe you should go check out weare.clickpopmedia.com to see the last two weeks along with this one. A Painted Panel Tri-Vecta! Well, that’s all the painting I did today. Have a lovely day, peace out, the Lord bless you.

-Weese

Creating an XML Gallery with ActionScript 3.0

Paul — Thu, 15 May 2008 02:37:28 +0000

For any dynamic Flash project, XML will be a powerful tool. One of the most common examples (and one of the simplest) is a picture gallery like the one I have here:

Images came from http://www.stockvault.net/

I will be talking about how to use Flash and XML to make a simple, yet superfly, gallery.

So, let us start off by looking at my XML file’s structure:

dir="//url/Photos/">
id=‘0′ file="photo_7030_20070301.jpg" width=‘500′ height=‘375′>
Cute Puppy! Who couldn’t love that face?
>
id=‘1′ file="photo_4095_20070301.jpg" width=‘500′ height=‘375′>
Three Friendly Cats.
>
id=‘2′ file="photo_4281_20070301.jpg" width=‘500′ height=‘375′>
The Terror of the UnderSofa!
>
id=‘3′ file="photo_6257_20070301.jpg" width=‘500′ height=‘375′>
Bored? Let’s play catch!
>
id=‘4′ file="photo_6882_20070301.jpg" width=‘500′ height=‘377′>
It may be natural, but this picture still feels weird to me.
>
id=‘5′ file="photo_7241_20070301.jpg" width=‘500′ height=‘375′>
My cats hate the snow.
>
id=‘6′ file="photo_7538_20070507.jpg" width=‘500′ height=‘622′>
LOOK IT'S HTML!!!]]>
>
id=‘7′ file="photo_7915_20070609.jpg" width=‘500′ height=‘371′>
Skinny cats are OK too.
>
>

XML is very simple to understand if you know anything about HTML’s tag structure. The XML document has a root tag that has an attribute dir=”//url/Photos/”. Every tag has to be closed within it’s own level of the tree. Our gallery tag is closed at the bottom of the document with . This means that all the tags are elements inside the gallery element (both open and close tags combined make up an element).

Our tags have several attributes, such as the images file name and it’s pixel demensions. Inside each element we have a short comment about the image that will be displayed in a TextField in our Flash movie.

One important thing to notice here is that if you want to have HTML in your TextField then you need to tell the code that something is a string containing HTML and not more elements. We do this with a special bracket HTML GOES HERE ]]> Isn’t that GREAT! That right there probably made this whole tutorial worth while (that was a problem that took me a long time to solve).

OK, now that we’ve looked at the XML we need to make it work with ActionScript 3. In Adobe Flash CS3 I created a new AS3 FLA doc and a new AS doc. In the FLA I simply created some very basic MovieClips for my left and right arrows and I placed a TextField at the bottom of my stage (which I set to 600 X 700 with a black background). After naming my instances and setting up the Document Class linkage I was done with the FLA side of thing and the rest is ActionScript.

Our Document Class has to extend MovieClip so we take our first steps thusly:

public class Main extends MovieClip {
public var currentImg:Number;
public var lastImg:Number;
public var xml:XML;
public var loader:Loader;
public var xmlLoader:URLLoader;

public function Main() {
loader = new Loader();
addChild(loader);

xmlLoader = new URLLoader(new URLRequest("//url/gallery.xml"));
xmlLoader.addEventListener(Event.COMPLETE, parseXML);

left_mc.stop(); //Need to stop the arrows from flickering
right_mc.stop();
}
}

In our constructor we are initializing our Loader which will contain the loaded images and we are loading our XML document. When the XML doc is done loading, the function parseXML will handle the content.

protected function parseXML(event:Event):void {
left_mc.addEventListener(MouseEvent.MOUSE_UP, nextImg);
left_mc.addEventListener(MouseEvent.MOUSE_OUT, arrowOut);
left_mc.addEventListener(MouseEvent.MOUSE_OVER, arrowOver);
right_mc.addEventListener(MouseEvent.MOUSE_UP, prevImg);
right_mc.addEventListener(MouseEvent.MOUSE_OUT, arrowOut);
right_mc.addEventListener(MouseEvent.MOUSE_OVER, arrowOver);

xml = new XML(event.currentTarget.data);
lastImg = xml.img.length() – 1;
currentImg = 0;
loadImg();
}

I’ve recently gotten into the habit of using protected functions rather then private functions. There is only one difference between the two and that’s that private anything won’t be inherited by child classes.
In this function I set the MouseEvents for the arrows because if the XML failed to load, there would be no reason for the arrows to work.

Alright, so I saved my XML tree in the var xml for ease of use later. I also saved the number of images in my XML doc using the length() method. Something to know about the length method is it will only tell you how many elements there are of that tag type at that level. For example, if I were to have child elements inside my img elements that would not affect the return value of xml.img.length(); It’s only telling you how many img elements are children of gallery (gallery is accessed with the var xml directly).

protected function loadImg():void {
loader.x = (stage.width – Number(xml.img[currentImg].@width))/2;
loader.y = (stage.height – 50 – Number(xml.img[currentImg].@height))/2;
loader.load(new URLRequest(xml.@dir + xml.img[currentImg].@file));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadFin);
}
protected function loadFin(event:Event):void {
textDisp_TF.htmlText = xml.img[currentImg];
}

In that first function I’m just going to focus on the one line with the URLRequest. In order to traverse an XML tree you need start with the base. Your XML var (in our case it’s called xml) points to that base (in this case the base is gallery). So when we want to access the attribute dir in the tag gallery, we need to type xml.@dir and this will return “//url/Photos/”. The ‘@’ symbol denotes that it’s an attribute and not an element (tag).

Getting the file name is just one step further. currentImg is a Number variable that stores which image we are on. Thinking of our XML var as something similar to a bunch of nested arrays we can see how you might access a specific file name with xml.img[currentImg].@file This says we want the file attribute in the [currentImg] (first second so forth) img element which is in our base element. There are quite a few ways of finding what you need in an XML doc and you can learn more about them here.

In the second function we are displaying the text from within our XML img element. Here we aren’t accessing any attributes or anything, this is where we get the content between the open and close tags.

Finally we have the arrow MouseEvent handlers:

protected function arrowOut(event:MouseEvent):void {
MovieClip(event.currentTarget).gotoAndStop(1);
}

protected function arrowOver(event:MouseEvent):void {
MovieClip(event.currentTarget).gotoAndStop(2);
}

protected function nextImg(event:MouseEvent):void {
loader.unload();
currentImg = (currentImg < lastImg)? currentImg + 1 : 0;
loadImg();
}

protected function prevImg(event:MouseEvent):void {
loader.unload();
currentImg = (currentImg > 0)? currentImg – 1 : lastImg;
loadImg();
}

Once again I’m using the less obvious form of the if..else statement.

if(num>5) {
num = 5;
}else {
num = 0;
}
//OR, THIS NEXT PART DOES THE SAME THING
num = (num>5)? 5 : 0;

Well that’s about it for this level of a gallery. You can make galleries look really nice with fade transitions between images, small loading animations for larger images, scrollable thumbnail selection menu… etc.

Here is a downloadable source of my example file (images not included… get them here): XMLGallery.zip

A Painting Collaborating.

Weese — Thu, 01 May 2008 01:46:45 +0000

So the boss-man VQ and I decided to have some fun painting today. Check it out!

This canvas was made possible by: some old spray paint given to us, and VQ digging into his deep, deep, very deep character repertoire!

Our New Blog: We Are ClickPopMedia

VQ — Mon, 28 Apr 2008 16:49:02 +0000

We just launched a new “just for fun” blog. Don’t worry, we’ll still be posting our regular tutorials and free stuff here, but we just needed this.

So why doncha stop by and see what we like other than pixel patterns, actionscript, and sql queries. Leave us a comment when you come by. Or else…

My Friday Photoshop Project

VQ — Fri, 11 Apr 2008 14:06:06 +0000

Click Above to see the whole piece.

I’ve been playing around in Photoshop recently while I’ve been trying to come up with a PS tutorial worthy of posting on this illustrious site. Yesterday I decided to do a color study. Here it is for y’all to enjoy.

GodBless:VQ

A Good Idea…continued

Weese — Wed, 02 Apr 2008 15:12:43 +0000

A couple of weeks ago I posted a painting that I had begun. Last night I decided to get back to work on it. The triptych (pronounced:[trip-tik] NOUN Fine Arts. a set of three panels or compartments side by side, bearing pictures, carvings, or the like.) was my very hip wife’s idea.

So feast your eyes! A project done at 3:00 am, and “play by play” pictures of the progress…(above is the picture of where I had left it a number of weeks ago.)

I added the sun, it’s too bad i couldn’t use a sweet Illustrator Sun from yesterday’s tutorial…

And here I begin the ground.

Finally, the close to finished product ( I might go back and “edit” a few things.) But there you have it.

Well, that’s all for today, hope you enjoyed the “paintastic” progress. If you dig it, cheers to YOU. Maybe I’ll get a shot of it on our wall to show what it looks like separated. The Lord bless you.

-Weese

Cool Games Made with Box2DFlash

Paul — Mon, 24 Mar 2008 05:31:11 +0000

After writing my introduction tutorial to Erin Catto’s Box2D AS3 physics engine port, I found out that I was writing about version 1.4.3. Well a new version (v 2.0.0) is set to come out within the next few weeks, so I thought that I would put off any more tutorials on Box2DFlash till I find out what has changed.

Until then, I’ve found a bunch of fun games made with the Box2D engine and I thought I would share them with you.

Clog FLASH: (http://brainclog.com/clog.shtml)
Clog is a fun little flash game where you are some kind of white ice ball bumping and pushing 5 blue ice balls through an obstacle course. I haven’t played very far in this game yet. I keep getting distracted with other things around the fourth level. Still it’s a good example of circular collisions in the engine.

Poker-Blocks C++: (http://www.pokerblocks.com/index.html)

Poker Blocks is a commercial stand alone game that seems to be a mix between Tetris and poker. It seems like a weird combo to me, but it also looks fun judging from the video. I haven’t played this one personally even though there is a 30 day free trial. I just wanted to include it because it looks like one of the better games made with the C++ version of Box2D.

Hikkoshi FLASH: (http://www.skt-products.com/contents/hikkoshi.html)

I found this one to be very fun. There really isn’t much to it. Just click once to start the shot and then click again to let go, but I played it over and over again. My best score is something around 12800+ (I only remember the first 3 digits). If you have Flash Player 9 I recommend giving this one a try… it only takes about 2 minutes to play from start to finish.

Carona Pinnball FLASH: (http://piwna.pl/gry/pinball)
This is just a pinball game. In some foreign language. It’s a little slow too. The reason I’m including it with the others is… well it does use the engine. And, it made the author money. So, I find that inspirational.

Snowball FLASH: (http://www.uberdruck.com/snowball/)
This game was purchased by a radio station in England for their website. The version I am linking to is the original, before it was fixed up to be suitable for the other site. This is a really simple game actually. You are just throwing snowballs at (the prime minister?) a ragdoll and watching the physics make it fly about.

Hopefully I will have something cool of my own to show off by next week.