Wednesday, March 12, 2008

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

Tuesday, March 4, 2008

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.

Monday, March 3, 2008

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*.

Sunday, March 2, 2008

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.