CreateJS MouseEvent

Hi,
I am trying to convert an AS3 file to HTML5. The createJS extension for flash seems like a great tool but I am experiencing some difficulties.
My application cycles through an xml list of buttons, creates an object for each, collects the JS file that is the button (exported using Flash's createjs extension), positions it on the stage and then adds the appropriate event listener.
The problem I am having is that, while the buttons do move to their correct positions visually, the event listener is remaining at the top left of the stage rather than where the button has been moved to. When I click at the top left corner of the stage then the alert fires but if I click where th button has been moved to then it does nothing.
I have pasted some JavaScript code below.
Any help would be very gratefully received.
for(var i=0,ii=Modal.shellObjects.length; i<ii; i++){
var f = Modal.shellObjects[i].id;
var exportRoot = new lib[f]();
stage.addChild(exportRoot);
Modal.shellObjects[i].image=exportRoot;
if(Modal.shellObjects[i].x>-1){ Modal.shellObjects[i].image.x=Modal.shellObjects[i].x; }
if(Modal.shellObjects[i].y>-1){ Modal.shellObjects[i].image.y=Modal.shellObjects[i].y; }
switch(Modal.shellObjects[i].id){
case "closebtn":
Modal.shellObjects[i].image.addEventListener("click", function(event) {
     alert("Close button clicked");
break;

Having never used the feature before but plenty of JS experience, I'm going to assume that the object was drawn into something (Canvas?) and the CreateJS library marked the area the object exists in as clickable via the handler and simply doesn't expect it to move. You can detect clicks on the canvas but cannot detect clicks on a graphical object drawn into a canvas itself, you do it by detecting position. If you investigate the addEventListener method of Modal it will probably show just that. That said, again, I haven't used CreateJS, I do it by hand. Unfortunately that doesn't definitively answer your question but if you open a new document, make a single button that moves completely on roll and export via CreateJS and it doesn't work, chances are it's a limitation of the current library.

Similar Messages

  • Toolkit for CreateJS - iPhone

    Hi,
    I've been trying to do an animation for mobile phones, but it's not working.
    The movie itself is very simple.
    It's a movie clip (with sequential pictures of a product to make a 360° view) and 2 buttons (nextFrame and prevFrame).
    The first time I tried to export using the toolkit, it didn't work and I was told that buttons were displayed as movieclips.
    So, I changed my movie. Now there's no butons at all, only movieclips.
    I used ActionScript 3 to do everything, and I don't see what I can do to make it works properly.
    Here is the ActionScript:
    banner.stop();
    PrevGo.addEventListener(MouseEvent.CLICK, goPrev);
    function goPrev(evt:MouseEvent):void {
              if(banner.currentFrame == 1){
                        banner.gotoAndStop(10);
              }else{
                        banner.prevFrame();
    NextGo.addEventListener(MouseEvent.CLICK, goNext);
    function goNext(evt:MouseEvent):void {
              if(banner.currentFrame == 10){
                        banner.gotoAndStop(1);
              }else{
                        banner.nextFrame();
    The problem when I export the movie is that the movieclip is loaded without clicking.
    If I export the movie without the plugin, it works, but I can't see at iPhone...
    Does anybody know how I can fix that problem?
    Thanks

    Hello,
    We are working on tutorials/documentation that should help you do simple programming after exporting your Flash assets to HTML5.
    If there are tutorials you are looking for in general, I would recommend that you take a look at these:
    http://www.adobe.com/devnet/createjs.html
    http://www.adobe.com/devnet/createjs/articles/getting-started.html
    http://www.adobe.com/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html
    http://www.youtube.com/watch?v=Rhd2QblTtuU
    http://www.youtube.com/watch?v=ptZ0DxkoZEM
    Regards,
    Suhas Yogin

  • I need help to install Toolkit CreateJS for Flash CS6.

    Hi,
    I need help in installing CreateJS for Flash CS6. I had downloaded the Toolkit CreateJS from here: http://www.adobe.com/go/downloadcreatejs and here: http://www.adobe.com/devnet/createjs/articles/using-flash-pro-toolkit- createjs.html. When I attempted to install the extension using Adobe Extension Manager, the installation files did not have the required .zxp or .mxp files. It only had a file with a .mxi extension. Please advise. Thanks.

    Why installing IIS o_O?
    For Installing a developer Machine just install Oracle Developer suite; for testing your forms you use OC4J ("start OC4J instance" in start menu), and you can run your forms in web; no need for a aditional webserver (don't believe there's an OC4J connector for IIS available; and if so I wouldn't use it either ;-))
    For Installing a server for "productional" use install Oracle Application Server (available on otn) which comes with an Apache as webserver and all the other needful things for runnung forms on the web.
    For configuring both of them just take a look at the documentations on http://otn.oracle.com
    regards
    christian

  • Can I use more than one html5/js animation produced with Flash/createjs in a website?

    Hi, I am producing some animations with Flash that will be delivered in html5/js trough createjs. The trouble is that, after including the first animation in my html website, the rest of the animations are overwriting with the first one, therefore, if I attemp to insert a second animation in my website, it will actually replace the first animation I already had placed...
    I have already tried the following:
    - change the default canvasID for another one
    - change the resources and Javascript name spaces in Createjs export settings 
    - change manually the name of the functions (lib, img, cjs) in the Javacript file
    None of these seem to fix the problem. So, I am now wondering if is actually possible to insert more than one animation in a website....
    I would really appreciate a quick answer, as I am working on a project with a very tight timing, and really need to sort this out a.s.a.p.
    Thank you very much in advance for the help.

    then you made some mistake.
    start with two different flas.  one with a red rectangle on stage and the other with a blue rectangle on stage and nothing else.  publish your html and js files.
    combine the two into one and, if you have a problem, post the code from  your one html file and your two js files.

  • Is there a way to use multiple canvas tags with the ToolKit for CreateJS for Flash in one HTML5 doc?

    Hey everyone, I was wondering if someone could help point me in the right direction for solving this. I have created 5 short animations using Flash and when I published each ".fla " (with Toolkit for CreateJS extension) I get 5 different html5 files with their own respective javascripts. Is there a way to get all those canvas tags in one html5 file and still have it work. I'd love a hint on where to begin so I can begin researching the solution.
    Thanks!
    -DJ

    Why do you think that one will be over written?
    You can sync as many ipods/iphones/ipads as you like to one computer.  Each is different and will only sync what you select.

  • MouseEvent.MOUSE_WHEEL gets incorrect stageX and stageY in Flash Player 17.0.0.134 and Windows 8.1

    I developed a Flash Player swf application with Flash Builder 4.7 (64-bit) before and it has worked well before Flash Player version <= 16. Recently, I updated to Windows 8.1 with Internet Explorer 11 and Flash Player 17.0.0.134.
    It is strange that stageX and stageY in MouseEvent.MOUSE_WHEEL gets the position of the whole web page other than that of swf stage, But it works well in Windows 7 with FP 17.
    Another problem is BitmapData.setVector() doesn't work normally when the DPI of screen is set to 125%, even in Windows 7 with FP 17, but it works in FP16 before.
    By the way, it is interesting that all the above works well in Firefox with FP 17 even in Windows 8.1.
    Does anyone encounter this problem? Is there some workarounds on that?

    Internet Explorer has a unique Flash Player release from Firefox, so it is probably a new bug unique to that IE release. Have you tried this on more than 1 machine? If so, I would say report a bug about it.
    https://bugbase.adobe.com

  • MovieClip Filter Causing issues with EventListeners (mouseEvent.ROLL_OVER)

    Hello,
    I have been working on a flash photo gallery for the web. It loads thumbnails from an xml file into a loader which is then made the child of a movieclip.
    The thumbnails are animated and triggered with mouse events of ROLL_OVER and ROLL_OFF. I have this working, or appearing to, when the movieclip containing the loaded thumbnail has no filters applied to it.
    I want add a drop shadow on the ROLL_OVER event and remove the drop shadow on the ROLL_OFF event. I also have this working, however my problem arises when I mouse over the very edge of the movieclip. This cauese the ROLL_OVER and ROLL_OFF function to fire in rapid succession, creating a flashing dropshadow. This looks aweful and I really have no idea what would be causing this issue.
    Thanks in advance for any advice!
    Regards.

    Thanks for the reply.
    I also found it difficult to believe that the filter was causing issues with the roll over/out events. I will expand on the example code you provided so you get an idea of what I am trying to accomplish and where my issues arise.
    EDIT: I should add that the issue is only present when I tween AND add a filter. If I only add a filter or if I only tween I have no issues but the combination or adding a filter and tweening causes the OVER/OUT events to fire rapidly.
    //This code does not result in a flashing animation
    myClip.addEventListener(MouseEvent.ROLL_OVER, overClip);
    myClip.addEventListener(MouseEvent.ROLL_OUT, outClip);
    function overClip(e:MouseEvent):void
       myTween =  new Tween(myClip, "scaleX", Regular.easeOut, myClip.scaleX, 1.5 , 3, true);
       myTween =  new Tween(myClip, "scaleY", Regular.easeOut, myClip.scaleY, 1.5 , 3, true);
    function outClip(e:MouseEvent):void
       myTween =  new Tween(myClip, "scaleX", Regular.easeOut, myClip.scaleX, 1 , 3, true);
       myTween =  new Tween(myClip, "scaleY", Regular.easeOut, myClip.scaleY, 1 , 3, true);
    //However if i add these lines of code to add and remove a filter I can observe the flashing effect when the mouse is near the edge of the moveclip
    myClip.addEventListener(MouseEvent.ROLL_OVER, overClip);
    myClip.addEventListener(MouseEvent.ROLL_OUT, outClip);
    function overClip(e:MouseEvent):void
       myClip.filters = [myDropShadowFilter];
       myTween =  new Tween(myClip, "scaleX", Regular.easeOut, myClip.scaleX, 1.5 , 3, true);
       myTween =  new Tween(myClip, "scaleY", Regular.easeOut, myClip.scaleY, 1.5 , 3, true);
    function outClip(e:MouseEvent):void
       myClip.filters = [];
       myTween =  new Tween(myClip, "scaleX", Regular.easeOut, myClip.scaleX, 1 , 3, true);
       myTween =  new Tween(myClip, "scaleY", Regular.easeOut, myClip.scaleY, 1 , 3, true);
    Is there something obviously wrong with this approach to adding a filter/tweening? I am fairly new to flash.
    Thanks again!
    Message was edited by: Dafunkz

  • "Toolkit for CreateJS" Missing from Flash CC Menu

    I'm a Creative Cloud user running the latest version of Flash Professional CC on my 27" iMac running OSX Mavericks. I want to export an animation file using CreateJS. However, the "Toolkit for CreateJS" option is missing from my "Window" drop down menu - it's not even grayed out, it's just not there. Using the alternate of Shift+F9 doesn't work either. I tried downloading the CreateJS extension from Adobe but is says I need to be running CS6 for it to work, and that "Toolkit for CreateJS" is supposed to come pre-installed in Flash CS Pro. But it's not there. This is very frustrating, and I'd be deeply grateful for any help someone could give me. Thanks!

    HTML5 publishing with the new update is now more inetgarted with the application and we now have a new document type called "HTML Canvas" which publishes using the same CreateJS libraries.
    The Toolkit for CreateJS panel is no longer present with the new update, but the HTML5 publishing using the toolkit is now intgerated as part of the HTML canvas document type that you will see new in this update.
    Please refer to:
    http://helpx.adobe.com/flash/using/whats-new.html#Creating%20and%20pub lishing%20HTML5%20Canvas%20content
    Also you can convert your previously created AS3 document that publish to HTML5 into HTML5 Canvas documents. This is also mentioned in the documentation below:
    http://helpx.adobe.com/flash/using/creating-publishing-html5-canvas-do cument.html
    -Sujai

  • Once I create a html5 animation using the 'Toolkit for CreateJS' in flash, how do I then insert it..

    Once I create a html5 animation using the 'Toolkit for CreateJS' in flash, how do I then insert it into a webpage via Dreamweaver:
    This has been sending me round in circles for over a week - can anyone let me know how I do this or can they point me in the direction of a tutorial?  Thank you in advance - d;-)

    There are some tutorials on Adobe site:
    <http://www.adobe.com/devnet/createjs/articles/getting-started.html>
    <http://tv.adobe.com/watch/adc-presents/toolkit-for-createjs-part-1-designing-game-assets/>
    <http://tv.adobe.com/watch/adc-presents/toolkit-for-createjs-part-2-adding-game-interactivi ty/>
    The parts 1 and 2 are videos about 10 minutes each while the first link is a detailed article that you can print and practice on your machine.
    Hope this helps.

  • Can the name of a specific node in a JTree be returned by MouseEvent?

    I have created a mouseListener for a JTree. When a node in the JTree is clicked it should display the name of the node in a JOptionPane. Currently, I have the following:
    tree.addMouseListener(new MouseAdapter()
    public void mouseClicked(MouseEvent me)
         if(me.getClickCount() % 2 == 0)
         String s = "Blank";
         s = (me.getSource()).toString();
         JOptionPane.showMessageDialog(null, "Double clicked "+ s, "two", JOptionPane.PLAIN_MESSAGE);               
    }//mouseClicked          
    });//MouseListener
    This gives me the class X Y value, border, maxsize, etc.... when a node is double clicked.
    Does anyone know of a better way?

    Don't use MouseListener.
    Instead, make yourself a TreeSelectionListener as follows:
    public class WhererverYourTreeIs implements TreeSelectionListener
         public void valueChanged(TreeSelectionEvent e)
             TreePath path = e.getPath();
             System.out.println(path.getLastPathComponent());
         public void initStuff()
                 tree.addTreeSelectionLIstener(this);
    }

  • Dont detect MouseEvent as2 to as3.

    Hello. I transform a as2 game to as3. transform all the code and the game start but dont detect any MouseEvent associated to a MovieClip. In stage yes but not in any MovieClip. This is one example of my code...
    Code: 
    wheelmain.wheel.addEventListener(MouseEvent.MOUSE_DOWN, onWheelDown);
    wheelmain.wheel.addEventListener(MouseEvent.MOUSE_UP, onWheelUp);
    wheelmain.wheel.addEventListener(MouseEvent.ROLL_OUT, onWheelRollOut);
    wheelmain.wheel.addEventListener(MouseEvent.CLICK, onWheelReleaseOutside);
    function onWheelDown(e:MouseEvent)
         trace("Boton del raton pulsado.");
         //sndPotencia.start();
         potenciaRuletaOn();
    wheelmain.wheel exists and is a MovieClip. The movie dont show nothing to console.
    Anybody help me?.
    thanks!.

    Sorry for my bad english.
    Well, if i change one of the lines and type this:
    wheelmain.wheel.addEventListener(Event.ENTER_FRAME, onWheelDown);
    when the output console write:
    Boton del raton pulsado.
    Boton del raton pulsado.
    Boton del raton pulsado.
    Boton del raton pulsado.
    That means that the object is displayed and accessible, but for some strange reason it seems that no stage Movieclip dispatches any mouse event.

  • Problem with MouseEvent

    this.addMouseListener(new MouseAdapter(){
               private void showIfPopupTrigger(MouseEvent mouseEvent) {
                    try {
                        l.write("22222222222");
                   } catch (IOException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                       if (popupMenu.isPopupTrigger(mouseEvent))
                            try {
                                  l.write("3333333");
                             } catch (IOException e) {
                                  // TODO Auto-generated catch block
                                  e.printStackTrace();
                             String name = getValueAt(getSelectedRow(), 1).toString();
                             if(getValueAt(getSelectedRow(), 2).toString().equals("FOLDER"))
                             popupMenu.init(false,name);
                             else
                                  popupMenu.init(true,name);     
                             popupMenu.show(mouseEvent.getComponent(), mouseEvent.getX(), mouseEvent.getY());
                     public void mousePressed(MouseEvent mouseEvent) {
                          try {
                                  l.write("000000000000000000000");
                             } catch (IOException e) {
                                  // TODO Auto-generated catch block
                                  e.printStackTrace();
                             if (mouseEvent.getButton() == MouseEvent.BUTTON3) // BUTTON3 is the right mouse button
                                  try {
                                       l.write("11111111111111111111");
                                  } catch (IOException e) {
                                       // TODO Auto-generated catch block
                                       e.printStackTrace();
                                  showIfPopupTrigger(mouseEvent);
                     public void mouseReleased(MouseEvent mouseEvent) {
                             showIfPopupTrigger(mouseEvent);
              });In the above given code, when I right click the mouse button, control reaches till l.write("22222222222");, but, it is not getting inside if (popupMenu.isPopupTrigger(mouseEvent)) , instead of that, control again goes to public void mousePressed(MouseEvent mouseEvent), what can be the reason?
    Rony

    I got the output with this.
    if (popupMenu.isPopupTrigger(mouseEvent))
                            int indRow = rowAtPoint(mouseEvent.getPoint());
                             getSelectionModel().addSelectionInterval(indRow, indRow);

  • MouseEvent not firing on DisplayObject click in AS only project in Flash Builder 4

    Hello,
    I'm having difficulty getting MouseEvents to fire in an ActionScript only project. It doesn't make any sense to me. My code is below and this object is the top most object on the stage.
    var click:Sprite = new Sprite();
    click.name = 'clickLayer';
    click.mouseEnabled = true;
    click.addEventListener(MouseEvent.CLICK, mouseClickHandler);
    addChild(click);
    function mouseClickHandler(e:MouseEvent):void{
    trace('click');
    var url:String = loaderInfo.parameters.clickTag;
    navigateToURL(new URLRequest(url), '_blank');
    My class extends Sprite.
    Everything else works fine. Something I found strange is that TextFields will fire MouseEvents when clicked if I add the EventListener, but not DisplayObjects.
    Thanks for your help.

    I just made the width & height the width & height of the container (Sprite), but still nothing.
    I also tried adding a "container" sprite to the main stage, and adding everything to that sprite - but that sprite won't instantiate and doesn't show on the stage, meaning anything added to that sprite doesn't show either.\
    Also: I've tried adding MouseEvent listeners to every display object I add to the stage and nothing will fire MouseEvents except TextFields.

  • AdvancedDatagird to ignore MouseEvent.MOUSE_WHEEL events

    Hi,
    Is there a way to get a  AdvancedDatagird to ignore MouseEvent.MOUSE_WHEEL events?

    Both these don't work sorry
    <mx:mouseWheel>
                             <![CDATA[
                              public function ignoreMouse(event:MouseEvent):void {
                              event.stopPropogation();
                              event.preventDefault();
                             ]]>
                         </mx:mouseWheel>
         <mx:mouseWheel>
                             <![CDATA[
                             function ignoreMouse(event:MouseEvent):void {
                              event.stopPropogation();
                              event.preventDefault();
                             ]]>
                         </mx:mouseWheel>

  • How do I add a mouseEvent to an area

    does anyone know how i add a mouseEvent to an area?
    i want to test the response of the user to hit a Graphic on the screen
    but i dont know how to make the Graphic so that it can be hit.
    Simple enough problem just im a bit dim. lol
    THanks for any help that would be offered,
    Brain

    You could add a mouse listener to the whole panel (or whatever container you're using) and then test each mouse click to see if it's within the area you're looking for.
    The getPoint() method of MouseEvent will tell you where the event occurred. If the graphic is rectangular, you can use the contains(Point p) method to see if the event occurred inside that region.

Maybe you are looking for