I want to create a dialog or alert box, where a DisplayObject would take and force the focus, until an okay button or something releases the lock. thanks.
The easy way to do this is to make your "dialog" as big as the stage, with a whacking great transparent area around the dialog itself.
The transparent area can listen for any mouse clicks, and just swallow them (which will prevent them being picked up by stuff further back in the display list).
To show the alert, just stick it on top of everything else, When the user closes it, take it away again.
If you are using flex and actionscript, simply use a SkinnablePopUpContainer
var alt:CustomPopUp = new CustomPopUp();
alt.open(this,true) //the second variable is for modal, which will disable view
this.enabled = false; //this will grey out the parent view and provide visual focus to your popup.
To do this, you will need to disable access to all objects under your 'alert' DisplayObject. There are multiple ways of doing this, here 2 I can think off:
Loop through the display list and disable any display objects under your alert depth wise.
Cheat it with a blocker. When you display your alert, display another clip (could have alpha set to 0 ) that blocks the user from hovering/clicking objects. The blocker might need a bit of setup( buttonMode = true, useHandCursor = false, etc. )
This 'modal' behavior has been around for some so there might be no need to reinvent the wheel, depending of your current setup.
If you're using the Flex framework, you've got the functionality in, for Flash you can use the Alert Manager from the Yahoo! Flash Astra Components:
Goodluck,
Related
I can't for the life of me get the following functionality to work:
User taps item
Item's image becomes visible via changing visibility property of image
After a short period of time image becomes invisible again (with no user input) via changing the
visibility property
Or, more simply:
Make visible UI change
Pause so user can see UI change
Reverse step 1's UI change
Step 2 happens before steps 1 and 3 regardless of where the code is because the UI is not updating until the logic finishes (I assume).
I am setting the visibility of the image via data binding with INotifyPropertyChanged. All works as expected except when I'm trying to introduce the pause.
I'm trying to pause with this simple method:
private void Pause()
{
new System.Threading.ManualResetEvent(false).WaitOne(1000);
}
It does pause, but the UI changes wait until after that pause even though a change to the bound data happen befores the pause is called, and the other change after.
I have tried using the dispatcher, but it doesn't change anything, and I don't understand it enough:
await dispatcher.RunAsync(CoreDispatcherPriority.High, () =>
{
clickedCard.IsFaceDown = false; // makes the image visible via data binding
}
);
Pause();
I think I need to do something with threading, but I am going in circles.
Any ideas?
You should never do something like this inside the UI thread of your app:
new System.Threading.ManualResetEvent(false).WaitOne(1000);
There are various reasons for not doing it, but in your particular case the problem is that XAML only re-draws once your event-handler completes. So basically this happens:
The item is invisible
Your event handler is called
You set it to visible (but the UI doesn't refresh yet)
You freeze the thread for a second
You set it to invisible again
The event-handler completes
Now the UI updates based on the current value (which is invisible)
I suggest you look at building a Storyboard to do this - Blend can help. See here.
Im developing a flash game, and i would love to implement raining effect. Here's my progress on rain so far: http://www.squ4re.eu/Rain.html
The code is pretty simple; every raindrop is an object, when it hits the ground it places itself again at the top of the screen and adds splash animation.
But the problem is to click something BEHIND the rain. Lets say i have some selectable units at the battleground. In most cases an random raindrop interrupts selecting an object behind it. So here's my question: Is it possible in flash to create object "transparent" to mouse click, so i can click an object behind it? Or is there any other way to solve this problem?
Thank you in advance.
As #putvande mentioned, you could use mouseEnabled on every interactive object that should be disabled for mouse interaction. You also could create rainLayer and disable it for mouse interaction:
myRainLayer.mouseEnabled = false;
myRainLayer.mouseChildren = false;
mouseChildren - determines whether or not the children of the object are mouse, or user input device, enabled. If an object is enabled, a user can interact with it by using a mouse or user input device. The default is true.
Also consider to use display objects that don't inherit from InteractiveObject, like Bitmap, Shape and Video
So, I'm pretty much a beginner in Flash and Actionscript (using AS3, as I said in the title), and I'm trying to make a basic escape the room game. I haven't gotten far, and right now that's because every time I test my game (or publish preview it) the graphics get this annoying outline. Here it is when tested: http://i305.photobucket.com/albums/nn228/chokingondrama/flash.png
Every outline corresponds to some object present in the game, most of which have an alpha component of 0 since they're on different sides of the room. This didn't happen before, but once I added the code that allowed the player to change their view with the arrow (each viewpoint/wall is a different frame) these appeared.
It's a little different when published to HTML, basically it just gives each image a white background: http://i305.photobucket.com/albums/nn228/chokingondrama/html.png
Also, it would be nice if somebody could give me advice on how to make sure importing to flash won't result in lower quality.
Thanks in advance. If needed, I'll post any part of the code.
Some tips:
Don't set alpha to 0, instead use the visible property, setting movieclip.visible = false will make it a lot more efficient.
As for the importing and quality, after you import to stage or library, bring up the library (ctrl + l), and right click on the file you imported, go to properties. If it's an image, set compression to lossless, and allow smoothing.
For audio, go to file-> publish settings, and change audio stream and audio event (whichever you might use) to 128kbps.
As for your main question, I need more info, if you want you can post your source. It might be because of how you are placing your graphics on the stage.
For each of your MovieClips in question:
Try disabling button mode and see if the rectangles go away.
movieClipName.buttonMode = false;
If that doesn't help, or you really want button mode, try setting
movieClipName.tabEnabled = false;
There's a chance that since you added keyboard interaction each of your MovieClips are now expecting to be selected by the user when they press the tab key, much like any normal web form.
tabEnabled in the docs
You could also try
movieClipName.focusRect = false;
focusRect in the docs
I have a flash app using fl.controls.ScrollPane as a container for a Sprite form.
The ScrollPane.source is referenced to the Sprite form with flash.text.TextField as some of the form's children.
I tested using Firefox and Chrome browsers.
When the flash file is called directly from the development server, the flash application runs correctly, except for the fact that one needs to click twice before being able to select the editable TextField.
The situation worsens when the flash is embedded on a page with strict control attributes such as:
<embed type="application/x-shockwave-flash"
src="https://localhost:flashfile.swf" width="400" height="300"
quality="high" scale="scale" allowfullscreen="true"
allowscriptaccess="never" salign="tl" wmode="opaque">
I read that wmode=opaque can bring some undesirable side effects, but it is ridiculous, that I can't even select the TextField objects. Event the mouse scroll isn't captured anymore. The mouse events are not hitting the TextField objects.
This is a peculiar case because other objects such as fl.controls.CheckBox and fl.controls.ComboBox works, as they still are clickable/selectable.
Question: Is there something I should know about in this special scenario of ScrollPane and embedding using wmode=opaque that I'm missing out here?
After searching the web for half a day, and combing the AS3 documentation till my eyes go blind, I finally found a hint to a solution to my problem. I'm just doing a brain dump here to fix the TextField selection issue.
A lot of search results hinted at the problems of wmode=opaque and how browsers control the mouse events, but not many turn up direct answers or solutions.
http://www.actionscript.org/forums/showthread.php3?t=170310
The forum question above gives a hint, that the ScrollPane object, actually captures the first mouse click for focus, then lets the subsequent click go through to the children object. The tip given is as shown:
myScrollPane.focusEnabled = false
setting focusEnabled property to false.
For completeness, I've explicitly set more properties just to be sure:
mouseFocusEnabled = false; // disable mouse focus on the scrollpane
focusEnabled = false; // disable focus on the scrollpane
mouseEabled = true; // receives mouse input
mouseChildren = true; // enable for selecting children objects
Miraculously, my clicks are able to select the editable TextField objects when the flash is embedded using the wmode=opaque (I'm still not actually sure whether this is the issue).
The mouse scroll events however, seems to be only solvable with external javascript. There's no internal AS3 solutions.
That said, the unanswered question is: I'm still not sure where or how web browsers capture the mouse events then selectively pass them into the embedded flash containers. If someone can shed light on this, and also point to some solution, that would be great.
I've got a pure AS3 (no Flex) project that uses Flare to display and interact with a data visualization. I just implemented some panning behavior, so you can click and drag the visualization around, and now I'd like to give the user a visual indicator that this is possible, by switching the arrow cursor with a nice grabby-looking hand icon.
The user can click and drag at any time except when the mouse is over a clickable node (at which time the cursor swaps to a pointer - this behavior is already in place).
So...
1) Do I need to create my own custom bitmap/sprite or is there a palette of built-in cursors I can use? (I'm not using Flex.)
2) Is there a way to simply replace the default arrow with the pan cursor project-wide, or do I need to attach the swapping to mouse events on display objects? Can I use the stage object to make this behavior apply everywhere?
3) How do I perform the swap? Do I use the Cursor object directly or do I need to get involved with the CursorManager?
Any guidance, pseudo-code, or words of wisdom is greatly appreciated!
I don't think there's a CursorManger in flash, only flex. The way i'm doing is with a custom class which hides the cursor and drags the customized cursor at mouse_move. You have to set it to mouseChildren=false, otherwise will flickr or the buttons will not be clickable. One problem i found is with custom contextual menus. Try this link http://abrahamyan.com/2009/03/23/as3-cursormanager/
A few things I learned (all pretty newby, really). Firstly, there are some built-in cursor options you can set by setting Mouse.cursor to any of the options of MouseCursor.TYPE. The Mouse object is a singleton available app-wide, so anywhere you change it in your code, the change persists until another change is triggered.
For my simple case, I did this:
//on init, start with the "hand"
Mouse.cursor = MouseCursor.HAND;
//on clickable items, change to "pointer", then back to "hand"
myClickableNode.addEventListener(MouseEvent.ROLL_OVER, function(evt:Event):void {
Mouse.cursor = MouseCursor.BUTTON;
});
myClickableNode.addEventListener(MouseEvent.ROLL_OUT, function(evt:Event):void {
Mouse.cursor = MouseCursor.HAND;
});
The result is you always have the "hand" until you rollover something clickable, then you get the "pointer".