PHP
Sony Playstation 3 Launch
by Scott King on Oct.29, 2009, under CSS, Flash, PHP
Today Sony launched their new Playstation 3 web site which I was responisble for creating. I built this for some of the talented people over at Tequila, design by Craig Brooks, downloadable widget by Danny McGillick.
This site presented a few unique challenges. First of all it was to feature a pseudo-3D transition for the load screen but was asked not to use an propitiatory 3D software such as Papervision. The next challenge was to create a flowing navigational menu that is fed from a dynamic XML feed with random positioning of the nav items. The site also needed to feature a “Favorites” system that allowed user to add their favorites sites to a “bookmark” style menu on the site, however due to technical restraints I was not to use a database, this meant storing the “Favorites” in browser cookies and writing a quick interface to access the cookies. Finally the site was built on top of the Kohana PHP framework and an alternate HTML only version developed by the brilliant Luke Schreur. The site features 9 different “Skins”, refresh on the landing page to get a new random skin.
Head on over to http://www.playstation3.com.au to check it out.
Part 3. Add scrollbars for small browser windows
by Scott King on May.22, 2009, under ActionScript, Flash, PHP, SEO
Dynamic SEO tags for your Flash site using PHP
For this step, we’re going to use swfforcesize, a small script which will do most of the ground work for us.
Firstly download and extract the script.
<html>
<head>
<title>Full Screen Flash How To</title>
<meta name="description" content="Google Optimized Description">
<meta name="keywords" content="Google Optimized Keywords">
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="container">
<script type="text/javascript">
// <![CDATA[
var container = new SWFObject("[FLASH MOVIE].swf", "source", "100%", "100%", "8");
// ]]>
</script>
<noscript>
Google Optimised Description and alternate content
</noscript>
<div id="flashcontent">
More Google Optimised Descriptions and alternate content
<strong>You need to upgrade your Flash Player</strong><br>
<a href="http://www.adobe.com/go/getflashplayer">Click here</a> to download the latest flash player to view this site. <br><br>
This is replaced by the Flash content.
Place your alternate content here and users without the Flash plugin or with
Javascript turned off will see this.
</div>
</div>
</body>
</html>
Part 4. Flash alertnate content, White hat usage and source code
by Scott King on May.22, 2009, under ActionScript, Flash, PHP, SEO
Dynamic SEO tags for your Flash site using PHP
- Best Uses of Flash – http://mezzoblue.com/archives/2008/05/05/image_replac/
- See point #2 in regards to sIFR, an ideologically similar concept to CSS image replacement, which suffers from the same potential abuse vectors. As this is a Google blog, it appears sIFR has an official blessing. Also mentioned in this article is a similar guideline to the previous one: show users and the Googlebot the same content. Sensing a theme here?
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title><?=$globalPageTitle.” “.$title?></title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”Description” content=”<?=$description?>”>
<meta name=”Keywords” content=”<?=$keywords?>”>
<script type=”text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
var pageTracker = _gat._getTracker(“UA-1694586-18″);
pageTracker._initData();
//pageTracker._trackPageview();
</script>
<script type=”text/javascript” src=”/js/swfobject.js”></script>
<script type=”text/javascript” src=”/js/swfaddress.js?tracker=pageTracker._trackPageview”></script>
<script type=”text/javascript” src=”/js/swfmacmousewheel.js”></script>
<script type=”text/javascript” src=”/js/swfforcesize.js”></script>
<style type=”text/css”>
/* hide from ie on mac \*/
html {
height: 100%;
overflow: auto;
}
#flashcontent {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
/* end hide */
body {
height: 100%;
margin: 0;
padding: 0;
background: #f2f1ed url(‘/images/bg.jpg’) center center repeat-x; margin:0px; padding:0px;
}
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id=”flashcontent”>
<?=$inPageContent?>
<a href=”http://www.adobe.com/go/getflashplayer”><img src=”/get_flash_page.gif” border=”0″></a><br>
<a href=”http://www.adobe.com/go/getflashplayer”>Click here</a> to download the latest flash player to view this site.
</div>
<script type=”text/javascript”>
// <![CDATA[
var so = new SWFObject("/site_final7.swf", "source", "100%", "100%", "8");
so.useExpressInstall("/js/expressinstall.swf");
so.addParam("menu", "false");
so.addParam("scale", "noscale");
if( so.write("flashcontent") ){
var forcesize = new SWFForceSize(so, 975, 620);
}
SWFAddress.setValue('<?=$requestedDeepLink."/"?>'); // Trigger SWFAddress event to load correct flash section, add "/"
// ]]>
</script>
<noscript>
<?=$noscript?>
</noscript>
</body>
</html>
FreeTV / Freeview Yahoo Widget
by Scott King on Jan.20, 2009, under ActionScript, Flash, PHP, Widgets
So this is the second widget I’ve created for FreeTV, this time for the Yahoo! Desktop platform (having previously completed the Google Desktop Widget). Although it was a replication of the Google version, it required a complete ground-up rebuild for implementation with the Yahoo! API, build time was just under 2 days.
These widgets deliver information and statistics on Australias top rated TV programs and channels right to your desktop.
It utilises the same custom CMS and XML feed I built for the Google Widget, allowing the client to upload a pre-formatted excel spreadsheet into the CMS to populate the XML feed with their data.
Technologies:
- Flash
- ActionScript2
- PHP
- XML
- MySQL
Midori’s “Blend a Bartender”
by Scott King on Jan.20, 2009, under ActionScript, Flash, PHP, Past Work, SEO
This is a new section I put together for the Midori Welcome to Greenland web site which we built a while back, this was built with Jonathan Miranda doing a fantastic job on the design.
This new section allows you to create your very own bartender out of an array of parts including body type, hair type, skin tone – you can even give your bartender some bling!
It features advanced deeplinking functions, a Send To Friend function that allows you to send your “perfect bartender” to an unsuspecting friend and flv playback.
Technologies:
- Flash AS2
- PHP
- Fusekit
- SWF Object
- JavaScript
Try it for yourself here:
http://www.welcometogreenland.com.au/#/locals
Or
Freeview Australia Site Launch
by Scott King on Dec.03, 2008, under ActionScript, Flash, PHP
Another new site Flash site, this time for Freeview is a non-profit organisation comprising Australia’s free to air broadcasters including Channels 7, 9, 10, WIN, PRIME, SBS and the ABC and their HD subsidries. Freeview are brining Australians an additional 15 free-to-air TV Channels. Awesome!
Check out the new site at:
Technologies:
Flash, AS 3
PHP, MySQL for datacapture
XML Driven CMS
NineMSN New Weekly Viral Mini-Site
by Scott King on Dec.01, 2008, under ActionScript, Flash, PHP
This was a really cool little Flash mini-site that allows you to “rub-off” a celebrities makeup to see what they REALLY look like.
As a gag, you can also choose to upload a photo of your friend of loved one, choose a farm animal to place under their photo and send them a viral link back to site where they can return to rub the make-up off their face only to be met with a pig, horse, cow.. etc.
Try it out at:
http://nw.syd.ninemsn.com.au/makeupoff.aspx
New Campaign Websites for Solo
by Scott King on Oct.02, 2008, under ActionScript, Flash, PHP
This is a new site I created for the new Solo “One and a half times the man” campaign. It was a challenge as the build time was limited to roughly one day including building the Flash elements, Registration forms and capture databases.
http://www.oneandahalftimestheman.com.au/
Technologies used:
Flash (AS2)
PHP
mySQL
Love
Electrolux Dam Levels Widget
by Scott King on Jun.17, 2008, under PHP, Widgets
Recently I was asked to build a Widget for Electrolux that allows you to select a Dam from anywhere in Australia and have the Widget display the current water level. The data is populated from the Australia Dam Level watchdog via RSS.
Design by Aliza Nordin.
Introduction – Advanced Flash SEO and Usability Tutorial
by Scott King on Jun.10, 2008, under ActionScript, CSS, Flash, PHP, SEO
Advanced Flash SEO and Usability Tutorial Introduction
The Problems associated with Flash SEO and Usability
Creating an entire Flash based web site is very common these days, yet there are still some major Usability problems inherited when an entire Flash based design is implemented.
No SEO and no deeplinking.
The first issue is that of Search Engine Optimisation or SEO, since search engines cant (yet) index the text used in your Flash movies it becomes virtually impossible to get good search visibility for your Flash site, and coupled with the inability to deeplink to specific content sections it becomes very hard to create targeted backlinks to your Flash site.
No browser back, forward or history support.
The second issue is the inability for Flash to work with the browsers back and forward butons in the main navigational bar and no history being recorded in the browsers history section.
No scrollbars for small windows.
Most Flash designers target their full screen flash sites to the 1024 x 728 monitor resolution, minus the browser chrome which equates to roughly 980 x 600 of actual design real estate. The problem is if a user is using a smaller resolution or has their browsers set to a smaller size window, Flash does not create scrollbars and thus clips off the parts of your website that do not fit on the available screen size.
No Analytics
There are now several excellent free online analtyics services for your traditional html based web sites and until recently theres been no way to harness such a service to track clicks and visitors around your Flash site.
The Solution
Fortunately there is a solution, or in fact several solutions for all of the above issues. In this tutorial I will show you how to combine all of these solutions to create a fully usable and backwards compliant browsing experience for your users.
- Part 1. Setting up dynamic SEO tags for each page or deeplink in your Flash movie
- Part 2. Deep linking to your Flash content and enabling those back, forward and history buttons in your browsers (coming soon)
- Part 3. Add scrollbars for smaller browser windows and monitor resolutions (coming soon)
- Part 4. Add Google Analtyics (coming soon)
- Part 5. Flash alternate content, white hat SEO usage and case study: levis.com.au (coming soon)
- Source code (coming soon)
