masthead

Holder MovieClips and InteractivePNG Not Working

InteractivePNG is a nifty class that’s been around for a while. Instead of extending MovieClip, you can extend InteractivePNG and it will capture all the mouse events and figure out if the mouse event was actually set off by transparent (or semi-transparent) pixel in a PNG. If so, it will ignore the event and let anything behind the transparent pixel receive the mouse event instead.

One of the things I like to do on the timeline of a view is place a bunch of empty holder MovieClips so I can easily control the layer order of instantiated display objects. Today I was running into a problem where when I placed an InteractivePNG object in a holder MC, InteractivePNG would stop working its magic. The fix is pretty easy in case anyone else needs it - just tell the holder MC to use InteractivePNG as its base class in the properties (formerly linkage) dialog. Magic restored!

Coke Zero Facial Profiler

Today marks the launch of Facial Profiler, a site for Coke Zero that uses Facebook to find your identical twin. I came on to the project as a Flash developer a few months ago and am very excited to see it finally live!

Go sign up and find your doppleganger. Maybe you guys can meet for coffee sometime.

Box2DAS3 and AIR/Flex not working

File this under “this is such a stupidly easy fix I can’t believe I wasted so much time on it.” To get Box2DAS3 to work in Flex/AIR, you need to make sure your m_timeStep variable is “1.0/30.0″ and not just “1/30.” Go figure. Didn’t think Flash cared about that stuff. Thanks to this page for giving the answer.

How do I know if a point is within the area of a circle?

UPDATE:

Wow, did I overthink this. No need for all the silly math, just take the distance from the point to the center of the circle, and compare that to the radius. Duh. For humility’s sake, the original post is below.

(Old post)

That is the question I asked myself a few days ago. And here is the answer (my apologies for the poor formatting, I need one of those code display plugins…):

/**
 * Determines whether or not a given point lies
   within a circle
 * @param circleX	The X value of the center
                        of the circle
 * @param circleY	The Y value of the center
                        of the circle
 * @param radius	The radius of the circle
 * @param ptX		The X value of the point
                        to be checked against the
                        circle
 * @param ptY		The Y value of the point
                        to be checked against the
                        circle
 */
public static function isWithinCircle( circleX:Number,
circleY:Number, radius:Number, ptX:Number, ptY:Number
):Boolean
{
	var theta:Number = Math.atan2( circleX - ptX,
circleY - ptY );
	var magnitude:Number = ( ptX - circleX ) /
Math.cos( theta );

	if( Math.abs( magnitude ) > radius )
		return false;
	else
		return true;
}

Here’s how it works: The formula to find the point (x, y) on the circumference of a circle with a center (a, b) is a = x + r cos ? and b = y + r sin ? where r is the radius of the circle and ? is the angle in radians from the center point at which the outer point lies.

Since I already know the location of both points and the radius of the circle, it’s pretty simple to fill in the gaps. I replaced r (for radius) with m (for magnitude) and then solved for m. The one last thing we need is the angle - I did a quick search and found that the angle between two points can be found using atan2 (not that I have any clue what that actually does…). That formula is ? = atan2(dX, dY).

Now when I plug in the points, I can check the value of m against the radius of the circle. If m < r, the point is inside the circle. Otherwise, it is outside. I’m no math expert so I can’t say 100% that this is the correct or the easiest/least processor intensive solution to this problem, but it has worked so far for me.

Installing Flash Tracer on a Mac

Flash Tracer is a must-have Firefox Plugin that, as the name suggests, shows you the trace outputs from a swf right in your browser. I’ve had to install it on a few different machines and each time I always forget how, so I wrote out some step by step instructions that I want to share with the internet.

  1. Make sure you have the Flash Debug Player: http://www.adobe.com/support/flashplayer/downloads.html. Click on “Download the Macintosh Flash Player 10 Plugin content debugger (Intel-based Macs).”
  2. Install FlashTracer: http://www.sephiroth.it/examples/firefox/extensions/flashtracer.xpi
  3. Create an mm.cfg file.
    1. Open Terminal
    2. Locate your root folder (type “cd ..” once or twice. To make sure, type “ls -l” and if you see folders like “Library” and “Users” in the right column, you’re good)
    3. Type “cd Library/Application\ Support/Macromedia”
    4. Type “pico”
    5. Type “ErrorReportingEnable=1″ hit enter, and type “TraceOutputFileEnable=1″ (no quotes)
    6. Press Ctrl + O (even though you’re on a Mac, it’s Ctrl, not Command)
    7. Type “mm.cfg” and press enter
    8. You can confirm that the file has been created by navigating to that folder in Finder and opening mm.cfg with a text editor.
  4. Restart Firefox
  5. In Firefox, click Tools > FlashTracer. In the FlashTracer column, click on the orange wrench icon at the bottom right.
  6. Click on “browse” next to “Select Output File” and navigate to “/Users/{username}/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt.” There should be a flashlog.txt file there by now - if there isn’t, go to a website that has Flash content on it (thefwa.com) and it should be created.
  7. That should do it. Restart Firefox again to be sure.

In addition to helping debug your projects, using Flash Tracer on other people’s sites is a nice form of entertainment.

My First AIR App!

Wines of the World has been a great class. Go to school, drink wine, boom. Done. But don’t be fooled - it is a serious class with serious projects. For my final project, I decided to have a crack at AIR and make something wine-related in the process - an RSS reader that takes Wine Spectator’s Daily Editor’s Picks feed and presents today’s wines of choice. Last night, armed with Matt’s extremely useful book and my free educational copy of Flex Builder, I began my first AIR app.

Of course, though, I ran into my share of problems, so I thought I would share what I learned here in case anyone else has the same problem.

  • Custom Chrome: As you can tell from my comp above, I required my app to be free of the OS’s default chrome. There are countless tutorials out there about how to do this, and after reading all of them I still had not yet realized that you had to remove the comments around the <initialWindow> tag in Flex’s app.xml file. That was dumb on my part, but seriously, of the three video tutorials Adobe put up on the exact same subject, not one mentions it.
  • Embedding Fonts: I found this very useful if you want to embed a PostScript font into your project.
  • Publishing: It took me quite a while to find out that I don’t actually have to pay to have my AIR app published with a signed certificate, and that you can just make one yourself. Instructions on how to do that are here.

Over the course of this project, I have definitely grown to like the wild HTML/CSS/ActionScript fusion that is Flex and AIR. I think that with some more practice, I can get quite comfortable with it. And if you want to download a copy of my app, you can get it here. It’s missing a few features and details, but I think it’s a nice start. I feel like I should add that I am in no way associated with Wine Spectator magazine, they just happened to have the nicest RSS feed available.

Dynamic Persuasion Design Final (Pt. 2): Energy Independence Calculator

I’m very happy with my additions to the project. I got a lot of good suggestions from critique and added some stuff I wanted to see as well. Here’s the link to the final (for reference, here’s my blog post on the first version). Some of the new changes include:

  • Dragging the objects: Because my windmill animations are made up of PNGs, the draggable area was actually the whole square PNG when it should have been just the windmill. My first approach to solving this was to do a pixel hit test, which proved very frustrating. I consulted Matt who referred me to the InteractivePNG class, which very easily told the mouse to ignore the PNG’s alpha. The problem it didn’t solve, however, was to then let the mouse pass through the alpha and target the next PNG behind it. As soon as I was about to start coding a nice big for loop to fix this, I realized that all my problems would be solved if I just drew the windmills in Flash using the pen tool. Which I did. Victory! So now you can have two or more objects overlapping, and be able to drag the one that the mouse is over, not always the one that is closer to you on the stage.
  • Draw Attention to the Clipboard: Another suggestion from crit. Whenever you add an item to the stage, the clipboard glows for a second. There’s also an animation of a marker circling the price, which was a great suggestion from Laura.
  • New Buttons in Item Selector: There’s a new button that lets you buy the object and one that lets you clear the stage of everything you’ve added to it. There’s also a tooltip when you roll over the item’s thumbnail that gives you some extra information.
  • Change Location: Pretty much a nice ol’ reset button.
  • Sound: I didn’t want to overwhelm my project with rollover clicky noises, so I put a few in on the item selector. I considered putting in a “ch-ching!” sound when the cost changes, but opted not to with all the other stuff I have going to draw your attention over there. There’s also ambient noise, which is fairly quiet, but it is different depending on the weather (currently four sounds: day, night, rain and snow).
  • Fixed Stage Resizing: On the old version, if you resize the browser window when there are objects on the stage, the objects will move, which they shouldn’t. This was because I was adding them to the stage of the item selector, which moves up and down with the window. I fixed this by passing the DisplayObject up to the Manager and adding it there instead.

That’s all for now! There will be a new version sometime in early December.

Dynamic Persuasion Design Final: Energy Independence Calculator

This is what I’ll be handing in for my DPD final tomorrow. It’s called the “Energy Independence Calculator,” and what it lets you do is add renewable energy generators to your house and see, based on your location, the money you save. The project gave me a nice chance to flex (!) my new AS3 muscles that I grew over the summer. But enough with the creepy metaphors! Here are some of the things I’m pleased with:

  • Nearest Windspeed: One of the things that surprised me early on in this project is how varied the windpseeds are across the US. Using the windspeed data found here, I made my own XML file that included the windspeed of each location, as well as its latitude and longitude (a very, very, very tedious process). The user enters his or her zip code, from which I can obtain his or her latitude and longitude (with help from the Yahoo! Weather API). I run these coordinates against every other average windspeed in the same state so that I can find the closest reliable windspeed to the user. This goes into the equations that I use to figure out the all-important dollars/month saved figure. I used a similar process to get the amount of sunlight each state receives.
  • Calculations: I read through lots of documents to find the equations I was looking for - how to figure out the amount of money one would save with different energy generators. This required me to get extra information about the solar panels and wind generators, like how many kilowatts they produce. I’ll post the equations later, if anyone’s interested.
  • Changing Weather: A lot of the less-frequent weather scenarios (i.e. tornadoes) have been left out, for now. But day, night, clouds, it’s all in there, based on the user’s current location (thanks again, Yahoo!). Rain and snow look especially cool (borrowed and modified the code from here).
  • All the fun new stuff I learned: Including, but not limited to, the inability to duplicate a loaded object (and the subsequent realization that it’s cached, so you just load it again, duh) and how awesome bubbling events are (and passing your own parameters along with them).

There are a few things I will add after it’s been handed in:

  • Stage Resizing: A few things aren’t repositioning correctly. Won’t be hard to fix, but it’s not critical to the functionality, so it takes a back seat.
  • More detailed night: Something from my comps that didn’t make it into this version. When it’s night, the foreground is too bright. I need an overlay or another house graphic that matches the atmosphere.
  • Rollovers: Obviously, I need more of them. Unfortunately you can’t rely on buttonMode for everything.

I’ll post some code and process work for this project soon. I’ve also got another project coming along, from my QTVR class. That will be up on Wednesday.

From the “AS3 Things That Have Been Driving Me Crazy, But Have Really Easy Solutions” Dept.

Why does my swf work standalone, but when I try and load it into another swf, I get a null object error? Stages.

Flash Developers of the World, Take Heed

I really hate to have to see this when I open Firefox. I like Flash. It’s just been a little abused, is all.