Elastic trickery



  • 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.



  • @maxie-online Just had a look at the Hippani site -- interesting, thanks. I've also been checking out Madefire. Involved in other things at present, but will come back to this mid-October.