I have finally finished up my first full Flash Template Website for sale on Activeden, and its called Origins XML Website – Flash and Mobile Website Template and its a Flash XML Website that also comes with a mobile version of the template. All you have to do is update one set of xml files and it completely generates a mobile version of the Flash website for you. Origins is the accumulation of all my best selling files remastered into one website with added functionality and features. This file was 6 months in the making and its really exciting to finally get it live.

Origins Flash Website is deep-linking for added SEO (allowing the user to go to particular pages by direct links), fully XML driven, and modularly built. Create as many pages as you want, and reuse as many modules as you need. From the main logo and footer text, to the main navigation icons, everything can be changed by simply editing the XML settings files, so no Flash knowledge is needed.

The mobile site uses php to gather its content so the preview is hosted on my site, view the Origins Mobile Website Now!

Features

• Fully Generated Mobile Website
• Fully XML Driven
• SWFAddress Deep Linking Menu (Added SEO )
• 9 Page Modules (see examples and images below)
• Simple Page Module
• RocFolio 1 Page Module
• RocFolio 2 Page Module
• jQuery: PrettyPhoto LightBox Page Module (show images or movies, including YouTube, Vimeo, and QuickTime )
• Piecemaker 2 Page Module
• News Feed Ticker Page Module
• Contact Form Page Module
• Simple Link Module
• Loading Swf Page Module
• Full Music Player
• Page Specific Backgrounds Images
• Autostart Page Feature
• Social Links Menu
• PSD File of 48 Icons Ready for Use
• PSD Website Template File
• Detailed help file for installation and customization

Mobile Version Website

At the present time, Flash doesn’t run well on most hand-held devices. Heck, some devices don’t run it at all! To circumnavigate this, I decided to create a mobile version to accompany the Flash Website. It’s completely mobile-friendly and is created from all of the same XML config files used to create the Flash Site. This means there’s no need to update a ton of other files to create the site; Edit only one set of XML files to update both the Flash and Mobile versions of your site! The mobile website uses jQTouch which is a jQuery plugin for mobile web development on the iPhone, iPod Touch, Android, and other forward-thinking devices. View the Demo Here

Customizable Header Area

In the header section you can easily add your own logo image, and you can either display, hide, or just deactivate the music player altogether. All this is controlled through the XML config files.

Customizable Menu Area

In the menu section, you can easily add and remove as many menu items as you need. You can change the icon, text, text color, and text padding. Then easily assign each menu item to a particular module.

Customizable Footer Area

In the footer section you can easily add your own footer text, and include all of your own social media links with the associated icon.

Simple Page Module

The Simple Page Module is exactly that, a simple Page. You can change the image of the page we well as any text in the scrollable HTML text area. The text area supports changes in text size, color, hyper-links and images all formatted through HTML documentation.

About Page Module

The About Page Module is based off one of my best selling files called RocFolio. This module is perfect for an about page, staff page, or for anyone wanting to display their latest featured work. You can either populate the slides with a RSS feed (or any feed type), or use the sample XML file that’s included. If you use a feed, the content automatically updates when a post is made to that feed.

Portfolio Page Module

The Portfolio Page Module is based off my second version of RocFolio. This module is perfect for a portfolio page, feature page, services page, or products page. Similar to the About Page Module, you can either populate the slides with an RSS feed (or any feed type), or use the sample XML file that’s included. If you use a feed, the content automatically updates when a post is made to that feed. Also, this page module comes with three columns of editable text.

Piecemaker 2 Page Module

The Piecemaker 2 Page Module is built off the Piecemaker 2, a free 3D Flash image rotator gallery. This module is perfect for displaying any type of content including images, swf files, and videos. The Piecemaker 2 includes several new features including improved navigation, tooltips, animated shadows, and unlimited effects. The piecemaker module does not work with the cs3 version of the FLA .

Photos Page Module

The Photos Page Module uses the popular jquery lightbox clone called prettyPhoto. This module is perfect for an image gallery or slideshow. Each image gives you the option for an description field as well.

Videos Page Module

The Videos Page Module uses prettyPhoto just like the photos page module. But for this page module, you can add as many youtube, vimeo, or .MOV video files as you want. Each video gives you the option for a description field as well.

News Feed Page Module

The News Feed Page Module is another one of my best selling files called Flash News Feed Ticker and its compatible with all feed types (RSS and ATOM , directions included on how to handle these feed types). This module automatically grabs the first image in each feed post to display, and updates automatically. If you don’t want to use a feed then you can use the news feed sample XML file. You can easily change the colors, size and several other options all through the XML configuration file.

Link Module

The Link Module allows you to make the navigational item a link to anywhere you like.

Contact Page Module

The Contact Page Module allows you to setup a contact page with email validation already included. There are also two HTML text areas included on this module that are editable.

Music Player

The Musicplayer can be easily customized through an XML configuration file and you can change the colors and add as many songs as you like. The music player shows the song name, the artist name, the album name, and supports album art.

A few weeks ago, I finished developing and designing another website called Coronado Cupcakery. The cupcakery, located in Coronado, California has a fun but clean feel to it and the owner, Rosalina, wanted to have a similar look and feel for their website. Rosalina was a great client and I loved designing and developing her site. Some of the things I love about the site are the clean lines, classic text, and lots of color (I kept the background white for a clean look, and so that the colors and pictures would pop off the page). The website includes everything from a flavors page, to an ordering form, to a gallery of some of their most impressive work…. all organized in a fashion that is user friendly and easy to navigate.

Another part of the site I like a lot is the navigation. To create it, I used nettuts How to Build a Lava-Lamp Style Navigation Menu but I edited the files some so that the hover effect didn’t cover the entire menu item, but instead just kept an thick underline underneath the menu item. I really like the effect and I think I might recreate it as a flash menu.

Cya

I have finished working on another freelance website for a client, its called richardgodwin.net, and as you probably guessed it was for a person named Richard Godwin.  Richard is a really talented writer of dark crime fiction and noir,  and is about to publish his book, called ‘Apostle Rising.’  He had two blogs already that he consistently updated, so it was an obvious choice to build his site off of the WordPress Framework. Another reason I built the site using the WordPress framework is because of the awesome admin section it has. It really does do a great job in allowing the client to change the content on the website whenever they want, especially when they don’t have any coding knowledge.

As I worked on the site, Richard hired a graphic designer named Matthew Swann to finalize some graphics for the site. I usually do the graphics as well for the sites I work on, but it was a nice change of pace to have some help and it was really great working with Matthew.

There are a few special things I did for this site, that I want to list off here. There was a great plugin called WordPress.com Stats from their old site, that I implemented into their new site that lets them view their hits and pageviews from the WordPress dashboard. There were some problems initially with it but I fixed it by going into phpMyAdmin and messing with some fields in the SQL database.  For the navigation of the website and blog, they really liked the CSS Horizontal Menus I found on http://www.cssmenumaker.com. So I implemented one of those into the theme, and changed the color around to go with the rest of the site a little better. Another cool item on the site is the Steel Melting Flash Text Effect in the banner. I bought the file from activeden and added it to the site on two different pages. I think it looks really great and it achieved the flashy effect that Richard was wanting for announcing his upcoming book.

The last thing I want to talk about is the new default theme for WordPress called Twenty Ten. I created his blog theme from the Twenty Ten Theme and I just wanted to say that it was really easy to work with and modify, and that it comes with a ton more admin options in the dashboard area that the old default theme was really missing. My hat goes off to the WordPress team as they constantly raise the bar of their product again and again.

Cya

I have finished up another website for a client of mine (my wife), designed for her blog called housemadehome.net. The blog chronicles the renovations and decorating of our house, some recipes, and stories associated with the raising of our family. I worked really closely with her on the design of the site and I think it came out really well. I developed it using the WordPress backend, so she could easily make posts to it and handle the whole site by herself. We focused a lot on search engine optimization and the site has had a really good start so far… she has over 15 followers already. There are tons of home design blogs out there and they are getting bigger all the time. If you are looking for a custom made blog template, contact me so we can discuss the details of the project.

Cya

I have recently just finished working on another freelance website for a company called InVeritas. InVeritas Research & Consulting, Inc., is a national research and consulting firm specializing in strategic communications, political polling and research, government relations, grassroots/grasstops organizing, press relations and message development. This client had a very specific vision in mind about how they wanted their website to look and feel, and it was my job to make that vision come  true.

This website is built on top of a wordpress backend so they can easily make posts or news alerts whenever they want. I used several wordpress plugins in the development of this site. For the menu I used the PixoPoint Menu Plugin which is a really great wordpress menu plugin. This plugin comes with tons of customization options and allows you to easily add your own custom dropdown menu to any WordPress site. At first it was a little difficult to work with  but in the end it did exactly what I needed for it to do. Another plugin I used was the  Redirection Plugin which is used  to manage 301 redirections, keep track of 404 errors, and generally tidy up any loose ends your site may have.  I also used the Exec-PHP plugin to allow me to run any php code thats in posts, pages and text widgets. The final plugin I used was the .html on Pages WordPress plugin, which adds “.html” to the end of all the pages on the site.

I always try to learn something new from any project I undertake, and this one was no exception. The main thing to  realize when building or creating something for a client is that its really important to work with the client and give them exactly what they want, because in the end they are the ones paying for it. It i s hard sometimes because what they want isn’t always the easiest, quickest, or best solution. Its important to tell the client what they need to know to make the best decision though.

I worked with Kinetic Media Solutions again on this project and I enjoyed working with InVeritas as well.

Cya

For the first example, I will show you how to make the fade in jQuery hover effect. Hover over the box below to see the effect.

To do this, first place this jQuery code in the <head></head> section of your html file.

1
2
3
4
5
6
7
8
9
10
11

//the first line gets the latest jquery scripts
<script src="http://code.jquery.com/jquery-latest.js"></script>
//this function is called when the page is ready
<script>
$(document).ready(function() {
        //first hide the div with the id of googlenav
	$("div#googlenav").hide();
        //then when you rollover the specified div fade in the googlenav
	$("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');});
});
</script>

Then add this html code into the <body></body> of your html document

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="googlediv" style="width:500px; height:200px; border:1px solid #ffffff;">
<div id="googlenav">
	<ul>
    <li><a href="#">Web</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Maps</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Shopping</a></li>
    <li><a href="#">Gmail</a></li>
  </ul>
</div>
<div style="margin:0px auto; width:500px; text-align:center;">
<p>&nbsp;</p><p>The rest of the content of the page</p>
</div>
</div>

You can style the content hover you like, I tried to keep all the links inline like google does. Here is my styling, you can add this in the <head></head> section too.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<style type="text/css">
#googlenav {
	padding:0px;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	border-bottom:1px solid #c9d7f1;
	height:26px;
	position:absolute;
	width:500px;
}
#googlenav ul {
	padding:3px 0px;
	margin:0px;
	padding-left:15px;
}
#googlenav ul li{
	display:inline;
	padding:0px 3px;
	margin:0px;
}
</style>

Now google fades in their links and navigation when you roll over the page, not a specific div. So if you wanted it to be exactly like that, you would target the page instead of that particular div. So in your jQuery instead of this:

$("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');});

You would put this:

$(document.body).hover(function(){$("div#googlenav").fadeIn('slow');});

And style accordingly. Now if you want to fade out in jQuery, instead of fadeIn(), you would use the fadeOut() function. And Remember you don’t have to hide the content first, so the jQuery would look like this.

1
2
3
4
5
6
7
8
9

//the first line gets the latest jquery scripts
<script src="http://code.jquery.com/jquery-latest.js"></script>
//this function is called when the page is ready
<script>
$(document).ready(function() {
        //then when you rollover the specified div fade in the googlenav
	$("div#googlediv").hover(function(){$("div#googlenav").fadeOut('slow');});
});
</script>

An example of the fadeOut function is below using the code above.

That’s really about it, if this helps you out please leave a comment.

Cya

1
2
3
4
5

<script type="text/javascript">// <![CDATA[
	if ((navigator.userAgent.indexOf('/iPhone/i') != -1) || (navigator.userAgent.indexOf('/iPod/i') != -1)) {
		document.location = "http://www.scottrockers.com/iphone.html";
	}
// ]]></script>

Add this Javascript inside your <head> tags. and change the document.location to the page you want the user to get redirected to. The reason I have a iPhone version of my website is because my home page is made in Flash and as you know the iPhone can’t display Flash yet. So I created a basic html page that has a div in the body of it that is sized to 300 width by 350 height. And if you put this line of script in the <head> section it will tell Safari that the viewport should be the same size as the iPhone screen. Setting this line of code forces the content to always fit the window.

1

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Now, if someone wants to bookmark your website, they can hit the + sign and then click “Add to Home Screen” and you want to specify what icon to use for the iPhone, then create a 57px by 57px .png formatted image, put it up on your server and put this line of code in to your <head> section as well.

1

<link rel="apple-touch-icon" href="http://www.scottrockers.com/library/images/sriphonelogo.png"/>

Just make sure the href tag is the correct destination to your image. What is cool is that you don’t have to add the corners or shine effect on the webclip because the iPhone will do that for you.

If you want to see all the actual html code, you can just go to scottrockers.com iPhone Version and click view source.

Cya

Here is another useful script that I wanted to write a quick post about. Its called jQuery Cycle Plugin, and its an additional javascript file that basically allows you to create a slideshow very easily and it supports many different types of transition effects. It ‘s dual licensed under the MIT and GPL licenses which is great so you can use it in basically any project. If you don’t want to use Flash this is a really simple way to setup a slideshow that will show in all browsers. Some of the transitions are: scrollup, scrollleft, scrollright, scrolldown, shuffle, and turndown. The images above is an example of it in action, and here is the code to it, really simple.

There are two things you need to add to your <head> section in your html, the css and javascript import lines:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<style type="text/css">
.banner {  
    height:  82px;  
    width:   82px;  
    padding: 0;  
    margin:  0;  
} 
 
.banner img {   
    border:  1px solid #fff;   
    width:  80px; 
    height: 80px; 
    top:  0; 
    left: 0 
} 
.banner img { display: none } //these lines hide all the rest of the pictures on startup 
.banner img.first { display: block } //except the first image
 
</style>

1
2
3
4
5
6
7
8
9
10
11

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.banner').cycle({
			fx: 'scrollLeft' //  transition type, scrollleft
		});
	});
</script>

And here is the image code, just add this anywhere in your <body>, just make sure the class name is the same as what the javascript is looking for:

1
2
3
4
5
6
7

<div class="banner"> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/233158.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/271131.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/216505.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/260178.jpg" width="80" height="80" /> 
    <img src="http://scottrockers.com/blog/wp-content/uploads/2010/02/115908.jpg" width="80" height="80" /> 
</div>

I wanted to take a second to talk about an awesome add-on for firefox: the Web Developer Toolbar. The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It’s a must have for all developers and designers because it saves countless hours of developing and troubleshooting time, and it has tons of really great features. One of those great features is the ability to edit the CSS of a website in real time and see your changes updated on the web page as you type them. Then you can save out the changes you made and update accordingly. This alone can save you tons of time when  sifting through the files on your server searching for the correct CSS file to update, uploading  changes you made to it and then refreshing the browser to see the changes.  Another really nice feature is the one-click validating of your page’s HTML, CSS, and javascript. Instead of going to the W3C Markup Validation Website, and manually copying and pasting the urls into the field. It automatically does it for you, SO TIGHT!!!!! There are several other features of it that are really nice and if you are a designer or developer of websites I highly recommend it.

Cya

Cya

table, table td {
     border: solid 1px #eaeaea;
     /* or whatever color you want, just add the hexadecimal number */
}

Cya