ClickPopMedia

Free Textures from the UK

Weese — Fri, 18 Jul 2008 00:56:05 +0000

Sound Foam, Wicker, Carpet, Flower Wallpaper, Paintbrush Stroke and many more!

In the pursuit to keep things fresh with our photo editing, VQ and I are trying to regularly capture new Photoshop Textures wherever we are in the world. For the next few weeks, I’ll be in England, so these textures are straight from the UK to you, with love. I hope you find them useful in your designs!

God bless you guys,

Weese

P.S.- If you’re looking for some free brick textures, download them here!

Floral pattern:

Rock

Sound Foam

Woven Material

Download the UK Textures (.jpg’s)

A Vector Bird Wing

VQ — Thu, 10 Jul 2008 19:05:27 +0000

Last month was a really heavy month of work for us, and as a result you may have noticed that we weren’t posting as often. Thankfully, that’s all about to change (hopefully not the work load, just the fact that one way or the other we’ll be posting more often).

To kick things off, we have a very useful vector bird wing.

As always, let us know if you do anything neat with it. Have fun, friends.

Download the Wing Vectors

GodBless:VQ

Collision Detection and Game Design

Paul — Mon, 07 Jul 2008 23:58:21 +0000

This is the second step in my series of tutorial, the first being Easy Keyboard Controls and Game Design. In this tutorial I will be building on what we already have, adding asteroids and the ability to crash into them.
I’ve made a few minor changes to the original code and graphics since the last tutorial, but nothing big.

So I create a MovieClip with 3 frames and a different asteroid shape on each frame (you could have more or less if you wanted). I give the asteroids their own class since each is going to have to move independently.

public static const LARGE:String = "large";
public static const MEDIUM:String = "medium";
public static const SMALL:String = "small";

public var speedX:Number;
public var speedY:Number;
public var size:String;
…
public function Move():void {
this.x += speedX;
this.y += speedY;
if(this.x > 550 + this.width/2) this.x = -this.width/2;
if(this.x < -this.width/2) this.x = 550 + this.width/2;
if(this.y > 400 + this.height/2) this.y = -this.height/2;
if(this.y < -this.height/2) this.y = 400 + this.height/2;
}

What I’ve done here is give my Asteroid class X and Y speed properties that work with the Move() method for motion. I intend to call the Move() method for each asteroid in the MainLoop() function.

On creation (in the constructor) I want to know if this asteroid is actually a piece of a larger asteroid or not. If it is I’m going to be passing it the base asteroid that this one is breaking off of to use it’s X:Y coordinates and speed, plus to know what size to make the new asteroid.

Now back to the Main class (in the last tutorial I called this the Asteroids class but changed it to Main since I wanted an Asteroid class).

We need to keep track of our asteroids. To do that we will use an Array. We will add this to the Main constructor:

public function Main() {
dCount = 0;
…
refresh_tf.addEventListener(MouseEvent.MOUSE_UP, resetGame);

asteroids = new Array();
for(var i:int = 0; i<6; i++) {
asteroids.push(new Asteroid());
stage.addChild(asteroids[i]);
}
}

This is just adding 6 asteroids to the stage and giving a click event to a reset button I decided to add.
dCount stands for Death Count with an obvious purpose.

The resetGame() function is just resetting all the properties to the default. I still have to make sure to remove all the asteroids before adding all new ones, but that’s it.

I moved the contents of the MainLoop() from the previous tutorial into a function called shipControl() which is now being called from the new MainLoop();

Our revised MainLoop() method is as follows:

protected function MainLoop(e:TimerEvent):void {
for(var i in asteroids) {
asteroids[i].Move();
}

if(dead){
deathTime–;
if(deathTime <=0){
dead = false;
invincibleTime = 150;
invincible = true;
addChild(ship_mc);
}
}else {
shipControl();
if(!invincible) {
collisionCheck();
}else {
if(e.currentTarget.currentCount%10 == 0){
ship_mc.visible = (ship_mc.visible)? false: true;
}

invincibleTime–;
if(invincibleTime <= 0) {
ship_mc.visible = true;
invincible = false;
}
}
}
}

These nested if..else statements are here to handle death and resurrection (RIGHT ON!).

So we have our asteroids flying about the screen, but we have yet to make them destroy your ship. You should notice above the call for to a method call collisionCheck();
Here is that function now:

protected function collisionCheck():void {
var p1:Point = new Point(ship_mc.p1.x, ship_mc.p1.y);
p1 = ship_mc.localToGlobal(p1);
var p2:Point = new Point(ship_mc.p2.x, ship_mc.p2.y);
p2 = ship_mc.localToGlobal(p2);
var p3:Point = new Point(ship_mc.p3.x, ship_mc.p3.y);
p3 = ship_mc.localToGlobal(p3);
var p4:Point = new Point(ship_mc.p4.x, ship_mc.p4.y);
p4 = ship_mc.localToGlobal(p4);
var p5:Point = new Point(ship_mc.p5.x, ship_mc.p5.y);
p5 = ship_mc.localToGlobal(p5);
for(var i in asteroids){
if((asteroids[i].hitTestPoint(p1.x, p1.y, true) ||
asteroids[i].hitTestPoint(p2.x, p2.y, true) ||
asteroids[i].hitTestPoint(p3.x, p3.y, true) ||
asteroids[i].hitTestPoint(p4.x, p4.y, true) ||
asteroids[i].hitTestPoint(p5.x, p5.y, true)) && !dead) {

destroyShip();
remove(i);
}
}
}

Each asteroid does a hitTest with each point on my ship_mc. It’s important that I’m using hitTestPoint() here because it is capable of checking based on the actual shape of the movie clip. A regular hitTest between two MovieClips will only check to see if the bounding boxes are overlapping… in our case that could still be quite 20 pixels or more away from an actual collision. This is exactly what makes realistic 2D physics so difficult in ActionScript.

Anyways, the Hit Test may be a little buggy in some cases, but hitTestPoint works pretty well for us here. After we detect a hit of course we have to destroy the ship and asteroid and set the death timer. the destroyShip() function is trivial enough, but I would like to take a quick look at a line from the remove() method:

stage.addChild(asteroids[asteroids.push(new Asteroid(asteroids[num]))-1]);

I really just need to explain how this slightly complicated jumble works. Reading this from the inner most parenthases out;

We are creating a new Asteroid object (passing it our parent asteroid that has just been destroyed).
new Asteroid(asteroids[num])

We add that Asteroid object to the end of our asteroids Array which is returning the new length of the Array.
asteroids.push(…)

We then use that new length (minus 1) to add our newest asteroid to the stage.
stage.addChild(asteroids[...-1]);

Eh, see now? Collision detection is easy! I think my next installment might be a little more interesting when I add levels, lives, and a scoring system.

… No bullets you ask? Well that’s just an extension of what I’ve already written here right? The only extra thing you have to remember is that the bullets have a limited lifespan.

If you are still confused and can’t do it on your own (if you want to learn you really aught to at least try) then you can always check out the finished source when it’s released.

The source code for the example in this tutorial can be found here: Asteroids - V2 Source

< Lesson 1: Easy Keyboard Controls and Game Design

Easy Keyboard Controls and Game Design (3)

Free Vector Octopus

VQ — Fri, 27 Jun 2008 02:10:53 +0000

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)

Easy Keyboard Controls and Game Design

Paul — Thu, 26 Jun 2008 01:21:07 +0000

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:

package {
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 thrust:Boolean;
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 TOP_SPEED:Number = 10;
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

Collision Detection and Game Design (0)

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

Water Buffalo Skull Vector

VQ — Wed, 18 Jun 2008 15:43:52 +0000

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

Batik Photoshop Patterns

VQ — Thu, 12 Jun 2008 02:19:46 +0000

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

Realistic Shadow Effects using Filters

Paul — Wed, 11 Jun 2008 15:37:42 +0000

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 class Shadows extends MovieClip {
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 str = new String("ClickPop");
var str2 = new String("Media");
var letter:Shadows;
var newX:Number = 30;
var overLetter:TextField;

for(var i=0; ilength; 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; ilength; 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; iAll.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

Cool Rollover Effects with Filters (6)

A CSS/JavaScript HORIZONTAL Accordion

§ean — Thu, 05 Jun 2008 17:45:41 +0000

Accordions are great, but sometimes a big pain to setup. Mootools, and several other libraries, offer great pre-built accordion systems, but they’ve got their issues. We recently tried using mootools accordion on a client’s website, but we were having a fair amount of browser compatibility problems, so we set out in search for a better solution. The nice people at Switch on the Code wrote a nice tutorial on how to build your own CSS/Javascript accordion. Needless to say, it suited our needs perfectly. Then I thought to myself, wouldn’t it be great if someone made a HORIZONTAL accordion using a similar method.

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:

id="AccordionContainer" class="AccordionContainer">
onclick="runAccordion(1);">
class="AccordionTitle">
Accordion 1>
>
id="Accordion1Content" class="AccordionContent">
I Am Accordion 1.>
onclick="runAccordion(2);">
class="AccordionTitle">
Accordion 2>
>
id="Accordion2Content" class="AccordionContent">
I Am Accordion 2.>
onclick="runAccordion(4);">
class="AccordionTitle">
Accordion 4>
>
id="Accordion4Content" class="AccordionContent">
I Am Accordion 4.>
onclick="runAccordion(5);">
class="AccordionTitle">
Accordion 5>
>
id="Accordion5Content" class="AccordionContent">
I Am Accordion 5.>
>

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.

class="Toggler" onclick="runAccordion(1);"> src="accordion1.png" alt="" />>
id="Content1" class="Content">I Am Accordion 1.>
class="Toggler" onclick="runAccordion(2);"> src="accordion2.png" alt="" />>
id="Content2" class="Content" style="border-right:1px solid #333;">I Am Accordion 2.>

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:

.Toggler
{
   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 ContentWidth = 200;
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.

ClickPopMedia

Free Textures from the UK

Related Posts

A Vector Bird Wing

Other Posts

Collision Detection and Game Design

Related Posts

Free Vector Octopus

Related Posts

Easy Keyboard Controls and Game Design

Related Posts

How To Make A Spraypaint Panel

Related Posts

Water Buffalo Skull Vector

Related Posts

Batik Photoshop Patterns

Related Posts

Realistic Shadow Effects using Filters

Related Posts

A CSS/JavaScript HORIZONTAL Accordion

Related Posts