7 Replies Latest reply on Jun 11, 2013 7:30 AM by sinious

    How can I make a top layer "transparent" to the end-user?


      Hi guys,

      Got a quick question.


      I'm working on a custom card builder and was wondering if there was any way I could keep an uploaded image editable to the end user. The end-user will be able to choose what template they'd like to frame the image with. The problem is, even with transparency that chosen frame acts as a layer, and once the uploaded image has been placed onto the staging area, the end-user loosing the ability to edit/scale/skew that image. I'd like them to be able to still do that even with the template above their image.


      Can anybody think of a solution to this? Any and all advice is greatly appreciated.

        • 1. Re: How can I make a top layer "transparent" to the end-user?
          sinious Most Valuable Participant

          Do you mean the "frame" image above the users image is stealing your mouse clicks and won't translate them down to the image below (the users uploaded image)?


          Can your frame be selected/moved? If so then it will certainly need to handle mouse events. Even though the center of that frame may be transparent it's still hitting the box model of the frame above the users image (the frame) so the frame will be using your mouse events.


          You should invide a "layer" concept into your UI. It can be buttons, tabs or anything else you like. The user should be told to select the proper layer they want to manipulate (or you control it via a linear process yourself). During each step you can disable mouse interactivity with objects via commands.




          // frame

          myFrame.enabled = false;

          myFrame.mouseChildren = false;

          // pic

          myPic.enabled = true; // (add mouseChildren if layered photos are possible)


          Then after they're done with the picture and want to affect the frame, reverse what is enabled and disabled. That will keep mouse events affecting just the parts of your interface you desire.


          If that's not the issue please explain in more detail the issue between layers.

          • 2. Re: How can I make a top layer "transparent" to the end-user?
            01GiveX Level 1

            Hi Sinious,

            Yes that's pretty much it in a nutshell.


            We had introduced something similar and the client wasn't happy with that solution, unfortunately. They don't like the idea of "shutting off" the top layer so the bottom layer can be edited, then turning the top layer back on. They felt it was too difficult for their clients to grasp.


            So, they are insisting on wanting the uploaded bottom image be editable despite the top layer image. Is this even possible?

            • 3. Re: How can I make a top layer "transparent" to the end-user?
              sinious Most Valuable Participant

              There's always more than one way to skin a cat.


              Although not terribly manipulation friendly and tedious, you can create a Bitmap or BitmapData object of the frame. Upon clicking you can test the click position as well as every pixel of the object. If the pixel clicked on is transparent (directly with BitmapData or using Bitmap.bitmapData) then you'll know the user intends on clicking through the frame. You then run the code necessary to control the picture.


              Outside that your frames may need to be cut up into separate objects (top/left/bottom/right) to separate their hitboxes so the center is genuinely not a clickable transparent area. Also not easy but would allow the click to go fairly directly to the image below.


              There's other methods like using the frame as a mask with some pixel detection, yada yada. None of these are nearly as easy as a common sense way to select what you want to edit. If it were flex their components even have a mouseEnabledWhereTransparent property but I haven't seen that outside Flex.

              • 4. Re: How can I make a top layer "transparent" to the end-user?
                01GiveX Level 1

                Thank you sinious, you're suggestions are great!!! I think I may go with the second option ("seperate objects"). It doesn't give them much edit room but they'll have to live with that.

                Unfortunately this leads me to another question ... How can I set up the seperate objects (as you can tell from my past posts and profile I'm fairly new to AS3)?

                • 5. Re: How can I make a top layer "transparent" to the end-user?
                  sinious Most Valuable Participant

                  You'd literally need to chop each frame up. To keep things reasonable to update you can use Photoshop to slice the graphics, saving them to external PNGs to import in. If a frame has 4 edges, you cut out the 4 sides, import into Flash and reassemble them inside a single Sprite or MovieClip. Any area inside that sprite that has no actual objects will be true transparency and won't invoke a click action.


                  Keep in mind, hitboxes are rectangular. If you have an oval frame where the edges require you to create bitmaps with transparency on their edges, that will be clickable. If you don't immediately understand what I mean by that just draw a circle in flash, convert to clip. Now draw your cursor around what you consider the 'top' portion of that frame and notice how much of the inner fill you also capture at the same time. That will all be clickable. So the user may "see" their picture behind the frame but when they click they accidentally get the frame instead.


                  Picture worth a thousand words (random net image):



                  If you cut this oval frame into 4 pieces (this being the top obviously), the transparent area you see in the frame will need to be part of the hitarea for the frame. That can be just as confusing to customers in this situation. If most of your frames have little to no transparency (very squared up) then it won't be a problem. Although just like the problem you're having now, any bitmap transparency WILL be clickable even if you cut the sides up. The center where there is no bitmap can be clicked through to mess with the picture behind the frame.


                  This sort of makes the transparency detection a bit more desirable.

                  • 6. Re: How can I make a top layer "transparent" to the end-user?
                    01GiveX Level 1

                    Sinious, thank you very much!!! Very helpful!!! I got it working, client should be happy with it!!!


                    Thanks again!!!

                    • 7. Re: How can I make a top layer "transparent" to the end-user?
                      sinious Most Valuable Participant

                      You're welcome and good luck!