Noob Flash

Archive for the ‘Tutorials’ Category

Search Engine Optimization (SEO) is a hot topic these days. In an ailing economy, free website traffic is becoming much more important and the competition is more fierce than ever! There are many things that you could probably improve about your website that would eventually lead to improved website SEO, but there is one very important thing that is often overlooked.

If your website does not redirect the www and non-www version of your website to the same www or non-www url, you are not maximizing the SEO capabilities of your website. For example, if you visit http://noobflash.com, you will see that the url immediately redirects to http://www.noobflash.com. If this is not done, search engines will consider the www and non-www versions of your website url as two separate websites. As you can imagine, this can damage your SEO efforts greatly! It’s up for debate as to whether www or no-www is best, but most people agree that is really comes down to personal preference. I decided to stick with the traditional www, but many of you may not like that for your website.

Luckily, the Noob is here to help you get out of this mess! I will walk you through two different ways of fixing this issue. Both options can be configured to use either www or no-www.

Option 1 – PHP 301 Redirect
This option will obviously only work if you use PHP, but you could take the same concept and apply it to any programming language. This option also redirects http://www.yourwebsite.com/index.php to http://www.yourwebsite.com/, which is another good idea.

<?php
        // SET THIS TO THE URL THAT YOU WANT TO USE (with or without www)
	$url = 'http://www.yourwebsite.com';

	if ( $_SERVER['REQUEST_URI'] == str_replace('http://' . $_SERVER['HTTP_HOST'], '', $url.'/index.php' )) {
		header('HTTP/1.1 301 Moved Permanently');
		header('Location: '.$url);
		exit();
	}

	if ( strpos($_SERVER['HTTP_HOST'], 'www.') === 0  && strpos($url, 'http://www.') === false ) {
		header('HTTP/1.1 301 Moved Permanently');
		header('Location: http://' . substr($_SERVER['HTTP_HOST'], 4) . $_SERVER['REQUEST_URI']);
		exit();
	} elseif ( strpos($_SERVER['HTTP_HOST'], 'www.') !== 0 && strpos($url, 'http://www.') === 0 ) {
		header('HTTP/1.1 301 Moved Permanently');
		header('Location: http://www.' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
		exit();
	}
?>

Option 2 – .htaccess URL rewrite
This option uses .htaccess to rewrite your website url. Many consider this a better option from a performance standpoint, but I can’t see enough of a difference to say if I agree.

301 Redirect to url with no www
RewriteEngine on

RewriteCond %{HTTP_HOST} ^www.yourwebsite.com$ [NC]
RewriteRule ^(.*)$ http://yourwebsite.com/$1 [R=301,L]

301 Redirect to url with www
RewriteEngine on

RewriteCond %{HTTP_HOST} ^yourwebsite.com$ [NC]
RewriteRule ^(.*)$ http://www.yourwebsite.com/$1 [R=301,L]

If you’re like me, you get tired of seeing those ugly query strings tacked onto your website url. On really nice (and easy) solution for this is to use Apache Mod_Rewrite. This generally only requires adding a few lines to your .htaccess file. When I started trying to create my first SEO friendly URLs, I could not get my website to recognize any of the code in my .htaccess file. Obviously, this is was very frustrating. After a couple of weeks of searching the internet and wondering why my “perfect” code wasn’t working, I realized that my GoDaddy PHP hosting account was being hosted on a Windows server running IIS7. The answer to my problems hit me like a ton of bricks! Windows does not support or use .htaccess files! Once I switched to a Linux server my .htaccess code ran perfectly.

The code below will internally redirect http://www.yoururl.com/location/texas/dallas to http://www.yoururl.com/index.php?state=texas&city=dallas. The SEO friendly URL will be displayed but the page will be executed as if the complete, query string laden url was used.

The [L] at the end of each line tells the server to stop executing the .htaccess code if the previous line was successful.

–

Options +FollowSymLinks
Options -MultiViews
RewriteEngine on

RewriteRule ^location/([a-zA-Z0-9_-]+)/([a-zA-Z0-9_-]+)$ index.php?state=$1&city=$2 [L]
RewriteRule ^location/([a-zA-Z0-9_-]+) index.php?state=$1 [L]

–

For More Apache Mod_Rewrite rules, check out the Apache Rewrite Cheatsheet.

A few day ago, I was doing some CSS styling and ran across something that I thought would be useful.

If you ever want to style multiple HTML input elements separately using CSS, you just need to access the type attribute.

For Example, if I want to set the text color of my text field to white, but I want the text color of my submit button to be black, I would use the following code:

input[type="text"] { color: #FFFFFF; }
input[type="button"] { color: #000000; }

It’s really that simple!

P.S… sorry for the long delay between posts… my wife and I have our second kid on the way so things have gotten very crazy for us!

If you have ever created an array in ActionScript or any other ECMAScript based programming language, creating an Array in JavaScript will be very familiar to you. On the other hand, if you are an array noob, you are certainly not alone. Arrays are a sticking point for many new programmers, but alas, salvation is neigh! Allow me to walk you through the creation of a simple JavaScript array, that, for the most part, can also be used in ActionScript.

What is an Array?
An array, at its simplest, is really nothing more than a collection of items that is assigned as a variable. When an item is added to the array, it is given a number called an index. The item can then be referenced later by calling the array variable along with the index number of the item you want to access. Clear as mud? Great! Let’s see an example.

How do I Create an Array?
My wife is making tacos tonight, so I will use my hunger as inspiration.

<script type="text/javascript"> var ingredients = new Array(); ingredients = ["Beans","Meat","Cheese"]; alert(ingredients); </script>

Awesome, we just created a delicious array!

1. The first step in creating an array is to declare a variable for it. In this case the variable I want to use is ingredients.
2. The second step is to cast the variable as an Array object. Some people would argue that this step isn’t necessary, and they’re correct, but it is a best practice to type cast your variables as often as possible.
3. The third step is to add items to your array. The easiest way to do that is to set your array variable (in this case ingredients) equal to a bracket enclosed, comma delineated list of items. In my case I added three strings to the ingredients array.
4. The final step isn’t really needed, but is allows you to see what your array looks like at this point. You will see all three comma delineated strings, Beans, Meat, and Cheese in the alert box. This is normal and just means that the array contains all three of those items.

Now, say you’re a meatetarian… How do you only select the one item of the array that you want? It’s actually as easy as grabbing the meat spoon!… so to speak. You just need to call the name of the array variable with the index of the item you want added in brackets (E.g: ingredients[1]).

There is one important thing you should know about indexes in ECMAScript based languages: counting always starts at 0… I don’t know why the rule exists, I just follow it. The first item in your array will always be index 0 (ingredients[0] = Beans in this case), followed by 1, 2, 3 and so on.

<script type="text/javascript"> var ingredients = new Array(); ingredients = ["Beans","Meat","Cheese"]; alert(ingredients[1]); </script>

This should be enough to help you get started working with Arrays. Check back soon for more on Arrays including some Intermediate and Advanced Array techniques.

In this tutorial I will explain how to make a simple flash button. This will be part one of the Flash button series.

To complete this tutorial, you must have Flash 8 installed. If you do not have Flash 8, you can download the 30 day trial.

Open flash and create a new document 250px by 250px. Select the Rectangle tool and draw a rectangle about 200px wide by 50px tall.

After creating the rectangle, select it by double-clicking the rectangle and select Modify > Convert to symbol from the toolbar (Or press F8) to convert the rectangle to a symbol. Name your symbol button_mc.

Once you have created your symbol, click it and select Window > Actions from the toolbar (Or press F9) to open your Actions code window. In the Actions panel, with your symbol selected, type the following code:

on (release) {
	getURL("http://www.noobflash.com");
}

Select Control > Test Movie from the toolbar (Or press CTRL+Enter) to test your Flash movie. Click your button and you should be taken to the Noob Flash homepage.

That’s it! Pretty easy, huh? In the next lesson we will learn how to create this same button using nothing but ActionScript.

If you want you can download the Flash 8 Source File.