How to reference image translate3D values?

[pfenerty]

Hello,

I am slowly finding my way around the Animator.

I can replace an image in a running animation via javascript, and position the new image where the original image was located with this:

target_node.style.webkitTransform = "translate3d(335px,54px,0px)";

But I got those magic numbers from the IDE. Next i would like to get them via javascript.

The original image has an ID. Inspecting the DOM for the exported animation, I see that the ID identifies a DIV (DIV1). DIV1 has a child DIV (DIV2). DIV2 has a child IMG … the target for image replacement.

But inspecting ‘style’ for those three (DIV1, DIV2, IMG) provides no translate3d values. I don’t see them either with Firebug or javascript (target_node.style.webkitTransform).

How do I reference an image translate3d location via javascript? Where are the translate3d values in the DOM?

Note that the image to be replaced does not move around in the animation … it’s position remains constant throughout.

FWIW, here is the dot-anim:

{"name":"New Image","type":"image","value":"","uid":"NfjYeEgC","properties":{"object-image":{"enabled":true,"src":"asset://sym14.jpg","inline":0,"width":107,"height":109},"width":{"enabled":true,"value":107},"height":{"enabled":true,"value":109},"translate3d":{"enabled":true,"x":335,"y":54,"z":0},"anchor":{"enabled":true,"value":"tl"},"object-name":{"enabled":true,"value":"plum"},"object-text":{"enabled":true,"value":""},"object-cssid":{"value":"sym-plum","enabled":true},

... and the dot-html:

#PFX-sym-plum{-moz-transform:translate(335px, 54px);transform:translate3d(335px, 54px, 0px);-webkit-transform:translate3d(335px, 54px, 0px);width:107px;height:109px;top:0;left:0;}

Thanks!
~Paul

[miro.bojic]

Hi pfenerty,

Just to summarize (and correct me if I got this wrong), you want to query the webkitTransform css property of a static object in your project.

First, you should use controller to access all the objects that you place on your canvas. In order to make your life easier, you should give an ID to the object you want to access under Base Object->General->ID. For this example let's call the object 'myObject'. Next, you can retrieve the reference to the object by script using

var myObjectElement = controller.getElementById('myObject');

After this you can access the style properties, for example

//output to console current webkitTransform property
console.log(myObjectElement.style.webkitTransform);

Further, if you want to manually switch the image during the animation, I would advise you to use a simple element (square tool) and set the background-image property. To do this with JS you can execute:

myObjectElement.style.backgroundImage = 'url(path_to_my_image)';

Finally, take into account when are you trying to check the property - is it set at the moment that you are trying to access it? As a rule of thumb, you should run most of the scripts in Animator on Timeline->Actions->Start, as at this moment all the objects at the stage are loaded and ready to be manipulated. Anywhere before this moment, the stage is not fully loaded yet, so if you're trying to access an object on Init, it might not exist yet.

Hope it helps.

[pfenerty]

Thank you very much for all of that.

I have been having a great time with the Animator, and hope someday to know what i'm doing in there.

My current theory about the not-found translate3D values is that even though the block (in the dot-anim) that begins

{"name":"New Image",

... contains this key-value pair

"translate3d":{"enabled":true,"x":45,"y":227,"z":0},

... that is not to say that those values will appear in the DOM. Like they say ... "it's a process, not a product".

That is admittedly not much of an explanation, more like a re-wording of my original question into a statement.

Is there a summary somewhere of the Animator "Theory of Operation"? I'd love to read it.

Regarding the recommendation to use a background-image instead of IMG, something i would not have considered, I just now researched a few Stack Overflow threads that address this in order to better understand the issue.

It seems that the general consensus goes something like "unless there is a functional concern that supports using one or the other, go with the choice that is the most semantic".

Among the functional concerns were:

Use background-image if you need to improve download times, as with CSS sprites.

Using img instead of background-image can dramatically improve performance of animations over a background.

And then these two:

There are also some usage considerations - for example, you can scale IMG elements easily by setting them at a percentage width of their parent container element, which is important in responsive design.

If you have a responsive design and want to split usage of low, medium, and high-res images for devices through media queries, you should use backgrounds as well.

Responsive design is very important for the project. So is small footprint, short load time. Now that i've looked into this, i'm not sure i'm convinced one way or the other, and would appreciate hearing your thoughts about this.

Thanks again,
~Paul

[miro.bojic]

The .anim files are Animator project files, and are intended to be read only by the software - they were not designed to be human readable. These files are not deployed when you export your final animation. The export is an html file, that contains the objects, scenes, timelines, CSS3 keyframes and necessary JS to link this into a coherent whole. That is, a property with one name in .anim might be exported to multiple properties into html for browser compatibility.

As such, DOM objects don't have a translate3d property. Translate3d is not a css property. You will need to retrieve the string in css transform (or webkitTransform) property and then parse the string to get the translate3d parameters.

On how to use JS inside Animator to access and manipulate objects, please take a look at the documentation and API: http://docs.sencha.com/animator/1.5/#!/api

Regarding 'theory of operation' - all animations created with Animator are CSS3 keyframe based. The animations are not JS, and JS is only used to tie timelines, scene transitions and triggers. Other than this, all the properties that you are setting inside Animator are CSS properties, and all the transforms and changes that are set for keyframes, are CSS keyframe properties. The transformations between the keyframes are calculated by the browser when running the animation, as by W3C specifications: http://www.w3.org/TR/css3-animations

Other questions:

- replacing img src instead of background image src performance: I was under impression that you were asking about a static object that does not have any keyframe animation applied to it. As such, using a spritesheet and changing the background position is a quicker and easier method, that will have higher performance than changing the img src.

- setting img elements as percentage of the container - this is valid for all DOM elements. Difference is that img will stretch the image, while an image set as background-image will maintain the aspect ratio and will be clipped instead.

Regarding responsive design, consider that it is not just a question of stretching or contracting the interface, but using the available space in a smart way. To help you with responsive design, you can use flexible layout inside Animator to better match the available screen space. Please take a look at this thread for more info: http://www.sencha.com/forum/showthread.php?267558

[pfenerty]

> I was under the impression that you were asking about a static object that does not have any keyframe animation applied to it.

That was true of my simple image-swap test. Ultimately the image-to-be-replaced will translate a little, but always return to a starting point. Some time later that stops, and javascript swaps in a new IMG -- at the starting point. So it does work to use the x & y IMG position values from the IDE, hokey though that may be, because they persist throughout.

> Translate3d is not a css property. You will need to retrieve the string in css transform (or webkitTransform) property and then parse the string to get the translate3d parameters.

Yes, i was prepared to extract the IMG x & y position from translate3d values in the DOM because it works when i put them there.

If i replace the image like this:

var target_div = controller.getElementById('id');

// traverse to IMG node

// parentNode.removeChild(found_img);

// parentNode.appendChild(new_img);

target_node.style.webkitTransform = "translate3d(335px,54px,0px)";

… then the new image is positioned correctly. If I skip that last line, the image is positioned at browser top left.

And given translate3d() positioning, you can find it in the DOM:

outerHTML

"<img id="sym-catfish" src="assets/slot_sym15.jpg" alt="catfish" style="-webkit-transform: translate3d(335px, 54px, 0px);">"

style. cssText

"-webkit-transform: translate3d(335px, 54px, 0px);"

style.webkitTransform

"translate3d(335px, 54px, 0px)"

I thought you guys were doing much the same, in which case the translate3d values ought to be in there somewhere.

Thanks again for all your help and insight. The flexible layout information looks to be particularly valuable, although I’m not quite there yet. In fact my little image swap test was done on Animator 1.3.

But I’m looking forward to the adventure.
~Paul

[pfenerty]

Please note that i do not plan to use IDE x & y IMG position values for production code. I'm told that

element.getBoundingClientRect()

... is the standard approach for this if they cannot be found wired-in somewhere. That's next.

[pfenerty]

just in case anyone was interested in this besides moi, remember that the ID assigned to an image object in the IDE points at a <div>. The image itself is contained within another <div>, inside that one.

so if you replace the top-level div, the one with the ID, then you must position it yourself.

but if you replace the image itself, two <div>s deep, it knows where to go.

fun!