Selection Border around Flash content in Firefox 3+

This pesky little problem has been niggling away at me for months, so I finally decided to investigate the problem and find a solution.

It appears as though this is only a problem in Firefox 3+ when you set the 'wmode' parameter to transparent. Now I'm no browser compatibility expert so I'll take someone else's word on this but Firefox renders and handles the default style of the outline property of the object tag differently to other browsers.

Solution

Set the object tag's outline property to 'none'

object { outline:none; }

Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Comparing Class names

In the most recent project I've been developing I've needed to match up or pair a class name with an identifier from an XML file. Something like this:

<spriteID>SomeClass</spriteID>
[object SomeSprite]

A possible solution to achieve this is demonstrated pseudo code below.

var stageSprite:Object = stageSprit;
var stageSpriteClass:Object = Object(stageSprite).constructor;
var xmlClassName:Object = getDefinitionByName(xmlSpriteID);

if(stageSpriteClass == xmlClassName){
   return true;
}

 Usually you can achieve this dynamically without the need to to compare and associate clips but in case you need to do it this way, you now know how.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Converting from cartesian to polar co-ordinates in flash

If you have no idea what the title of this blog post is referring to, check out this page which explains the idea. It's some pretty simple triginometry.

For those of you who've ever tried (like me) to do this in flash (or I imagine any programming language), you probably will have run into problems using code like this:

rotation = Math.atan(y / x) / Math.PI * 180;

This line is basically just converting a unit vector into an angle which is used to rotate a sprite. Simple enough right? Well check out the output:

Two of the arrows are fine, the other two are pointing the wrong way.

The solution is to change the code to use atan2 as follows (passing in the y & x, without doing any division):

rotation = Math.atan2(y, x) / Math.PI * 180;

Which fixes the output as below:



This also means you don't have to worry about divide by zero errors.

This may seem pretty obscure, but one day you'll be doing this and you'll remember this post and thank me ;)

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

FileReference and Scope

For the first time today i used FileReference in Actionscript. There are multiple uses of this but the one i was interested in concerned downloading. I jumped into *Flash's intuitive help section* and attempted to perform the desired outcome (saving an mp3 file locally).

So it all worked great, until i tried to save the file. Nothing happened after pressing save in the dialog box. Turns out the culprit was scope. I created a local function instance of FileReference instead of creating a class instance. When the dialog box opens it needs a reference it can get back to otherwise it's lost and the operation can never be completed.

For a more structured walkthrough check out Adobe's help on the matter.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Alternative Debugger

De MonsterDebugger is an Air application from De Monsters that comes with a handy set of features. One of its better known features includes editing properties and calling methods at runtime. This alone definitely makes it a nifty little debugger. It also displays xml as a tree that is collapsable and expandable. At times the overall tree structure can be somewhat clunky but it's enough to get me using it. The only catch with these perks is that all your properties and methods need to be public so that they are accessible.

To enable MonsterDebugger in your application instantiate it first like this:
this.monsterDebugger = new MonsterDebugger(this);
this is the reference to the root of the application. This line alone allows to modify methods and properties throughout your application.

To make a trace you would write this:
MonsterDebugger.trace(this, xml);
this is the reference targeted object.

One last thing to consider is that you export the classes needed for MonsterDebugger from the Air application to the client side folder. To do this navigate to the following in the Air app:
File > Export Client Class
Point to the folder that contains all your application's classes

Download the Air application Version 2.51

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

The Holy Grail of Flash - Animating water

Recently I was asked to create to animate water splashing from out from the wheel of a moving car, as if it was driving through a puddle. I studied animation at university, so I can say with some small amount of authority that animating water is generally considered one of the more difficult things an animator can do.

 

Probably the easiest way to solve the problem is to use video of water with a transparent background that has been modelled in a 3D application.

 

I used a video from iStock similar to this one:

http://www.istockphoto.com/stock-video-8526304-water-splashes-in-slow-motion-preview-darker-than-original.php

it didn’t have the perfect splash I needed, but there were enough different types of splashes and angles to be able to piece something together with multiple layers and some After Effects trickery.

 

The biggest problem I encountered was that iStock footage uses Quick Time with Photo JPEG compression which doesn’t have an alpha channel. You can however still create an alpha channel using a “luma track matte”, as this tutorial shows. A luma track matte is basically where After Effects creates an alpha channel based on luminosity while keeping the integrity of the original footage.

Check out the video tutorial here:

http://vimeo.com/7385956

 

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

this.stage.stageHeight returning the wrong value (by 100px)

If you've ever experienced this one, there's an obscure reason: the bandwidth profiler.

If you have the bandwidth profiler turned on when you publish in Flash, stage.stageHeight will be 100px less than it should be.

?_?

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Linking to URLs in a standalone player

You aren't allowed to link to external URLs that aren't in th esame domain from the standalone desktop player.

Why? It could be a file that you've download and could take you to a site that may harm your computer.

What you can do:
- Make it an AIR app
- Make it a projector (.exe .app)

Currently rated 2.0 by 1 people

  • Currently 2/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Implementing swfaddress

In its most basic implementation swfaddress enables developers to deep link their project and incorporate browser functionality into their flash applications. This is pretty clever but it also has some pitfalls if not implemented correctly.

I recently worked on a project that required this functionality and experienced some unwanted behaviour i thought i would share.

- Earlier versions of swfaddress can break flash applications in browsers specific browser. (IE7 + 6)
- Be sure to handle situations when an incorrect URL is entered through the browser
- To err on the side of caution always make your application react and animate AFTER the URL in the browser has changed.

The below link is a folder i created that has the required assets to implement swfaddress in your project. This is version 2.4 and i can confidently assure its stability across all browsers. It contains the AS3 classes and javascript file needed. It does not contain working examples or instructions on the implentation, that can be found at the swfaddress site.

SwfAddress Assets.zip (10.98 kb)

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Fonts that show up in Photoshop but not in Flash

If you've been working with Flash for a while, you will have probably come across this one. Some fonts will be fine when they're being used in Photoshop, but mysteriously won't be available in the droplist when you're trying to use them in flash. Normally this happens when you're trying to use a couple of different weights of the same family.

The reason this happens is because of the internal font names. Basically, embedded into all font files are a few different pieces of meta information, including a couple of different names. Photoshop is pretty smart about distinguishing between different versions of the same font, but Flash is not. So sometimes to get a certain font to work in Flash, you need to edit these internal names.

How do you do it?

Step 1: You need an application that can edit font information. For years I've used Altsoft FT master to do this, but it's a bit pricey, and I think a cheaper alternative is Typograf.

Step 2: Open Typograf and browse to the correct font.

Step 3: Right click the font and choose properties. 

Step 4: Edit all four of these to use the same exact text (copy and paste it from the Postscript name for example)

  • Font Family
  • Full Name
  • PostScript name

I've done a bit of testing here, and you'd think that it would be easy to narrow it down to which particulay internal name Flash uses. Unfortunately that's not the case, so edit all of the names and make them all the same.

Step 5: Save the file (as a copy!)

Step 6: Uninstall the original font

Step 7: Re-install the new font file

Step 8: Get back to your flashing

Note: this guide is for PC, I'm not sure if the problem exists on the Mac, and if it does, I'm not sure if this will fix it ;)

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5