Archive
You are currently browsing the archives for the My Work category.
By scott
Long time no blog! I just found out I will be presenting at Flash Forward in San Francisco on August 21, 2008. At this point I know I will be presenting with Neil Ishibashi, Disney.com Art Director extraordinaire. As to what exactly we will be presenting, I’m not 100% sure. I know it will be along the lines of Engineer/Creative work flow on the all new disney.com. Our presentation will be at 10am - 11am on Thursday morning, directly following the Adobe keynote (not a bad lead in). Leave me a commnet if you are going to be there and if there are any particular items you would like us to cover in our presentation.
By scott
I haven’t blogged in a while, mainly because I have been extremely busy at work. One of the projects we launched tonight is the WALL-E takeover of the Disney.com homepage.
Earlier this year I was lucky enough to go up to the Pixar offices (yes it is an amazing office) to discuss this project. June 24 seemed so far away when we were storyboarding out the concept and presenting our ideas. I must admit, the final rendered version looks much better then those sketches and block animations we toyed around with.
From a technical standpoint there isn’t much to write home about here, however, it was a pretty cool project to say I worked on…sorta. Check it out, it will only be up for a few days.
By scott
After 6 years with the same design it was time to retire my old website. Like any busy developer or company for that matter personal projects always get pushed a side. I figured since I am starting new in L.A. that I should finally get around to updating my Blog. And here it is. I rolled my own CMS for my previous site and blog, it worked great, but it was dated. So now, like many, I have switched to WordPress.
I will soon have my portfolio back up, this time I am going to try and do something a little bit cooler with it, and since I am a Flash/Flex developer I will probably do something using the aforementioned technologies. For those who can’t wait to see what I’ve worked on the old portfolio can be viewed here. Stay tuned and let me know what you think of the new site.
Props to the designers of this theme N.Design Studio and MangoOrange™, I haven’t set up all the 301s for the old content, so if you have bookmarks you may see the old design rearing it’s ugly <head>.
By scott
A short time ago, almost a year now, I blogged about how I was leaving Critical Mass to go and work on the Yahoo! Flash Platform team. Well, believe it or not, I am on the move again. This time I have accepted a job with the Disney Internet Group in North Hollywood. Just like Yahoo! I will be a Senior Flash Engineer working on the core technologies team. I am not sure who is more excited about me working for Disney, my son or me?What excites me the most about this opportunity is the creative environment I will be working in. Those who know me know that I thrive in a creative environment, and it doesn’t get much more creative than Disney. I love to push the envelope and one thing I have learned over the past 10 years is it takes a great creative team and environment to push development teams to the next level.
Yahoo was great, I learned a lot, met some great people, and I worked with some of the smartest people I have ever had the chance to work with. Plus I got to see Taylor Hicks in concert at the Yahoo! campus, oh wait; I am only supposed to be mentioning the good memories.
I would like to thank Yahoo for the great opportunity they gave me and everything I learned. There are some very talented people in Sunnyvale and around the world painting the internet purple. Do you Yahoo? I did and it was spectacular! (obscure Seinfeld reference for you hardcore fans). Now I must replace my Yahoo! hat with a pair of ears.
By scott
Yahoo’s Flash Platform team is looking for another member. Below is the job description, if you’re inerested apply online and you may end up sitting next to me (literally). The Yahoo! Flash Platform team is looking for an exceptional engineer to join the team. We are looking for someone who is passionate about Flash platform technologies, someone who would debate design patterns and methodology just for sport and most of all someone that is best described as omniscient when it comes to Flash.
The Flash platform team is responsible for the Flash code library and component set that will serve Yahoo!’s wide array of applications. Members of the team will also provide training and development support, as well as shape the direction of the overall platform.
You will be responsible for designing and developing the code library that will make Flash development elegant, optimal, and a pleasure to use. You will collaborate with extremely talented engineers on this team and throughout Yahoo! to make the platform a reality, and encourage best development practices throughout the organization. You must comfortable with articulating and evangelizing the platform strategy to influencers and decision-makers.
The ideal candidate will be an expert with Flash platform technologies along with 5 to 8 years of development and leadership experience. A strong portfolio of applications, including large-scale/enterprise usage of Flash, and experience with systems-level development and foundation code development are expected.
As a senior engineer, you are expected to be well-versed in: - ActionScript 2 and 3 - Flex 2 - Flash Lite - Flash security model - Flash-to-JavaScript interactions - Server interactions (socket, remoting, FCS/FMS) - Development design patterns - QA and testing practices - Internationalization - Accessibility factors
Applied knowledge of PHP, JavaScript, HTML, CSS, and general Web development practices are highly desirable for this role.
By scott
Well, pulled a few more hairs out today. Hard to believe I have any left. I am working on a multi-lingual application that needs embeded fonts. As most of you know, loading every character in a given fontset equates to one big ass swf. For example, if you want to embed a regular and bold Japanese font you’re looking at approx. 13 megs, and depending on the quality of the font you could be close to 20 megs. That’s a lot of font. In an ideal world the Flash Player would allow for dynamic runtime shared font libraries that allow for only a subset of characters to be embeded.
In AS2 there were a few ways (hacks) to load font libraries at runtime. Unfortunately none of the AS2 hacks work in Flash CS3 using AS3. However, there is an answer. In Flex you can embed fonts at compile time using the [Embed] metadata tag in your Actionscript. And the best part is you can use the unicodeRange attribute to define a subset of characters you want to embed. Below is a class I created that compiles a swf that contains all Latin I characters in the Arial font.
package {
import flash.display.Sprite;
public class _Arial extends Sprite {
[Embed(source='C:/WINDOWS/Fonts/ARIAL.TTF', fontName='_Arial', unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E')]
public static var _Arial:Class;
}
}
A couple things to point out here. The fontName attribute value can not be the same name as a device font. If I were to change my code to use fontName=’Arial’ the compiler throws the following warning “the embedded font ‘Arial’ may shadow a device font of the same name. Use fontName to alias the font to a different name”. To get around this I simply added an underscore before the name. From this point on you must reference the _Arial in your TextFormats or CSS. Now if you compile that it will create a swf named _Arial.swf.
Ok, great, now what? Well, now you have to load the font into the application. Here is a sample class that loads in the font and displays some rotated text just to prove that it is embeded.
package {
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;
import flash.text.*;
public class FontLoader extends Sprite {
public function FontLoader() {
loadFont("_Arial.swf");
}
private function loadFont(url:String):void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontLoaded);
loader.load(new URLRequest(url));
}
private function fontLoaded(event:Event):void {
var FontLibrary:Class = event.target.applicationDomain.getDefinition("_Arial") as Class;
Font.registerFont(FontLibrary._Arial);
drawText();
}
public function drawText():void {
var tf:TextField = new TextField();
tf.defaultTextFormat = new TextFormat("_Arial", 16, 0);
tf.embedFonts = true;
tf.antiAliasType = AntiAliasType.ADVANCED;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.border = true;
tf.text = "Scott was here\nScott was here too\nblah scott...:;*&^% ";
tf.rotation = 15;
addChild(tf);
}
}
}
And there you have it. Run time embeded fonts. The key lines to look at here are
var FontLibrary:Class = event.target.applicationDomain.getDefinition("_Arial") as Class;
The getDefinition method returns a reference to the _Arial class loaded in through the swf (event.target). The next line:
Font.registerFont(FontLibrary._Arial);
registers the loaded in _Arial font in the global font list. If you were to trace out the results of Font.enumerateFonts() you will now see _Arial at the top of the list.
Now lets say your site was in a few different languages you may add the following line to the FontLoader constructor to load language specific fonts at runtime.
public function FontLoader() {
var langManager:LanguageManager = LanguageManager.getInstance();
var langID:String = langManager.getLanguageCode(); //returns jp
loadFont(langID + "_Arial.swf");
}
Instead of loading in _Arial.swf the application will load in jp_Arial.swf. jp_Arial.swf would be another generated font swf like the _Arial example above but this time the unicodeRange would only include the Japanese fonts you need. All you have to do now is create a CSS file and fonts for each language, store the proper language code somewhere within the application and use that language code when loading your CSS files and fonts.
You may not know this but Adobe has supplied us with sample unicodeRanges in the following file “\Applications\Adobe\Flex Builder 2\Flex SDK 2\frameworks\flash-unicode-table.xml”. You can either use one of the supplied ranges or create your own. You may only need to embed a few characters, if so just list the unicode values of the characters you want each seperated by a comma.
Sounds pretty straight forward eh? Or is it????
In doing this I ran into a huge bug using Flex Builder to generate the font swfs. When I was experimenting with the unicodeRanges my compiled versions did not contain the proper character ranges that I specified. For example I would define a range that only contained Uppercase characters. In my test font loading app I would only see numbers. Only if I removed the unicodeRange attribute would I see all my characters. This led me to believe that Adobe had documented something that really wasn’t part of the compiler. I tried deleting files, I was checking timestamps, nothing. Then I tried to clean my project before compiling (In FlexBuilder select Project > Clean). It worked! The subset of characters I defined in my unicodeRange only loaded into my test app. YAY! Then I tried switching the unicodeRange again. DOH! nothing. Cleaned project again and BINGO!
Lesson learned: Whenever you change your unicodeRange clean your project before you compile or else your change may not be compiled properly.
I haven’t tried this in Flex 3 yet to see if the bug has been addressed. I did look at the Flex 3 bug system and didn’t see it listed. Either it has been fixed or no one has run into this issue yet. It is pretty obscure I guess.
By scott
I have had many people request that I post the code to my ExternalInterfaceBuffer class that I made reference to in my ExternalInterface…HELP posting. This code is part of the Yahoo Maps AS3 Communication Kit that I wrote and can be downloaded from the Yahoo! Flash Developer Network. As a bonus you will also get some other very cool Yahoo! AS3 API wrappers, Search, Answers, Weather, and Upcoming.org. To make a long story short, the issue I noticed was some of my ExternalInterface calls were getting dropped. I did a boat load of debugging, and discovered it was actually the browser script engines overloading and dropping the calls. So I wrote a singleton class that queues up all the ExternalInterface calls and sends them one at a time in 50 second intervals. One thing I noticed, 50 second intervals works fine with Actionscript 3, Actionscript 2 is a lot slower so I had to slow it down to 100 miliseconds or else I was running into the same issues, just not as often.
/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.0
*/
package com.yahoo.webapis.maps.utils {
import flash.external.ExternalInterface;
import flash.utils.setInterval;
import flash.utils.clearInterval;
/**
* Utility to buffer outgoing ExternalInterface calls. Simoltaneous
* calls get dropped if they aren't buffered. It seems both Firefox and
* IE's script engine gets overloaded and either drops calls or
* throws a javascript error. This buffer ensures the script engines
* only get one call at a time.
*
* @langversion ActionScript 3.0
* @playerversion Flash 9
* @author Scott Morgan 02/25/2007
*
* @see flash.external.ExternalInterface
*/
public class ExternalInterfaceBuffer {
/**
* @private
* A singleton class that is accessed by almost all classes in this
* communication kit. This static variable gives access to this class
* ensuring there is only ever one instance of it.
*
*/
private static var instance:ExternalInterfaceBuffer = new ExternalInterfaceBuffer();
/**
* @private
* An array of methods waiting in the queue to be called. Once they
* are called they are removed from the array.
*
*/
private var methodQueue:Array = new Array();
/**
* @private
* Access to the interval that runs while the methods are being called.
* When all methods in the queue are called this variable is used to
* clear the interval.
*
*/
private var methodCallInterval:Number;
/**
* Constructor
* If an instance of this class already exists an error message is thrown
* informing that this class should only be accessed through the getInstance()
* method.
*
* @see com.yahoo.webapis.maps.utils.ExternalInterface.getInstance()
*/
public function ExternalInterfaceBuffer() {
if( instance ) throw new Error( "Singleton and can only be accessed through Singleton.getInstance()" );
}
/**
* @public
* This static method is what makes this class a singleton, it ensures that only
* one instance of this class is instantiated.
*
*/
public static function getInstance():ExternalInterfaceBuffer {
return instance;
}
/**
* @public
* Method used to add calls to the methodQueue array. If the length of the methodQueue
* array is greater than 0 the methodChurn interval is kicked off and runs every 50
* milliseconds until the methodQueue's length is 0 at which point the interval is
* cleared.
*
* @param obj and object containing a method string, and a data
* object. The method string is the method the ExternalInterface will
* call and the data object is the object that will be passed to the
* calling method as an argument.
*/
public function addCall(obj:Object):void {
methodQueue.push(obj);
if (isNaN(methodCallInterval) || methodCallInterval == 0) {
methodCallInterval = setInterval(methodChurn, 50);
}
}
/**
* @private
* This method is called every 50 milliseconds until the methodQueue array is empty.
* This method sends the first method listed in the methodQueue array to the
* ExternalInterface.call method.
*
* @see flash.external.ExternalInterface.call
*/
private function methodChurn():void {
if (methodQueue[0].method != undefined && methodQueue[0].method != null) {
ExternalInterface.call(methodQueue[0].method, methodQueue[0].data);
}
methodQueue.shift();
if (methodQueue.length == 0) {
clearInterval(methodCallInterval);
methodCallInterval = undefined;
}
}
}
}
Pretty straightforward stuff. Ok, that’s great, now how do you use it. Simple, one line of code, well two because you have to instantiate the class.
First you have to remember to import the class
import com.yahoo.webapis.maps.utils.ExternalInterfaceBuffer
Then you have to instantiate, you may choose to write one line of code to instantiate the class and call the addCall method in one line. I was used this class multiple times in the class so I instantiated it once and made reference to it with a variable scoped to the class.
private var EIBuffer:ExternalInterfaceBuffer = ExternalInterfaceBuffer.getInstance();
And lastly, add your call to the queue by calling the public addCall method. This method expects an object containing a String containing the method name and an encapsulated data object that contains the arguments you want to pass along to the method being called via the ExternalInterface.
EIBuffer.addCall({method:"myJavascriptMethod", data:{argA:'blah', argB:'merp', argC:'DOH'}});
That’s it, I know I could of made it a bit more elegant but it does everything I needed at the time. Plus it’s open source, now the world can all join in and make it perfect 
Enjoy!
By scott
The Favourite Website Awards (www.thefwa.com) has chosen the Rolex.com site as their Site of the Day for today (March 14, 2007). As most of you know, I have since moved on from Critical Mass but I still had a lot of involvement in this sites fruition. I was the lead Flash developer on it during my tenure at Critical Mass. Congratulations to all that I was lucky to work with on this great project and congratulations to all who are new and are now working on maintaining it. This is a great accomplishment and something to be very proud of. Keep up the great work and one day you’ll be able to afford one of these amazing watches 
By scott
I am proud to announce the new Yahoo! AS3 Libraries that were released today on the Yahoo! Flash Developer Network. We timed this launch with the 360Flex conference in San Jose at the Ebay campus. I will be presenting the Yahoo! AS3 Maps Commuication Kit tomorrow morning. As a side note this is my first contribution to the Yahoo Developer Network since I started here a couple months ago. Let us know what you think, and what else you would like to see. We’re here to make your job easier. We don’t want you to worry about accessing all of our data, we want you to concentrating on creating the best application with our data.
Happy Mashing!
By scott
I recently ran into another issue with ExternalInterface, when sending multiple calls at once? What I am seeing is when multiple calls are made certain calls get dropped unless I use setTimeout and add a 50 millisecond delay? I know this was an issue with the getURL(”javascript: in previous versions but I thought ExternalInterface was suppose to fix the overloading and buffering issues found in some browsers. I have tested in both IE and Firefox to no avail. And what really upsets me is the fact that it works sometimes, it’s not consistent.Is this a known bug, has anyone seen any workarounds (other than my hack of course). It’s happening in both AS2 and AS3. I am using the ExternalInterface to communicate between AS2 and AS3 (AVM1 and AVM2). I know I can use LocalConnection, but that is not the answer I am looking for, I need to use ExternalInterface in this particular project.
P.S. Happy Vallentine’s Day, I got chocolate covered bugs from my secret admirer, the ExternalInterface.
