Embedded Flash application, editable TextFields are not selectable when added as a children of source in fl.controls.ScrollPane - html

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.

Related

Flash Object to small for Security "Window"

I have made a flash as3 project in adobe flash pro with the dimensions 20px x 150px.
i would like to ceep it this size, but the problem is that my application needs to ask for the MICROPHONE premissions
( like in the image )
but this only happens if the flash object is big enough.
are there any workarounds with maybe the "overflow = visible" method or something ?
thx for any help
Here are a couple of options:
Temporarily increase the dimensions of the SWF in HTML. I've never done this, but I imagine it would work and is the most simplest solution.
Use wmode="transparent" or wmode="opaque" in your embed code. In both of these modes you can layer HTML on top of or underneath the Flash object. The SWF should be sized so that it is big enough to display the dialog. When the dialog is not visible, you can hide portions of the Flash app by covering them with HTML.
I've used the 2nd option successfully, not for this purpose, but for showing some HTML elements (arrow images and text) to guide the user through these "allow" camera/microphone dialogs.
For both of these options to work, you need to be able to detect when the user has closed the dialog. Though there is no official Flash API for doing this, however, there are some good work arounds for doing that.

Flash CS3 (AS3) is giving my graphics (buttons and movieclips) outlines

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

How do I force or lock focus in actionscript 3?

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,

How to click through a display object in Flash with AS3?

I am creating a photo editor app where, at some point, the photo you edit is supposed to be dropped between two layers of DisplayObjects (a background image and an image mask.)
There is a problem, though. When the image you are editing is dropped between the background and the image mask layers, it becomes unclickable, and therefore gets stuck there, with no chance of dragging it again. (The photo editor uses TransformManager library.)
I am looking for a way to allow you to select the image you are editing no matter if there is another DisplayObject on top of it. And that probably means finding some way to click through the image mask.
Is there a way to do that?
I tried setting mouseChildren = false on imageMask, but that didn't have the desired effect.
Many thanks.
I had similar problems and I managed to solve it by using both
displayobject.mouseChildren = false;
and
displayobject.mouseEnabled = false;
on the object that you want to click through.
How about this?
mask.mouseEnabled = false;
You can always attach a Mouse Click listener to the container, and then either use GetObjectsUnderPoint and check for your object or do a hit test and see if the mouse position is over your intended object.
The hit test would look something like this !this.YourPhoto.hitTestPoint(stage.mouseX, stage.mouseY, false)
b
If I understand your problem, this handy class should solve it:
http://www.mosessupposes.com/utilities/InteractivePNG.html
Take a look at what senocular does here, specifically in the handleUpdate method. Basically: getting a list of everything under the mousePoint to find your object.
I think I stumbled upon similar problem, although in as2.
In flash when you position movie clip over movie clip, and the movie clip on the top has any mouse events implemented, it captures all mouse events so they never reach occluded movie clip.
The solution is not to have any mouse events for the top movie clip and have the movie clip positioned at the bottom capture mouse event and redirect some of them to the top movie clip (you can check mouse position with hitTest to determine if they should be redirected).
i had a strange bug i used;
movieClip.mouseEnabled = false;
but wasn't working for some reason.. was driving me crazy!! as i have used it so many times before. tried lots of different things nothing worked then i deleted the MovieClip and the created a new one and worked.. so the MovieClip's contents must have been corrupt or something as it had a old dynamic Text Area box embedded within the MovieClip.
hope this helps someone out there..

Key press issue in ActionScript 3

I'm creating a DDR-like game for an assignment and my keyboard seems to respond and trace it, but only if I press on the screen with the mouse first.
How can I get rid of that and just have it respond right away?
right_mc is the arrow that's moving
ArrowRight_mc is the arrow at the top
perfect_mc should pop up briefly
and so should a glowing arrow where it hits.
Here is what I have so far:
if(rightDown){
trace("right arrow");
if(right_mc){
if(right_mc.y >= ArrowRight_mc.y){
perfect_mc.visible = true;
glowRight_mc.visible = true;
}
}
}
This has been a long standing issue for Flash developers. Flash needs keyboard focus before it can detect keyboard events.
The problem is that the browser does not give focus to the SWF until the user clicks somewhere inside the SWF. This does make sense though. I don't want the web page I am on to lose focus just because there is a flash movie embedded somewhere. This is a security feature, to stop things like Flash banner ads being silent key loggers. However there are some instances that it makes sense to force the focus e.g. a Flash game where its the only thing on the HTML page.
Usually the best thing to do is have start menu screen with a "play" button. This forces the user to click on the SWF without even knowing about this "focus issue".
There is more info at the Adobe Technote - Giving keyboard focus to an embedded Flash movie.
***EDIT****
Whether the Flash has focus or not, only affects keyboard events. It will not affect code from running, movieclips from playing, or sounds/video from playing.
The issue here is that the embedded SWF file does not have focus when the screen first loads. You can assign focus to it using JavaScript but in my experience, this does not always work 100% of the time because of variations in the way browsers interpret JS. What a lot of people do is have a big START button following the load of the game so that players have to click on the SWF to begin playing. Some sites, even use JS to detect when the game has lost focus and will pause the game and alert the user.
I suppose I haven't exactly answered your question because I'm not that great at JavaScript but I hope this points you in the right direction.
In response to your comment...
I'm unclear on something. If you have to click to start the song then you've already clicked on the SWF and you should be getting keyboard events, right? So if you're having to click to start then click again, maybe you need to make sure your mouse listener is at the root of your display list.
// in your document class / main AS file...
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
Or perhaps you need to poll for input during an EnterFrame loop rather than listen for key events.
I know what you mean. You have a specific object on the stage that needs focus before keyboard events will trigger. I'm having the same issues with a game here. A sprite needs to move with the keyboard arrows but the container needs focus so it will respond. I'm just setting the object I want to move to be tabEnabled as my requirements are only for accessibility purposes so tabbing to the object first will give it keyboard control.