I've been having some trouble with tweens. Here's a description of my usage:
I have a system where a textbox is the child of a movieclip. When you click the "Next" button, the movieclip fades to 0-alpha and upon completion, the text in the textbox is changed (to the next index in an array) and it tweens back in to 100-alpha. This makes a nice transition through the text.
My issue is that sometimes it doesn't tween back in, only out, leaving the user with an empty box where text should be.
However, I'd asked this question previously with the thought that it was "Timing out". Now, after significant testing I realised that it only happens if I click or select some of the text on the text box. Could it have something to do with this text selection intefering with the changeText function below... (it's the same text box, just the text changes).
Has anyone else experienced similar faults?
CODE:
function changeClick(e:MouseEvent):void {
if (e.currentTarget==btnRight) {
newDirect="right";
} else {
newDirect="left";
}
if (newDirect=="right") {
if (pageTotal!=pageCurrent) {
tweenText=new Tween(b_textB,"alpha",Strong.easeOut,1,0,.5,true);
tweenText.addEventListener(TweenEvent.MOTION_FINISH, changeText);
}
} else {
if (pageCurrent!=1) {
tweenText=new Tween(b_textB,"alpha",Strong.easeOut,1,0,.5,true);
tweenText.addEventListener(TweenEvent.MOTION_FINISH, changeText);
}
}
}
function changeText(e:TweenEvent):void {
var newText:String;
var pageCurrentConstant:int=pageCurrent;
if (newDirect=="right") {
for (var i=0; i<=(pageTotal-1); i++) {
if ((pageCurrentConstant-1)==i) {
if (i!=pageTotal-1) {
newText=pageText[i+1];
pageCurrent++;
} else {
newText=pageText[i];
}
}
}
} else {
for (var j=0; j<=pageTotal; j++) {
if (pageCurrentConstant==j) {
if (j!=0) {
newText=pageText[j-2];
pageCurrent--;
} else {
newText=pageText[j];
}
}
}
}
b_textB.htmlText=newText;
tweenText=new Tween(b_textB,"alpha",Strong.easeOut,0,1,.5,true);
drawWidget();
}
changeClick is initiated by either btnRight or btnLeft to navigate through the text
Try disabling the text selection, with b_textB.selectable = false
You will be able to quickly rule out the possibility of a selection issue. But the sometimes in your question strongly indicates that's what the issue is.
If you need the text to be selectable when it's visible, just switch it off and on at the start and end of the tweens.
Hope this solves it.
Oh by the way, here's a list of several completely free alternatives to the Tween class... (Greensock's Tween packages are not free.)
Between AS3
Desuade Motion ... This one in particular is awesome.
Tweener
Tweensy
Twease
Update...
The only way you can solve this and allow the user to select the text, is to make a duplicate textfield that's selectable, and toggle visible off for this when the tween begins and on again when it ends, the alpha property on the effected textfield will then work properly.
Pretty kludgy I know, but it will get the effect to work, and allow the user to select the text when it's visible.
You may also try to wrap the original textfield in a Sprite and do the alpha Tween on that instead, however I don't guarantee that will be a 100% fix.
The standard Tween class is kind of stupid in many situations. When using it, you have to be careful that you don't overwrite or remove its instance, as the Garbage Collection could start then. In the same way it always requires you to specify a start value which can lead to disrupting behaviour in the animation.
I'm not exactly sure what exactly your problem is, and with that less code it is hard to reproduce it (you might want to provide a full working example code if you still experience the problem). However I suggest you to try out a different tweening framework. I for myself have made very good experience with Greensock's TweenLite. It might have a weird syntax (at least I could imagine a better one), but in general it works really well, and I have solved very many problems with the standard Tween class by simply using TweenLite instead.
Related
I want to reset the text whenever I have pressed a button and after that it will go to the specific frame where I already labeled it. However, the text won't reset even though I put the reset text before gotoAndStop();
How can I solve this?
Here is the code that I am using:
payment_button.addEventListener(MouseEvent.CLICK, onClickPayment);
function onClickPayment(e:MouseEvent):void
{
if (myText1.text == "")
{
trace('Cannot proceed! There is no items in your shopping bag.');
}
else
{
myText1.text = "";
gotoAndStop("purchased");
}
}
Thank you!
Your answer much appreciated!
It sounds like you are changing the frame of the MovieClip containing the textfield. If so, then if the new frame and the current frame have different keyframes that contain the textfield, the text in the textfield will be set back to the default, regardless of whatever changes you make to it in this code, when you return to the first frame.
So I have been working on my final project for the semester for my Computer Systems class, and we have been tasked to make a game using Flash and ActionScript 3.0. I've pretty much completed everything but I have come across an extremely strange occurrence of Flash CS6 being silly. I am moving a MovieClip up and down depending on a selected index, however, the image leaves 'residue of it's footprints' behind and also moves. I have tried hard to look for an answer as to why this is happening, but I don't know what it's called, or how to appropriately explain it - I'm coming from an area where one must program graphics, not just simply, drag and drop.
Below are pictures as to what I've come across, but first the code I'm using:
function updateThemeScreen():void {
button_selection.y += (selectedPositions[selectedTheme] - button_selection.y) / 2;
}
function attemptThemeChange(mxP:Number, myP:Number):void {
if(objectContains(theme_darkness, mxP, myP)) {
selectedTheme = 0;
} else if(objectContains(theme_halloween, mxP, myP)) {
selectedTheme = 1;
}
}
As you can see in the final image, it has copied half of itself and left it at the last button, which is strange, and shouldn't happen...
Link to the SWF zipped up with the required AS3 classes: Dude, RUN
So it seems that I have magically fixed this problem by hiding the buttons and showing them all in one frame. I don't know what this problem is or why it does it, but to fix it, you just need to hide and show the affected components - yes, in one frame:
function hideShow(object:MovieClip):void {
object.visible = false;
object.visible = true;
}
I have a slideshow that is fading through and each Slide links to a different page. Have a simple text rollover effect I activate with AS3 so when the slide is rolled over the text changes color.
I can get it to work with just one slide but I can't get it to work when I add 3 more slides
inv_btn.addEventListener(MouseEvent.CLICK, buttonHandler);
inv_btn.addEventListener(MouseEvent.MOUSE_OVER, rollOver);
inv_btn.addEventListener(MouseEvent.ROLL_OUT, rollOut);
function buttonHandler(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.hautepets.net/pages/grooming.php"));
}
function rollOver(event:MouseEvent):void {
rollText_1.gotoAndPlay("over");
}
function rollOut(event:MouseEvent):void {
rollText_1.gotoAndPlay("out");
}
Then add the code 3 more times but change instance names and also move the button for the next slide to another key frame. Not sure this is necessary but I also tried it with out doing this.
I use the exact same code I just change instance names on the new slide and in the code like so:
inv_btn2.addEventListener(MouseEvent.CLICK, buttonHandler2);
inv_btn2.addEventListener(MouseEvent.MOUSE_OVER, rollOver2);
inv_btn2.addEventListener(MouseEvent.ROLL_OUT, rollOut2);
function buttonHandler2(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.hautepets.net"));
}
function rollOver2(event:MouseEvent):void {
rollText_2.gotoAndPlay("over");
}
function rollOut2(event:MouseEvent):void {
rollText_2.gotoAndPlay("out");
}
any ideas of what I am doing wrong?
you need to declare these instances in the first frame, even if you don't use them
just put inv_btn2 and rollText_2 also to first frame, it will solve the problem and use visible = false/true; to show/hide them on different frames or you also can put them out of stage on first frame.
I have a Grid component and it's verticalScrollPolicy is set to "auto".
And every time when verticalScrollBar appears or disappears, I want to handle this event.
I tried to listen to the RESIZE event:
private function onGridResize(event:Event):void
{
if (_grid.verticalScrollBar && _grid.verticalScrollBar.visible)
{
trace("scroll on");
}
else
{
trace("scroll off");
}
}
but it does not work: it seems to me, that RESIZE event actually dispatches before grid visual update and scrollbar appear/disappear.
I tried to listen ChildExistenceChangedEvent.CHILD_ADD and ChildExistenceChangedEvent.CHILD_REMOVE events as well, but it doesn't work for me too.
Maybe I just don't see some obvious solution.
Thanks in advance for any help or advise.
You do not specify which grid. (Spark, MX, or one of ours (http://www.flexicious.com/Home/Ultimate) )
One thing you could do is throw a validateNow prior to checking:
private function onGridResize(event:Event):void
{
_grid.validateNow(); //add this.
if (_grid.verticalScrollBar && _grid.verticalScrollBar.visible)
{
trace("scroll on");
}
else
{
trace("scroll off");
}
}
The other thing you could also do, is use a timer or call later.
private function onGridResize(event:Event):void
{
callLater(checkForScrollBar); //check for scrollbar would have the code above.
}
Perhaps you can listen for the "show" event of the ScrollBar itself. Something along the lines of this should work:
_grid.verticalScrollBar.addEventListener(ComponentEvent.SHOW, onGridResize);
I haven't tested this, but I'm pretty sure it should work. (Of course, you may want to rename onGridResize to something more suitable like onVerticalScrollShow.)
By the way, you don't have to check that the ScrollBar exists; in pure AS3 at least, they are instantiated along with the DataGrid and exist regardless of their ScrollPolicy value.
The reason the resize event appears to fire right away is because it is dispatched as soon as its dimensions change. I'm assuming that in your application, the user drags to manually adjust the grid's size, and thus the events fires as soon as any adjustment is made.
I created a contentEditable div to use as a rich textarea. It has resize handlers around it that I'd like to get rid of. Any idea how I'd do this?
Edit: This appears to be happening because I am absolutely positioning the div, so Firefox adds an infuriating _moz_resize attribute to the element which I cannot turn off.
Just as a side note, you can disable Firefox's automatic resize handle feature by sending the (somewhat poorly-documented) enableObjectResizing command to the document:
document.execCommand("enableObjectResizing", false, false);
AFAIK, this can only safely be done once the document has loaded, and there's no way I know of to disable the grabber, which is a separate feature.
It looks like I'll be able to work around this by adding a wrapper div and absolutely positioning the wrapper and then making the inner div contentEditable.
In Chrome 39, these handles don't seem to exist, even if you wanted them to.
In Firefox, one can simply use execCommand, like ZoogieZork answered.
But in Internet Explorer this can't be turned off. It must be worked around.
In WYMeditor development, here's what I've found.
The following results in:
In IE, the resize UI shows up for a split second and then disappears. There seems to be no way for the user to use it.
Images are text selected on mouseup
Ability to drag images. In some browsers, they may have to be selected before dragging. As written in the previous item, a simple mouseup will result in an image being selected.
Images are selected using text selection and not "control selection" (that which provides the resize UI).
This is the best I could come up with after hours of very deep breaths. I think it is good enough if you really want to get rid of those handles.
In IE, Setting oncontrolselect to return false on the image, really does prevent those handles from appearing, and you can do it cleverly, by attaching the following handler to the mousedown event:
function (evt) {
var img;
function returnFalse() {
return false;
}
if (evt.tagName.toLowerCase() === "img") {
img = evt.target;
img.oncontrolselect = returnFalse;
}
}
It actually doesn't work completely well. The reason that it didn't work very well is that in order to begin a drag and drop operation on the image, one had to press and hold the mouse, without moving it, for a split second, and only then begin moving it for the drag. If one pressed the mouse and immediately began dragging, the image would remain in its place and not be dragged.
So I didn't do that.
What I did is the following. In all browsers, I used mouseup to text select the target image exclusively. In non-IE and IE11, synchronously:
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
selectSingleNode(img); // In my case, I used Rangy
}
}
In IE 7 through 10, asynchronously:
function (evt) {
if (evt.target.tagName.toLowerCase() !== "img") {
return;
}
window.setTimeout(function () {
selectSingleNode(img); // In my case, I used Rangy
}, 0);
}
This made sure that after those handles show up, they disappear ASAP, because the image loses its "control selection" because that selection is replaced with a regular text selection.
In Internet Explorer 7 through 11, I attached a handler to dragend that removes all selection:
function (evt) {
if (evt.target.tagName.toLowerCase() === "img") {
deselect(); // I use Rangy for this, as well
}
}
This makes the handles that show up after drag and drop, disappear.
I hope this helps and I hope you can make it even better.
I just face that problem.
I tried document.execCommand("enableObjectResizing", false, false); but, the move icon was still appearing. What just fix my problem was just e.preventDefault() when onmousedown event occurs.
element.onmousedown = function(e){
e.preventDefault();
}
for IE11 (I havn't tested the older versions of IE, but I feel like it would work) you can add contenteditable="false" attribute to the img tag. This will prevent any re-sizing from being done while keeping drag and drop in place.
... just the best fix ever
<div contenteditable="true">
<label contenteditable="false"><input/></label>
</div>
or any html element that wraps your input/img
Works on IE11 like a charm
Have you tried adding the style
border: none;
to the div?