The biggest project I have ever worked on has finally come to an end and the 2009 – 2010 ARMADA SKIS website has launched its way into the new season with a fresh new look and feel to keep ARMADA in the forefront of the ski industry.

I apologize for being away so long and neglecting my blog for the last few months but as you can see, I have a good reason. You can check out the site at: armadaskis.com.

Thanks to Mike Cummings  for all the help, especially in the flash department!

P.S. Full iPhone version of the site coming soon!

If you havent seen the movie Flash Gordon…. You haven’t lived, and I suggest that you watch this video clip first before you read this tutorial.

http://www.youtube.com/watch?v=gNIVpMXHqlk

Alright, now that we have the right mind set we can talk flash. In this tut we covered how to create a dynamic shell/website with AS2.0 and load external swf’s for our content. This way our main flash file that gets loaded by the user will be lightweight and load lighting fast.

Then we will embed our flash movie using the swfobject method, which is pretty much the best and only way to embed flash content.

First and foremost lets do some layer orgnization in our main.fla, like so:

Now for the background/bg layer go ahead and make any bg you like or import an image. For the content, we are going to make an empty moviclip and give it an instance name of container. So you can draw a box at whatever dimensions you like, make it a movie clip, and delete the box u made inside the mc. So it is now empty, and there are several different ways to make empty mc’s but this to me seems pretty quick and easy so we’ll do it this way. Then place the empty mc wherever you like, maybe somewhere in the middle.

As for the nav, we are NOT going to be making button symbols! We are going to first make a text field and type in the word button. Make it a dynamic text field, embed characters, and give this text field an instance name of “txt”. Now we can make this a movieclip and give it an instance name of “b1″, or whatever you like.

Next we are going to make copies of this mc instance by holding “option” while clicking and dragging, or you can simply copy and paste. Lets do it three times for three buttons.

and these will all have different instance names, b1, b2, b3, this way we can control them seperately.

So the reason we made them all say the same thing as well as make them dynamic test fields is so that we can populate the real names of the buttons dynamically.

So if you’re wondering about rollovers, these are easily implemented as well. However, this tut is focused on creating a dynamic shell/site so I’m not going to explain that here, but you can download the source files and see how I like to do my rollovers.

Next we are going to create our onRelease functions and load our external swf’s,but before we get to our code lets make our external swf’s. Create the fla’s and name them accordingly to our button names, in this case we have “home.fla, about.fla, and contact.fla”. After you made your files simply draw some objects (i.e. square, circle, triangle, star) on the stage so we have something visual to display for our content.

Ok now we go to the code:

As you can see we have created an onRelease function for our first button, which is the “home” button with an instance name of “b1″. Within the onRelease function you can see that we have container.loadMovie (“home.swf”); in which loads our external swf, “home.swf”. All of the other repetitive code that you see is for our active states and disables our home button after it is clicked, if we do not disable it then our external swf will reload if we click it again after we have already landed on that page, and we definitely do not want that. So we have to do this for every onRelease function for all of our buttons, which definitely gets repetitive. Also, we have to re-enable the button when a different button is clicked, so we make b1 true within the b2 and b3 onRelease functions. Hope that makes sense, if not:

Ok so now that we have created our onRelease functions with our active state code and button enabling, lets finish off by putting the rest of our loadMovie calls within our onRelease functions like you see above.

Publish your flash movie and test it!

If anything is confusing to you and my explanations on how to do this doesn’t make any sense, go ahead and download the source files here:

source files (.zip)

and hopefully they will help to make more sense of all this. However, if your struggling on following along I suggest you take a break and watch the video below first, if you didn’t watch it at the beginning of the tutorial. Then come back, I promise it will help!

Oh I almost forgot about the swfobject embed! Visit this site (http://blog.deconcept.com/swfobject/) and it will show you how to embed your flash content in a html file. Or simply download the files and you will see how it is done.

www.youtube.com/watch?v=gNIVpMXHqlk

Just cus I love this song and Richard D. James “aka” Aphex Twin is a pioneer. Also, this video is cool as hell.

The goal is to dynamically load specific elements of your web page from an external php file, like the header, navigation, content, and footer. This way if you are working on a somewhat large project it is much easier to manage. When editing things like the header for example, we would only have to edit one file rather than go to each individual file/page to make a simple change within the header.

First, you want to create the php files (index.php, header.php, etc.) then you want to build your file/folder structure as follows:

• inside the includes folder:

-header.php

-navigation.php

-intro.php (can be named whatever as this will be a content file)

-footer.php

• outside of the includes folder:

-index.php

This is a basic folder structure for this method but is not limited to this way only. However, it is a common way to set this up.

Next go to your index.php file and within the body tags use this code to include your page elements, which then will create your template:

<?

php include (“header.php”);

php include (“navigation.php”);

php include (“footer.php”);

?>

This will basically create the template but without any content, but a simple way of including our first content file (intro.php in this case) would be:

<?

php include (“header.php”);

php include (“navigation.php”);

php include (“intro.php”);   (Or if you wanted you can simply put html content if prefered)

php include (“footer.php”);

?>

But our goal is to dynamically load the content, so the structure within the index and in between the navigation and footer includes would be as follows:

// 1. Define an array of allowed $_GET values:
$pass = array(‘intro’,'bluetruck’,'redhouse’,'brownbear’);  //The arrays are the id names of the content pages

// 2. If the page is allowed, include it:
if (in_array($_GET['id'], $pass)) {
include ($_SERVER['DOCUMENT_ROOT'] . ‘/includes/’ . $_GET['id'] . ‘.php’); //*note, the directory path will need to be changed accordingly as to how you place the files on your server.
}

// 3. If there is no $_GET['id'] defined, then serve the homepage:
elseif (!isset($_GET['id'])) {
include ($_SERVER['DOCUMENT_ROOT'] . ‘/includes/intro.php’); //*note, the directory path will need to be changed accordingly as to how you place the files on your server.
}

// 4. If the page is not allowed, send them to an error page:
else {
// This sends the 404 header:
header(“HTTP/1.0 404 Not Found”);
// This includes the error page:
include ($_SERVER['DOCUMENT_ROOT'] . ‘/includes/error.php’); //*note, the directory path will need to be changed accordingly as to how you place the files on your server.
}

Lastly, we need to add the id’s to our navigation like so:

<ul>
<li><a href=”index.php?id=intro” title=”Page intro”>Intro</a></li>
<li><a href=”index.php?id=bluetruck” title=”Blue Truck”>Blue Truck</a></li>
<li><a href=”index.php?id=redhouse” title=”Red House”>Red House</a></li>
<li><a href=”index.php?id=brownbear” title=”Brown Bear”>Brown Bear</a></li>
</ul>

As you can see the id’s are what populate the array in the previous step. So now, make sure the directory path for your include php files is correct, upload to  the server and hopefully it works. I can’t stress enough how important the directory path is, if you see warning messages or errors where the content is supposed to go then you will know that your ath is incorrect.

Here are the files for download to get a better look:

php_includes.zip

The grafitti artist, Space Invader, recently made an invasion right near my house in Denver.

So today we started off after the installation process from last week and covered more on the admin and customizing your theme. Added new pages, used the more button within the post editor to create excerpts (read more link), and how to use widgets in our sidebar.

For adding new pages you want to do this by going in your admin and under the pages section you will see the add new button. After clicking add new simply fill in the title and add content for the page just like you do for a post. Then notice on the right hand side of the editor you can order the page within your navigation as well as make it the parent page if desired.

Now for creating excerpts or including a read more button so you don’t have the entire post/article visible on your page. While creating your new post in the post editor all you have to do is switch to the HTML view, notice the visual and html tabs on the top right of the editor. Once in the html view you will see a different set of options at the top, notice the more button. But before you click it make sure you put your cursor exactly where you want the “Read more” button to appear within your article. Ok now you can click the more button. Publish or preview and you will see it in action, if it is not working make sure your theme contains the single.php file, this is the file/page that will display your full article by itself on a single page.

Lastly, the widgets…

First thing’s first, make sure your theme is widgified! or widget ready. If it isn’t I would either look for one that is or go through the explanation on how to make your theme widget ready in the wordpress.org site.

Now under the “appearance” section within the admin you will see “widgets”, go there and if you are widgified then you will see a list of items on the left, these are your widgets, and these items get placed into your sidebar. *Note, you can also find more widget plugins for more/other advanced features.

So to activate any widgets you desire to have in your sidebar click the add button and it will be added to the right column on that page, this shows you which widgets you have activated in your sidebar. Now if you want to reorder them simply click and drag the blue bar/widget to the desired stack order. Also, notice the edit button, there you can change settings etc. Once you are done, click save changes and that’s it, simple right!

The more you work with wordpress the more you will see how powerful and easy it is to customize your theme/site.

Hope you had as much fun as I did. See you next week!

www.youtube.com/watch?v=y2KIxMQro-w

Today we covered the basics of installing it and briefly browsed through the admin. The first step is to get hosting, for those who do not have hosting I recommend using bluhost, hostgator, mediatemple or lunarpages. These are all great hosting companies that use ‘cPanel’ for the control panel of your server. By using cPanel you get the luxury of having wordpress and other great tools like joomla, mambo, and droopal as an easy three step install. In many other cases you have to do a manual install which can be troublesome and time consuming, where as using cPanel it can take up to 5 minutes at the most to install.

The next step is to find yourself a nice theme, after the installation process you will notice that your site/blog comes with a default theme that you might not prefer to keep. You can find themes all over the Internet on sites like smashingmagazine.com or on the wordpress.org site itself. Doing a simple google search for wordpress themes will give you a large amount of resources to find good themes that are free and easy to install. Now if you plan to re-skin or redesign your theme I suggest to simply find a theme that has the same basic layout as your planned or sought out design that you want to achieve in the end. For customizing themes there are plenty of tutorials out there that show you great methods of doing this. I briefly explained how to use firebug for firefox and the theme editor under the appearance section within the wordpress admin to edit the css and html markup to fully customize your theme.

Once you get familiar with customizing your theme and learn the admin area you will learn what is possible with wordpress. Next week we will continue covering the basics in part 2 of this tutorial and I will explain more on customizing your theme and turning it into a website from a blog formatted type of site.

Here for the tutorial files for download. tut2.zip

Other good resources for learning how to build css dropdown menus:

-Quickmenu/opencube.com (Highly recommended but costs$)
-noupe.com

Today we covered “How-To-Build an HTML/CSS Framework” that will play nicely with IE browsers using conditional hacks. We covered the basics of using div’s, span’s and a brief overview of the grid model.

Download the tutorial assets (tut1.zip)

Provided Resources (Weekly resources/links)
- CSS Layout Gala
- CSStricks.com
- Smashingmagazine.com/Smashingapps.com
- Nettuts.com (Envato Network)
- Framework Templates (Blueprint, 960)
- browsershots.org
- W3C Validation
- Multiple IE’s