It’s very easy to create a gradient alpha mask using code. But sometimes you have to do it the gold old fashioned way.

Here are the steps for creating a gradient alpha mask without using any code.

Download sample

1. You’re mask and maskee need to be in lumped together in a MovieClip. Lets call that the maskGroup.
2. Select the maskGroup and give it a blend mode of Layer.
3. Now go into your maskGroup MovieClip.
4. The layer with the mask needs to be located above the maskee.
5. Make the mask a MovieClip if it isn’t already.
6. Give the mask a blend mode of Alpha.

That should be it.

Got’chas

Make sure that you use the Color Mixer palette to give your mask an alpha gradient. The colors in the mask don’t make any difference in the appearance of your output. It’s all about the alpha settings of your shape.

If your mask is smaller than your maskee you’ll get some odd results. Basically the maskee will be completely visible in the places where the mask doesn’t exist.

Notice, that you’re not actually using any “Mask” in the layers. It’s all done with blend modes.

360Flex is coming to the big peach, home of the Dirty Birds, and Sherman’s backyard BBQ - you history buffs will get that one.

The hosts Tom and John sent a call out for badge designs so I thought I’d toss my own in, again.

Right-click to view source

You may be wondering why I chose that particular photo as the background. Well, so am I. That’s because the photo is downloaded from Flickr.com using their API. So it will change over time depending on photos uploaded recently and their tags.

Essentially I created a simple MXML component that you can pass your Flickr API, theme - search terms for Flickr images, and the city/dates. It then searches Flickr, places the image, does a little resizing and masking, blah, blah, blah.

Please forgive the rough edges and lack of comments in the code. I tossed this together in a few hours this morning because I can’t sleep.

Sources used for this project

I used a bit of this code to draw the rounded rectangle.

Here’s the bit about making dropshadows on text from the Flex Cookbook.

Thank you, and goodnight.

Addendum

I think it would be cool to load multiple images - like 10 or so. Then rotate through showing them every few seconds. I’ll work on that tonight if I can’t sleep. Unless someone else does it beforehand.

Here at Smilebox we make interactive designs that you can put your own photos and videos in. This is my first design here at Smilebox. It’s largely based on the code examples from Keith Peters‘ book Making Things Move.

I did all of the code that makes the photos/videos move around - more about that below. Mark Puskar, a coworker here at Smilebox, did the awesome graphic design. Since the theme is water, and my wife Jill just loves the water, most of the photos are of her. I don’t think anyone will mind. :-)

Make a slide show, scrapbook or ecard

Making it move

If you’ve read the book Making Things Move then you can see that most of what’s going on here is stuff from chapter 11: Billiard Ball Physics. The main difference is the interactions that have been added to turn this into a photo browser. And you’ll notice that the small bubbles only interact with the center bubble but can pass through each other. This is mainly do to performance issues because making the small bubbles interact with each other is very processor intensive and Smilebox already has enough overhead to deal with.

Here’s a version that uses MovieClips attached at runtime instead of Smilebox photo components. Click on a circle to make it replace the center circle.

Download code.

Here’s the main bit of code that handles the motion:

So I’m writing this Flex widget/app/thingy that will let people vote for things on my site. I need to test that the user has selected one of the radio buttons when they hit the submit vote button. The code for that is:

Pretty simple stuff. In the if-statement I’m essentially saying, “if votingChoices.selectedValue DOESN’T exist then do this stuff, else do this other stuff.

Like I said, simple. Right?

But there’s a catch. I wasn’t paying attention and gave the radioButtons data values of, wait for it, numbers starting with zero. And you know what that means: no one will be able to submit the first choice in the list.

Okay, so simple fix. I shouldn’t use numbers, especially starting with zero, for the radioButton values.

But better yet I could just change the if-statement to:

if( votingChoices.selectedValue == null ) { ...

That would be the smart thing to do. And I tell myself that all the time. Don’t test for the existence of something in an if statement by just placing a reference. Go ahead and write out undefined or null. Because that’s what you’re really testing.

I can’t count the number of times I’ve screwed that up. So now every time I do that I’ll force myself to come back to this post and comment that no I can’t learn from my mistakes. :-)

So here are a few other things that equate to false. From Moock’s Essential ActionScript 3.0.

Here is a table of the default values for the various types.

John Wilker twittered that he was going to make some cool announcements. Since I did a bang up job with the Adobe MAX predictions I thought I’d see if I could keep the streak alive.

• The next 360Flex conference will be in the SoCal area. I’m going out on a limb with LA, because, well it’s really big and they have a lot of conventions there.
• The conference will be held sometime around the end of July.
• Admissions will be $499
• We’ll get a catered lunch but not a dinner.
• Doug McCune and Deepa will co-host a session and mention their Dummies book 15+ times. ;-) (Yes, I’ll be there counting.)
• John and Tom will be the hosts

Okay, I’m guarantied to get at least 1/3rd of my predictions correct because of the last two.

See you there!