I'm working on an XML driven Flash combobox today. That's an entirely different post. I asked for the list of mobile handsets this particular website would need to display as options in the dropdowns, and you can guess that a list like this, per carrier, would be HUGE. I get the list, and to my horror, the list is in Excel format (.xls). OH. MY. GOD. I'm going to have to wrap each of these items in XML tags.That's 3 carriers, a total of 600 handsets, 1200 times copying and pasting. My. This is gonna take me hours.
I've mentioned it before, I'm no developer. I consider myself to be a graphic designer that happens to know Flash, so often the programming side of things awakens parts of my brain that I haven't used since high school, when I took Turbo Pascal (or even younger, when I was programming "10 goto 20" statements on an Apple IIe). I generally can figure out how to make almost anything work in Flash, given that there are 1000 ways to do anything in that program. That said, I have no idea how to even approach this from a programming angle, so I'm about to start just copying and pasting.
One thing I've always prided myself on, was my Googling. Anyone can Google, but I have it down to a science. I was called Google Man in my past life, not a term I particularly care for. If it's on the web, most likely I can find it.Anyway, to my point, I found this website: http://www.digitalsurvivors.com/archives/000679.php. Basically showed me how to take an Excel list, and create an XML structure out of the data. Using a very simple formula, A1&B1&C1, etc., I was able to take these lists of 600 handsets total, and create a 3 fully valid XML files. Something I thought was going to take me 3 hours, took me 5 minutes. It's like freaking magic. This site saved my day and my sanity.
This is a great tool, something I had never even thought of using for something like this. Figured I'd share.
Tuesday, February 26, 2008
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.
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.
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.
Subscribe to:
Posts (Atom)