1 The Plus Project

As you may know we have some pretty big plans for these Tuts+ sites. While today they are humble little tutorial blogs, we’ve thought for some time that it would be cool to build an entire platform for education. We’re going to call that platform Plus. You’ll know Plus content as our premium content, but no longer.
Our premium content is now ‘Premium’ (go figure!) and Plus is the brand for the educational platform we’re building, which, just like Psdtuts+, will be completely free for the most part.

With Tuts+ well established now, we’ve finally begun work on the project! We’ve acquired the domain Plus.org which will be the home of the new platform (yay for our first four letter domain!) We’ve also brought over our resident code genius Ryan Allen (who built our ActiveDen platform all by himself back in 2006) to team up with Tuts+ developer extraordinaire Fred Wu and kick ass front-end guru Derek Herman. And Skellie and I have been busy spec’ing out the plans for the new site, and it’s pretty, damn cool if I do say so myself!

Right now the Tuts+ sites are fairly passive, but we’d like to get the whole community involved in writing, teaching, answering questions and generally learning. The new Plus.org platform promises to incorporate all that plus some nifty ideas we’ve taken from gaming to come together into a social education platform.

It’s going to take a long time and we’re going to roll it all out in pieces over the next 2 years. We’re super excited about it all, and I hope I’ll have more updates in the coming months!

2 Creative Sessions and Mobiletuts+

While Plus.org will take a long time, we do have some new goodies coming much sooner including Creative Sessions which is being built now, and also Mobiletuts+ which will be all about mobile development!

3 Server Update

About a week and a half ago we had some major problems with our servers. I’m happy to say that we’ve now completely resolved these issues by moving hosts and reengineering our hosting setup completely from scratch. The new setup is much quicker and has a much greater capacity for growth, so fingers crossed, that will be the last server outage for a long time to come!

4 The Redesign

The new theme has a few neat features you may want to check out including:

• Basix!
  While Tuts+ has always been known for intermediate to advanced level content, we’ve been thinking it’d be good to separate out tutorials and articles better suited to people just getting started. So we’ve created the Basix tag for quick browsing. You’ll find it in the top menu, and expect to see more Basix content soon as we beef up our library of novice-friendly content.
• Easy access to Videos, Tips and Premium Posts
  We’ve also started tagging videos, tips and Premium membership posts so that along with Basix content you can quickly find what you’re after. We’re generally going to be working to clean up our category/tagging across the network in the coming months to get it more standardized.
• Tutorial Details on Posts
  We’re also going to start standardizing all tutorials to have a "Tutorial Details" section at the top with difficulty and other pertinent details. Eventually we’ll get all the archives updated … but with over 2000 tutorials, that will take a while!
• Bigger, more readable content area
  We’ve expanded the site to be optimized for bigger 1280px wide screens, with a bit of JavaScript to resize for smaller resolutions. This has given us the space to clean up the content area to be a bit bigger and more readable generally.
• Latest Creattica content for inspiration
  We’ve also started porting over the latest Creattica content into our sidebars. There’s actually a redesign of Creattica coming in the next few weeks and we’ll be expanding the gallery to cover even more types of inspiration. The new sidebar widget will give even more exposure to those talented creatives on Creattica!
• General UI Improvements
  Most of the improvements on the new design are small, subtle improvements such as a reduction in the number of clicks needed to browse categories, a clearer search field, faster loading pages and generally cleaner, more optimized code.

One change that we have also made is to remove the community link feed. Over the years this was a great way to get exposure to community links, but unfortunately was also home to a lot of spam. So with this iteration we’ve left it behind.

Also at the moment sites with Flickr groups don’t have it showing, but don’t worry that’ll be back. There’s just a problem with our Flickr plugin at the moment!!

There are still some more tweaks to do to the new design and a lot of post formatting to do to get our archives matching up with the new theme. But for all intents and purposes the new theme is now alive and well! Enjoy!

For the last couple of weeks Michael’s been working alongside me and is doing a fantastic job, confirming the adage that two loaves are better than one..

Meet Michael Williams

An Englishman (a gentleman?), a freelancer, a cook, but crucially; a Flash developer. Michael has been using Flash since version 5, though began seriously developing with it from CS3 onwards. Before that his programming experience lay within the server-side realms of ASP and C#, but these days he enjoys nothing more than developing Flash Games whilst teaching others how to do the same. He believes that games are a strong context for learning programming and maths.

You can visit his blog to dive into his AS3 tuts for beginners, see his work on flashgamelicense.com and follow his ramblings on twitter (@MichaelJW). You can also expect more great tutorials from him on Activetuts+!

The Pros: Graphics

Animation:

Flash is a great animation tool, you can use tweens and/or frame by frame animation to create animations. These days jQuery can create some nifty animations (click on the links for transitions), but I doubt that jQuery would be capable of creating a transition similar to the ones found on Davi-T’s website.

3D:

Since the advent of Flash CS4 it is possible to work in 3D (well, sort of) the 3D in Flash CS4 allows you to move objects around in 3D space, however these objects won’t have depth. Luckily there are several ActionScript libraries which are capable of creating some amazing 3D graphics. Just look at the Papervision3D site. There are of course other libraries than Papervision3D, like Away3D and FIVe3D.

(Web)Camera and Microphone interaction:

With Flash it’s not that difficult to access the webcam and/or microphone. If we’d want to use either of those, Flash would be the easiest (online) solution.

Browser consistency

If you have ever developed an HTML / CSS site, you have probably encountered browser inconsistencies. Luckily Flash sites don’t have any inconsistencies throughout browsers, there are actually only two things necessary to get a Flash site working. The browser must have the (correct) Flash Player Plugin installed and ideally JavaScript should be enabled (actually JavaScript is not necessary to get Flash working, however JavaScript is often used in combination with Flash, like SWFObject and SWFAddress).

So is this is a big problem? Not really. Adobe states on their site that content for Flash Player reaches 99% of internet-enabled desktops. And W3Schools states that in January 2008 only 5% had JavaScript disabled. Over the years this amount has been decreasing consistently. It’s safe to say that a vast majority of users will be able to use your Flash site, and we’ll discuss later how to make your site usable for people without the Flash Player Plugin and/or JavaScript.

Luckily there’s a solution to this, namely SWFObject. SWFObject is a JavaScript script which is able to display an alternative content to people who don’t have the (correct) Flash Player plugin, we’ll discuss SWFObject more thoroughly during the SEO part of this article.

The cons: Browser Inconsistency

Ok, sorry guys, I haven’t mentioned one small browser inconsistency. Because of a patent ruling, plug-ins which are loaded by the use of <embed>, <applet> and/or <object> tags are only interactive after the user clicks on them. Now this actually only seems to happen in Internet Explorer, meaning that in IE your Flash site won’t be able to respond to the user before it has been activated.

Again SWFObject can help us remove this click-to-activate behavior. By simply embedding a Flash movie with SWFObject, the click to activate behavior disappears. On Kirupa there’s a great tutorial explaining how to use SWFObject to solve the embedding problem.

Content Management

With any site that you run or own, you’ll want the freedom to manage the content within it. The most important thing is that you go dynamic; load your content externally so you’re free to change it as often as is necessary. Use static text fields only if you’re sure you’ll never change the text inside those fields.

It’s very common to store your content in an XML file, then within your Flash site you’ll load this XML file and display its contents.

Here an example, we have our XML file named content.xml:

<root>
	<bio>
		Hi there my name's Daniel.
	</bio>
</root>

Then we could access its contents inside Flash with a script like the following:

//create our text field
var bio_text:TextField = new TextField();
bio_text.width=400;
bio_text.height=400;
addChild(bio_text);

//our request
var request:URLRequest=new URLRequest('content.xml');

//load our request
var loader:URLLoader=new URLLoader(request);

//when loader has finished loading, call the function displayContent
loader.addEventListener(Event.COMPLETE, displayContent);

function displayContent(event:Event) {
	//store the data of the loader in a variable named xml
	var xml:XML=new XML(event.target.data);
	var xmlList:XMLList = new XMLList(xml);

	//change the text of bio_text to what's inside the <bio> tags
	bio_text.text=xml.bio;
}

Now that our content is stored externally (not inside our Flash site), it’s easier to manage it.

Luckily there are of course Content Management Systems (CMS) specially built for Flash, which make content management a lot easier. On Designm.ag there’s a good article to read, 15 of the Most Promising Flash CMS Solutions.

SEO

Before we even start discussing anything about SEO, it’s important to know how search engines work. Little programs “crawl” over the web in search of content which can be indexed to a search engine. These programs are called bots, spiders, ants and probably something else too.

These bots will index the HTML content of a page, though (here comes the problem) Flash is simply embedded in the HTML of a page, so the search engine bot has no idea what’s inside it. If we want search engines to index our site, we need to point them to HTML content which it can index.

So now we really can start talking about SEO, what is SEO actually? Well Wikipedia succeeds in explaining it spot on:

Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via “natural” or un-paid (“organic” or “algorithmic”) search results.

Basically we have one problem which we’re trying to solve:

“How can I make the content inside my Flash site accessible to search engines?”

Luckily there are several solutions. Let’s go through them one by one:

SWFObject

SWFObject is a JavaScript script which makes it possible to display an alternative content to the user, if he or she has no (or an outdated) Flash Player Plugin. And if the user doesn’t have JavaScript, it degrades gracefully. SWFObject has three advantages:

1. Search engine bots will read the alternative content. This can help make your Flash site search engine friendly.
2. Not only bots will read the alternative content, people who don’t have the (correct) Flash Player Plugin will also see it.
3. As already mentioned in the Graphics section, SWFObject removes the click to activate box in Internet Explorer.

However SWFObject has one small problem, it will display an alternative content for the whole Flash movie, of course it is a bit too much to display all the content of our flash site on one page as alternative content. Ideally we would want to display the alternative for the specific page the bot or user is visiting.

Now I haven’t found a well documented solution, however I’ve decided to use a combination of Flash detection and SWFAddress. Let me first explain what SWFAddress is.

SWFAddress

George Kendros explains in his tutorial Build a Simple Website Template Using SWFAddress spot on what SWFAddress does:

SWFAddress is a Javascript/ActionScript library which gives you the power to change the browser’s URL, add entries to its history list and fire off ActionScript events when the URL changes. It also allows search engines to find specific content in your site.

With SWFAddress we can utilize so-called deep linking. A deep link is a link which points to a specific page instead of the home page. This means we can use SWFAddress to link to a specific page inside our Flash site.

So what are we going to do?

First we’re going to build an HTML site, this HTML site will be for bots and users who can’t view our Flash site. We’ll also use a Flash detection script, which will redirect the user to the Flash site, if the user has the correct Flash Player Plugin. The redirecting will use deep linking, thus we can redirect the user to the same page, but within the Flash site.

How do we detect if the user has the correct Flash Player Plugin installed? Well there’s an article on Kirupa named Flash Detection Scripts. There you’ll find a Flash detection script, which I’ve edited a bit:

function redirect(version, flash_url){
	var MM_contentVersion = version;
	var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
	if ( plugin ) {
			var words = navigator.plugins["Shockwave Flash"].description.split(" ");
		    for (var i = 0; i < words.length; ++i)
		    {
			if (isNaN(parseInt(words[i])))
			continue;
			var MM_PluginVersion = words[i];
		    }
		var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;
	}
	else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
	   && (navigator.appVersion.indexOf("Win") != -1)) {
		document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag
		document.write('on error resume next \n');
		document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
		document.write('</SCR' + 'IPT\> \n');
	}
	if ( MM_FlashCanPlay ) {
		window.location.replace(flash_url);
	} else{
		//nothing needs to be done, stay at this page
	}
}

In our HTML page we can now call with JavaScript the function redirect, which will only need two parameters, namely the Flash Player version, and the URL to the page it must redirect to if the user has the correct Flash Player Plugin. Let’s say we have the following HTML Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About</title>
<meta http-equiv="Content-Type" content="text/html; utf-8"/>
<script type="text/javascript" src="flash detection.js"></script>
<script type="text/javascript">
redirect(10, 'http://www.example.com/#/about');
</script>
</head>

<body>
<!-- the about content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</body>
</html>

We’ll focus on the 8th line. What will happen is the following; if the user has Flash Player 10, then it’ll redirect the user to http://www.example.com/#/about and afterwards SWFAddress will use deep linking to display the correct page, inside the Flash site.

Development

Creating a Flash website is tough, for multiple reasons. First you’ll need to spend a lot of time coding everything, we need to write code for almost everything. We need to code dynamic graphics, we need to code the layout, keeping things positioned where we want them. We need to code and/or animate transitions between the pages. We must load content and also display it. Creating a Flash site takes a lot of time and it’s complicated, do not take it lightly.

Luckily for us there are several frameworks which can make developing a Flash site easier. These frameworks might differ in what they offer, but each framework can help lighten your workload in a specific area.

Here are some frameworks, which might help you during development:

• Gaia
• Flash Camouflage
• PureMVC Framework

Should I have a Flash site?

I truly love Flash sites, when made properly they just look so incredibly beautiful, however there is one very important thing to remember:

Sites are about the content they communicate to the user, Flash just provides one way to display that content.

What precisely do I mean with this? Well a blog wants people to read the posts, so its design must work in a way which allows the user to easily read a post. Flash is not needed for this.

However if you’re going to create a photography portfolio site, then you want to show the the content (images) in an easy and simple way to the user. Clicking on links and waiting for the images to load is not a great user experience. Flash is a possibility to provide the content in a more intuitive way. Lesse Pedersen’s site uses a great navigation to serve the content (images) to the user.

There is also a great post on the site Wake Up Later named 6 Places that Flash Does Not Belong which I believe you all should read.

Thank you

I’ve once again had a great time writing for Activetuts+, I hope you’ve learnt something and why not join the discussion? Leave a comment, and you can of course find me on Twitter, @DanielApt.

There’s further significance to this giveaway; today’s tut author? None other than Zevan Rosser himself!

What Do I Have To Do?

I’m afraid the draw has already taken place! Congratulations to @chrisangle, @Superdwayne & @merovingian! Nevermind if you weren’t one of the lucky three, keep following @activetuts and you’ll hear of plenty more giveaways soon