I have a canvas which I want to accept drags on.
I have added a dragOver and dragEnter event listeners to the canvas, but they only work if I drag over something inside the canvas (another child element).
I realised that if I set the canvas' background colour to black it works. So I have set it's background transparency to 0, which works... buy is there a better way to work around this apparent need for the canvas to have something inside it to accept dragEvents.
Thanks
Rob
According to one of the Flex developers, "In Flash there is a difference between a transparent pixel and an area in a Sprite that hasn't been drawn on at all." (http://www.mail-archive.com/flexcoders#yahoogroups.com/msg127690.html)
I'm guessing this is the reason why you need to have the transparent background. For what it's worth, this is always the way I've seen this problem solved. There is also this question which talks about this problem.
Hope this helps!
Related
I would like to add several QGraphicsItem objects to a scene and have them all be transparent (i.e. visible but not completely opaque) with respect to another QPixmapItem background image which is also part of the scene yet obscure each other.
At the moment I am not sure whether this is possible it all. Making all objects in question children of some other QGraphicsItem and then making the parent transparent does not have the desired effect so I guess I'm looking for some completely different approach but I have no idea where to start on this.
EDIT: It seems my explanation was not quite clear enough, I will try to add an example in a few hours time.
From what I understood, you wish to have QGraphicItems which have an opacity less than 100% so that the background image is visible.
To achieve the same, you can use the set opacity function.
I have a very simple problem, but can't seem to find a definite answer.
I'm making a game that uses the same static background in every single scene.
Currently I simply added the background everywhere, but it sort of seems unnatural, makes some of scene transitions I want really painful to make and eventually I'd like to make an animated background which wouldn't reload with every scene change.
Is there a way to add the same node as a background of all the nodes other than creating a singleton which I'd need to add/remove during every transition?
In other words, can the scenes have transparent background so I can push them over the background scene?
I know that CCScene doesn't have setOpacity and have seen that some guys advice using CCLayer for scenes, but then CCDirector::pushScene accepts CCScene as the argument.
EDIT.
Ok, now I see that I probably misunderstood the CCLayer solution.. does it mean that the only way of doing it is to change scenes to layers and then adding/removing them from the main scene?
If you one animating/static background and want everything else to change, i would suggest having using only 1 cocos2d-x Scene with your fancy background and all other layers (previously scene) and elements to this scene.
So, technically you would never ever have to transition from a screen .
But, if you find another solution somewhere, do post/share.
I have some CSS for displaying a reflection on an element which uses -webkit-gradient to fade out:
.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); }
On browsers which support -webkit-box-reflect such as chrome, this displays a reflection of the element which gradually fades out as expected.
On browsers which don't support it at all, no reflection is show.
However, on Android's browser, a reflection is shown, but doesn't fade out.
Is there any way of getting Android to either:
fade out the reflection, or
not show the reflection at all.
I know I could use javascript to detect the browser and change the style accordingly, but I'd much prefer a CSS-only solution.
Without an example file or link, it is a little difficult to see what you need.
I also played with some reflection stuff a few months ago and didn't find anything that could do what you describe. I have some steps to get you what you want, outside of code. I recommend the item you wish to reflect be a PNG on a transparent background, to start.
The steps:
1.Take the image into your favorite image manipulation program (ex. Photoshop)
Double or extend the image canvas the necessary amount to include the reflection in the appropriate direction
Duplicate the layer (Photoshop-Layer/Duplicate Layer)
Reflect the image. (Photoshop-Layer/Image Rotation/Flip Canvas (your direction))
Move the duplicated layer such that it appears as a mirror using the Move tool
Select the Marquis tool, and set the edge blur to about 50% of your original image width.
Drag your cursor over the "reflected" layer, don't worry if it says the selection lines won't be visible, unless it says nothing was selected. If it says nothing was selected, reduce your edge blur to about 25% and try again.
Once you have a selection, be it visible or not, delete the selected area. This should give you a "reflected" look.
If desired, add a background on a layer below everything else.
Save your image as a jpg if you don't have a transparent background or a png if you do. Use it in place of the image you were reflecting and fading with code. This will be mostly browser compatible.
CSS isn't designed to handle stuff like that. In other words: no, it's not possible.
I'm having similar problems trying to do things with background gradients in the Android browser, and it appears completely unsupported
Unfortunately the above answer is right, there isn't a way to split your declaration up in a nice progressively enhanced way. You could use JavaScript/modernizr as you mentioned, and at least set a support class(es) so you don't actually have to flip the style within code.
You could try reproducing this effect with a HTML canvas element, using drawImage with your image and transforming it. Although canvas can be slow in mobile webkit.
Good luck
do gradients work at all in the android browser?
if they do, make sure you're using the correct version. There's an old webkit format you may need to use.
If not, just use modernizr to hide it on places that don't support gradients.
I have a modal Flex dialog and want to make the background not of the window itself, but the semitransparent modal indicator transparent. (Yes I tried to convince the client they don't want to do this, but apparently they really want to do it). Is this even possible?
(prefer a solution using Flex 3's TitleWindow, but Spark/Flex 4 TitleWindow is acceptable)
Yeah, I think I phrased the question wrong, but this is the answer I was looking for:
http://www.learnosity.com/techblog/index.cfm/2007/4/25/Disable-the-blur-effect-in-Flex-PopupManager-modal-background
to paraphrase add:
global{
modalTransparencyBlur: 0;
}
to the flex CSS and you're good; You can also make the modalTransparency 0 which will actually do what I said I wanted, but I think I'm going to try to convince my client that disabling the blur is all they needed (they want to be able to read the text under the popups)
(I wanted to disable the background of the PopUpManager not the TitleWindow)
Thanks for the help though.
Sorry not to have a definite answer, but have you tried setting the property
backgroundAlpha="0"
?
For flex 3; have you tried specifying the alpha on the TitleWindow? Based on a quick review of the code; it does not appear to pass the alpha down to the children (such as the close button, title bar, or title bar background.
Using the Spark Architecture; you should be able to do this easily with a custom skin.
I have a problem with redrawing in flex 4. I have a spark titleWindow, and if i drag it faster, it looks like it's mask is one frame late after the component.
it's easily visible with 1pixel thin border, because it becomes invisible even with slower movement.
You can try it here (what is not my page, but it's easier to show you here than uploading example):
http://flexponential.com/2010/01/10/resizable-titlewindow-in-flex-4/
If you move in direction up, you see disappearing top border. in another directions it's not that sensitive as it has wide shadow, and it's not very visible on shadow.
On my computer i see it on every spark TitleWindow i have found on google, although it's much less visible with less contrast skins, without borders or with shadows.
Do you see it there? i had never this problem with halo components. It's doing the same thing with different skins. I tried to delete masks from skin, cache component, skin even an application as bitmap with no success.
I also turned on redraw regions in flash player, and it looks like it's one frame late after titlewindow too.
Does anyone know why is it doing this or how can i prevent it?
Thank you
UPDATE:
no answers? really?
I have been facing the same problem and I was really pissed that I couldn't find any answer.
The problem with me was, that I tried to center the component "component.x = (parent.width - component.width) / 2" and then draw that component programatically. The problem was, that component.x is a Number which can lead to floating values like 10.5 or similar. And it looks like that bitmapFill function rounds floats DIFFERENTLY than drawRect function, which makes exactly the 1px line around the objects (but ONLY when parent.width is an odd number). Strange thing for me was, that I only called the Draw function once, but still this line keep recurring ...
Doing Math.floor(component.x) solved the issue.
P.S.: I think that you can also help your issue by setting cacheAsbitmap=true on the dragged object ...
Cheers,
Jan Prazma