4 Replies Latest reply on Sep 3, 2014 3:37 AM by joel_pau

    Failed in shifting rect shape on event 'creationComplete', but succeed on event 'compositionReady', why?

    watergl

      Hi, i got a problem while i want to shift rect shape in proper position at first beginning, but i can't make it:

       

      a.png

       

            Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

               // insert code to be run when the composition is fully loaded here

              sym.getComposition().getStage().$("small_scene_rect").css({"position":"absolute","display ":"block","left":"10px","top":"10px","width":"100px","height":"100px"}); // worked

            });

            //Edge binding end

       

            Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

               // insert code to be run when the symbol is created here

              sym.getComposition().getStage().$("small_scene_rect").css({"position":"absolute","display ":"block","left":"10px","top":"10px","width":"100px","height":"100px"}); // not worked

            });

            //Edge binding end

       

      I really need your help, thanks!

        • 1. Re: Failed in shifting rect shape on event 'creationComplete', but succeed on event 'compositionReady', why?
          joel_pau Level 5

          Hi,

           

          .getComposition().getStage() is not required.

          You can use:

          sym.$("small_scene_rect").css({"position":"absolute","display ":"block","left":"10px","top":"10px","width":"100px","height":"100px"});

          It runs on compositionReady and creationComplete. I checked.

          What's your browser?

          1 person found this helpful
          • 2. Re: Failed in shifting rect shape on event 'creationComplete', but succeed on event 'compositionReady', why?
            watergl Level 1

            Thank you, getComposition().getStage() is really not required, but it is still not worked, my browser's chrome, here followed my symbols structure:

             

            var symbols = {

            "stage": {

                version: "4.0.1",

                minimumCompatibleVersion: "4.0.1",

                build: "4.0.1.365",

                baseState: "Base State",

                scaleToFit: "none",

                centerStage: "none",

                initialState: "Base State",

                gpuAccelerate: false,

                resizeInstances: false,

                content: {

                        dom: [

                        {

                            id: 'scene',

                            type: 'rect',

                            rect: ['0%', '0%','auto','auto','auto', 'auto']

                        },

                        {

                            id: 'small_scene_rect',

                            type: 'rect',

                            rect: ['10%', '10%','100%','100%','auto', 'auto'],

                            borderRadius: ["10px", "10px", "10px", "10px"],

                            fill: ["rgba(192,192,192,1)"],

                            stroke: [0,"rgba(0,0,0,1)","none"],

                            c: [

                            {

                                id: 'small_scene_img',

                                type: 'image',

                                rect: ['0%', '0%','100%','100%','auto', 'auto'],

                                overflow: 'visible',

                                fill: ["rgba(0,0,0,0)",im+"change.jpg",'0px','0px']

                            }]

                        }],

                        symbolInstances: [

                        {

                            id: 'scene',

                            symbolName: 'scene',

                            autoPlay: {

             

             

                            }

                        }

                        ]

                    },

                states: {

                    "Base State": {

                        "${_Stage}": [

                            ["color", "background-color", 'rgba(255,255,255,1)'],

                            ["style", "overflow", 'hidden'],

                            ["style", "height", '100%'],

                            ["style", "width", '100%']

                        ],

                        "${_small_scene_img}": [

                            ["style", "top", '0%'],

                            ["style", "overflow", 'visible'],

                            ["style", "bottom", 'auto'],

                            ["style", "height", '100%'],

                            ["style", "right", 'auto'],

                            ["style", "left", '0%'],

                            ["style", "width", '100%']

                        ],

                        "${_small_scene_rect}": [

                            ["style", "top", '10%'],

                            ["style", "overflow", 'hidden'],

                            ["style", "height", '100%'],

                            ["style", "clip", 0, {valueTemplate:'auto'} ],

                            ["style", "left", '10%'],

                            ["style", "width", '100%']

                        ]

                    }

                },

                timelines: {

                    "Default Timeline": {

                        fromState: "Base State",

                        toState: "",

                        duration: 0,

                        autoPlay: true,

                        timeline: [

                        ]

                    }

                }

            },

            "scene": {

                version: "4.0.1",

                minimumCompatibleVersion: "4.0.1",

                build: "4.0.1.365",

                baseState: "Base State",

                scaleToFit: "none",

                centerStage: "none",

                initialState: "Base State",

                gpuAccelerate: false,

                resizeInstances: false,

                content: {

                        dom: [

                            {

                                id: 'scene_img',

                                type: 'image',

                                rect: ['0px', '0px', '100%', '100%', 'auto', 'auto'],

                                fill: ['rgba(0,0,0,0)', 'images/victory.jpg', '0px', '0px']

                            }

                        ],

                        symbolInstances: [

                        ]

                    },

                states: {

                    "Base State": {

                        "${_scene_img}": [

                            ["style", "top", '0px'],

                            ["style", "height", '100%'],

                            ["style", "left", '0px'],

                            ["style", "width", '100%']

                        ],

                        "${symbolSelector}": [

                            ["style", "height", '100%'],

                            ["style", "width", '100%']

                        ]

                    }

                },

                timelines: {

                    "Default Timeline": {

                        fromState: "Base State",

                        toState: "",

                        duration: 0,

                        autoPlay: true,

                        timeline: [

                        ]

                    }

                }

            }

            };

            • 3. Re: Failed in shifting rect shape on event 'creationComplete', but succeed on event 'compositionReady', why?
              watergl Level 1

              Let me give more detail of the running situation:

               

                    Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

                       // insert code to be run when the composition is fully loaded here

                      sym.$("small_scene_rect").css({"position":"absolute","display":"block","left":"10px","top ":"10px","width":"100px","height":"100px"}); // worked

                    });

                    //Edge binding end

               

                    Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) {

                       // insert code to be run when the symbol is created here

                      sym.$("small_scene_rect").css({"position":"absolute","display":"block","left":"10px","top ":"10px","width":"100px","height":"100px"}); // not worked

                    });

                    //Edge binding end

               

              Actually, 'small_scene_rect' original position was (160px, 33px, auto, auto), after being shifted to (10px, 10px, 100px, 100px) on event 'creationComplete', 'small_scene_rect' position was really changed to (10px, 10px, 100px, 100px), but after several steps till event 'compositionReady' happened, small_scene_rect position was back to original position (160px, 33px, auto, auto),what's the problem?

               

              Thank you!

              • 4. Re: Failed in shifting rect shape on event 'creationComplete', but succeed on event 'compositionReady', why?
                joel_pau Level 5

                Your troubles come from your browser: Chrome. Your code is correct.

                You have to clean Chrome cache.

                chromeClearData.jpg

                Each time you test, you have to clean Chrome Cache then close and reopen this browser.

                As i wrote above (post #1), your code is correct and runs fine using other browsers or Chrome after cleaning. I checked.

                1 person found this helpful