Contrary to popular internet-belief, we are still doing a ton of Flash work here, and we are loving it. I ran into a problem today, and found a hidden trick that I thought was worth sharing here.

I needed different parts of a single dynamic text field to have separate formatting. After some digging, I found that you can pass 2 additional parameters to the setTextFormat() method, the first is a starting index, and the second is an ending index. That will then only apply the formatting to that specific range of text in the TextField.

Example:

textField1.text = "Hello, my color is RED";
var format:TextFormat = new TextFormat();
format.color = 0xFF0000;

// setting up the range 19 and 21 will make the "RED" part of the string red
textField1.setTextFormat(format, 19, 21);

I recently ran into a problem where I was loading in an image, and then trying to use that image in multiple instances on the screen at one time. The problem was that the image would only show up in the LAST instance I created. Rather than copying it multiple times, Flash was just moving it until my process was completed.

In order to duplicate, some extra code is required. You need to create a new bitmap object, and pass it the bitmapData of the original image, and then display them. Like so:

import flash.display.Bitmap;

//create however many instances you want
var duplicatedBitmap1:Bitmap = new Bitmap(Bitmap(loader.content).bitmapData);
var duplicatedBitmap2:Bitmap = new Bitmap(Bitmap(loader.content).bitmapData);

//add each instance
addChild(duplicatedBitmap1);
addChild(duplicatedBitmap2);

While finishing up a project over the weekend I ran into an issue where the video player just displayed an infinite loading screen rather than actually playing. Odd. I checked the JavaScript console to see if there were any JavaScript errors or if there was a 404 request for the video, which neither of those were actually the case. I tried to visit the file directly, and what do you know, it’s asking me to download the video, it didn’t start playing in the browser like it should’ve. After realizing the only reason this would happen would be because the server must not be returning the correct Content-Type header and the browser didn’t know what to do with it, I gathered the MIME types for the few videos formats we were using and updated the nginx mime.types file and restarted the server. What do you know, that solved the problem and after refreshing it displayed the video and it played as expected. So to help anyone else who may have ran into this issue and not really sure what to do, I have both the nginx and Apache solutions for you. Hopefully soon all web servers include these new MIME types to their default configuration files, but until then be sure to include these in your server setups for future projects.

nginx

Apache

While working on a client project today, I decided to add some nice CSS transforms to add a richer experience for those who choose to use one of the more up to date browsers (Safari, Chrome, Firefox 4). I chose to use the hardware accelerated 3D transforms for both Safari and Chrome, and the standard 2D for Firefox 4. Only to be stumped as whenever the animations started to take place, the header and footer for the site would flicker like a broken down TV throughout the animation until it was done in Safari, but not in Chrome. Not cool. So the first thing I did was search Google for an answer, clicking right away on the first Stack Overflow post I saw.

The first answer seemed like the wrong approach, having to add -webkit-transform-style: preserve-3d to every element and having the browser transform all the elements to a 3D state which would seemingly add more work for the browser. Not good, next answer.

The next answer was thought out more and seemed a bit more logical. Although for my build, both the header and footer have a fixed position. Header to the top, footer to the bottom, both of them pinned to the full width of the browser, no wider so it didn’t make sense as to why it was still flickering when the answer said it will happen if the elements are wider than the window itself.

The first approach I took was just to take out the header and footer CSS to see if it’d still flicker. It stopped! So something within the CSS must be causing this. I added the styles back in and only kept the styles for the actual wrapper for both the header and footer, still no flickering, so I was on the right path. After adding all the CSS back in and digging some more, I noticed the navigation, logo and some footer links had text-indent: -999em;. Taking this out preserved the header and footer completely during the animation and had no flickering. So I found the problem, the text itself was adding onto the headers width in the browsers eyes.

In the end, the simple fix was to add span tags around the text that I was negative indenting and hide that specifically rather than using text-indent all together. You probably wonder why I go into great depth on such a simple problem, but this has happened to be quite a few times before, and it is great relief that I know now what was causing it and how to fix it. I hope anyone who has had this problem before or are currently dealing with it find this article so you can move forward in your development and keep on making awesome things.

I’ve created a simple example for you to check out and see what happens. Simply roll over the rounded square in the middle of the page and let the flickering begin. Remember, only for Safari does this happen.

Another thing to keep in mind, is it also only happens if you have z-index on the parent element where the text is overflowing. I created another example to demonstrate this, the only difference between the 2 examples is this one doesn’t set a z-index on the header, which prevents it from flickering. Although for this build, heavy z-indexing is required.

For an internal project I am working on I need the ability to set environment specific configuration settings, and I’d rather not set them with a file full of constants. So I came up with a way to have a simple YAML file for configuration, and then an initializer to load it and apply it to a single constant being Setting.

Just copy the settings.yml file to config/settings.yml, then copy the settings.rb file to config/initializers/settings.rb. Once you’ve done that, restart your server and you’ll have access to all your settings.

You have your default configuration that you setup, then all your environments listed below that override any settings set in defaults. You’ll also need to create additional environment keys for any for other environments you may have.

It’s easy to store images in an array, and loop through that array to access those images. The code is very clean, and easy to manage. My concept is to try and load images from an array by looping through the array, and reusing one loader method multiple times. I would instantiate a new loader instance each iteration through the loop, and then load the image. The problem, however, is by the time the image is actually loaded, the for loop is complete, and my call addChild(l) is referring to the last time Loader was instantiated, so all of the images loaded were the last one in the array.

I’ve found an elegant solution to this (in my opinion) by creating an object for each image, and to store information about the image in that object, including an instance of the loader. Let me show you.

Example

//counter to keep track of unique items in the array
var counter:Number = 0;

//base array with paths to the images
var images:Array = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"];

//blank array which will be filled with objects that contain image data
var imageObjectArray = [];

for(var i:uint = 0; i < images.length; i++) {

	//create blank object with appropriate properties
	var imgMeta:Object = {imgPath: null, holder:null, loaderInst: null};

	//push the object into imageObjectArray so we can access it later
	imgObjectArray.push(imgMeta);

	//set the properties we know
	imgMeta.imgPath = images[i];
	var imgHolder:Sprite = new Sprite();
	imgMeta.holder = imgHolder;	

	//load the image here
	var l:loader = new Loader();
	l.contentLoaderInfo.addEventListener(Event.COMPLETE, onDoneLoading);
	l.load(new URLRequest(imgMeta.imgPath));
}

//function called when each image is done loading
function onLoadComplete(e:Event) {

	//use counter here to make sure we're getting the correct imageObject
	//we need to call each unique loaderInst here, so each image is unique
	addChild(imgObjectArray[counter].loaderInst);
	counter++;
}

This of course can be classed out and abstracted, but the basic principal here is being able to reuse the loader code each time through the for loop, and displaying each unique image when it’s done being loaded.

An additional benefit to this is being able to use the object again anywhere in your code, since all the information for all of the images is stored in imgObjectArray.

On a project we have in development now, we’re deploying a site that must work across mobile devices.  Not just iPhone, but Android, Nokia, Blackberry, and Palm.  Rather than purchasing a bunch of test devices, you can install emulators for each platform and then run the phone’s web browser.  Here’s some places to look and some instructions about how to build up your own testing suite.  These are instructions are for Mac.  Except for where they’re not.

On a project we’re working on now, we need to place “pins” on a map. There are some advantages for us not implementing the map with Flash. Namely, the project has a Facebook app component and Facebook requires users to click to activate Flash on profile tabs. I was curious to see how many pins I could instantiate in the DOM before there was noticeable chug. I made a test script that creates a bunch of img elements in the DOM. You can try it out here: DOM Capacity Test.

Through some not very scientific testing, I found that 100-300 DOM elements is my sweet spot (though IE really needs it towards the low end of that range). Any higher and the browser noticeably chugs during rendering. I was surprised that once rendered, the browser didn’t seem to perform any worse during scrolling or resizing. Another thing I noticed was that Firefox visually added each element to the page iteratively (taking much more time), whereas all other browsers immediately showed all of them after the initial CPU churn.

This subject matter is far from new, but quality typography on the web is such an important issue that it deserves attention. There many resources and tutorials out there, but I rarely come across a top-level view of all the typography-related techniques. Therefore, I’ve compiled a roundup of the most popular methods for rendering high-quality typography on the screen.

Images

using images for custom typography doesn’t necessarily have a negative impact on a site’s performance and search engine optimization. If file size is carefully considered, and the proper alt text is used, typographic images can be a good solution. Of course, this technique should only be used for short bits of text, like page headings, pull quotes, and drop caps. I will argue that there are better options available today, but at the end of the day, images are a perfectly valid option.

Flash

The value of embedding fonts in your SWF files cannot be overlooked. Although it would be considered bad practice to utilize flash for only this purpose, if Flash is going to be used anyways, one of it’s major benefits is the cross-browser pixel perfection and ability to embed dynamic type.

Web Safe Fonts & the Font Matrix

The list of “web-safe” fonts is very limited. Normally, most web designers don’t stray too far away from Helvetica, Verdana, and Georgia. This list from 24 Ways helps expand that list to fonts that are common across many computers, operating systems, and installed software. Used correctly in font stacks, developers can target most computers that have software like Office and Creative Suite. Check out the list, you might be surprised by how many fonts are available.

sIFR

It’s worth mentioning sIFR here, although many developers have abandoned this technology in favor of Cufon, which I will talk about later. sIFR (which stands for Scalable Inman Flash Replacement) is a flash replacement technology. The philosophy here is creating the ability to bring rich typography to web pages without compromising accessibility or semantics. Additionally, one of the great advantages of sIFR was it’s fallback to plain text if Flash is not supported. Although it’s been criticized as hard to implement and somewhat buggy, this was the first real jump forward for web typography, and is still very popular to this day. sIFR laid the foundation for many great resources for custom web typography.

Cufon

The best way to describe Cufon is a next generation sIFR which is built with Javascript rather than Flash. This method has it’s benefits like not requiring the Flash plugin – good news for Apple devices. It’s also extremely easy to implement, and has very good performance, even for large amounts of text. You upload font files (with the proper licensing) through the Cufon site, and convert’s the file to SVG format. Then, the SVG file is converted to JSON which can be added to your site through simple Javascript. One downside to using Cufon is that many custom font licenses do not permit usage on web pages, so check the license or use a great free or open source typeface. There are many good ones out there.

If you’re looking for some high quality free fonts, Smashing Magazine is a great place to start your search.

Font-Face

This is by far the easiest method to integrate custom typography on the web. Using the @font-face property allows you to access fonts via CSS, and host the files on your web server. Of course, the same licensing issues remain, so make sure to chose a good typeface with no constraints. From there, you can use @font-face to access that font file for use with any CSS property. Add the font name on the top of your font stacks, and that’s it. There are a few hoops to jump through, mainly to accommodate Internet Explorer. IE requires a .eot file (Embed-able Open Type) to render custom fonts. Luckily, there are a few good online converters that will take common font files (.ttf and .oft) and convert the fonts to .eot. On a side note, I wrote a recent blog post about getting @font-face to work correctly in all major browsers.

TypeKit

TypeKit aims to take all of the hassle out of setting up @font-face, and they do a killer job at it. For as little as $25 per year, you can use fully-licensed fonts which are hosted on TypeKit. All of the licensing issues as well as the compatability woes are taken care of, and in turn you get an incredibly easy-to-use and extremely large font library at your fingertips. It’s definitely work a second look.

Google Font API & Font Directory (beta)

In the same veins as TypeKit, Google recently introduced their font API and font directory. Google hosts fonts that are licensed and ready to go, you just have to target these fonts on your site, and Google will do the rest. Their library is currently very conservative, but hopefully this will grow in the near future.

Here at BKWLD we like to keep things such as our everyday work flow and culture as transparent as possible. I thought it would be a fun idea for everyone whom wanted to take part to list their top 5 or so most used apps.

Some of the apps listed are pretty standard and some not so much. We are always interested in exploring new apps so, please recommend away!

Jeff Toll – Creative Director

Photoshop - “Open and running every day, all day.”
TextEdit – “I get grief for using this but it’s lightweight and simple, simple, simple. I’ll start using a more robust text editor sometime soon. I use it for writing quick storyboards and concept explanation etc. ʻPagesʼ is upon the horizon…”
xScope- “Covers my ass for screen resolution guides at the very least.”
iChat- “Communicating with our Seattle office and random jackasses.”
iCal -“I’ve been getting better and better with my organization.

Robert Reinhard- CTO & Partner

Pages - “I haven’t touched MS Word in over 2 years and haven’t looked back. I love how it handles styles, it’s like easy CSS in a word processor.”
OmniOutliner - “For taking notes on conference calls.”
MAMP Pro - “Powers My LAMP dev environment. Makes it easy to setup additional testing vhosts (test dev rather than local host).”
TextMate – “When is 2.0 gonna come out?! I’ve been flirting with switching to Coda, but I miss some of the hotkeys.”
Socialite -“Aggregates feeds from Facebook, Twitter, Google Reader, and Digg all in one place, plus allows me to post comments/tweets.”

Scott Thiessen – Flash Developer

Safari -“The Activity Window and Web Inspector alone are enough to make me feel like the king of the Internet.”
TextMate - “Lots of power for so little toolbar.”
Sequel Pro – “This is phpMyAdmin’s gorgeous, sophisticated sister. Unbelievable that this app is free!”
Spot Color + Developer Color Picker - “Slick way to grab colors from the screen, tweak them in your favorite gamut, and spit out hexadecimals.”
Quick Look - “Not really a stand-alone app, but I’ve definitely forgotten what it’s like to use a computer without it.”

Matt Aebersold – Flash Developer

Flash + AS3 - “Although thereʼs a steep learning curve, learning object-oriented AS3 has opened up so many doors, and is such an intricate and expansive programming language. Itʼs allowed me to create some kick-ass web designs.”
Coda – “Once a site project is completely set up, the complete integration is incredible, and so intuitive. Once I made the switch I’ve never looked back.”
MAMP - “Helped me do PHP dev on my local machine. Extremely helpful in every way.”
Things - “Awesome to-do app. Easy to set up and manage. So simple, and It’s what’s not included that makes it great. plus syncing over dropbox has make this invaluable. That said…”
DropBox – “Awesome cloud storage. If I point my apps there, than they sync on all my computers (iTunes, Things, etc…). Plus online file recovery is very easy.”

Sean Monahan – Flex Developer

Eclipse w/Flash Builder 4 Plugin - “Paraphrasing a Josh Reddin-ism, ʻItʼs a text editor for fully grown men.ʼ Upgraded from Flex Builder 3 stand alone and my opinion of Eclipse has greatly increased. Eclipse also has plugins for PHP dev, Unfuddle (our ticket tracking software) and Ant (for oneclick builds)- all this allows for a one-step development environment for Elastic.
Calculator -  “Boring, I know, but good for doing quick math. I use this a lot when programming Uls. Bonus: it has a “programmer” view for doing fancy binary math.”
Last.fm – “I like its music picks better than Pandora and the artist bios and photo streams are freaking sweet.”
Photoshop – “What doesnʼt it do?”
Adium - “A slick IM client that supports just about every IM service in existence.”

Aaron Egaas – Web Applications Lead

Chromium - “Browser of choice, nightly version of web inspector is as good as firebug without the performance hit.”
TextMate - “Code keeps me paid, and TextMate keeps me sane.”
iChat - “Remote communication, PM requests.”
MailPlane - “Multiple Gmail accounts? Like to keep ‘em separate? Notifications? Native web app feel with label and everything? Gets me into GCal, too.”
Terminal - “I gotta ssh into servers to push code, so I use some sweet aliases to keep it all organized.”

Dave Brown – Senior Interactive Producer

Adium
OmniOutliner - “Great for taking notes.”
FontLab Studio - “Converting fonts.”
Justinmind Prototyper - “Havenʼt really used this yet, but Iʼve heard great things.”
Adobe Media Player - “Checking/watching native flv.”

George Plendl – Front End Developer

Linkinus - “Best IRC client for a mac. irc.freenode.net, #jquery is a great place to learn and ask questions.”
Alfred - “Quicklaunch application for which aims to save you time in searching your local computer and the web. Replaced ancient Quicksilver app!”
Snippley - “Basic text and organization app.”
Beyond Compare - “Easily compare files, folders, images, anything. Itʼs great!”
TextMate - “The best text editor for Mac and a powerful abbreviation engine for HTML and CSS. Saves hours!”

Shelby White – Design Intern

DropBox - “Best app for managing projects between projects. I also use it for freelance in getting assets.”
Adium/iChat - “Adium manages contacts better but iChat actually sends files.”
Coda - “My favorite app with FTP for html/css.”
Wordpress - “ Where I’ve spent most of my last year and a half.”
TweetDeck - “Nice for managing my tweets…”

Joe Leoni – Producer

TweetDeck - “Best way to stay informed of Chad Ochocincoʼs daily workouts or Snoop Doggʼs ʻbreakfast activitiesʼ.”
iChat - “Instant messaging: extreme convenience and extreme inconvenience all wrapped up into one.”
Garageband - “Now anyone can be a MC, and youʼll probably be better than 99% of radio hip-hop.”
Pages - “Iʼd rather be using Word, but close enough.”
Solitaire - “The best way to play with yourself.”

Veronica Skarshaug – Administrative Assistant

Stickies - “Nice way to save on physical sticky pads, and info that I need on a daily basis is easily accessible.”
TaskMate - “Great for keeping my to-do’s in order.”
Numbers - “I like to make spreadsheets, I’m a total nerd.”
Preview - “Makes things easy, easy, lemon squeezy.”
iChat - “Because, duh.”

The Hit List – “Awesome and free GTD app to keep my days/life organized.”
Transmit – “Gorgeous UI and experience to easily upload my files.”
Adium – “My favorite chat client especially when used with the iPhone message style.”
Cicero – “Dashboard widget that fulfills my Lorem Ipsum needs. Used and abused daily.”
Photoshop – “There is a light on under this icon all day. Content aware fill has come in handy on more than 1 occasion.”