Today is your luck day, friend. It’s free octopus day at ClickPopMedia! So step up and download yourself an octopus.
Download the Vector Octopus (.ai and .eps)
Related Posts
]]>In this tutorial I will be going over some of the basic elements to making a game in Flash. This being the first in a short series of tutorials on the subject, I will cover the main game loop and keyboard controls.
First off we need to set up some simple graphics. I did some REALLY simple graphics as you can see. The ship_mc being just a triangle and on the 3rd frame of the ship movie clip it get’s a little fire tail. Since I am just imitating Atari Interactive, Inc.’s Asteroids, we don’t really need anything more then that for now.
Now, to get our initial code setup:
import flash.display.*;
import flash.events.*;
import flash.text.*;
import flash.utils.Timer;
public class Asteroids extends MovieClip {
protected var mainTimer:Timer;
public function Asteroids() {
mainTimer = new Timer(20);
mainTimer.addEventListener(TimerEvent.TIMER, MainLoop)
ship_mc.stop();
this.addEventListener(Event.DEACTIVATE, deactive);
this.addEventListener(Event.ACTIVATE, active);
stage.addEventListener(KeyboardEvent.KEY_DOWN, kDown);
stage.addEventListener(KeyboardEvent.KEY_UP, kUp);
}
protected function MainLoop(e:TimerEvent):void {
}
protected function deactive(e:Event):void {
mainTimer.stop();
}
protected function active(e:Event):void {
mainTimer.start();
}
protected function kDown(e:KeyboardEvent):void {
}
protected function kUp(e:KeyboardEvent):void {
}
}
}
So far this is just a skeleton of our game. We have our KEY_DOWN and KEY_UP events which will handle all of our keyboard controls later. But, more importantly, we have our mainTimer. By setting up our game engine to run based on a timer I can later change the frame rate without changing the game dynamics (I left the frame rate at 12/sec for the example above). This is also useful if your game has too many graphical elements and the frame rate drops on some machines, this will preserve the speed of the game itself.
So, please notice that I have the Timer set to “tick” every 20 milliseconds (1000 milliseconds to 1 seconds) which is about 50 ticks per second. Because of that, we are going to have some small values to work with when playing with flight speed and rotation in our ship.
But, first let us think about keyboard controls:
protected var rpm:Number;
protected function kDown(e:KeyboardEvent):void {
// trace(e.keyCode);
if(e.keyCode == 37 || e.keyCode == 65 || e.keyCode == 100){
rpm = -4;
// trace("LEFT");
}
if(e.keyCode == 38 || e.keyCode == 87 || e.keyCode == 104){
thrust = true;
// trace("UP");
}
if(e.keyCode == 39 || e.keyCode == 68 || e.keyCode == 102){
rpm = 4;
// trace("RIGHT");
}
}
protected function kUp(e:KeyboardEvent):void {
if(e.keyCode == 37 || e.keyCode == 65 || e.keyCode == 100){
rpm = 0;
// trace("LEFT");
}
if(e.keyCode == 38 || e.keyCode == 87 || e.keyCode == 104){
thrust = false;
// trace("UP");
}
if(e.keyCode == 39 || e.keyCode == 68 || e.keyCode == 102){
rpm = 0;
// trace("RIGHT");
}
}
rpm and thrust are going to control our ships flight in the MainLoop later. The keyCode is a number which represents the key being pressed or released on the keyboard. I prefer to set a value on down because the KEY_DOWN event will be fired off numerous times very quickly if the key is held too long. I have the controls set up to work with WASD, the arrow keys, or the num pad.
To find the key values I just traced e.keyCode in the kUp() function and tried pressing the keys in question. This got me the numbers you see in the code above. The commented out traces are there to make sure we have the correct keys, since we don’t have any other indicator yet.
The next step is a simple one (except for some of the math):
protected const ACCELERATION:Number = .1;
protected const FRICTION:Number = .995;
protected var mainTimer:Timer;
protected var speedX:Number;
protected var speedY:Number;
public function Asteroids() {
rpm = 0;
speedX = 0;
speedY = 0;
…
}
protected function MainLoop(e:TimerEvent):void {
ship_mc.rotation += rpm;
var dx:Number = ACCELERATION * Math.cos((ship_mc.rotation*Math.PI)/180);
var dy:Number = ACCELERATION * Math.sin((ship_mc.rotation*Math.PI)/180);
if(thrust){
speedX += dx;
speedY += dy;
//We want to have a max speed in any direction of the compass
var speed = speedX*speedX + speedY*speedY;
if(speed >= TOP_SPEED*TOP_SPEED) {
speedX *= (TOP_SPEED*TOP_SPEED)/speed;
speedY *= (TOP_SPEED*TOP_SPEED)/speed;
}
ship_mc.gotoAndStop(3);
}else {
ship_mc.gotoAndStop(1);
}
//I know there is no friction in space, but I can’t remember if Asteroids had it or not.
speedX *= FRICTION;
speedY *= FRICTION;
ship_mc.x += speedX;
ship_mc.y += speedY;
if(ship_mc.x > 560) ship_mc.x = -10;
if(ship_mc.x < -10) ship_mc.x = 560;
if(ship_mc.y > 410) ship_mc.y = -10;
if(ship_mc.y < -10) ship_mc.y = 410;
}
Here we have initialized some variables in the constructor first. Then we filled in our MainLoop to give our spaceship some life. I would think the rotation is self evident… it’s the first line of the method. I used some constants in my math (ACCELERATION, TOP_SPEED, and FRICTION) so that I can easily adjust the game settings all in one place, without searching for the parts of the code that I need changed.
The last group of if statements above are checking to see in our ship has flown off the screen and if it has it will be moved to the other side.
That’s all for now. Next time I will probably add some asteroids and talk a little about collision detection.
You can download the source for this example here: AsteroidsSource.rar
Other Posts
]]>
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
Related Posts
]]>
Howdy pardners. I’m glad you stopped by the ol’ ClickPop Ranch. Sit down, rest your feet a spell, and enjoy this water buffalo skull vector. I realize that this probably isn’t the way a water buffalo rancher would write. It’s more like a regular buffalo rancher, but hey, it gets the job done.
Download the Water Buffalo Skull Vector (.ai and .eps)
GodBless:VQ
Related Posts
]]>
Last week we gave out some free Batik vectors. In that post, I mentioned that if anyone wanted the patterns as Photoshop patterns, I’d be glad to share them. Well, you asked, and I’ve finally come through.
In this pack of Photoshop patterns I have 6 different color schemes ranging from nice to WEIRD. There is a 500px wide and a 250px wide version of each pattern. Have fun my friends! Let us know if you do anything wonderful with them.
Download the Batik Photoshop Patterns (.pat)
Download the Batik Photoshop Patterns (.png)
GodBless:VQ
Related Posts
]]>I have another simple but neat, little tutorial here on Flash CS3 filters. This time I’m not using Tweens at all. Our effect is going to use the MouseEvent.MOUSE_MOVE event to create the illusion of a light source coming from our cursor.
To begin with we are going to make our Shadows class. This class is going to extend MovieClip, have a DropShadowFilter pre-applied to it and a public method to change the drop shadow filters distance and angle.
public static var All:Array;
protected var txtF:TextField;
protected var drop:DropShadowFilter;
protected var distance:Number;
protected var angle:Number;
protected var dropAlpha:Number;
protected var blurX:Number;
protected var blurY:Number;
public function Shadows() {
if(Shadows.All == null) Shadows.All = new Array();
distance = 0;
angle = 0;
dropAlpha = 1;
blurX = 0;
blurX = 0;
drop = new DropShadowFilter(distance, angle, 0, dropAlpha, blurX, blurY);
this.filters = [drop];
Shadows.All.push(this);
}
public function lightSource(X:Number, Y:Number):void {
var dx:Number = (this.x + (this.width/2))-X;
var dy:Number = (this.y + (this.height/2))-Y;
angle = (180 * Math.atan(dy/dx)) / Math.PI;
if(dx < 0){
angle += 180;
}
distance = Math.sqrt(dy*dy + dx*dx)/10;
dropAlpha = 10/distance;
blurX = Math.abs(dx/20);
blurY = Math.abs(dy/20);
drop = new DropShadowFilter(distance, angle, 0, dropAlpha, blurX, blurY);
this.filters = [drop];
}
}
I hope you can see what is going on in the code. I’m simply setting all my variables equal to 0 or 1, depending on what it’s for, and applying my filter in the constructor. Also note that I’m saving all my objects in a static array. This makes it easier to call all the lightSource() methods at once in a for loop later.
In the lightSource() method we have a little bit of math that you might be unfamiliar with.
My variables dy and dx stand for distance y or x and I’m setting them equal to the distance from the point given and the center of my ShadowObject.
angle is going to be the angle of the drop shadow and it needs to be in degrees. Math.atan() is called arc-tangent in the Trigonometry world and it gives your the value of the angle opposite the Y side of a right triangle in radians. If that doesn’t make sense, just know that it’s giving me that angle I need, but in the wrong units. I convert it by multiplying by 180 and dividing by PI. Math.atan() only returns a value between -pi/2 and pi/2 (-90 to 90 degrees) which only covers half a circle, so I have to check if we actually need the other side. And, that’s what my if() statement is for.
distance is calculated using the Pythagorean theorem C^2 = A^2 + B^2 (and then divided by 10 otherwise it’s just too much).
DropAlpha, blurX, and blurY are all set pretty clearly (blur has to be positive, thus the Math.abs() or absolute value).
Finally our function creates a new drop filter with our new values and applies it to our Shadow object.
Except for trying to remember the math involved, this one has been pretty easy so far, huh? Well then, let’s try using it in a project!
var str2 = new String("Media");
var letter:Shadows;
var newX:Number = 30;
var overLetter:TextField;
for(var i=0; i<str.length; i++) {
letter = new Shadows();
letter.x = newX;
letter.y = 80;
overLetter = new TextField();
overLetter.text = str.charAt(i);
overLetter.setTextFormat(new TextFormat("Georgia", 100, 0×0000FF, true));
overLetter.autoSize = TextFieldAutoSize.LEFT;
letter.addChild(overLetter);
addChild(letter);
newX += letter.width;
}
newX = 80;
for(i=0; i<str2.length; i++) {
letter = new Shadows();
letter.x = newX;
letter.y = 180;
overLetter = new TextField();
overLetter.text = str2.charAt(i);
overLetter.setTextFormat(new TextFormat("Georgia", 100, 0×0000FF, true));
overLetter.autoSize = TextFieldAutoSize.LEFT;
letter.addChild(overLetter);
addChild(letter);
newX += letter.width;
}
function changeLight(event:MouseEvent):void {
for(var i=0; i<Shadows.All.length; i++) {
Shadows.All[i].lightSource(stage.mouseX, stage.mouseY);
}
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, changeLight);
So, there it is. I’m adding each letter to a different Shadow object so that their shadows move independently. I then update all the shadow light sources to the mouse’s X and Y coordinates every time the mouse moves. SO EASY!!
I have a few more ideas for cool effects that you can make with filters and I will probably post about them soon.
Download the Source Code for the example used in this post here: ShadowsSource.zip
Related Posts
]]>Today we are going to do something that is important for any developer, examine code. The ability to read another person’s code is vital if you want to be successful. Obviously everyone does things differently, and it’s easy to get into thinking that you have to do everything from scratch, but sometimes you are just going to have to use a prebuilt element. As a lesson, we will be taking a look at the Accordion Code from Switch on the Code and turn it in to a horizontal accordion.
We’ll start first with the HTML
Switch on the Code provides with this:
<div onclick="runAccordion(1);">
<div class="AccordionTitle">
Accordion 1</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
I Am Accordion 1.</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle">
Accordion 2</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
I Am Accordion 2.</div>
<div onclick="runAccordion(4);">
<div class="AccordionTitle">
Accordion 4</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
I Am Accordion 4.</div>
<div onclick="runAccordion(5);">
<div class="AccordionTitle">
Accordion 5</div>
</div>
<div id="Accordion5Content" class="AccordionContent">
I Am Accordion 5.</div>
</div>
This is a bit bulky for my taste, so I will be cutting down on a lot of this. I will layout an all new structure, and I will also only use 2 accordions instead of 5… but you can use as many as you want.
<div id="Content1" class="Content">I Am Accordion 1.</div>
<div class="Toggler" onclick="runAccordion(2);"><img src="accordion2.png" alt="" /></div>
<div id="Content2" class="Content" style="border-right:1px solid #333;">I Am Accordion 2.</div>
There, that’s better. I have replaced the multiple divs per section with just 2 divs for each accordion section. There is a Toggler and a Content div. Each div is assigned the appropriate class. Togglers are given an onclick function of runAccordion(#), where the # is replaced by the section number. Content divs are given and id of Content# using the same principle. You will also notice the last section is given some extra style features, this is so there will be an end border on the entire Accordion.
Next we’ll move on to the CSS. We’re going to completely scrap everything they gave us, and start from scratch:
{
width:20px;
height:200px;
overflow:hidden;
font-family:Arial;
font-size:12px;
font-weight:bold;
text-align:center;
float:left;
}
.Content
{
height:198px;
border-top:1px solid #333;
border-bottom:1px solid #333;
background-color:#ececec;
display:none;
width:0px;
float:left;
}
An important thing to note here is the floats, In order to get the divs to position next to each other, they need to be floated or set to display:inline, I chose to use float.
Finally the Javascript:
I am not going to compare JavaScripts, I will just provide the modified function, and explain what changes were made.
var TimeToSlide = 250.0;
var openAccordion = ”;
function runAccordion(index)
{
var nID = "Content" + index;
if(openAccordion == nID)
nID = ”;
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",’" + openAccordion + "’,'" + nID + "’)", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == ”) ? null : document.getElementById(openingId);
var closing = (closingId == ”) ? null : document.getElementById(closingId);
if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.width = ContentWidth + ‘px’;
if(closing != null)
{
closing.style.display = ‘none’;
closing.style.width = ‘0px’;
}
return;
}
timeLeft -= elapsedTicks;
var newClosedWidth = Math.round((timeLeft/TimeToSlide) * ContentWidth);
if(opening != null)
{
if(opening.style.display != ‘block’)
opening.style.display = ‘block’;
opening.style.width = (ContentWidth - newClosedWidth) + ‘px’;
}
if(closing != null)
closing.style.width = newClosedWidth + ‘px’;
setTimeout("animate(" + curTick + "," + timeLeft +",’" + closingId + "’,'" + openingId + "’)", 33);
}
Now get ready for this, these are some monstrous changes!! I mean seriously… not for the faint of heart. The first thing I did of course was read through the code… then I read it again… and 3rd time just for good measure. Then I opened up Find/Replace, and replaced the word height with the word width everywhere in the code. I of course maintained capitalization where it was.
Then I changed one other line of code:
var nID = “Content” + index;
This was originally:
var nID = “Accordion” + index + “Content”;
Since I changed the Content divs id tags to just Content#, I needed to change this line of code accordingly. Like I said, I read through the code over and over. Just to make sure everything was correct. I could sit here and explain everything that the function does, but who really wants to read all of that when you can spend time playing with the accordion!
Two other important things to note: At the top of the JavaScript, the two variables control the width that the content divs will expand to, and the amount of time in milliseconds that the animation will take.
Related Posts
]]>
Last week I posted some desktop wallpaper of a new vector swatch I was working on. Well, the pattern is finally finished, and I’m pretty happy with it. The design is based on a beautiful Indonesian batik fabric I saw and couldn’t get out of my mind. It’s exotic, a little trippy, and a lot of fun to play around with.
I set up three different color schemes: a regal orange and blue, an electric yellow and blue, and a psychedelic green and pink. I also made a bunch of Photoshop patterns from this swatch, if anyone wants those, let me know and I’ll post them.
Batik (from wikipedia.com, emphasis mine)
a wax-resist dyeing technique used on textile. Batik is found in several countries of West Africa, such as Nigeria, Ghana, Cameroon and Mali, and in Asia, such as India, Sri Lanka, Bangladesh, Iran, the Philippines, Malaysia and Thailand. However, it is in Indonesia that it is considered a national art form.
Download the Batik Vector Swatch (.ai and Illustrator swatches)
Update: First, the Batik vectors have been updated to fix a few issues with the patterns and include two more color schemes. We’ve also released some Photoshop patterns of these swatches.
If you come up with some cool color schemes, we’d be excited to see them.
GodBless:VQ
.
Related Posts
]]>We managed to get some really useful textures, and we thought you might be able to use some of them as well. This week we have a bunch of brick textures. Let us know if you liked these, and would be interested in some of the other textures we amassed. Four more textures and a link to the zip are after the jump.
Moldy Brick
Old Brick
Fake Red Brick
Old Brick and Stone
Brick
Download All the Brick Textures (.zip)
GodBless:VQ
Related Posts
]]>
I’m finishing up a cool vector swatch based on a beautiful Indonesian batik. In anticipation of that freebie, I wanted to offer another one, our first wallpaper offering. Keep in mind, although the pattern is quite nice, it can get a little hard on the eyes. I hope you enjoy them.
1024×768 Wallpaper | 1440×900 Wallpaper
GodBless:VQ