Jump to content

ohem last won the day on April 23 2017

ohem had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Community Answers

  1. ohem's post in Reversing scale and cross-dissolve tweens: AnimateCC + GSAP (cross-post of sorts) was marked as the answer   
    "scale" isn't a property in canvas.  You need to use scaleX and scaleY.
  2. ohem's post in Trouble with Cory Hudson's sample files was marked as the answer   
    Those templates are outdated; Adobe has made some changes to publishing since then.  If you're using Animate CC 2017, older templates won't work.
    The best thing to do going forward is to reset to the default template, export it, and add back in any custom code such as linking to TweenMax, clicktags, the adsize meta tag, etc.  Then re-import it and you're good to go.
  3. ohem's post in Expanding Banners was marked as the answer   
    HTML5 expandable banners are definitely possible; how the functionality should be implemented will totally depend on the ad serving company, as they all have very different APIs.
    For DoubleClick, you can get a template/starter file here: https://www.richmediagallery.com/tools/starterfiles#tplGeneratorPath:expanding%2F300x250%2Fimage%2Fborder%3Dfalse%3BautoExpand%3Dfalse%2Fe%2F500x500%2Fimage%2FexpandingDirection%3Ddr~
    For Sizmek, here: http://showcase.sizmek.com/formats/demo/html5-expandable-banner
    Adform here: http://creative.adform.com/support/documentation/build-html5-banners/html5-banner-formats/single-file-expanding-ad/
    The size of the expansion will usually depend on the media buy/specs for various sites.  Many sites have specific dimensions like a 300x250 should expand to 700x500 or something like that... but expanding to full screen is possible if it's allowed where your ad is running.
    Sizmek has an example of a banner that expands to full screen already built out: http://showcase.sizmek.com/formats/demo/html5-full-screen-expandable-banner and Doubleclick has an article about expanding to full screen too: https://support.google.com/richmedia/answer/4526014?hl=en
    Can't offer much more advice unless you know how your ad will be trafficked.
  4. ohem's post in Reverse the animation of width sinking instead of from right to left make it left to right. was marked as the answer   
    If I'm understanding correctly, you just want to change the transform origin, so that your animation contracts from left to right, without adding a float in your CSS.
    I would do it like this: 
    See the Pen PzKkqm by ohem (@ohem) on CodePen
  5. ohem's post in Issue with TweenMax scaling my image while my css blur filter is animating was marked as the answer   
    It's smoother with a faster/shorter tween and a more intense blur: 
    See the Pen oLXPwZ by anon (@anon) on CodePen
  6. ohem's post in Banner clickthrough fires when clicking replay button was marked as the answer   
    Check out my answer to the same question here: https://forums.adobe.com/thread/2147715
    In the case of the particular starter file you're using, the clicktag is targeting the whole stage with 
    stage.on("stagemouseup", doClickthrough); so that when you click anywhere on the stage the clickthrough fires, no matter what other buttons might be there.  
    Removing the above code, adding an invisible button underneath your replay button that fills the whole stage, and adding this code
    this.myBtn.on("click", function(evt){ window.open(clickTag, "_blank"); }); should help, though for some reason when I test it with that particular starter file/template, I seem to have to delete  
    stage.enableMouseOver(); for the clickthrough to continue working.
    There's a lot going on in that template so I can't troubleshoot further right now, but I can tell you that the issue you were experiencing was due to the whole stage being targeted on click.
  7. ohem's post in Tween Two Objects Simultaneously was marked as the answer   
    Just add a position, like this:  
    See the Pen MyVwNv by anon (@anon) on CodePen
    More info about the position parameter here: http://greensock.com/position-parameter
  8. ohem's post in Image backgroundColor does not apply was marked as the answer   
    Since you just want it to darken, you could do that by putting a black div above the image and tweening the opacity (autoAlpha)... like this: 
    See the Pen ONzaQj by ohem (@ohem) on CodePen
    Edit: or to avoid an extra "overlay" div, you could also use pseudo elements and the CSS Rule plugin like this: 
    See the Pen NNXeKL by ohem (@ohem) on CodePen
    Edit2: Just realized I was over complicating things with that first edit; you can skip the pseudo element & just put the image in a div with a black background, and then animate the opacity of the image itself, like this: 
    See the Pen WwdmNO by ohem (@ohem) on CodePen
  9. ohem's post in change a text during timeline doesn't work was marked as the answer   
    If you update the Greensock CDN links to the 1.18.2 versions, that fixes it:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/TextPlugin.min.js"></script> The "latest" CDN links are often not actually up to date, so something about those versions was causing the issue.
  10. ohem's post in Sizmek to start counting the file size of external libraries on Feb 1st was marked as the answer   
    Apparently it was actually not the external libraries but the file size of the backup image being added to the ad, even though it was uploaded outside of the workspace.
    Still kind of frustrating that they're counting backup images now, but good news for GSAP at least.
  11. ohem's post in Is it possible to use the stagger methods on tweenlite by including a file? was marked as the answer   
    You can't stagger with just TweenLite, but you can stagger with TimelineLite or TweenMax.
  12. ohem's post in Hide animating element in Safari (7 and 8) in object with border-radius was marked as the answer   
    I was looking at this last night and it was really bothering me; definitely a bug with Safari.  
    The only thing I found that seems to work is this solution: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258

    See the Pen ZbwXeo by anon (@anon) on CodePen
  13. ohem's post in Transform position of SVG text by adding was marked as the answer   
    y: "-=300" does the trick.
  14. ohem's post in Optimizing SVG logo animation was marked as the answer   
    You can optimize the SVG itself using SVGO: https://jakearchibald.github.io/svgomg/
    Here's my attempt at cleaning up the JavaScript a bit: 
    See the Pen ojdPRp by ohem (@ohem) on CodePen
  15. ohem's post in cant get TimelineLite to work was marked as the answer   
    You need to include CSS Plugin in addition to TweenLite & Ease Pack.
  16. ohem's post in Self hosted fonts, is there a downside? was marked as the answer   
    That doesn't seem right.  SVG is vector, and for simple outlined type the file size should be pretty low.  Are you sure you're converting the text to outlines?
    When I try saving a SVG from Illustrator of the Rockwell font with every letter of the alphabet, uppercase and lowercase, the file size is still only 21k.  If I optimize it using SVGO, it goes down to 17k.  Example attached!
    PNGs are fine for type too, though it's sometimes nicer to have something scalable.  Also, if you use PNGs you should create them at double size so that they're not blurry on retina displays.
  17. ohem's post in Former Flasher now Javascripter with tons of questions was marked as the answer   
    Are you sure the path is correct to your JS files? I recreated everything and it seems to work fine. 
    Example attached.
  18. ohem's post in Web fonts odd tweening effect/bug was marked as the answer   
    I've come across the same issue... adding force3D:false should fix it.  
    force3D:true can also fix it, but it makes the text appear thinner in Safari so I prefer false.
    If you don't mind the text being slightly thinner you can also just do this in the CSS; that fixes it too: 
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;