Elastic trickery



  • Re: [Move elements using simple math](/topic/477/move-elements-using-simple-math]

    Wow -- 77 views and not one single comment...OK, is there any way a movement like "elastic" in the Anime Studio/Moho timeline can be approximated in Motion Artist? Any way to write code that can be plugged into the program? Anybody have any ideas? Anybody from Smith Micro ever read this stuff?

    I can reproduce the movement I want in Anime Studio and import it into Motion Artist as an example, but if I had to do a whole project like that I think I'd kill myself.



  • Possibly because it seemed like a feature request, not a question (" ... it would be useful to ..."), and didn't look like it needed a response?
    Of course, this also seems a much lower traffic forum at this stage than the Lost Marble forum.

    Just as you still have to in other software and had to in versions of Anime Studio/Moho prior to 10.0 (I think that was when the Elastic interpolation was added, less than 2 years ago?), you could also use several keyframes stop points to create such an effect within Motion Artist itself (each and every time you wanted to use the effect, and with not even a motion graph to make it easier, alas).

    (Anime Studio/Moho spoils us by removing much of the tedium of animation - who was the classic animator who said something like "animation is hard work"?).

    I can't think of any other solution you can use now within Motion Artist (animation features significantly limited compared to Anime Studio/Moho), until a future version possibly introduces an Elastic interpolation - of course, I may have missed a feature somewhere, or am blindly missing a more creative solution.

    Good luck!



  • @obtusity - Thanks for the response. I have read the Motion Artist manual until my eyes bleed, and I couldn't find anything I could use. I've since found an "animation platform" http://greensock.com/gsap, but it means coding, and although I have earned a living as a programmer, I really didn't want to do that 'cos I don't enjoy it much. Oh well; looks like I'll have to put Motion Artist back on the shelf (for this project at least).



  • Yes, Motion Artist seems clearly defined as a simpler motion graphics program, which it does well, rather than a more fully featured animation program.

    More of a Debut version, in Moho (Anime Studio) terms. I'd love to see a Pro version.

    GSAP or some of the game programming systems do seem a better fit of you need the maths and more control, and you still need HTML5 output rather than a movie file output.
    Construct2 has had a few favourable mentions in the Lost Marble forum: https://www.scirra.com/construct2



  • @obtusity Thanks for the Construct2 link -- I'll check it out.



  • Construct2 is shareware with a price of $US 139.99. That's a bit steep Of course Anime Studio (soon to be Moho gain) is $US 299 without upgrading from an earlier, so maybe it's not so expensive. But really, why not try the video editing features of Blender (free) before trying that?



  • Hi Laura, I was under the impression jahnocli was looking for interactive HTML5 output with greater animation control, rather than video editing, although I may have been mistaken in my interpretation.

    I was not aware that Blender supported interactive HTML5 output, but I haven't been paying close attention. Is that now supported?



  • @obtusity No, I must have misread the post. How about this?



  • @laura.seabrook Thanks for the link. No, obtusity is right, I wasn't talking about video editing. I had a quick look at Animatron, but every time I clicked on 'Pricing' I got a blank screen. Every time I clicked on 'Sign Up', I got a blank screen...So that wasn't too impressive.
    Yeah, Construct2 is way too expensive for what I need -- I don't want to spend $140 to get a timeline effect...I'm on the point of giving up on all these 'animation solutions' and just signing up on an HTML5/Javascript course. Thanks for responding anyway.



  • [I was away for more than 900 seconds, so couldn't edit my original post...] -- Finally got to an Animatron pricing screen; anything useful will cost $150 a year. Guess that's cheaper than some hire plans, but it's not a model that suits me. I've already got AS/Moho anyway, so it's only going to add HTML5 export to that. Didn't see any close control over timelines either, so it's not worth my time or money. Pity.



  • @jahnocli A year!!! That seems a tad expensive. You know, there might be two other places to ask your question. At Facebook, and at the DNA Forums.



  • @laura.seabrook - Yeah, $150, payable in advance. It's good to figure out what some things are worth, and that just isn't worth it to me. But the DNA forums are completely dead (I think they were replaced by this one), and I'm one of those people who were tinfoil hats when it comes to Facebook, so I'll pass on that.

    I did find a course on Udemy that was interesting: Learn animation using CSS3, Javascript and HTML5 ( https://www.udemy.com/animating-css-javascript/learn/v4/overview ), which was only about $12, and that looks promising, so I'll see what I can discover using raw code. Ugh...would have preferred using Motion Artist, but sometimes you have to wave goodbye to your loved ones in order to get things done!



  • @jahnocli Very True. You might however make a request on these forums for that feature. It may not happen, but if the developers don't know that there's a need for it, it certainly won't.



  • @jahnocli If you are working with raw code, you might like to check out TweenJS (one of the pieces in the EaselJS suite).
    Haven't yet tried it myself, but it looks promising.

    Free, as far as I can see (sponsored by Adobe, Microsoft, Mozilla, and the original author GSkinner).
    Includes an elastic ease for animation (elasticOut may be the one you want), with amplitude and period parameters.

    http://www.createjs.com/tweenjs
    Step through the demos to the ease demo: http://www.createjs.com/demos/tweenjs

    Should be applicable to images.
    Example here (once you correct the code with the answer given):
    http://stackoverflow.com/questions/17545877/createjs-tweenjs-doesnt-work-with-bitmap



  • @laura.seabrook - Good idea - thanks for the suggestion. I've just sent an email off to Smith Micro support requesting this feature.
    @obtusity - Have just had a look at TweenJS -- interesting. I've also been looking at the Green Sock Animation Program. Maybe I can cobble some code together and get something working. Hope so, otherwise this interest is going to become an obsession, and I will really start wearing a tinfoil hat...

    Thanks to both of you for the responses.



  • @jahnocli If you are still interested in raw code, found an easier-to-use (in my opinion) implementation here:

    Examples (including image movement with elastic ease out): http://staff.washington.edu/tabrooks/343INFO/JSMotionTween/jsMotionTween.htm
    Original source and documentation: http://jstween.blogspot.com.au/
    Example with selectable ease: http://jstween.sourceforge.net/moveSquare.html (click new location for square to move to)

    I hope to be using this one for a project at work.



  • @obtusity said in Elastic trickery:

    @jahnocli If you are still interested in raw code, found an easier-to-use (in my opinion) implementation here:

    Examples (including image movement with elastic ease out): http://staff.washington.edu/tabrooks/343INFO/JSMotionTween/jsMotionTween.htm
    Original source and documentation: http://jstween.blogspot.com.au/
    Example with selectable ease: http://jstween.sourceforge.net/moveSquare.html (click new location for square to move to)

    I hope to be using this one for a project at work.

    @obtusity - Thanks for these! I am still looking, and these examples are great because they are broken down into nice little bite-sized chunks. Very useful for a bear of little brain...



  • @jahnocli You're probably sick of it by now or have moved onto implementation, but here's still another one if you prefer using JQuery rather than straight JavaScript: http://www.jstween.org/

    Extract from my quick-and-dirty local test file (running from a folder on my computer rather than a server), where a 300x300 image moves (with elastic recoil) to center around the latest mouse click position:

    <img src="test.png" class="target" style="position: relative; left: 30px; top: 30px;">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="jstween-1.2.min.js"></script>

    <script>
    var screenX = 30;
    var screenY = 30;
    $(document).click(function(event) {
    $('.target').tween({
    left:{
    start: screenX,
    stop: event.pageX -300,
    time: 0,
    units: 'px',
    duration: 1,
    effect:'elasticOut'
    },
    top:{
    start: screenY,
    stop: event.pageY -300,
    time: 0,
    units: 'px',
    duration: 1,
    effect:'elasticOut'
    }
    });
    $.play();
    screenX = event.pageX -300;
    screenY = event.pageY -300;
    });
    </script>



  • @obtusity - No, not sick of it at all! I've moved onto something else for now, but this is something I want to do. Thanks for pointing me towards jsTween; I tried out your sample and it worked pretty well first time (I'm always surprised when that happens...) The problem I have isn't getting code to do things -- I've got all sort of working examples -- it's understanding what is happening so I can tweak it to do exactly what I want, and then combining several effects into one movement. I find that kind of tedious in code, which is why I was originally hoping there was some internal switch in Motion Artist to do what I wanted.
    I'll be ready to take all this up again in a couple of weeks' time. Thanks for your contributions.
    J



  • @jahnocli As you mentioned Animatron ... should you still look around for testing similar animation software, you might find hippani.com interesting.