40 thoughts on “Contact”

  1. Morning Chris,

    I’m designing an interactive tutorial using adobe edge animate for a client and the major bump that I’ve run into is that the client/company is running IE7 on their computers and have limited internet browser allowances which has disabled me form using the google frame so that they’ll be able to view it. Do you know of any ideas or solutions to this other than the obvious of the client just upgrading their internal browsers ( which they won’t do)?

    Many thanks,

    -Noki

    Reply

  2. The simple answer is no. Very early preview version of Edge Animate would run on IE7 but as it has become more complex utilising more modern APIs this has meant that IE7 is out of the picture now (quite rightly, otherwise we’d never make ANY progress! :)).

    You could possibly try and get hold of a very early version of EA but I wouldn’t recommend it as they were pretty unstable back then and certainly not reliable enough for production work.

    Reply

  4. Hi Chris,

    I’ve got an image sequence in which the user navigates by scrolling the mouse-wheel. In this sequence, there should be several hotspots that I’ve tracked in After Effects and written into a text file.
    Could you give me a hint how to import and manage this data with html/JQuery to use it for the moving hotspots?

    Thanks for any tips :-)!

    Reply

  5. Hi Stephanie,

    When you say image sequence do you mean images in a sequence or an actual video? I am using video…

    The way I manage video tracking data from AE is to run the FLV in Flash with metadata listeners and generate JSON data (as a string) through Flash’s trace() output (purely the coordinates and timestamp of the event in the video).

    Then I load it into the HTML document and create a Greensock TimelineMax timeline and apply the JSON tracking data that way.

    HTH.

    Reply

  7. Hi Chris,
    I have an Edge animate project that I am working on, and I would like to create a button that would play the default timeline (stage) at 2 or 3 times the regular playback speed. Perhaps also create a button to play at half speed. I see that greensock will allow me to use the timeScale function to do this, but I am not sure how to implement this into my existing edge project. I’ve added the yup/nope statement in stage compositionReady to load the greensock scripts, and then created a rectangle onto which I put a clic

    Reply

  8. …continued from above….
    I created a rectangle onto which I put a click action. In the code of the click action I tried to put a timeScale command for the stage, but obviously there is something wrong with my syntax and or procedure. Do you think you could point me in the right direction?

    Thanks so much!

    Reply

      1. Thanks Chris,

        I’m watching some tutorials on timeline lite, but they pertain to flash. I see that what I probably have to do is create a timeline lite instance in the compositionReady of my edge project, and then nest the whole stage inside of that, but this is all very new to me. Would you be willing to create a very simple edge animation and then show me how to nest it into timeline lite? This would be a great thing to post on the Edge Animate forum. I know there would be lots of newbies like me that would love to see the project files for that!

  9. Hi Chris,

    Thank you for the edge/greensock tutorials. Much appreciated. Could you answer a question please? I’m using TweenMax to animate an element left to right (starting at x: 8 and moving to the right to x:223 for example), sometimes it’ll work and move to the correct x coordinate (in this case an X coordinate of 223). Sometimes, however, the element will move but not to an X coordinate of 223. Rather, Edge ADDS 8 (it’s current position) and 223 together and move the element to an x coordinate of 231. This seems to happen more frequently when the element starts the motion from outside of the stage area but also happens if the element originates from within the stage. I’d prefer it to just move the coordinate I plugged in. Could you shed some light as to what I’m doing wrong please? Here is my code:

    var rectangle = sym.$(“rectangle”);

    TweenMax.to(rectangle, 1, {css:{opacity:.5, x: 223, y:124, width: 300, height: 200,}, delay: 1, onComplete: redMoveFunction, ease:Quad.easeOut});

    var red = sym.$(“red”);

    function redMoveFunction()
    {

    TweenMax.to(red, 1, {css:{opacity:.5, x: 223, y: 252, width: 200}, ease:Quad.easeOut});

    console.log(“on complete working”);
    };

    Reply

  10. apologies for the typos above. Let me retype this with some editing:

    Hi Chris,

    Thank you for the edge/greensock tutorials. Much appreciated. Could you answer a question please? I’m using TweenMax to animate an element left to right (starting at x: 8 and moving to the right to x:223 for example). Sometimes this will work and the element will move to the correct x coordinate (in this case an X coordinate of 223). Sometimes, however, the element moves but not to an X coordinate of 223. Rather, Edge ADDS 8 (it’s current position) and 223 together and moves the element to an x coordinate of 231. This seems to happen more frequently when the element starts the motion from outside of the stage area but also happens if the element originates from within the stage. I’d prefer it to just move the coordinate I plugged in. Could you shed some light as to what I’m doing wrong please? Here is my code:

    var rectangle = sym.$(“rectangle”);

    TweenMax.to(rectangle, 1, {css:{opacity:.5, x: 223, y:124, width: 300, height: 200,}, delay: 1, onComplete: redMoveFunction, ease:Quad.easeOut});

    var red = sym.$(“red”);

    function redMoveFunction()
    {

    TweenMax.to(red, 1, {css:{opacity:.5, x: 223, y: 252, width: 200}, ease:Quad.easeOut});

    console.log(“on complete working”);
    };

    Reply

  11. Thank you very much, Chris. That does seem to help. The interesting thing however is the file was working fine even before I deleted the comma. The issue with the odd x positions comes and goes and I’ve no idea what I’ve done to either cause or correct the problem. In this case, I manually placed the element on the stage in different spots to see how Edge would react. Sometimes, Edge would place it at the exact X position specified int he code, and other times it would do the weird adding thing I described. I thought perhaps there’s a preference somewhere that needed to be set or that I was writing something in my code that would cause Edge to position elements in a different manner than expected.

    Reply

    1. I think what you’re seeing is a bug in Edge. You can test this bug by removing the element from the stage, adding it again and naming it and then animating it again. It won’t reproduce the bug.

      If, however, you leave the element on the stage and then move it around on the stage, Edge will sometimes ‘cache’ the first X and Y position it was created at, even though you have moved it by hand since.

      Are you using the latest versions of both Greensock and Edge Animate?

      Reply

  12. Dear Mr. Gannon,

    I have a little question about Adobe Edge and Tablets and Smartphones.
    Is it possible that Edge detects if you use such a device, and sends you straight to a certain position / “label” in your file?

    Reply

    1. Rather than evaluating the browser agent I think the recommended method now is to check for capabilities like accelerometer, orientation, width, height etc.

      Reply

  13. Hello Chris!
    First I need to say that you helped me a LOT with Your post about loading GREENSOCK plugins in Edge Animate via yepnope. And now I’m wondering about SUPERSCROLLORAMA plugin. Does it actually work in Edge Animate? Because I tried to load it via yepnope and use the code from official plugin website and it doesn’t work. Then I tried to manipulate the code and nothing seems to work yet. The code from official website:

    $(document).ready(function() {
    var controller = $.superscrollorama();
    controller.addTween(‘#fade’,
    TweenMax.from($(‘#fade’), .5, {css:{opacity:0}}));
    });

    Michael

    Reply

    1. Maybe try it without the ‘document ready’ function? I haven’t used this plugin but you shouldn’t need to write this event.

      Reply

  14. Well, I rewrote the code before:

    yepnope({

    nope:[
    ‘scroll/js/jquery-1.9.1.min.js’,
    ‘scroll/js/jquery.superscrollorama.js’,
    ‘scroll/js/greensock/TweenMax.js’,
    ‘scroll/js/greensock/easing/EasePack.js’,
    ‘scroll/js/greensock/plugins/CSSPlugin.js’,
    ‘scroll/js/greensock/plugins/ColorPropsPlugin.js’,
    ‘scroll/js/greensock/TimelineMax.js’],

    complete: init

    }
    );

    function init (){
    var controller = $.superscrollorama;
    controller.addTween(“Rec”, TweenMax.from(sym.$(“Rec”), .5, {css:{opacity:0}}));

    }

    I think that part is messy

    var controller = $.superscrollorama; – whole code doesn’t work
    var controller = sym.$(“superscrollorama”); – Edge ignores the code except TweenMax (I can simply type “asdasd” anywhere before “TweenMax.from”).

    var controller = $.(“superscrollorama”); – same as above.

    Cheers,
    Michael.

    Reply

  15. Hi Chris,
    You helped me out last year with binding clicks to dynamic symbols and that piece of code gets a daily workout to-date so thanks again.

    I have a question that I thought would be really simple to find the answer to but I can’t. Is there a way to draw a circle in Edge and use it to mask an image?

    Nice FRAMESPARK logo by the way, good luck with that venture

    Reply

    1. Hi Ben,

      Thanks for the kind comment on the FrameSpark logo – it took a while to design!

      The way I’m creating circular masks is not by using a circular shape (like in Flash) but, as you may have guessed, using Greensock and the borderRadius CSS3 property.

      In the following example, and for simplicity, I suggest you use a square image, otherwise it’ll look egg-shaped.

      TweenMax.set(yourSquareImage, {css:{borderRadius:"50%"}});

      Now you can just animate yourSquareImage to your heart’s content and even make it square again by animating its borderRadius back to 0%.

      You can also animate the image itself ‘behind the mask’ like this:

      TweenMax.to(yourSquareImage, 2, {css:{backgroundPosition:"0px 50px"}});

      Check out Jack’s demos here:

      http://www.greensock.com/css3/

      Hope that helps!

      Reply

  16. Hi Chris, Thank you for your reply unfortunately I’m unable to use greenstock for commercial licensing reasons otherwise I’d be all over it.
    Any ideas how else it can be achieved? I have a feeling my patience for Adobe to produce the solution might not be as virtuous as I’d like

    Thanks again

    Reply

    1. Look up the CSS properties background-position in conjunction with border-radius. Might do what you need.

      Reply
  17. Pingback: Multitouch UI demo | Chris Gannon

    1. Hi Paul,

      So far I have a value simple slider, a range slider, a dial, a 3D spinner, a radio button and an increment panel and they’re all very different and work very differently.

      So posting a tutorial for each component would take a fair bit of time (time I don’t have right now) but I’ll try to create something at some point.

      Reply

  19. Hi Chris
    I love using splittext from greensock, but I haven’t had any luck getting it to work in edge.
    Have you experimented with this one yet?

    Thanks

    Reply

    1. There’s really no difference in EA than any other JS/CSS. SplitText works fine.

      Just make sure you access the text field using the sym.$(‘myTextField’) syntax.

      Reply

      1. This works…
        var tween = sym.$(“text1a”);
        TweenMax.from(tween, 3, {delay:.5, autoAlpha:0});

        But to pull in splittext I might use something like…
        var split = new SplitText(text1a, {type:”chars,words”});
        TweenMax.staggerFrom(split.chars, 1, {delay:.5, opacity:0, x:150, ease:Back.easeOut}, 0.04);

        Essentially I don’t know how to combine the var tween = sym.$(“text1a”); line with the splittext line to make it work.

        What do you think?

  21. In Edge:
    What I want to happen is if you click on sing it stops animating.
    I tried using killTweensOf with zero luck.
    If you could give any help that would be fantastic!

    var sing = sym.$(“sing_txt”);
    var tl = new TimelineLite();
    tl.to(sing, 4, {scrollTo:{y:”max”}, ease:Sine.easeOut});
    tl.to(sing, .5, {scrollTo:{y:”0″}, ease:Power2.easeInOut}, “+=1”);

    //the below needs help
    (sing).click(function(){
    TweenMax.killTweensOf(sing)
    })

    Reply

  22. Hi Chris, loving your work very inspirational thanks. You seem to know a bit about gsap and edge animate so I was wondering whether or not you have experienced serious performance problems when using edge and gsap?

    I’ve created an website with 4 sections. Each section has some sort of simple animation to bring in content. The problem that I have is that when the user clicks on the navigation more than say 10-15 times the pages start seriously lagging until the page becomes unresponsive and crashes. I am testing this currently in Chrome and edge in IE. I’ve uploaded the website here.

    http://digital.akauk.com/_test/gsap/website/superhero.html

    Any help would be great thank you.

    Marcus

    Reply

  23. Hi Chirs, im working whit your plug in spin to win, im allready editing the java the part of prizes, all good, but i cant to publicate or see a preview of this… would you can help me? thanks.

    Reply

  24. Hi Chris,

    I’ve just come across your cover flow guide and source files page. https://blog.gannon.tv/tag/coverflow/

    Unfortunately, when I try to preview the work it says ‘no longer available’. Is there an easy way to fix this? This is the perfect platform to build on something I’m working on.

    So sorry if you get asked this often!

    Many thanks for any help, love the website and your work,

    Chris

    Reply

    1. Hi Chris,

      The YouTube API that YouTube CoverFlow uses has been deprecated and as you discovered is no longer active. I don’t have the time (or tbh the inclination) to fix it I’m afraid. All good things must come to an end – sorry about that.

      Cheers,

      Chris

      Reply

Leave a reply to Chris Gannon Cancel reply