Hacked some features into Calibre Australia’s site for The White Agency.

Made some modifications to the nicely structured AMP site Own Tomorrow through Pinto. More to come with that site.

Developed the new campaign homepage and Collection Inspiration for Sussan.com.au for The White Agency. The final collection inspiration microsite has about 30% less interactive functionally than was supplied to the client, it had a very cool vertical animated mask as new large image was reveal – a shame IMHO! One of the downfalls of contract work is you often aren’t there for further modifications, hence if you get loadErrors from the sound player its something I can’t fix.

Helped fix Samurai.fm new beta site, Hash is a great chap to work with.

And I have another flex project – a full shopping site for a children’s apparel company!

Sometimes the grass that seemed Fresher is not when you cross over the fence. More opportunities happen when you leave behind those people who don’t get what you are trying to achieve, especially as a developer!

Thats it! I spend more time on Twitter: elliotrock

http://www.visionaryeyespecialists.com.au/
It has alternative content using a PHP/Apache to direct non-flash based devices to static based html/css content. There where a lot of issues setting this up as I didn’t have complete access to the clients server and I must admit the support wasn’t up to scratch. An example of how it work perfectly on your test server but not the clients This is done for SEO as well.

The content is controlled via Wordpress which gives them a free CMS solution.

Overall the main development aspect of this site was time, it took me three days to get the visual design done and another half a day to get the content out of the old site into Wordpress. There are differences in how Flash player interprets xhtml using CSS with image embeds and a long standing  bug with inline images in html textfields that requires a little slapping. There was a few more days spent dealing with the client server issues but that is part of the process (when does something typically work well?)

http://www.jupicorp.com/

I did the design and development of the majority of the Flash components excluding the lovely chandelier (Mags from Cornerstone design that and I just sorted out the animation). This was a rather challenging project in regards to how certain the client was in his visual branding, it is when a degree in visual communications and 8 years working as a graphic/print design (pre-web, pre-flash) comes in handy. Also dealing with clients.

The work I did on this site:

- Intro Splash

- Animation of the background

- Conversion of all the FLV and implementation problem solving.

I quite enjoyed doing a timeline animation, it has been a long time doing this style of animation and the result really pleased the client. Who says old Flash Developers have no style!!

This kind of development where you get feedback pretty quickly from a user and yourself, I find opens more doors than time can sometime allow. Leading to more backwards and forward stepping than I usually take when developing from a set visual idea and building the structure in AS3 to produce the result.

I also find myself feeling slightly disconnected from the structural process in Flex3, sure things seem to work easily and produce visual results but its not having that pure understand of the structure through scripting the entire application yourself!

I am too obsessive by wanting absolute control? Must admit I did grow up playing with Lego.

- A microsite for Mitsubishi Motors Lancer Platinum edition.
- Design of IMieV eDM, thats the new electric car of Mitsubishi
- Apsire banner ads

Mitsubishi EDM for the new iMiev

- Designed and produced by me based on Clemenger’s print material. In consultation with Cornerstone.
Link to large version

Mitsubishi Aspire flash banners

- Design concept provided, quick out the door lot of 4 banners using similar animation. Go Flash timeline.

Aspire_120×600_

Aspire_160×600_

Aspire_250×300_

Aspire_728×90_

Mitsubishi Platinum Lancer microsite

- This was done using the existing Flash microsites as a guide, it require superman photoshop skills to draw in part of the road that didn’t exist! I had to keep the existing style of rollovers, even if they are bugging. Consistency is king.

Follow this link to the site

I separated the events that would drive the changing of the content:

1. SWFAddress events responds from the URL call from a server and to internal calls to SWFAddress class via setValue() to change the content, which execute the content change.
2. The button events of the menu items, these set the value of the new page uses the setValue() method which drive the event handlers in the first event above.

What happens is the button events call the setValue() method of the SWFAddress class, these are instantiated in one invoker. Another invoker is used for the SWFAddress Events and the page address query and its content command. This invoked SWFAddress Command Lists works independently as well as initiated from the button events.

It may seem strange to have a sequence of events instead of one but this is the point of extended the Command List Pattern in a shared command manner – independence and extension. It also is a clean solution and also supports other events to drive the structure change via the SWFAddress, in the same manner that the button events call the setValue(). It also allowed for a simple retro fit of the SWFAddress system.

Two Invoker panel classes were created to handle these, both with a typical structure as in documented in Actionscript 3.0 Design Patterns except I have removed the creation of the button elements and just pass a reference to its display instance:

This code below is the InvokerButton class

package com.elliotrock{
import flash.display.*;
import flash.events.*;
import com.asual.swfaddress.SWFAddress;
import com.asual.swfaddress.SWFAddressEvent;
//
public class InvokerButton extends Sprite {
private var addressList:Array;
private var buttonList:Array;
private var pageTitleList:Array;
//
//This handles the button events and the call to SWFAddress via setValue
//
public function InvokerButton(list_len:int) {
this.addressList = new Array(list_len);
this.buttonList = new Array(list_len);
this.pageTitleList = new Array(list_len);
}
public function setButton(nSlot:int, btn:SimpleButton):void {
this.buttonList[nSlot]=btn;
btn.addEventListener(MouseEvent.CLICK, buttonClicked);
}
public function setAddress(nSlot:int, adr:String):void {
// when the panel is instantiated, the adr is set from the XML feed link
// which is set from Wordpress
this.addressList[nSlot]=adr;
}
public function setPageTitle(nSlot:int, pg_title:String):void {
// when the panel is instantiated, the adr is set from the XML feed link
// which is set from Wordpress
this.pageTitleList[nSlot]=pg_title;
}
// button Events
private function buttonClicked(e:Event) {
for (var i:int = 0; i < buttonList.length; i++) {
try {
if (buttonList[i]===e.target) {
// set SWFAddress
SWFAddress.setValue(this.addressList[i]);
// set browser title
SWFAddress.setTitle(this.pageTitleList[i]);
break;
}
} catch (err) {
i++;
trace(err);
}
}
}
}
}

This sets up the buttons events and the associated page address/query string, this is through having the same index in the arrays for the title and address of the pages. I grab these off my RSS feed of my Wordpress CMS, so they could be anything, being a bit geeky I like the numeric query but could easily set up pretty urls in Wordpress.

The next events invoker is the SWFAddress part which response to the setValue call. The top level class of SWFAddress does the majority of the work:

This is the InvokerSWFAddress class:

package com.elliotrock{
import flash.display.*;
import flash.events.*;
import com.asual.swfaddress.SWFAddress;
import com.asual.swfaddress.SWFAddressEvent;
//
public class InvokerSWFAddress extends Sprite {
private var commandList:Array;
private var addressList:Array;
/*
This handles the EventHandler for the SWFAddress event
*/
public function InvokerSWFAddress(list_len:int) {
this.commandList = new Array(list_len);// may need to pull in the length of the setup object plus the categories
this.addressList = new Array(list_len);
//
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);
}
public function setCommand(nSlot:int, c:ICommand):void {
this.commandList[nSlot] = c;
}
public function setAddress(nSlot:int, adr:String):void {
// when the panel is instantiated, the adr is set from the XML feed link
// which is set from Wordpress
this.addressList[nSlot] = adr;
}
// SWFAddress handling
private function handleSWFAddress(e:SWFAddressEvent) {
var found:Boolean = false;
try {
for (var i:int; i < addressList.length; i++) {
if (addressList[i] === e.value) {
found = true;
this.commandList[i].execute();
break;
}
}
if(!found){
// if url doesn't exist
this.commandList[1].execute();
}
} catch (err) {
// executes the home page if a URL server query is not found
this.commandList[1].execute();
}
}
}
}

The Invoker is setup with the query address from Wordpress and the page build command. The SWFAddressEvent listens for both the page change initiated from the InvokerButton and from page changes via the back, forward and history changes from the browser.

In Part 2 I will show the initialisation of these two invokers. This is done from what ever Creational Pattern or method you use.

Over the course of my role as Senior Flash Developer at SWiSHzone I have had to come up with solutions that work across a massive customer base. Everyone including many whose internet connection isn’t ADSL2. The content I create is dynamic flash sites, many with multiple pages and image rich content. On top of this the highly interactive interfaces and systems that need to take in order of event issues and limited dependencies.

The methods that I am going to examine to manage loading content are:

On Demand – this is the typical method most developers use. Basically you load the required content on interaction or all at the start of the project.

Background Sequential Loading - this is where you manage the loading of content in chucks, in an order that may be the intended path of narrative of the user. Often this is done in the background whilst the user is interacting with the first part of the content.

Asymmetrical Loading – this is my explanation of how a traditional html page loads. Because the elements are naturally broken into small chucks they load and display in their own manner. With skill a creative flash developer can be use this to add to the animated narrative of a flash project.

On Demand

Everything has a place in modern Flash development except for forcing a user to sit in front of a preloader as a 300kb swf loads in. On demand loading is highly practical if you are loading in a 30kb large image off a thumbnail but that’s where it ends. I can’t really add in many other reasons to use it apart from a combination with the next explained method. Why do I say this? Because there are methods that’ll make your project a holy grail user experience rather than a beautifully expensive experience that many people may not proceed through because the majority of their time is spent waiting.

Background Sequential Loading

Over the length of the narrative of a flash project there are many times where you can sneakily load content whilst the user is engaged with the current content. In a sense your are trying to anticipate the users next navigation choice and load that rich content before they get there. This may mean splitting up a site into small chunks and sequentially loading these so not to bomb their connection. You need to manage this in a way they may add to the interactive experience, an example maybe to only show the menu item of a section when that section has loaded.

I am not opposite to preloaders or providing visual feed back to users of content loading, if fact I tailor these into the experience. It is about giving life to a project so it slowly becomes whole. A case study of this is the Template site Spacial, the sections load one after another and the menu and the visual appearance of the pages are all controlled by the loading of that section. This gives a feeling of the pages being drawn in front of you. This site needed all of the sections to be displayed as part of the visual and interactive design. The sections cannot be access until they are loaded.

You can also use systems where the content is sequentially loading in the background and give an “On Demand” override that loads or continues to load that content, stopping any loading to free up the connection. You’ll need to check the current loading progress and work out whether it is worth stopping it or just load what he user wants as well. I don’t recommend killing a URLloader at all. You do need to be careful if you build too much complexity, just as much as trying to load too much!

You really need to beware of order of events issues with this style of loading, the point is not to expect anything in the content until it has loaded.

Asymmetrical Loading

I mentioned before that the best comparison is to existing web content is a typical html page, where the content is loaded in small chucks and is almost displayed in a ranking based on file size. We all experience this day to day and in someways users are completely use to this.

Flash has always been the fat beast of user experience and has fought hard to be incorporate into the web. Over the last 7 years I have tried to step away from developing the typical embed swf for Flash content and have developed many dynamic solutions for customers and clients. It is a switch of practice where in a sense you consider your project to have a cascading file structure. Animated preloaders are hidden within the experience of the user. Streamed media is embraced to provided rich content. Efficient scripting provides rich animations and reduces file size.

There are many systems to help share content. Browser have a wonderful thing called a cache, you can use this to your advantage. Break your site up into generic files that once they loaded are cached, even if the individual aspects can be changed like text and image content. The practical methods is to separate your layout away from the content, if you have multiple styled pages store those as empty page-styles in a generic place. Once the page-style template has loaded, the content is loaded. Incorporate your art/interactive design into the process. Use the process of loading as part of the visual experience!

Investigate Adobe’s Shared Libraries, it is an incorporated solution and isn’t too difficulty for a mid level developer to get their heads around. Its not needed if you have good systems in place.

In a way it is Object Oriented Structure, thinking of your project outside of the embeded chuck that Flash has pushed designers and developers to make. Kill the fat 300kb beast and 30second preloader!

In AS3 this is the XMLDocument class. But obviously it places the first parent of the XML file at _root which doesn’t exist  in AS3!

The reasons why I did this was to simplify the retrieval of information from a XML object and to mash it into the actionscript setup that are used inside my SWiSH Templates. Effectively allowing me to add in a XML setup file. The SWiSH Template use a mock JSON setup inside a SWiSH Max file. Is it is a collecting of inline arguments, strings and arrays that define the content.

Now to the script:

function convertNodes (node){
// The process is a forward flow out and down the XML
// tree, and the finParentPath is used to keep track of the
// node branches it is on.
if(node.nodeName != null ){
var new_parent: String = node.nodeName.toLowerCase();
var parent_node: String = node.parentNode.nodeName.toLowerCase();
new_path1 =  findParentPath(node.parentNode.parentNode);//
if(new_path1 == "_root" && parent_node == "undefined"){
//
_root[new_parent] = new Object();
new_obj = _root[new_parent];
new_obj = node.childNodes;
}

if(new_path1 == "_root"){
new_obj = eval(new_path1)[parent_node];
new_obj[new_parent] = node.childNodes;
} else {
new_obj = eval(new_path1)[parent_node];
new_obj[new_parent] = node.childNodes;
}
}
for( var child = node.firstChild; child != null; child = child.nextSibling){
convertNodes(child);
}
}
function findParentPath (node2){
var new_path: String = "";
new_node = node2;
while (new_node.nodeName != null){
// from the node, we step back to its parent, test if that as a mc path exisits then step agains, forming the
// path back to _root which the above function will use to build the new object.
new_path += new_node.nodeName.toLowerCase() +".";
var new_node = new_node.parentNode;
};
var final_path1 : Array = new_path.split(".");
var final_path2: Array = final_path1.reverse();
var  final_path: String = "_root"+(final_path2.join("."));
return final_path;
}

To initiate the call just throw your well formed XML file at it like this:

convertNodes(siteSpecs_xml);

This is for actionscript 2 but I’ll script out one for AS3 shortly to use the XMLDocument class. The great thing about this method is that it is entirely flexible. I will consider adapting it to the other forms of XML that AS3 uses, I see issues with some of the XMLList needing distinct variable names, prehaps I could throw XMLList with the same attributes name into an array? There are a few translation issues as well, say what do to with a Namespace definition like <content:section>. Interesting ideas.

The logo is designed and illustrated by me. Its actually my baby at 6 months and is drawn from memory, no photo reference.

Precious Li’l Things

This is at pre-release state. I will be moving it to live once it has had a good external test.

I also used an old Unix style tool called gFind to build the lists directly off a directory of images and outputting it as a raw .txt file (just make sure it is UTF-8 not Unicode). Next I will build a tool to write a XML setup up file, best way would probably be with be with PHP.

So please check out my Phone Photos taken on my 2megapixel Nokia.

The next simple step is to extend  the class that loads in the larger image with a FLV loader class. Over ride what you need changed and Boris is your Uncle!

A wee gem was in that folder… an experimental interface for a radio show “The Electric Company” on Christchurch’s RDU98.5FM. The dot typographic logo and shape were from their logo that I designed. Here it is:

The Electric Company Interface

Note:The press events on the faces lead to pages that don’t exist! So ignore any warnings. I don’t have the fla’s anymore.

It was drawn as flat shapes that I imported and extruded inside 3D max. It was exported using a plug-in from Swift3D as frame by frame animations. I remember having a lot of issues with unclosed faces shooting off artifacts – you can still see them!

It is amazing how much work you lose over time, I suppose it is the nature of working online – sites come and go. So I was quite excited to find this piece of work from 2001

Unfocused

It is set up in the same manner as the other gallery templates, via a setup file and internally using a component that has settings for multiple arrow designs, colour pickers for the graphic devices and scroll orientation (left/right or up/down). Like the other galleries it is quite accepting of how the user sets up the images – you don’t need large images for example. It also can be used as a video gallery both swf and flv, this ties it into SWiSH Video3 for SWiSHzone.

The idea behind it is a mock depth of vision, focus and unfocused. The technologies that I have developed for this are:

- Destination listeners for the animations. This is a drop in component that allows for simple call back functions to be implemented on the destination complete of animations.

- Sequential loading of thumbnail images. The galleries can host a lot of images and the easiest way to get around pre-loading the majority of the structure is to let the template function as the content loads. The larger images are load on demand.

- Common structure. The structure is the same as the template sites and other galleries. The other developers use this same structure. It is structural based so that designer/developers have a better time with quick turn-around design and development.

-AS2 for compatibility with SWiSH Max2 and SWiSH miniMax2.

I have installed a system that applies a version of the Wordpress styles.css to this flash front end, this means I can use the styles tags in Wordpress to format my text. I will document the steps soon. Finally I can enjoy reading my own blog without the Typographer in me cringing!

I am currently working on a better way to keep some of the formatting done in Wordpress in the final display in AS3. These are the methods I propose:

1. In AS3 load in an external .css fileThis file contains the similar style/class tags as used in Wordpress. Apply this to the final text. There will still be some hacking of the content to get the span or paragraph tags in the simple form that flash accepts.

2. Minimize the usage of tags in WordpressThis means removing most of the extraneous tags and trying to keep the html in Wordpress as clean as possible but keep a range of useful CSS tags (hopefully expandable).

3. Apply a better solution to maintain the space white space and line returnsFlash has a different way it interprets all of the various line returns and white space. Actually every rendering and text formatting system has its own unique methods.

4. It must be expandable to include the media inserts.What is the use of using a flash front end if you cannot view FLV and images. The image insert should be easy as you can add the images into the html, I will need to experiment with the video objects to come up with an appropriate solution. My initial thoughts are to break up the text field at the point and insert your own FLV object (sounds like more security issues if there are outside the host domain).

Hopefully this will be an easy replicable solution for others as well.

The main differences is the rss2 feed from Wordpress compared to the feed from blogger.

The rss2 feed from Wordpress

The Formatting of the RSS2 adheres to the web standards which is great. In order to deal with the XML feed you need to understand Namespaces to get the correct xml child and general XML usage.

This is part of the feed that I get from Wordpress:
example xml

There is a lot of useful information here and may seem a bit of a jumble. But it doesn’t matter, what I was after was the usual child tags of information contained with the item tags. In this case I want the publishing date, category, heading and the body text. These are the names of the tags I needed:

title – the title of the post.
pubDate – the date of publishing.
category – The category associated with this post.
content:encoded - this is the body copy of the post, as you’ll noticed the tag name has a namespace identity of “content:encoded”.

This script shows the loading the XML feed and then breaking down the child nodes items into these child tags that we need. These are then placed into an inline argument of an object. This Object is then added to an array. The reason I use an array for the various objects related to the section is that an Array is a position relative variable, meaning that I can use the order to arrange the sections. This is very useful as I finally used the category names to order the array (I’ll show you later).

package com.elliotrock
{
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.*;
import flash.system.Security;
/**
* RSSParser includes methods for
* converting RSS XML data into HTML text.
*/
public class RSSParser extends EventDispatcher {
// this is the url location of the feed
public var url:String = "http://blog.elliotrock.com/?feed=rss2";
public var rssXML:XML;
public var rssTitle:String;
private var myLoader:URLLoader;
private var dataError:Event;
public var setup:Array;
//
public function RSSParser() {
/*
You need to consider your security settings at this point and make sure you have a crossdomain.xml
policy file at your root of your server, if you are trying to load from another domain then you need to
consider the Security.loadPolicyFile(url); method.
*/
var rssXMLURL:URLRequest = new URLRequest(url);
myLoader = new URLLoader(rssXMLURL);
myLoader.addEventListener(Event.COMPLETE, xmlLoaded);
}
public function xmlLoaded(evtObj:Event):void {
rssXML = XML(myLoader.data);
/*
* new_setup is contained within this function
*/
var new_setup:Array = new Array();
if (rssXML.namespace("") != undefined) {
default xml namespace = rssXML.namespace("");
}
for each (var item:XML in rssXML..item) {
/*
* this pulls in the various tags within the rssfeed
*/
var itemTitle:String = item.title.toString();
var itemLink:String = item.link.toString();
var itemPubDate:String = item.pubDate.toString();
var itemCategory: Object = item.category.toString()
/*
*/
var itemDescription:String = item.description.toString();
/*
I need to search through the repetitions of the namespace "content" used in the XML to the
one associated to
*/
var contentNS:Namespace = new Namespace(item.namespace("content"));
default xml namespace = contentNS;
//
// the .. is sort of like asking for this association
var itemContent:String = (item..encoded).toString();
/*
add these items as inline arguments to an object and add to the end of the new_setup array
*/
new_setup.push({title_:itemTitle, description_: itemDescription, content_: itemContent, pubDate_: itemPubDate, category_: itemCategory});
}
setup = new_setup;
}
}

The public var setup is the array that contains all of this useful information. How I grabbed the content:encoded tag was using this namespace method:

var contentNS:Namespace = new Namespace(item.namespace("content"));
default xml namespace = contentNS;
var itemContent:String = (item..encoded).toString();

This is from Colin Moock’s book Essential Actionscript page(?). It is a nice and re-usable piece of code that first pulls out all the variations of content ( go back and have a look at the raw XML RSS2 feed above) and then looks for the first usage of “content” and “encoded”. Namespaces is a weird concept to get use to, I suggest doing a it of research or to get Essential Actionscript3 by Colin Moock.

To get the information out of this array use the short cut access methods and get the variable associated with what you want. Say I want the title of the first item then I use:

trace(setup[0].title_);
// Flash happenings

Just remember that arrays are zero based so they start from zero. I hope that helped.

Security changes to their cross-domain policy.I recommend to download the stand alone 9,0,124,0  player, the debug version has reporting features to help notify of cross-domain issues. Developers need to get there heads around this as their will be more changes down the track. Wait till phase 2 and 3 hit! Or am I just being paranoid!

Google SWF search. A wait and see. How will it work with current deep embedding and site mapping techniques? Will this make Flex a more popular Flash front end?

Site85
Site94

Aim:Design and development of Gallery templates. Gallery 85 design was based on an idea of an art gallery wall. Gallery 94 was to continue with a 3D theme from Gallery 73 but was to be a slicker design.

Specification:External loading of media and setup (via a simple.txt document). Sizing based on loaded images or SWF/FLV. Exports to SWF8+. To be used as a stand alone Flash gallery or to be incorporated into an existing Flash or HTML site.

Expertise:All the Flash development included behavior listeners for the animations, 3D distortions, and a naturally flowing OO structure. The designs were achieved with consultation with my Managing Director.

Site214

Aim:To design and develop a gallery template native to SWiSH Max2 and to use Object authoring for internal customisation. Quick turn around.

Specification:External loading of media and setup. Sizing based on loaded images or SWF/FLV. Exports to SWF9+. To be used as a stand alone Flash gallery or to be incorporated into a existing Flash or HTML site. Uses drop down menus with the parameters panel to set colours and to change the instance of the arrow graphic from a preset selection. Based on same structure as all of the new web site templates so it can be passed to other mid level designers to work from.

Expertise:All of the Flash Development. Feedback behavior listeners for the animations. Simple structure and procedural scripting. Object authoring. Component colour pickers built by another staff member. Five days to design, construct and 2 days of testing. Photo selection and design done by me.

Dynamic Web Site Design and Development

Spacial

Aim:To build a 3D styled website and to reuse the 3D engine developed in Gallery 94. Interaction inspired by my iPod Touch. It also draws from ideas I have about spacial libraries, pages and information as part of a space. It is also an experiment in interaction as the pages can be dragged much like an iPhone/iPod Touch. Usability testing resulted in the addition of typical scrollers – something that a user identifies with page movement.

Specification:External loading of media, page styles and setup. Sizing based on loaded html text or jpg/ SWF/FLV, Exports to SWF9+. Uses a setup structure based in program and exports as a swf (to encourage use of the SWiSH Max2).

Expertise:All of the Flash design and development was done by me. Highly independent encapsulated object structure, (external page styles .swf can be tested separately). Listeners for the behavioural animations have call back functions to continue highly interactive animations. Spacial maths.

Note:All of the Galleries and Dynamic Web Site Templates here are solely designed and developed by me.

GUI Design for SWiSH Max2

SWiSH Max2

Aim:To design and draw all new icons for all the buttons, toolbars and drawing tools. Continue theme set by SWiSH Studio2 and SWiSH Video 2. Increase usability and visual communication. Produce a more professional looking product.

Specifications:Limited palette bitmap using an index alpha colour for transparency. To work with the API of the new interface. Icons as multiple sized ico’s in the main colour palettes (XP, 24bit, 256 colour). Design had to be visually identifiable and communicate the function of that tool. Compatible across a legacy of Windows OS and Vista.

Expertise:Many hours of pixel by pixel drawing (reminds me of my Amiga500 and Deluxe Paint). Strict Colour palette process to insure same palette is used by the drawing application (in this case I used Fireworks) through to the final ico creation package (Axialis IconWorkshop 5.0). I would also compile my own test exe of the application (using appTranslator). Batch production method to ensure quality over many bitmaps and ico’s. Continuous testing and communication with application UI developers to work in with the API of the User Interface. Classic and strong visual communication concepts were used to tighten common sets of menu functions and their individual meaning. User testing and analysis.

Example: Please download a trial of SWiSH Max2 to view GUI design.

Samples for Launch of SWiSH Max2

Ballgame physics

Aim: To produce a physic based sample to show SWiSH Max2 physic class and as an advanced usage of actionscript2.

Expertise: Circular collisions scripting, vector velocities and simple collision detection.

Example: ballgame_physics.swi. Please download a trial of SWiSH Max2 to view the scripting. Use the Outline Panel to navigate through the structure and the Script Tab to view the coding.

To view more examples browse through swishzone.com especially the Dynamic Sites and Galleries.

Development of Elliotrock.com

Aim: To develop a site that draws the content from my blog. This is to be my ongoing personal site.

Specifications: AS3 developed showing a Command Pattern, RSS feed loading, Content structure is based on the RSS feed, expandable to use other page styles such as image/video galleries, easy to add other non section features such as a stand alone classic RSS feed reader.

Expertise: AS3 OOP Command Pattern, Namespaces, CSS in AS3, Wordpress, Yahoo pipes, RSS2 feeds, OOP coding and a simple crisp design.

The structure is using a Command Pattern that allows me to implement different menu executions off various menu items. The system is a Command List. The main use for this is having an implementation method that allows for flexible structure. I can add new menu functions and pages or function without having to rework a lot of code.

At first I pulled in the feed of my blogger page. The blogger feed is past through yahoo pipes, which is a rss feed aggregate of forms, except it offers a unique tool set to do many things with RSS and JSON feeds. Yahoo pipes has an open cross-domain-policy file setup so you can call this to enable loading to AS3 from their domain. This didn’t prove to be a stable solution as I was reliant upon pipes.yahoo and blogger, two nodes that I couldn’t manage. Pipes.yahoo.com had a critical bug that stopped rss feeds from blogger in their system, this made it clear that I need to host and manage as all the systems.

I decided to host my own Wordpress system on my domain on a new server. This has helped me concentrate on developing my AS3 blog system.

The content for this site use to resides on blogger.com and I am reading in the RSS feed as content and structure for this site. If you are viewing this from elliotrock.blogspot.com then leap to www.elliotrock.com.The process had to solve these issues:

- Flash cross domain security issues and not being able to load data from Blogger

- Stylesheet difference between AS3 StyleSheet class and the CSS at Blogger

Flash cross domain security issues and not being able to load data from Blogger

Blogger doesn’t provide an open cross-domain-policy file, so you cannot source their feeds directly. One of the issues with Flash expecting authorization to use data from external domains is that public systems like blogger don’t doffer as yet an open crossdomain.xml. This maybe due to the lack of people using Flash to view RSS feeds.

In order to solve or to use a better term to “work around” the Flash security and loading issues, I intially decided to use a RSS feed aggregate. It needed to provided an open cross domain policy in the format that was accept by Flash. An open policy basically gives all domains loading rights. The best service I found was yahoo.pipes. They run an amazing Javascript RIA application that allows you to not only redirect RSS feeds but filter, combine multiple feeds and more.

I set up a url feed reader that I could send from my Flash file, the blogger URL for the RSS feed. Pipes.yahoo then feeds this feed back to me and they give access to the XML file with the cross-domain-policy. Since this lives on their domain when I do a security check from Flash it accepts the RSS feed. You can view the feed pipe I used here generic input feed with catagories

The issue I encountered initially with pipes.yahoo was the output feed defaulted to removing the category tags from the blogger feed. I had already used these to organise my Flash site so had to figure out how to add a Rename module to add these back into the feed output.

You need to load and check for this cross_domain_policy.xml before it allows you to load in the RSS feed. This is needed in this case because the policy file isn’t at the default position, which is normally the root of your domain. With this method the location is at “http://pipes.yahooapis.com/crossdomain.xml”.

Style Sheet difference between AS3 Style Sheet class and the CSS at Blogger

There were many things different and incompatible with the loaded XML RSS feed. From difference in definition in the span tags, to odd ways blogger wraps sections of text. Even with basic html tags working with their Stylesheet but once again not compatible with Flash. This is because it is a form of XHTML from what I can gather.

The road I took was to bluntly do a few string hacks to get the xml file in an useful form. I pulled out the style sheet information, applied them to Style Sheet objects and re-wrap the span tags with something that that internal Flash Style Sheet class could associate with the created Style Sheet.

There is an 3rd party class that Adobe hosts called as3syndicationlib. Mike Chambers blog shows how to use this class. I had already done my own hack to the xml data before I stumble upon this. This article gave me the idea to use pipes.yahoo to solve the initial loading issues.

In all a lot of research, problem solving and work to achieve what I believe to be a great way to maintain and update content for a flash site.

The structure is based on the catagory tags and the publishing date order from my blogg. Once the RSS feed is loaded, the catagories and sections menus are built. This is where a Command pattern works well as the instanisation of the various commands is not static but dynamic. If I wanted to add in different content asides from the RSS2 xml feed like the gallery, I need to create a new command which deals with the creation of this new pagestyle and add a menu to the invoker panel in the main class.

Good OOP allows for easy expansion and change. A Command Pattern in this case suited the dynamic structure and my desire to add in different page styles.

The next stage is to introduce a Creation Pattern to setup the instants of the various Commands.

Along comes the blog, an easy way to broadcast ideas, provide solutions at regular pace. But where’s the flash (wizz bang wow)?

You are looking at it!

What I have developed here is a Flash front end to my blogger.com based blog. This gives me an online and pre made CMS – yes cheating completely! I have pulled in the RSS feed and organised it dynamic to the categories that I have set up inside my blogger. There is a lot of information you could use within the feed. More on that later.

I hope to get a lot more content up as soon as I can.

Elliot Rock