ClickPopMedia » DIY

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

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

DIY Rubber Stamp

VQ — Wed, 23 Apr 2008 17:35:20 +0000

I was ordering something from an online printer the other day and noticed that they offered custom rubber stamps. This got the old brain moving, and I remembered that I (and by extension you) can make a custom stamp of my own.

Step 1: Get Your Stuff Together

The Materials you’ll need:

A rubber eraser (I have a bunch of pink Paper-Mate erasers, but Weese just did a stamp with a nicer white eraser, and it looked really nice)
An X-acto knife
A pen or pencil

Step 2: Tracing

VERY IMPORTANT NOTE: Make sure to trace your shape backwards. Both Weese and I forgot this recently. I promise you, it’s very frustrating to finish lovingly carving out a miniature work of art, only to find that you’ve made a stamp that says “aideM poP kcilC” or some such nonsense.

The first thing you want to do is trace your shape onto your eraser. Keep in mind that tons of curves and tight negative spaces will drive you nuts.

Step 3: Outline

Once you have your shape traced onto the eraser, take your X-acto knife and carefully outline your shape with the tip of your blade, paying attention to clean curves and whatnot (which I did not pay much attention to here). Once you’ve done that, run the blade back through the outline you made, making a deeper cut.

Step 4: Carving

Next you will take the blade and put it into the side of the eraser at the depth of your outline, and run it around the edge of the eraser. Then you will cut in towards your shape, removing pieces of rubber as you go. For tight spaces, use the tip of your blade to cut at an angle and pry up pieces of rubber.

Step 5: Simplify

You’re almost finished. The last step is cleanup. Run your blade around the edge of your shape to get rid of any barbs and other irregularities. I also like to cut off as much of the blank edges of the eraser as possible, so I don’t get a lot of edge marks when I push down on the stamp.

GodBless:VQ