Development

InVeritas Website

Thursday, May 13th, 2010

inveritas-website

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

Flash WordPress Template called RocFolio 2

Wednesday, May 5th, 2010

flash-wordpress-template

I have just finished my second website template, it’s a Flash WordPress Template called RocFolio 2.  This Flash WordPress Template is perfect as a portfolio or if you want to display your latest featured work in a great way. If you use wordpress, then it automatically updates itself by getting the information from your wordpress site after you make new posts. If you don’t have a wordpress blog, a sample XML file is included that you can use. This template is very easy to use, easy to setup, and easy to customize all through XML . RocFolio 2 comes with a help file and 5 different themes. The different flash themes include a Dark, Light, Bokeh, Starfield, and Two-Tone version, or you can customize the look and feel of it very easily. Also, each templates include  a contact form with error checking, and a muic player with tons of features. This Flash WordPress Template includes navigation for going between multiple Feeds (or multiple sample xml files) or external links, and another navigational menu  that can be used as social media menu that has a special random letter hover effect. Like I have said before, if you use wordpress then it automically updates itself through the RSS feed of the site, and then it automatically grabs the first image in the post to display. This template can be customizable through 4 simple XML files, uses tweener for smooth transitions, and has a 3 column layout layout with headers that have the ability to add an image, use text, or both. There are tons of other features and options, and I hope you enjoy it.

RocFolio 2 is the second version of one of my best selling items on ActiveDen.net.  First first version, RocFolio, is more geared towards being a Flash and WordPress Portfolio Template, because it can only take in a single RSS Feed, unlike RocFolio 2 where you can go between multiple rss feeds or wordpress categories.  Below is a preview image of RocFolio. It its not fully customizable by XML like RocFolio 2 is but its still really easy to use and setup through  Flash.

flash-and-wordpress-portfolio-template

Cya

Fade In and Fade Out in jQuery

Tuesday, April 27th, 2010

I have been working a lot more with jQuery lately, so I thought I would show you how to do the simple fade in or fade out jQuery hover effect that occurs to the navigation when you go to the Google homepage. You know the one that I am talking about, its occurs when your mouse goes over the page of the google homepage, all the navigation at the top appears.

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.

 

The rest of the content of the page

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.

 

The rest of the content of the page

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

Cya

Loading Multiple XML Files in Flash

Wednesday, April 21st, 2010

While working on my second version of RocFolio, I came across a few errors while trying to load multiple xml files in Flash AS3. When loading the files sometimes Flash would randomly put additional characters at the end of my xml file giving me parsing errors. So I had to figure out a way to cut those out, and I’ll try to explain real quick what I did.

So to load your XML you have to create your load and request variables and then you should create a few event listeners for progress and complete events, like this:

1
2
3
4
5
6
var loader:URLLoader = new URLLoader();
var requestURL:URLRequest = new URLRequest(xmlfilename.xml);
 
//create progress and complete event listeners for the loader, and load the urlrequest
loader.addEventListener(ProgressEvent.PROGRESS, getBytesLoop);
loader.addEventListener(Event.COMPLETE, loadXML);

Now in your loadXML function all you have to do is figure out where the xml file actually ends, and then index that spot and then cut the rest of the string out with the substring() command. Here is how you do that.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//function loadxml loads the xml and handles assigning to places
function loadXML(e:Event):void {
 
	var dataString:String = e.target.data;
	var finalString:String = "";
	var endofString:uint;
 
        //find out where the end of the xml file is, however your set it up it should be the last closing tag, this one is </settings>
	endofString = dataString.indexOf("</settings>", 0);
 
	//cut out the good part of the xml using substring, then use 0 as your starting point to where you got your endOfString
        //make sure to add whatever amount you need to be at the end of the your last closing tag, </settings> has 11 characters in it so +11
	finalString = dataString.substring(0, endofString+11);
 
	//then assign the finalstring to your XML variable
	try {
		var theXML:XML = new XML(finalString);
	} catch (e:TypeError) {
		//loader.load(requestURL);
		trace("A TypeError has occurred : \r\t" + e);
	}
 
//then go on with setting up your XMLLists so you can access the data how you want
}

So hopefully this helps those out there that are getting weird parsing errors when trying to load multiple XML files. I know I tried finding the solution out on the web and couldn’t so that’s why I wrote this, if it helps you out please leave a comment.

Cya

Flash Horizontal Menu with Graphics and Random Letters Hover Effect

Tuesday, April 20th, 2010

I have just uploaded another file to ActiveDen.net for sale. Its a flash horizontal menu and its great for any site or flash project. It can be used as the navigation on any website and is super easy to use and setup. The main function of this menu allows you to add graphics and text with your links. If you want to use it in your flash file you can just drag and drop it, or if you don’t know Flash and you are linking to several webpages, use the provided swf and XML file and you don’t even have to open up Flash, all you do is just edit the simple XML file. Some other features include that you can easily change the width and height (and a special javascript function handles the resizing in the browser). Also, you can easily change the font color, the hover color, the font size, font type, you can easily position the text, and change the space between items and navigation padding on the left to easily center it. It handles most html tags for even more customization. You can add as many links as you want. To view the file just click the image above.

Cya