TheCosmonaut

Sequoia Financial Site Design

Eric Oliver — Tue, 09 Sep 2008 20:12:46 +0000

CLIENT: Tridian/Sequoia Financial
PROJECT: Site Design

Sequoia Financial Home Page

Sequoia Financial approached Tridian with a challenge: how to make a collections agency (which has very strong connotations and associations for consumers) seem new, warm, and friendly? What’s more, how do you do that without undermining the integrity and strength that people expect from collections agencies? This design reflects my take on it. I tried to emphasize the sequoia tree’s associations with strength and grandeur while calming everything down with friendly greens and “friendlier” typography. Another thing: Sequoia specifically requested doing something unusual with their main navigations, which is how I ended up using it to bisect the content area of the page. Personally, I like how it forms a “pillar” in the middle without getting in the way of the content to the right and the left of it.

Beach Bums Site Design

Eric Oliver — Tue, 09 Sep 2008 19:47:12 +0000

CLIENT: Tridian/Beach Bums Boardshops
PROJECT: Content-Heavy E-Commerce Design

Beach Bums home page comp

The excellent people over at Tridian approached me to tackle a site design for their client, Beach Bums Boardshops. Beach Bums is a surf & skate apparel company which was looking to completely update their online presence. Tridian supplied me with the wireframes and the basic site requirements, and I came up with a design which referenced their more laid-back, surfer roots while still retaining some high-impact colors and layout.

Flash 9 Policy Files, or “How I Got Rid of That Damn Error #2048!”

Eric Oliver — Thu, 28 Aug 2008 22:06:16 +0000

I ran into a very interesting Flash issue. I had a Flash form that was being hosted on Server A. It was submitting data to a PHP file on Server B, then receiving the results from that PHP file (whether the form was processed correctly). Server B had a crossdomain xml file set up, and I had my security permissions properly set up, but I kept getting a security error (Error #2048) no matter what I did. Needless to say, this was making me want to play with large-calibur weapons.

The solution lay in this well-hidden article on Adobe’s site. In essence, the article states that they’ve made Flash’s security settings even more strict, and that means that in some situations, you need to change things around in order to make sure that Flash will accept your policy file. I set my computer up with Flash 9 debugger version, set it up to log policy errors, and then looked at my policy file log which revealed the problem: Server B was returning the crossdomain xml file as Content-Type “application/x-httpd-php5-source”. With Flash 9’s newer, stricter settings, Flash 9 will only accept policy files of the following content-types:

text/* (any text type)
application/xml or application/xhtml+xml

As soon as we changed the crossdomain’s content-type, the Error #2048 went away and the form processed correctly!

So the upshot is that if you’re getting Error #2048 notices and you can’t get them to go away no matter what you try, follow the steps outlined on this page at Adobe. Once you’ve set your computer up to debug and log your policy files, you’ll be able to check and see if a policy file content-type problem is causing your troubles.

Snowflake Modification Tutorial

Eric Oliver — Fri, 01 Aug 2008 00:07:57 +0000

While helping out on the forums at FlashKit, I came across this post:

Hello,
We have a project that requires free falling snow flakes. When the cursor enters the stage we need the flakes to ‘rush’ toward the pointer and follow it. When the cursor leaves the stage the flakes drift away and down.

Can anyone point me toward an FLA or tutorial?

Many thanks

Well, for some reason I got all obsessed with this question and I wrote the following tutorial:
I did a rough version that emulates this effect. You can probably fine-tune it to be nicer, but this will get you started. Here’s what you need to do:

1. You need some sort of snowflake effect. Rather than start from scratch, you can download one. I downloaded the SnowFlakes class from Pixelfumes: http://pixelfumes.blogspot.com/2006/11/actionscript-3-snow-storm-class.html and I’m using the snowFlake.fla for the example (which you can also download from that link).

2. This class now needs to be modified to do what you were talking about. So first step is to make it so that the movie can register clicks. I created an invisible button called btnClick that was 450 x 450 (covering the whole movie).

3. We want to make sure that the snowflakes are underneath the button, or the user’s click won’t be registered. So in the actions frame of snowFlake.fla, I changed the createFlakes function to:

function createFlakes():void{
     var sFlake:SnowFlake = new SnowFlake();
     addChildAt(sFlake,0);
}

This adds the new snowflake underneath everything else.

4. Now we want to have something happen when the user clicks on the movie. So we add the following code:

btnClick.addEventListener(MouseEvent.CLICK, toggleFlakes);

5. The toggleFlakes function needs to do a couple of things. First, check to see if it’s snowing. Then, if it IS snowing, it needs to stop snowing and have all the snowflakes go to the mouse. If it’s NOT snowing, it needs to have all the snowflakes go away from the mouse and start moving again. To do this, I added the following code:

var isSnowing:Boolean = true;
function toggleFlakes(e:Event):void {
     if (isSnowing) {
          stopFlakes();
          isSnowing = false;
     } else {
          startFlakes();
          isSnowing = true;
     }
}

function stopFlakes():void {
     trace("stopFlakes clicked");
}

function startFlakes():void {
     trace("startFlakes clicked");
}

For now, the stop flakes and start flakes functions are not defined — we’ll get to that in a second.

6. So now we know we need to stop the flakes somehow… enter the stopFlakes function. Without identifying what that function IS, just yet, let’s assume that it will be a function that we’ll add to the SnowFlake class that will stop an instance of the snowflake from animating and cause it to move to the mouse. If we’re going to do it that way, we should create an array which will store references to all the snowflakes so we can trigger them at will. We do this by adding the following code:

var flakeArray:Array = new Array();

And by modifying the createFlakes function to be:

function createFlakes():void{
     var sFlake:SnowFlake = new SnowFlake();
     addChildAt(sFlake,0);
     flakeArray.push(sFlake);
}

Now we can reference all the created snowflakes, let’s make it so that by running stopFlakes, you run “gotoMouse” on all the flake instances:

function stopFlakes():void {
     trace("stopFlakes clicked");
     for (var i:int; i


7. Now we’ll need to start the flakes once again… so this is the startFlakes function. Let’s assume the function we’ll build in the SnowFlake class is called “restoreFlakes”. So our startFlakes function becomes:
function startFlakes():void {
     trace("startFlakes clicked");
     for (var i:int; i

8. OK — now we’re ready to start editing the SnowFlakes class and add the real functions. First let’s do “gotoMouse”. Open up the SnowFlake class. Let’s think about what the gotoMouse function needs to be and needs to do:

* It needs to be referenced by things OUTSIDE of the class

* It needs to stop the snowflake from moving

* It needs to move the snowflake to the mouse position
9. The first task: It needs to be referenced by things OUTSIDE of the class. This means it needs to be a public function, so add this to the class:
public function gotoMouse():void{
}

10. The second task: It needs to stop the snowflake from moving. OK, well if we look at the class, we can see that the following code is causing the snowflake to move:
private function moveMe():void{
     this.addEventListener(Event.ENTER_FRAME,everyFrame);
}

Easy enough to counter:
public function gotoMouse():void{
     this.removeEventListener(Event.ENTER_FRAME, everyFrame);
}

11. The third task: it needs to move the snowflake to the mouse position. We’re dealing with movement, so I personally always use Tweener to handle movement (http://code.google.com/p/tweener/). Download Tweener, put it in the same folder as the FLA, and add the following import command to the top of the class with all the other imports:
import caurina.transitions.Tweener;

We also need to move it to the mouse position, so let’s pass the mouse position from the original call to this function. So the call in the snowFlake.fla becomes:
function stopFlakes():void {
     trace("stopFlakes clicked");
     for (var i:int; i

and our gotoMouse function becomes:
public function gotoMouse(xPos:Number, yPos:Number):void{
     this.removeEventListener(Event.ENTER_FRAME, everyFrame);
}

Now we need to add the tween, so add the Tweener code and the function becomes:
public function gotoMouse(xPos:Number, yPos:Number):void{
     this.removeEventListener(Event.ENTER_FRAME, everyFrame);
     Tweener.addTween(this, {x:xPos, y:yPos, time:0.5, transition:"easeOutSine"});
}

12. OK, now we need to create the function that will start the flakes once again. We’re calling this restoreFlakes. What does it need to do?

* It needs to be referenced by things OUTSIDE of the class

* It needs to move the snowflake back to its original position

* It needs to start the snowflakes moving again.
13. The first task is easy — it needs to be a public function:
public function restoreFlakes():void{
}

14. The second task — move back to the original position. This means we need to track where the snowflake was when it got paused, so we need to modify the gotoMouse function to record where the snowflakes were. To do this we add the following variables to the class:
private var thisX:Number = 0;
private var thisY:Number = 0;

We then modify the gotoMouse function:
public function gotoMouse(xPos:Number, yPos:Number):void{
     this.removeEventListener(Event.ENTER_FRAME, everyFrame);
     thisX = this.x;
     thisY = this.y;
     Tweener.addTween(this, {x:xPos, y:yPos, time:0.5, transition:"easeOutSine"});
}

Then we modify the restoreFlakes function to move the snowflakes back:
public function restoreFlakes():void{
     Tweener.addTween(this, {x:thisX, y:thisY, time:0.5, transition:"easeOutSine"});
}

15. The third task — make them start moving. Well, just add the listener back in and the function becomes
public function restoreFlakes():void{
     Tweener.addTween(this, {x:thisX, y:thisY, time:0.5, transition:"easeOutSine"});
     this.addEventListener(Event.ENTER_FRAME, everyFrame);
}

Now we’re done! The revised SnowFlake class becomes this:
package {

     import flash.display.MovieClip;
     import flash.events.*;
     import flash.filters.BlurFilter;
     import caurina.transitions.Tweener;

     public class SnowFlake extends MovieClip{

          private var speedMultiplier:int = 5;
          private var speedVariMultiplier:int = 10;

          private var speed:uint = Math.random()*speedMultiplier;
          private var speedVariation = Math.random()*speedVariMultiplier+1;

          private var viewWidth:int = 450;
          private var viewHeight:int = 450;

          private var thisX:Number = 0;
          private var thisY:Number = 0;

          private var drift:int;

          function SnowFlake(){
               setSpeed(speed);
               readyFlake();
               moveMe();
          }

          private function setSpeed(n:uint):void{
               this.speed = (n * speedVariation)+1;
          }

          private function readyFlake():void{
               getDrift();
               this.y = Math.random()*viewHeight*-1;
               this.x = Math.random()*viewWidth;

               var bf:BlurFilter = new BlurFilter(drift*2,speed/2,2);
               this.filters = [bf];

               if(speed/2 < speedVariation){
                    this.scaleX = this.scaleY = .5;
               }

          }

          private function getDrift():void{
               drift = Math.random()*3;
               var driftDirection:int = Math.random()*10;
               if(driftDirection < 5){
                    drift *= -1;
               }

          }

          private function moveMe():void{
               this.addEventListener(Event.ENTER_FRAME,everyFrame);
          }

          private function everyFrame(e:Event):void{
               this.y += speed;
               this.x += drift;
               if(this.y > viewHeight || this.x < 0 || this.x > viewWidth){
                    readyFlake();
               }

          }

          public function gotoMouse(xPos:Number, yPos:Number):void{
               this.removeEventListener(Event.ENTER_FRAME, everyFrame);
               thisX = this.x;
               thisY = this.y;
               Tweener.addTween(this, {x:xPos, y:yPos, time:0.5, transition:"easeOutSine"});
          }

          public function restoreFlakes():void{
               Tweener.addTween(this, {x:thisX, y:thisY, time:0.5, transition:"easeOutSine"});
               this.addEventListener(Event.ENTER_FRAME, everyFrame);
          }

     }

}


The code on the main timeline becomes this:
var flakeArray:Array = new Array();
var isSnowing:Boolean = true;

function createFlakes():void{
     var sFlake:SnowFlake = new SnowFlake();
     addChildAt(sFlake,0);
     flakeArray.push(sFlake);
}

var numFlakes:int = 1000;

for(var i:int;i
     createFlakes();
}

btnClick.addEventListener(MouseEvent.CLICK, toggleFlakes);

function toggleFlakes(e:Event):void {
     if (isSnowing) {
          stopFlakes();
          isSnowing = false;
     } else {
          startFlakes();
          isSnowing = true;
     }
}

function stopFlakes():void {
     trace("stopFlakes clicked");
     for (var i:int; i

And you’re good to go! Here’s what it should look like (click on it in order to contract/expand the snowflakes):


	

And you can download the source files here:

snowflake.zip



Google Now Indexing Flash - What’s New?
Eric Oliver — Tue, 08 Jul 2008 19:08:20 +0000
I’ve had many clients contact me about the recent announcement that Google is now indexing Flash (you can see Google’s announcement on its blog, see Google’s Webmaster Blog announcement, and Adobe’s official announcement). The overriding question is this: What does this mean for my Flash-based site?
The short answer is: Not much. While it’s fantastic that Google is now able to read the text on Flash sites now, they face significant challenges in making sense of the text that they read. The reason is that Flash technology is much different from HTML pages in a couple of key areas:

Markup: HTML has tags which mark bits of text and code on the site. Google uses a variety of these tags in order to make sense of the page (what’s a link, what’s a title, what’s an important bit of text). Flash has no such markup — the code you use to register a “click” can vary widely from programmer to programmer. While it’s true that this code is eventually compiled into a movie that the Flash Player plays, there are still significant challenges in being able to interpret the text that lies within a Flash movie.
Standardization: Flash code varies dramatically from developer to developer. For example, Flash designates certain movie clips as “buttons” but many developers (including myself) never actually use technical “buttons” because other movie clips offer much more flexible ways of animating and handling user interaction. As a result, code and the structural elements that make up a Flash site vary widely. In contrast, HTML and the manner in which pages are displayed is very standardized — there’s only one way to indicate that you’ve got a link. Even if you use a dynamic language like PHP, the PHP will eventually spit out HTML that is widely standardized. Granted, AJAX and use of JavaScript can yield less standardized results, but for most HTML sites, the code is much more standardized than Flash. The end result is that HTML offers Google a much more standard framework for interpreting the meaning of pages than Flash does.

I’m sure that there are numerous other factors that go into it as well. As Google themselves point out, there are additional things which present problems for interpreting Flash content:

Images (and video): Google points out that they are not able to index images that feature text or any video that features text. Nor do they mention way to tag images and/or video in order to make it even partially visible (like you could with the “alt” attribute in HTML).
Potential problems with javascript: Google does not execute some types of JavaScript and therefore won’t be able to read some Flash files which are embedded via JavaScript. Since pretty much every developer worth his/her salt uses JavaScript to embed their Flash files, this could be a problem for sites.
Externally-loaded content: Any content that is loaded by Flash (via XML or an additional SWF) will be considered a separate page. Depending on how your site is structured, this could present significant interpretation problems for Google.

The reality of the situation is that since Google is now indexing Flash sites, the content it gets back could be even more confusing for Google and could adversely affect your search engine ranking (see John Andrews’ blog entry on why you might want to block Flash from search engines).
In my opinion, all this boils down to the following strategy: watch and wait. No doubt standards for search engine optimization inside Flash will begin to emerge as Flash developers start experimenting with code and SEO, as Google continues to tweak algorithms on their end, and as Adobe keeps working on its Searchable SWF API. Until solid standards start emerging, Flash should still be treated as a system which requires additional work and solid strategies in order to be properly optimized for search engines.



Experiment: Drip / Splatter Effect
Eric Oliver — Mon, 16 Jun 2008 03:46:32 +0000
This is a simple AS3 experiment creating a drip splatter effect which reveals text on a page.

The idea here is to have mouse movement which creates drips or paint splatters which then reveals text on the page. The challenge is that if you’re dropping bitmaps onto the stage with each mouse movement, the SWF very quickly becomes overfull of bitmaps and your CPU will slow to a crawl. So I used the Flash bitmapData.draw method to basically take a “snapshot” of the drip layer after 10 bitmaps have been added and then toss the bitmaps after the snapshot has been taken. That way the flash doesn’t have to keep track of a huge number of bitmaps and the SWF takes it very easy on the CPU.
You can download the source files here.



Dog Whisperer: Breed Selector Mini-App
Eric Oliver — Mon, 16 Jun 2008 00:28:54 +0000
CLIENT: National Geographic

PROJECT: Viral Application
My friends at K2 brought me a very interesting project: National Geographic needed a viral application for the Dog Whisperer site. They wanted a tool that would allow users to rate a number off different criteria they prefer or dislike in dogs and then have the tool pick the top three dogs the user would like.
I designed the application to be very clean and easy-to-use with only a few images intended to showcase happy people and their dogs. The tool itself allows users to rate 18 criteria on a scale of 1 to 6, then takes all those responses, and runs it through a custom algorithm that then yields the top three results based on their preferences.
Fun note: The chocolate lab on the first page is my dog, Jack  


	
	




Roxy: Follow Your Heart Website
Eric Oliver — Mon, 16 Jun 2008 00:21:27 +0000
CLIENT: Roxy

PROJECT: Design & Flash Programming for a YouTube-Compatible Website

followyourheart.roxy.com
For Roxy’s new summer campaign, they wanted a fun website that captured the Roxy brand identity, encouraged young women to follow their dreams, and gave site visitors the ability to submit videos in order to win a grant in order to go after their dreams. The design was easy: they already had a strongly-established identity for the campaign, so I simply explored ways to leverage their existing assets to create a very fun, active environment.
One thing I wanted to do was to create a sense of depth and seamless transitions between the site sections while keeping enough visual cues so that users knew when they had left one section and entered another. I did this by setting up a number of elements in the background (the clouds, the swirls, etc.) that are consistent from each page but shift in space and change color.
Technically, the site presented an interesting challenge. Roxy did not want to host the videos on their servers, so we needed to have a Flash site that could interact with YouTube’s API and pull videos from their servers onto the FYH site. I figured out the Flash side and then partnered with the excellent developers at Webtrix to create the CMS which gives Roxy a simple way to add, edit, and delete videos.
Incidentally, I was integrating the site using the YouTube ActionScript 2.0 Player API which at the time was only a couple weeks old. As a result, I had everything working fine except for unloading a previously-loaded video. I was banging my head against the wall for hours until I finally discovered an  undocumented (at the time) function — destroy. So for all you people integrating YouTube into your Flash site, remember that destroy is your friend  


	




Battle of the Bands Website
Eric Oliver — Mon, 16 Jun 2008 00:01:24 +0000
CLIENT: THQ

PROJECT: Multilingual, Dynamically-Driven Web Site

www.battleofthebandsgame.com
Like all of THQ’s projects, they needed a site that was easy-to-update and could support multiple languages. Belay Development did the design and I built the site, once again driving all the site content via easy-to-update XML files. Screenshots, buddy icons, avatars, videos — everything could be edited, modified, and translated according to all the different countries’ needs.


	




Company of Heroes: Opposing Fronts Flash Website
Eric Oliver — Sun, 15 Jun 2008 23:55:52 +0000
CLIENT: THQ

PROJECT: Multilingual, Dynamically-Driven Flash Site

www.companyofheroesgame.com
Company of Heroes Home Page
For the latest in THQ’s Company of Heroes franchise, we wanted to capture the World War II feel while still supporting THQ’s need for multilingual, update-on-the-fly sites. Belay Development handled the design while I built the site so that all the content on the site can be quickly and easily updated through XML files.
I also got a chance to do some fun behind-the-scenes Flash stuff that the average user would not notice: For underage visitors the Flash creates  site cookie which blocks them from entering the site. In the screenshots section, THQ has a standard thumbnail size that they use across all their properties. However, this section was not designed to use this standard size, so I needed a way to load the standard-sized image and shrink it to the new size. That sounds easy enough, but this site needed to be Flash 8 AS2-compatible, which means that when you resize dynamically-loaded images, the images look jagged and artifact-ridden. I did a modification of Kaourantin’s loadBitmapSmoothed function and so now all the images in the gallery look smooth as silk and THQ doesn’t need to do any photo editing.
Site audio is always a challenge — playing music outright can get old very quickly. I wanted something which captured the ambience without being overbearing. I loved the sound of artillery going off in the background — it immersed me in the “Band of Brothers” type of world that CoH captured so well. However, the human ear picks up on patterns very quickly. So I built a function that randomly selects one of a couple artillery sounds and plays them at random times. The end result is a very realistic-feeling, ambient sound track which isn’t overbearing. Personally, I like to just sit there and listen to the background sound — I find it kind of soothing, like thunder in the distance. I hope that doesn’t make you think I’m too twisted…