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.

Photoshop Feature Request #3

I'd like an option, somewhere under "Window", to see all of the fonts used in a PSD file listed, as well as their true filename. There are times I'm asked for "Helvetica", when I have 20 different versions, both TTF, OTF, etc., on my machine. Plus, I'm often dealing with a few hundred layers, I don't really have the time to go through them all looking for fonts I used, or fonts someone else might have used if I'm opening their PSD file.

Need that logo in vector?

If you're like me, companies and brands seem to never want to give you their fonts, logos and other assets on time. So you end up either having to work with some bitmap you found on Google Images or you try your luck at Best Brands of the World (http://www.brandsoftheworld.com/). Best Brands can be a lifesaver (although it's legality is questionable), and most designers know about it and use it. The problem is, often the logos are very good, but even more often, they're missing the exact one you need or it's a bit off.

A technique I've learned lately is pretty much spot on. Basically, Google the name of the company and limit your file type to PDF (filetype:pdf). If you keep an eye on the URL, you'll often end up snagging a PDF document off of their website, in which their designer obviously used the official version of their vector logo. Download the file, and open it in Adobe Illustrator, deleting everything you don't need (or just copy and paste where you want it).

I realize this can also be abused, but as a designer, this holds priceless value. Now if only you can be lucky enough to find a true RGB version of that vector logo. Google doesn't let you limit your search to colorspace yet.

Mobile Phones and Gradient Banding

Most of the design work I do nowadays ends up on mobile phones. Lately, the screens for these phones have more vibrant colors and pretty amazing LCD displays. But some of the phones, even new ones, have difficulty rendering gradients. A lot of the time, gradients end up banding on a phone (color steps), and your once beautiful design ends up chunky, degraded and completely artifacted.

In the past, your choices were to either adjust your gradient (either shortening the length it takes from one color to get to the next or making the colors less drastic), or remove it all together and go flat. I really don't like either of those choices, because, as a designer, it's really limiting. Or you could just leave it.

It seems as though these issues are directly tied to the color depths LCD screens can produce (24 bit compared to 16 bit that most LCD screens see). I won't get into details on why certain phones use X depth compared to Y, because it all truthiness, I don't know.

After some digging around the internet, I came across a tool called DepthDither, by Graphest. It's a free plugin for Photoshop that allows you not only to target a specific color depth (and show you on screen how it will look), it gives you three dithering methods to try fixing the banding. I have to say that the results so far in the last 6-12 months I've been using this tool have been amazing.

Original

At 12 bit (and how a lot of phones would render it)

With DepthDithering applied at 100%

Get it now while it's still free. I imagine the more mobile our world becomes, the more this tool will be in high demand.

Photoshop Feature Request #2

The File menu in Photoshop. Can we move Revert away from Save for Web and Devices? Maybe up there by close? It's too dangerous of a button to be right next to my most used function.

Photoshop Feature Request #1

In the options menu of the Character palette, there's an option called "No Break". If you use this on a word that's been hyphenated in your paragraph, it removes the added break. But what happens when you apply this "No Break" to an entire paragraph? Does it work as expected, not allowing any words contained in the paragraph to hyphenate?

Nope. Your text disappears. Completely. Just vanishes.

The problem with the one by one method of de-hyphenating words is that is takes some time, especially when de-hyphenating one word hyphenates two others.

That's my (frustrated) request of the day.

How to see PSD previews in Thumbnail View

If you ever wondered where your Photoshop previews went when in Thumbnail View on Windows, here's how to get them back. I stumbled across this fix today, and even though I can't take credit for it, I figure I'd drive some more traffic to it.

Here's where it originated:
http://board.iexbeta.com/index.php?showtopic=59007

Here's where I found a working link to the file:
http://www.whoredcanvas.net/forum/index.php?s=197adfc33f7204b7b41ec38e5852bcd5&showtopic=1108

Works good so far. Life is going to be a lot easier.

Thanks Singh400.

UPDATE:
I just downloaded both rar files and added them to one zip, available here:
http://curtiscalhoun.com/uploads/PSD_Thumbnail_Explorer.zip

Transparent artwork is rasterized - SVG and Adobe Illustrator

I'm working on a mobile interface that is requiring the use of SVG-T 1.2. I've created an interface that's going to overlay video, so I've added some transparency to my shapes in Illustrator. They're simple shapes, rounded rectangles and rectangles, no stroke. I export to SVG-T 1.2, and Illustrator hits me with the message "Transparent artwork is rasterized". Illustrator is taking my semi-opaque shapes and is converting them to PNG32, which then gets embedded into the file, increasing the size of my SVG, but also causing some issues with the handset's ability to display PNGs.

So, I google the term "Transparent artwork is rasterized", which is what Illustrator shouted at me. NO HITS. Not one hit. So you're telling me that no one in the history of this earth has even written "Transparent artwork is rasterized" on a website? A phrase I've actually seen quite a bit in Illustrator? That's kind of the purpose of this post, so there's at least one.

I know that SVG-T 1.2 supports opacity, but it's "fill-opacity". When I export as SVG Full, the attribute Illustrator uses is "opacity". I figure I could export everything at full opacity, then open up the SVG in Notepad and edit the opacity by hand. But I'm not really sure what the true attribute is, and this seems like an unnecessary workaround.

After some research done by my handy assistant (a guy who's title automatically makes him way smarter than me), we found that when adjusting transparency in Illustrator, it adjusts the entire object. SVG-T 1.2 supports transparency in either the fill or stroke, but it didn't seem to like when you apply transparency to an entire object. Illustrator allows you to specify which part of an object you want to adjust by using the Appearance panel, and selecting either the fill or stroke. Doing so, you isolate where the transparency is applied.The following image shows what the appearance panel looks like with both an object's transparency adjust AND the fill's adjusted:


Choosing to adjust my transparency using this method, SVG-T 1.2 took to my transparency without needing to rasterize anything. BAM!

Thanks, Alan. And yes, you are the man.

Label Cloud

I'm new to blogging, but one thing I've run across at quite a few blogs is what's called a "blog cloud". It's basically your blog's labels thrown together into a pile of words, with the colors and font sizes representing the more common labels you use. I thought they were kinda cool, and since I'm a "blogger" now, I want to do with the cool kids do. Blogger doesn't have this built into a nice one click install yet, so check this page out:

http://phydeaux3.blogspot.com/2006/09/code-for-beta-blogger-label-cloud.html

He explains everything in detail and it literally took me about 5-10 minutes. And since he was nice enough to explain the code and hand it over for free, the least I can do is pimp it a bit.

Thanks, phydeaux3.

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.

Photoshop Save for Web, Hidden Save Dialog

Today I was working in Photoshop, exporting to JPEG, save for web, normal stuff. I had to go to another program, and when I came back, I couldn't get to the program. The Save for Web screen just sat there, staring at me while greyed out. Every click I made, the computer shouted out with that "you're doing it wrong" beep. I tried alt-tab, tab by itself, right-clicking the XP toolbar. I thought my only option at this point was to close Photoshop and lose my file. Only a half hour lost, but it's my half hour.

I brought up the Windows Task Manager by using Ctrl-Alt-Del, and hit "Switch to" with Photoshop selected.

Everything appeared, and the save dialog was just sitting there looking at me like nothing was wrong. Like he had been waiting on *me*.

Accessing FLVPlayback buttons

It's time to add tracking and reporting to this website, and I thought an interesting thing to track would be how many times people either pause the movies playing or hit mute. This could let us know how many people are getting annoyed with the movies playing on AutoPlay. The problem is, accessing the FLVPlayback buttons is pretty tricky.

The first thing I tried, I thought would be obvious. I opened up the Skin.fla file I was referencing, found the instance names and figured something like myMovie.layout_mc.volumeMute_mc would work. So:

myMovie.layout_mc.volumeMute_mc.onRelease = function(){
trace("Clicked Mute!");
}

Nothing.

So more searching found that everything is actually in a movieClip called skin_mc. Who knows how someone found this, but oh well.

myMovie.skin_mc.layout_mc.volumeMute_mc.onRelease = function(){
trace("Clicked Mute!");
}

Still nothing.

So after a lot of research, testing things that didn't work, etc., I came across this website. Basically, this page lets us know how to access some captioning properties inside of a skin. So I adjusted some of the code to fit my need, and came up with this:

var listenerObject:Object = new Object();

listenerObject.skinLoaded = function (eventObject:Object):Void {
eventObject.target.skin_mc.volumeMute_mc.onRelease = function (){
trace("Clicked Mute!");
}
}

myMovie.addEventListener("skinLoaded",listenerObject);

Worked! (please see update)

One of these days I'll take a class or something so I actually know what all this means. ;)

So now if you want to use a mute button, or play button, or the seekbar to go to frame 4, or open another browser, or just annoy people, you can.

Update:

Yikes. This doesn't work as expected. Doing this, now the buttons don't work. Your new action triggers, but now the mute doesn't mute and play doesn't play. I found that all of them have "button_mc" inside of them, but going deeper and referencing that movieClip, now my little trick doesn't work. Back to the drawing board...

Update:

Okay, so I think I got this working. Seems like the problem was, my code was either blocking the other event from firing or there was a child/parent issue, so the actual buttons for mute and play were never receiving the event in order to do their jobs. So if you use onMouseDown, and make sure you use a hitHest so it knows you're over the movieClip you want to click, you can do it. onMouseDown isn't a button event, but you can use it as one without it being a true button event, limiting the conflicts.

var listenerObject:Object = new Object();

listenerObject.skinLoaded = function (eventObject:Object):Void {
eventObject.target.skin_mc.volumeMute_mc.onMouseDown = function (){
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
clickedText.text = "Mute Clicked";
}
}
eventObject.target.skin_mc.playpause_mc.onMouseDown = function (){
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
clickedText.text = "Pause-Play Clicked";
}
}
eventObject.target.skin_mc.back_mc.onMouseDown = function (){
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
clickedText.text = "Rewind Clicked";
}
}
eventObject.target.skin_mc.forward_mc.onMouseDown = function (){
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
clickedText.text = "Fast Forward Clicked";
}
}
}

myMovie.addEventListener("skinLoaded",listenerObject);

This site was handy.

I'll keep working with it, but at this point, it looks like I can use my muteButton to control whatever I want.

Excel to XML

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.

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.