swffit - Smart Flash Resize Script

http://swffit.millermedeiros.com/

"swffit was made to improve accessibility of your flash website.

It was made because each user uses a different screen resolution and resizes the browser window at custom sizes.. when you set the flash size to 100% width and/or height (full bleed) the browser won't generate scrollbars and maybe an important content will be hidden from the user.

In short: It controls how big and how small your Flash movie can be scaled to within a browser window (assuming you're at 100%). Adds necessary scrollbars if someone resizes the window to a size smaller than the minimum.

Flash Liquid Layout - Top Left Corner

This code is for top left aligning an object inside a centered fullscreen Flash movie. Took me a while to figure this out, but here's the code:

Stage.align = "T";
Stage.scaleMode = "noScale";

originalStage = Stage.width;

sizeListener = new Object();
sizeListener.onResize = function() {
myObject._x = myObject._x-((Stage.width-originalStage)/2);
originalStage = Stage.width;
};
Stage.addListener(sizeListener);

Ascii to Flash ActionScript Key Codes

http://people.uncw.edu/tompkinsj/112/flashactionscript/keycodes.htm
This is more of a bookmark for myself, but if anyone needs to know the complete set of keycodes for keypresses in Flash, check out the above link.

Usage:
keyListener = new Object();
keyListener.onKeyDown = function() {
if (Key.isDown(49)) {
trace("CTRL is pressed");
}
Key.addListener(keyListener);

Javascript Scroll to Top

I was building a website for a client, all self contained into one Flash file. A good friend pointed out to me that with every link in the footer, while it changed the site as expected, the site stayed in one place. Meaning the content changed, but there was no jump to the top of the page like you'd expect from a normal HTML page. A lot of these sites I build are landing pages for AMOE, meaning I'm basically doing in Flash what is normally done in HTML/Javascript. The main difference is that I don't do Javascript, so building these in Flash and giving an HTML experience (sounds funny, I know) is my goal. Doing this in Flash cuts down on my development time greatly. Annnnnnnnnnd tangent.

The point of this post is, you can scroll to the top of the browser window directly through a Flash call. And that ActionScript is?

import flash.external.ExternalInterface;
ExternalInterface.call("self.scrollTo(0,0)");

That's it. No need to reference a Javascript script in your HTML page. You can also use getURL with the same value, but I found that if you need to run any other scripts at the same time, they may clash. Javascript can only run one at a time if running through the address bar. I found this out while trying to use SWFAddress with getURL. One had to give.

Global clearInterval

i = setInterval(function(){},100) + 1
while(i--){
clearInterval(i)
}

See that above? Run that at any time during your Flash to completely clear out any intervals you have running. If you're like me, sometimes you have 2-3 running at a time, and switching between frames and inadvertantly resetting your intervals renders some crazy results. When you call this, don't forget about your intervals that are running onMotionComplete. Make sure you stop your tweens at the same time, or they'll keep running and reset your interval. Damnit if that last piece of advice didn't waste an hour of my time!

I'll let Ted explain how it works:
http://ted.onflash.org/2004/11/fun-with-intervals.php

Auto-Formatting your XML for legibility

Generally all of my XML work involves Flash, and trying to figure out how to point to my nodes to grab data. I use AS2, so I still use "myXML.firstChild.childNodes[4].firstChild" notation. I know there are other ways I can call this out by testing for nodeName or by using attributes, but I still prefer this method when I'm not the one writing the XML.

Anyway, tracing your XML in Flash, you'll notice Flash cares less about giving this information back to you in a digestable format. They give it to you like this:

<?xml version='1.0' encoding='utf-8' ?><somenode>someinfo</somenode><somenode><somenode><somenode><somenode></somenode></somenode></somenode></somenode></code></code></em>

Chewing through that can be a pain. I ran across a website that you can plug this into, and it will spit out beautifully formatted XML for your reading enjoyment:
http://www.shell-tools.net/index.php?op=xml%5Fformat

Add rounded corners to rectangles in Flash using the keyboard

Awesome tip: Way back when, I had an issue with having to double-click the rectangle tool to add rounded corners to a rectangle object in Flash. Not sure who told me at MM at the time, but you can simply hold the mouse button when inserting a rectangle on the stage and hold down the up or down arrow keys to adjust the rounded corners *real-time*!

Source: http://weblogs.macromedia.com/amusselman/archives/2005/09/add_rounded_cor.html

Does your Ultimate Scroller have a ton of blank space at the bottom?

http://www.forum.flashloaded.com/boards/showthread.php?t=18765

Does your Ultimate Scroller stick on mouseUp?

http://www.forum.flashloaded.com/boards/showthread.php?t=18765

Dreamweaver Phone Home

I had Fiddler open today when I was trying to get some images from a provider's site for something I'm working on. Well, look who's phoning home to Adobe with my OS, version number, app name, etc... Flash and Dreamweaver!

It even phones this directly into Omniture's website, which is the scary part. If you don't know, Omniture is a web analytics (reporting) tool that the big boys use. The info Omniture can snag is super detailed, from knowing where your mouse's positioning is within a site, the complete trail of where you're coming from and much much more, broken up into beautiful real-time graphs. I know, I've used their tools for sites in the past.

Photoshop and Fireworks don't seem to, except for Fireworks' annoying "Register" window that pops up daily.

JUST IN: It seems both Adobe and Apple use this in their products and it can be a pain to opt-out of. So it's not a new thing, but the fact I never knew about it even though I'm in these products daily means it's not quite as transparent as it should be.

Want to vertically center your dynamic Flash text?

I googled this, and all of the code I came across either didn't work or seemed like a lot of code for such a simple thing. All I wanted to do was vertically center my text against a container I was displaying it in, no matter if I had 1 line, 2 lines, 3, etc.

So I came up with the following code. Just make sure that the object you want to center against is center aligned within the movieClip.

myDynamicText.autoSize = true;
textHeight = myDynamicText._height;
myDynamicText._y = -(textHeight/2);


That's it.

Convert to uppercase

Sometimes the project you're working on requires you to type things out in all caps. Maybe it's required by the client's lawyers, maybe it's just part of the design aesthetic. I've had projects where the designer wanted all of the text in caps, but all of the legalese and copy was handed over to me in Sentence case. When I'm handed a 3-4 page document of rules or terms, the last thing I want to do is spend my night typing it out.

For this, just open up Microsoft Word, paste in the text to be converted to uppercase, select all and Shift-F3. VOILA! I use this method because, for the life of me, I can't find the "To Uppercase" function in Word 2007.

Yes, I know I could probably do this dynamically in Flash, append ".toUppercase" to some code in my ActionScript, but not all projects are Flash and having to do that seems silly.

Fullscreen Flash Flickering

Something's been bugging me ever since I made a Flash site go completely 100% browser window. In Internet Explorer, when I would resize the site, the browser window's content would flicker black all the way from full size to as small as I could make the window. The site was more than usable, but the flickering was enough to annoy the hell out of me, and make me wonder if someone was going to call me out on it. I checked through all of my Flash code and I couldn't figure it out. You could still hear the site, but not see it, nor were any of the buttons clickable. Resize a little more, the site comes right back. Resize as small as the window goes? Gone again. I swore it had something to do with my full Flash black fade, but I removed that layer and it persisted.

This only happened in IE, so it made me wonder if it was an HTML issue.

Anyway, the short of it, I added two lines to my body CSS (which are also in my HTML CSS):

height:100%
width:100%

The flickering is gone. Whew.

I could sit here and tell you that it has something to do with the way that Internet Explorer renders its viewport, that the body is really just another container within your HTML hierarchy, so making sure both your body and HTML CSS have these percentage values..blah blah..blah....

But then I'd be making things up. I really have no clue.

"Allow Smoothing" on all bitmaps in library

http://mrsteel.wordpress.com/2007/06/12/flash-jsfl-script-allow-smoothing-on-all-bitmaps-in-library/

The JSFL file located at the above link lets you enable "allow smoothing" on all of the bitmaps in your Flash library. You can also adjust it to make all your bitmaps lossless, or jpeg, or whatever you need. This probably saved me an hour.

Update:
This code is awesome, but be aware exactly what it does.

Here's the code:

var libItems = fl.getDocumentDOM().library.items;
for (i = 0; i < libItems.length; i++){
if(libItems[i].itemType == “bitmap”){
libItems[i].allowSmoothing = true;
libItems[i].compressionType = “lossless”;
}
}

With this line in place, it adjusted the compression on all of my objects to "lossless". Meaning my site went from 1.5 megs to 4.5 megs!! Lossless is great, but expensive, and on some objects, it just doesn't make sense.

I got the site back down to 2.5 megs so far (and falling!)

Website Pimpin' #1 - Kenny Bellew and soundObjects

http://www.kennybellew.com/tutorial

Every time I find myself needing to use soundObjects in Flash, my Googling always leads me to Kenny's website. Kenny breaks down soundObjects into really simple and easy to use tutorials. Everything I've ever needed to know about soundObjects was within his site, and everything that isn't there was easy enough to figure out once you step through his tutorials and learn how everything works.

Flash Tooltips

I wanted to create Flash tooltips for this website I'm working on. They can look nice and serve a purpose if done correctly. Most of my research led me to Flash components that people were selling. I'm not paying $30 for some tooltips. I'd rather do without, they really aren't that important to me (plus I'm cheap).

I came across a few Flash tooltip generators, but they were pretty ugly and their aesthetic won't match my site at all.

Knowing that I've created custom cursors in the past, I figured that's all a tooltip really is. It's a custom cursor that follows your mouse in a very specific place. It turns on when you rollover your object, and turns off when you roll off. Only difference is, you're not hiding your mouse cursor in the process.

I created my tooltip graphic and made it a movieClip. I made sure that when inside the clip, the tip itself was aligned top right of center, this way when I set the clip back when I was done with it (0,0), none of it was hanging over the screen. Plus, this is where I wanted it aligned in relation to the mouse. I also made sure I wasn't touching the center either, this way my tooltip wasn't sitting right on top of or touching the cursor arrow/hand.

I gave my movieClip an instance name. Here's my code that I added to the frame:

myMCButton.onRollOver = function () {
tooltipMC._x = _root._xmouse;
tooltipMC._y = _root._ymouse;
tooltipMC.startDrag();
tooltipMC.gotoAndPlay(2); // Mine animates
}

myMCButton.onRollOut = function () {
tooltipMC._x = 0;
tooltipMC._y = 0;
tooltipMC.stopDrag();
tooltipMC.gotoAndStop(1); //Send my animation back to frame 1
}

That's it. I could have turned visibility on and off instead of resetting it's 0,0 position, but I didn't. Maybe that would had some jumpiness, who knows. All I know is that I saved $30. And I'm sharing this info, for a low low price of only $5.

PNG Me

Anyone who uses Flash on a regular basis, understands the awesomeness that is Photoshop's PNG24 (basically, what the rest of the world knows as PNG32, since the last 8 bits is for the alpha channel). Basically, it's a lossless format, millions of colors, with an alpha channel. The alpha channel is key in Flash, it allows you to bring in objects with shadows, glows or just have a nice smooth cutout edge. And anyone who uses Flash on a regular basis should also know that they should set their compression (per object) in Flash to "Lossless (PNG/GIF)". JPEG compression adds too much artifacting for my taste, although with my current project having a 500kb background image, I might just test those waters later.

What a lot of people don't know, is about PNG8 with an alpha channel. Photoshop gives you basically one format with PNG8. It's basically a GIF. 256 colors and a matted transparent background. Meaning, you have to know what color you're placing this on, or if you turn off matting, know that your edges are going to be very jagged. This is where I open up Fireworks.

A trick I've learned recently that I don't see around very often, is bringing your PNG24's into Fireworks and re-exporting them as PNG8 with an alpha channel. It doesn't work with everything, given that you're still limited to 256 colors, but with the right image and the right dithering selections, you can take an image that was 400kb, and get it down to 80kb. And now your shadow is made with an alpha channel, not a fake transparent matte.

Given that I'm a designer and not an engineer, I'm not going to go into how or why this works, the history behind it, what a "bit" is, etc. All I know is that I cut 600kb off my published SWF file last night, simply by reimporting some of my 24 bit PNGs in 8 bit with an alpha channel. Why Photoshop doesn't support this, especially now that Fireworks is owned by Adobe, is beyond me.

Fullscreen Flash and Wmode

So I've spent the last 3 hours trying to make my Flash site go fullscreen. Amazing how much you learn and how much time you can waste on hidden, obscure bugs and missing features. Especially frustrating when your deadline is fast approaching and at the end of it all, you realize you've probably just spent that last 3-4 hours in vain.

The source of my frustration? wmode = transparent. Apparently, Flash doesn't like working in fullscreen mode with this little piece of code put into place. They supposedly fixed this with Flash player 9,0,28,0. Well, according to their own site, I have 9,0,115,0 installed. Basically, I wanted my HTML background image to show through (for loading reasons, for my site's hovering reasons, matching the landing page reasons, etc.). I just placed the background inside of my Flash to fix this, because going full screen was more important than not.

So I go ahead and set my HTML to 100% width and 100% height. Who knows what I did here, but apparently Firefox didn't like that. It refused to display the bottom 3/4 of my site. The header looked great though, if I do say so myself. Luckily, I cared less about my height being 100%, since my site is a fixed 850 tall. This worked.

So now I've set everything up, first frame of my site:
Stage.scaleMode = "noScale";
Stage.align = "TL";

The most important part of this fullscreen was that my movieClip displays at 100%x100% of the stage size. So I set this code on the same frame as where my movieClip appears:

movieClip._x = 0;
movieClip._y = 0;

movieClip._height=Stage.height;
movieClip._width=Stage.width;

sizeListener = new Object();sizeListener.onResize = function() {
trueX = (Stage.width - 1050)/2;
movieClip._x = 0;
movieClip._y = 0;
movieClip._width = Stage.width;
movieClip._height = Stage.height;
};
Stage.addListener(sizeListener);

I quickly find out that since my movieClip is nested in another clip, it uses the 0,0 of that parent clip. Being impatient and not really a Flash developer, I decide I can live with having that movieClip on my main timeline. I'm sure there's a way to pass the _root x and y values through, maybe some code where I know the starting x,y of the parent clip and using subtraction/division/shorthand/the Lord, etc., get this to work.

So now I realize, this works nicely. But now my site isn't centered. It's that pesky Stage.align = "TL". I don't like that. So I set the value to "T", only to find out why we use "TL". 0,0 is not the top most corner of the entire browser window; it's the top left corner of your movie itself. So now my movieClip is about an inch from the left when it appears. That won't work.

So doing a little Googling, I find out everything I want to know about centering a movieClip while fullscreen, but not my entire Flash site. So I figure, let me just put my entire site into a movieClip and I can work with that. After I do this, I realize I'm way too deep into this to have to go back and redo all of my paths, so I scrap that idea.

I put on my thinker's cap and figure, hmmm.... if I know the width of my site (1050) and I know the width of the stage (Stage.width), I should be able to throw together a little equation to figure out the top left x,y of the browser window. I'm an Art major, I only had to take one math class. Work with me here:

trueX = (Stage.width - 1050)/2;

Let's say, my Stage.width minus my Flash width is 200. Well, this is gonna leave 100px on each side of my SWF, since it's centered. So I subtract and divide by two, to get my "trueX". Well, that's all well and good, but 100 is obviously to the right of 0,0. So my next line is:

movieClip._x = -(trueX);

This places my movieClip at -100,0, which is the true 0,0 of this browser screen.

Whew. I don't have to cry now.

I don't know what this blog will be or if I'll even be writing in it after my launch date. It's more of a way to express my frustrations and maybe help point someone else in the right direction.