Design « Scott Rockers' Blog - Website Designer and Developer, Flash, Wordpress, jQuery, and Other Scripts

Design

Origins XML Website – Flash and Mobile Website Template

Monday, April 18th, 2011

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.

Tags: Actionscript 3, ActiveDen, CSS, Design, Development, Flash, Mobile Website, Origins, SEO
Posted in Sellable Items | No Comments »

Coronado Cupcakery Website

Thursday, February 10th, 2011

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

Tags: CSS, Design, Development, html, jQuery
Posted in Freelance Projects | No Comments »

Richard Godwin Website

Thursday, October 14th, 2010

Richard Godwin Blog - Welcome to the Slaughterhouse

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

Tags: CSS, Design, Development, Flash, html, Wordpress
Posted in Freelance Projects | No Comments »

Flash News Feed Ticker

Tuesday, September 21st, 2010

I have just finished working on another file for sale on ActiveDen and its a Flash News Feed Ticker. This is the second version of my News Feed Ticker, and the biggest difference is that I implemented an XML file to style it and for customization reasons, and it has a lot of improvements including:

It’s compatible with all feed types (RSS and ATOM )
This ticker automatically grabs the first image in each feed post to display
It updates automatically
It is completely customizable through an XML file so there is no need to even open up Flash to edit it
Completely re-sizable so that it fits to any size container
Easy to change the number of posts you want displayed

This news feed ticker, or reader as some people call them, includes three different skins or themes: a dark, a light, and a social media skin. Also if you want to customize the look and feel of it, you can do this very easily by editing the colors in the XML settings file or by editing the symbols in the Flash file’s library. Also there is an in-depth help file included.

Cya

Tags: Actionscript 3, ActiveDen, Design, Development, feed reader, Flash, news ticker
Posted in Sellable Items | No Comments »

The New DataPath Website

Friday, August 20th, 2010

First off, sorry I haven’t posted in a while, I have been super busy at work. Speaking of work, I am currently employed at a company called DataPath, Inc. in Little Rock, AR as a “Marketing and Web Developer” and I love it. About 5 months ago, I accepted a new project of redesigning and developing the company website, while integrating it with what was there already which included a backend CMS and SQL database. This was a huge undertaking because it was originally developed in 1997 in dirty ASP.

This was very exciting for me because it was the first big project I undertook at the company, and it allowed me to show off my skills and worth (plus I could learn a lot along the way). Long story short, I got a redesign approved and started hacking away at developing.

Some of the special features I integrated or developed into the new site include:

a new navigation system, which include the main drop down navigation as well as a side accordian-like structure navigation (all programmed in javascript)
a new overall design with consistency and flow, because before the site was very unorganized and sloppy
bookmarks, for increased user friendliness to navigation the site
Flash based graphics and advertisements, this was huge because as you know I love Flash

Here are some before and after pictures of the site, click on them to view a larger image (sorry some of them might be a little fuzzy but I had to resize them down to fit a 800 x 600 dimension).