Several ' click is needed with HTML5 Canvas script

I'm learning the script in the HTML5 Canvas, having recently changed dashboard animate and, before AS3

I have two buttons and I created a simple condition to detect the alpha value of the STM, control buttons, so that the correct MC can be alpha fainted faded and the new faded faded on. The code works, except that:

on the first click, the MC fades on correctly, the second click on another button takes 2 clicks, and each requires more clicks on the same key. Can someone explain and give me a way to fix this oddity.

Thanks in advance!

That's what I have:

THE STATES OF LOAD

this.circleGreen_mc.alpha = 0;

this.circleRed_mc.alpha = 0;

this.circleTeal_mc.alpha = 0;

BUTTON GREEN

This.green_btn.addEventListener ("click", greenClick.bind (this));

function greenClick() {}

FADE IN

this.addEventListener ('check', fadeIn.bind (this));

function fadeIn() {}

this.circleGreen_mc.alpha += 0.1;

}

Fade OUT

If (this.circleRed_mc.alpha == 1); {

this.addEventListener ('check', fadeOut.bind (this));

function fadeOut() {}

this.circleRed_mc.alpha-= 0.1;

}

}

Fade OUT

If (this.circleTeal_mc.alpha == 1); {

this.addEventListener ('check', fadeOut.bind (this));

function fadeOut() {}

this.circleTeal_mc.alpha-= 0.1;

}

}

}

RED BUTTON

This.red_btn.addEventListener ("click", redClick.bind (this));

function redClick() {}

FADE IN

this.addEventListener ('check', fadeIn.bind (this));

function fadeIn() {}

this.circleRed_mc.alpha += 0.1;

}

Fade OUT

If (this.circleGreen_mc.alpha == 1); {

this.addEventListener ('check', fadeOut.bind (this));

function fadeOut() {}

this.circleGreen_mc.alpha-= 0.1;

}

}

Fade OUT

If (this.circleTeal_mc.alpha == 1); {

this.addEventListener ('check', fadeOut.bind (this));

function fadeOut() {}

this.circleTeal_mc.alpha-= 0.1;

}

}

}

/*

BUTTON TEAL

This.teal_btn.addEventListener ("click", tealClick.bind (this));

function tealClick() {}

}

}

*/

Well, then, if I did what I guess you do, I would like this:

var i;
var curBtn;
var circles = [this.circleRed, this.circleGreen, this.circleBlue];
var buttons = [this.btnRed, this.btnGreen, this.btnTeal];
var items = circles.length; // assume same number of buttons and circles

// initialize things
for (i = 0; i < items; i++) {
    circles[i].alpha = 0;
    buttons[i].btnId = i;
    buttons[i].addEventListener("click", buttonClickHandler.bind(this));
}

// handler for all button clicks
function buttonClickHandler(evt) {
    var i;
    var btn = evt.target.btnId;
    if (btn == curBtn) {
        return;
    }
    curBtn = btn;
    for (i = 0; i < items; i++) {
        if (i == btn) {
            createjs.Tween.get(circles[i], {override:true}).to({alpha:1}, 500);
        }
        else if (circles[i].alpha > 0) {
            createjs.Tween.get(circles[i], {override:true}).to({alpha:0}, 500);
        }
    }
}

Tags: Adobe Animate

Similar Questions

  • How to call a function of my html code to js created by animate cc, I had used 'exportRoot.functionName' and said this function in my document of flash pro with html5 canvas, but now on cc animate this way doesn't work.

    My html code created by animate cc was changed to php for me, because I send and received variables via get and catch the cookies and much more. the function that I used to call function on my .fla of the document is passId() and it worked before when animate was Flash pro with html5 canvas.

    Captura de pantalla 2016-09-27 a las 12.19.59 p.m..png

    And function of .fla, I frame_0 only assign to the variable "id_usuario", this is the feature on fla:

    Captura de pantalla 2016-09-27 a las 12.20.12 p.m..png

    First of all, the title of your thread is horrible. Titles are supposed to be securities, not paragraphs.

    As for your problem, you are probably trying to call catchIdUser before it is defined. handleComplete() is raised when the content is ready to run. He did not actually yet. I guess you should have script code call the function of window parent, not the other way around.

  • Dynamic resizing of Textfield with HTML5 Canvas?

    Hello

    If my company is currently using Flash CS4 because all our AS2 code. I really want to move from the dark ages to Adobe animate CC. One of the main drivers is HTML5 Canvas and be able to support all mobile devices.

    So that this transition to work, I need to be able to do 2 things from the start:

    1. I need to get the variables passed in the ColdFusion page that is generated flash animation.

    2. I need to manipulate the data (like the formatting of phone number)

    3. I need to be able to keep the text fields in a defined width and mitigate the text to fit without distortion.

    EX: If I didn't do this in AS2 it would work. Did not understand how to do the same thing to animate:

    If (this ._width > 200) {}

    This ._width = 200;

    }

    This stuff is possible with Adobe animate CC? It is possible with HTML5 Canvas or should I publish with air?

    Is there a site that shows all the animated objects and properties that can be manipulated with Javascript for use with the Web?

    If possible, I'd love to be able to save an image to preview at run time and possibly make web-to-print

    In canvas mode, all audiovisual operations are managed by the library of CreateJS. There is a lot of documentation and examples for that flow. Very little of it is explicitly linked to the Flanimate IDE.

    You cannot directly set the width and height on the CreateJS objects. You can set the scaling factors X and Y, which should be sufficient if you are willing to do a little math.

    Width and height of determining dynamic objects can be difficult, because CreateJS is limited by what supports the HTML5 canvas API. There is a blog post, discuss the issue here:

    http://blog.createjs.com/update-width-height-in-Easeljs/

  • How to use video with HTML5 Canvas alpha channel? is this possible?

    How to use video with HTML5 Canvas alpha channel? is this possible?

    Thanks in advance

    There is a video in HTML5 tag, as there is a canvas tag. But you want to alpha. He is not an alpha channel in HTML5 video.

    Transparency alpha in video Chrome | Web - developers of Google updates

    Tag video example

    video controls style="width:640px;height:360px;" poster="poster.png">
        type='video/webm;codecs="vp8, vorbis"' />
        type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
        kind="subtitles" srclang="en" default>

  • Using PHP with Html5 Canvas in anime CC

    Someone at - it all the resources they can point me on the use of PHP in Html5 Canvas to animate CC?

    I don't seem to see a lot of options for this.

    We used to be able to with edge animate.

    Do you know how cool it would be to be able to build web applications Html5 using backend script just as you can on the side SWF (Flash) of things?

    In addition, anyone know what anime-road map will look like?

    Thanks in advance

    using animate than Pro, you can create an ajax function that allows you to send and load data from and to your php file.

    I use jquery because it longer resolves the differences between browsers in the processing of javascript.

  • Using PHP with Html5 Canvas in Flash CC

    Hello

    I know that I can make web applications using Flash CC *. Output SWF connect to PHP for the saving and loading of files.

    However, can I do the same web application publishing under an Easyjs HTML5 canvas, still using PHP for server tasks?

    Thank you

    SWFs communicate with their container via JavaScript pages.

    HTML5 Canvas mode (powered by CreateJS) uses no browser plugin, so its scripting JavaScript language.

    So yes, PHP and JavaScript and by extension of Web documents, can talk to each other.

  • Click and click on &amp; keep in html5 canvas button

    Hello
    I am trying to create a scenario where if I click a button perform a function, but if I click and hold (aka long press) then the service can continue to run as long as I am holding down the button. I have done in building 2 (as below), want to replicate in html5 canvas.


    Please help me out here.

    See you soon...

    launch ticker loop that calls your function on mousedown and stop the loop on mouseup.

  • Mobile (touch) compatibility with HTML5 Canvas

    When I saw a HTML5 Canvas project on the web, it works well. When I saw the same project in mobile it previews too, but this isn't a job well.

    example;

    Demo EaselJS: drag-and-

    When I open this simple project of object hanging out on the web, no problem, everything is fine but when I open the project on mobile, it shows a preview but is not compatible. Unfortunately, it is not possible to drag by touch.

    image.jpg

    image.jpg

    apply preventDefault to your touch event.

  • Resize the image with HTML5 Canvas - distortion

    Hi all

    I'm working on a Webworks app where I need to resize an image to upload it to a server. I use JQuery Mobile, the application should run on OS6 and upward. The user can use the camera or select a picture, the power off. The corresponding code is the following:

    function handleOpenedFile(fullPath, blobData) {
                    var image = new Image();
                    image.src=fullPath; //path to image
                    image.onload = function () {
                        var resized = resizeMe(image); // send it to canvas
                        //Do stuff with the DataURL returned from resizeMe()
                    };
            }
    
    function resizeMe(img) {
    
                var canvas = document.createElement('canvas');
                var width = Math.round(img.width / 2);
                var height = Math.round(img.height / 2);
                canvas.width = width;
                canvas.height = height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, width, height);
                return canvas.toDataURL("image/jpeg", 0.8);
            }
    

    I then use the Base64 in the DataURL for download on the server. The images are reduced, but they are truncated. Parts of the image are shifted autour and colors come out strange. It is not scaling in itself than the mess to the top of the picture it comes out garbled if you draw on the canvas without any scaling.

    Does anyone have an idea how to solve this problem or have another suggestion to resize an image for download?

    I managed to solve the problem of resizing for anyone who takes place also in this. Replacement of

    return canvas.toDataURL("image/jpeg", 0.8);
    

    with

    return canvas.toDataURL();
    

    solved the problem with the strange visual artifacts. Returns a picture of resized without any strangeness.

  • Go to another page/scene in HTML5 Canvas?

    Hey, I'm new with Html5 Canvas in CC to animate.

    I want a navigation to another page, if I click on the button.

    in AS3, can I go to another page/scene with the command:gotoAndPlay (1, "scene 2");

    What is order in Html5 canvas?

    Help...

    Several scenes are not currently supported in HTML5 canvas documents.

    If you want to navigate to another url (which could be another document exported to the HTML5 canvas) then use - window.open ("URL", "_blank");

  • How to make a text box in the scroll bar custom FlashCC HTML5 Canvas?

    Hello

    I need to make a scroll for a long text box bar. I wonder how can I achieve this with HTML5 canvas in Flash CC2014?

    Thank you

    Rodrigo

    No, the code is exactly the same except instead of changing the property y of a textfield object, you change the property y of a movieclip (which contains an image of the text your want to display).

  • HTML5 canvas settimeout problem

    Hello

    I have a problem with html5 canvas settimeout.

    I created a round drawing object, the instance name is ball. The following code

    Code:

    This.ball.x = 1000;

    setTimeout (calledFun, 500);

    function calledFun()

    {

    Alert ("fun called");

    This.ball.x = 100;

    }

    The function of this code is worked, alert view only. But ball x position not changed.

    So please help me

    Thanks in advance

    you have lost your reference to "this".  Try:

    var tl = this;

    This.ball.x = 1000;

    setTimeout (calledFun, 500);

    function calledFun()

    {

    Alert ("fun called");

    TL.ball.x = 100;

    }

  • I need "TweenEvent.MOTION_FINISH" flash as3 code converted to code html5 canvas

    I use a lot of "TweenEvent.MOTION_FINISH" in flash AS3 and move forward to html5 canvas, I need to have the code to do the same. does anyone know how this code to html5 canvas? the code below just hovers over something in the axis pixels 500 X 230 frames and on motion_finish it moves 50 pixels with a different acceleration. I use this for other things like say a different clip to move or fade when another clip is done.

    Import fl.transitions.Tween;

    Import fl.transitions.easing.None;

    Import fl.transitions.easing.Regular;

    import fl.transitions.TweenEvent

    var myTween:Tween;

    var squarex:Tween;

    function squareEnter(): void {}

    myTween = new Tween (textLineOne, "x", None.easeInOut, textLineOne.x, textLineOne.x + 500, 230, false);

    myTween.addEventListener (TweenEvent.MOTION_FINISH, finishF);

    }

    function finishF(e:TweenEvent):void {}

    Squarex = new Tween (textLineOne, "x", Regular.easeOut, textLineOne.x, textLineOne.x + 50, 40, false);

    }

    squareEnter();

    In addition to the call you can do at the end, there are also expected, which is convenient to implement several interpolations at the beginning. Here's their example syntax:

    Target.Alpha = 1;

    createjs. Tween.get (target)

    . Wait (500)

    .to ({alpha: 0, visible: false}, 1000)

    . Call (handleComplete);

    function handleComplete() {}

    Full Tween

    }

    Who would wait half a second tween, the goal of zero plus a second, then call complete Manager.

    One thing that is a little different, is that instead of saying the target as the first parameter, there is the get() function.

  • SoundJS with Flash HTML5 Canvas - break sound &amp; update the lib?

    I'm looking to do some basic audio control in the Flash timeline, exporting HTML5 canvas.

    On the frame of 10 I am loading/reading a file with:

    audio1 var is createjs. Sound.Play("Sounds/course3_mod1_2.mp3");

    Who plays, but then I can't figure out how to make a pause as the beep several frames later at a briefing of the animation to a timeline. I read that there is a method. pause() methods, as well as chassis 50 that I use:

    AUDIO1.pause ();

    This does not work for me - I must be missing something pretty obvious regarding variables references on the timeline...? In the console of Firefox, I see the JS error:

    ReferenceError: audio1 is undefined.

    If it's important, the process of publication included "0.5.2.min.js", although I do not have the latest version of CA is "0.6.0.min.js". I'm also very curious how I would update my CC Flash (version 20141) to use this latest version of the library compared with older he current attaches to the HTML code. I guess I can (in the publication settings) uncheck the option 'Hosted libraries', and then manually download new libraries and replace them in the folder. But not this crushed with each publication? And what happens if I still want a link to a hosted version the later?

    somascope wrote:

    On the frame of 10 I am loading/reading a file with:

    audio1 var is createjs. Sound.Play("Sounds/course3_mod1_2.mp3");

    Who plays, but then I can't figure out how to make a pause as the beep several frames later at a briefing of the animation to a timeline.

    That cannot possibly work. If it worked, it is no more. The SoundJS, the documentation is very clear that "before you can play a sound, it must be saved.» You need to do something like this:

    // create global alias to main timeline for event handler
    _main = this;
    // wait for sound to preload
    this.stop();
    // assign load event handler
    createjs.Sound.on("fileload", handleLoad);
    // load and register sound
    createjs.Sound.registerSound("mysound.mp3", "soundID");
    // play sound and start timeline playing
    function handleLoad(event) {
        _main.audio1 = createjs.Sound.play("soundID");
        _main.play();
    }
    

    Then, to put in pause/resume, follow these steps:

    this.audio1.paused = true; // pause
    
    this.audio1.paused = false; // resume
    

    Reference: is there a pause() method? · Number #200 · CreateJS/SoundJS · GitHub

    Note that var creates variables that have only the scope of the framework. To the current scope of timeline, you must use this..

    If it's important, the process of publication included "0.5.2.min.js", although I do not have the latest version of CA is "0.6.0.min.js". I'm also very curious how I would update my CC Flash (version 20141) to use this latest version of the library compared with older he current attaches to the HTML code.

    DO NOT do it. Each new version of Flash CC publishes the files that target a specific version of the CreateJS library, so try to cram in a different version will certainly break things. But why you are still using Flash CC 2014? You should be able to upgrade to CC animate.

  • problem with animated mask of targeting to HTML5 canvas

    I have a movieclip inside with some animation and wants the image of mask with this movieclip but in html5 canvas target, this method does not work, target swf.

    I'm masking of timeline

    what I am doing wrong or this is the bug?

    I just tested out and seen this error in the output panel:

    Feature not supported: symbols several frames in masks.

    It looks at the canvas, you can only animate your mask on the main timeline, but not inside the symbol of the mask.

Maybe you are looking for

  • Receiver 0x800cc78 on Outlook Express

    HI, I have the same problem.  When I followed your link, there is no published offers. When I do a search on this links page, it brings back me to this forum. Outlook Express 6 with 0x800cc78 error code A google search says it was a mistake to regist

  • control of linear actuators Zagarella with labview

    Hello am new to using Labview-{3 weeks from May 31} and I would like to order three linear actuator Zagarella to operate from one stage of translation / linear in X-Y-Z. All the advice to know where to start Best regards: mansad:

  • I am a user of windows vista and you want to use windows xp, then I have to do?

    I am a user under windows vista license so can I use Windows xp?If so, how?If not what do I have to use windows xp?

  • display images after download is completed

    I have a thread that downloads an image, then executes a callback in the screen of the user interface. I usually use this class/thread in a custom field where I run invalidate() to update the paint method. This works. Now, I am trying to use this app

  • Develop module disabled on Lightroom 6

    I bought Lightroom 6 disc and downloaded to my computer months ago! Worked well. I used it in February, then took a break and went to edit some pictures last night and he said the "develop module is disabled." I repeat that this is not a subscription