5 Replies Latest reply on Feb 24, 2017 2:37 PM by ClayUUID

    Animate CC/Createjs properties of instances/movieclips/bitmaps are null

    patrickz95336299

      Hey!

      I was wondering how i can set/get the properties (especially the name-property) of my elements on my stage. Everytime i get a null on my properties. I have a mouseover and want to get the name via stage.getObjectsUnderPoint(stage.mouseX,stage.mouseY).  And there i get a null / undefined / whatever...

       

      I already tried exportRoot.myMovieClip.name, event.target.name or stage.getChildByName.... Now i am running out of ideas, why i still can't set/get the properties.

       

      To clarify:

      I have a Movieclip(called: mc_myMovieClip) and the instance is called ins_myInstance, already placed on the stage. Inside of the MovieClip i have a Bitmap with the instance of ins_myInstance. Altough i set every name in Animate CC, after exporting its not directly accessable. The images are exported in their own files. No Spritesheet. When i try it with stage.getObjectsUnderPoint(stage.mouseX,stage.mouseY) my console says:

      Bildschirmfoto 2016-02-23 um 12.06.17.png

      My final goal is to have 2 Objects, where i check if the names match or not. If it's not possible that way i have to do it with hitareas... Something like that: Drag Connections - JSFiddle

       

      There is another topic from 2013 Toolkit for CreateJS after export instance names are not available in .name property of objects but that was not a fix for me, or i just dont see it right now

      I hope it's kinda understandable. Please ask! I hope there is a way, or maybe thats a limitation of createjs?

       

      Thank you in advice

        • 1. Re: Animate CC/Createjs properties of instances/movieclips/bitmaps are null
          patrickz95336299 Level 1

          Yippi! I found the answer myself.

          For anyone that has the same troubles:

          You have to edit your Javascript File exported from Flash/Animate CC. Search the function you want the name from and add a line this.instance.name = "Whateveryouwant"; right after this.instance = new lib.myWhatever();

           

          Then go to your timeline functions and add:

           

          var ary = (stage.getObjectsUnderPoint(stage.mouseX,stage.mouseY));

              var i = ary.length;

              if(i == 2){

                    console.log(ary[0].name,ary[1].name);

              }else{

                    console.log(ary[i-1].name);

              }

           

          It's so simple You just have to take the Array with the Objects and look into them. You can also view it with event.target.name.

          That's pretty awesome. Cool stuff you can do with it ^^

          • 2. Re: Animate CC/Createjs properties of instances/movieclips/bitmaps are null
            ClayUUID Adobe Community Professional

            What? It's true that the .name property for movieclips defaults to null, but that has no impact on being able to address named objects. If you have a clip on the stage that you've named "bob", then something like console.log(this.bob.x); works just fine.

             

            If for some reason you need to retrieve what an object is named at runtime, then name all your objects first: this.bob.name = "bob"; works perfectly well. Modifying the published JavaScript is a terrible solution, because then you have to manually update it every single time something changes.

             

            Now, if you don't know ahead of time which objects will need to be named, it's possible to do so automatically, thanks to how CreateJS sets up its data structures:

             

            First, every clip (including the root timeline level) has a raw list of properties/members that you can iterate over with a for...in loop. This gets you the key names, but it also gets you everything in the clip. Dozens of irrelevant properties. Even if you filter them by type -- movieclips are internally represented as instances of a CreateJS container object -- not every container object is guaranteed to be an actual child of the clip.

             

            Second, there's a .children array for each movieclip that does store a list of all the clip's children, but it stores them all by reference. No names.

             

            So to populate the names for all a clip's children, we scan the clip's raw properties, then for each one found that's a container object, scan the children array to see if it's in that list too. If it is, assign the key value as the clip's name. Like so:

             

            var i, key;
            var clip = this; // movieclip content to be processed
            var clipch = clip.children; // movieclip's children
            // iterate over every property name in the clip
            for (key in clip) {
                // is this a CreateJS container object?
                if (clip[key] instanceof createjs.Container) {
                    // scan the clip's list of children
                    for (i = 0; i < clipch.length; i++) {
                        // are they both pointing to the same object?
                        if (clip[key] === clipch[i]) {
                            // assign key value to "name" property
                            clip[key].name = key;
                            break;
                        }
                    }
                }
            }
            

             

            Voila.

            • 3. Re: Animate CC/Createjs properties of instances/movieclips/bitmaps are null
              patrickz95336299 Level 1

              Hey! Thanks for your reply!

              First of all, you're solution is really cool and works well. I have to say, this is what i originally wanted to do. But i didn't know how to iterate through each element at runtime. Thats why i came up with the editing of the Javascript. It's a little bit inconvenient, i know, but it works too. Maybe it's not so safe with "overwriting the after-export-javascript"-thing, but for me that was not the case. (And i learned a lot about the mechanics behind it )

               

              The funny thing is, i tried it with this.bob.name = "bob"....also with assigning a new variable before setting the name. It didn't work the way i wanted. I still got the null in return with the ObjectsUnderPoint Function.

              With your iteration now, it shows me the names of my movieclips without setting it in the script. That confuses me...but nevermind. I can't reproduce my earlier versions to check if it was like that ^^

              The var clip = this and var clipch = clip.children is what helped me understand it even more!

               

              I think, your solution is something for more complex projects with more objects@runtime- not the smaller, hardcoded projects like mine.

              Thanks for the information about the data structures in Createjs. The official Createjs-Site lacks such "beginner"-explanations....

               

              Cheers.

              • 4. Re: Animate CC/Createjs properties of instances/movieclips/bitmaps are null
                clipster

                 

                I was able to assign the name property by using 'this.instanceName.name' method for 2 objects on the stage. One called trigBlue and the other trigGreen.

                I then used 'e.currentTarget.name' to retrieve the name property to use in one MouseClickHandler function, and used a switch statement to act on the corresponding play() method with the ability to perform multiple actions. I had about 6 more objects to assign actions to and this saved me from having to make 8 functions.

                 

                *********** CODE ******************

                 

                this.trigBlue.name = "blue";

                 

                this.trigGreen.name = "green";

                 

                  

                 

                console.log("Blue Trigger name: "+this.trigBlue.name); // check if name property was assigned

                 

                console.log("Green Trigger name: "+this.trigGreen.name);  // check if name property was assigned

                 

                  

                 

                this.trigGreen.addEventListener("click", fl_MouseClickHandler.bind(this));

                 

                this.trigBlue.addEventListener("click", fl_MouseClickHandler.bind(this));

                 

                  

                 

                function fl_MouseClickHandler(e)

                 

                {

                 

                console.log("Mouse clicked object name: "+e.currentTarget.name);

                 

                seg = e.currentTarget.name;

                 

                switch( seg ) {

                 

                case "blue":

                 

                this.blueSeg.play();

                 

                break;

                 

                case "green":

                 

                this.greenSeg.play();

                 

                break;

                 

                default:

                 

                  break;

                 

                  }

                 

                 

                 

                }

                • 5. Re: Animate CC/Createjs properties of instances/movieclips/bitmaps are null
                  ClayUUID Adobe Community Professional

                  The code in this thread is obsolete. If you need to retrieve names of arbitrary objects at runtime you should be using the solution in this thread instead:

                  Re: HTML Canvas instance names - Good tricks to getting them?

                  1 person found this helpful