I created a set of static objects using Photoshop, bunch of walls and gates, and I made the background transparent. The bunchOfWalls image has the same size as my map(600x600x).
So, when i do FlxU.overlap(bunchOfWalls, myHero, heroHitWalls);, this function triggers with every movement the Hero makes because it triggers with every collision detected with the transparent area of the image. That means the Hero cannot move since the image layer is on top of the map layer itself and it has the same size(both 600x600).
Is there any way to make Flixel ignore the transparent area of my bunchOfWalls image, or is there an alternative way to do the same effect?
Each one of your Flx objects has a bounding box, which is a rectangle that is used to determine collision. The built-in FlxG.collide() & FlxG.overlap() functions only check if object's bounding boxes are intersecting. Transparency is not taken into consideration.
So how do you fix this? You could...
1) Split the background image up into wall pieces that don't have transparency. Then you can continue to use Flixel's collision methods.
2) Use a pixel-perfect collision method that takes transparency into account. I'm a big fan of the Flixel Power Tools - it's a plugin that includes a bunch of useful features, one of which is pixel perfect collision. It's really easy to use, in your case it would probably look something like this:
if (FlxCollision.pixelPerfectCheck(bunchOfWalls, myHero))
{
heroHitWalls();
}