Jump to content
Search Community

Monnone last won the day on January 13 2013

Monnone had the most liked content!

Monnone

Members
  • Posts

    54
  • Joined

  • Last visited

  • Days Won

    1

Monnone last won the day on January 13 2013

Monnone had the most liked content!

Contact Methods

Profile Information

  • Location
    Austin, TX

Monnone's Achievements

4

Reputation

  1. Thanks Jonathan! I made some edits based on your response and now it's working as it should. I really appreciate your time helping me out!
  2. Hey everyone! I'm having an issue and I tried to hunt down the solution here to no avail. I think I'm missing a little something and maybe you guys help me past this. Basically it seems like the z-index isn't applying to my animation in Safari correctly. It seems like the z-index doesn't actually get applied until AFTER the animation to that element has completed with GSAP. I've read several things about indexing and Safari when applying certain CSS properties, or not setting the index positions first, etc. I'm just stumped. Basically I have a non-dynamic photo-stacking-rotating-thingy going on here. Top-most photo slides up, gets sent to the back of the photo stack (z-index), then slides behind the rest of the photos, then the whole things just keeps repeating forever. You can actually see the photos start to NOT stack correctly after the first photo shuffle...you have to look at the edges...you'll see it doesn't actually move to the very back. Check out the Codepen. Anyone been down this road? Sincerely appreciate the help in advance! Brian
  3. Edge Animate banners will work in AdWords. If the entire banner can be clickable then this simple meta tag added to the <head> of the HTML is all you need: <meta name="ad.size" content="width=160,height=600"> The biggest catch I've seen with AdWords is the limited support for SVG in regards to embedded <styles> or tags like <fecolormatrix> etc. Basically AdWords wants your SVG to be about as basic as it can get. In other words, as I like to call it, as "flat" as you can make it. For example, an SVG exported from Photoshop or even Flash will likely have <style> tags in it. So my work-around is to make the SVG graphic in whatever tool I feel is the most appropriate based on what I'm doing...if I'm converting Flash banners I will export some of the assets from Flash as SVGs. Then open that SVG in Illustrator to clean it up and essentially "flatten" it by removing those unwanted <styles>. The most important settings for exporting SVGs from Illustrator that I found (after much trial and error believe me) look like this: SVG Profile: SVG 1.1 Type: Convert to outline CSS Properties: “Presentation Attributes" This seems to make AdWords happy whether hand-coding w/ GSAP or using a GUI like Edge Animate. Personally, I go between the two. I really enjoy hand-coding with GSAP but feel the need to use the GUI at times as well. It really depends on the design. I've been animating/coding for over 15 years on various platforms...yes, I do agree that hand-coding is the way to go. It's faster, cleaner, and leaner. But sometimes you just need that visual timeline when animating. I don't think we should EVER drop the visual aspect of using a timeline. It's like the old-school idea of animation on multiple pieces of paper and flipping back and forth while drawing to get the animation just right.
  4. I appreciate the thoughts guys. It's good to know that I'm not the only one feeling like it's a bit of a mess still. I've been researching like a mad man trying to find the right path but it sounds like that path is not a clear one. And Jack, don't sweat it, I'm a huge fan of your tween classes and the work you and your entourage has done for us. I'm pretty dang excited about GSAP and can't wait to see what happens with it next. Now that I think about it I think I let my membership accidentally lapse...I need to take care of that. Weird how time flies. Thanks guys!
  5. Thanks for the tips guys! I've played around with Edge in the very early releases (specifically around SXSW last year), isn't Edge based more on webkit/div & dom style rather than a canvas approach? Are there advantages of one over the other? It still seems like the wild west out there. I really like the idea of being able to somewhat use an OOP approach (like Skinner is trying to do with EaselJS) to some of these web apps and I fear Edge isn't going in that direction.
  6. Yeah there has to be a good reason. Do you guys have any thoughts on the second part of my post about tools?
  7. Ok, I was wrong about EaselJS's cache method. It IS pixels. I just had to find out the hard way as some of my objects were larger than 100x100px and I couldn't figure out why they were rendering bizarre. I have an object that is 91x173px and plugged this in: e.target.cache(0, 0, 200, 200); to cover my bases but this feels like a hack. I can't believe there is no way to get the width & height of objects created with Easel.
  8. Hey guys, I truly appreciate your help! I guess I wasn't using the cache method correctly. It seem that the parameters, height and width are a PERCENTAGE not an actual px value. So this works: mapHS[mhs].onmouseover = function(e) { e.target.cache(0, 0, 100, 100); TweenMax.to(e.target, .3, {easel:{tint:"#0000FF", tintAmount:1}}); } mapHS[mhs].onmouseout = function(e) { TweenMax.to(e.target, .3, {easel:{tint:"#0000FF", tintAmount:0}}); } I know, the export feature IS wonky to say the least but it's something. So that leads me to another question, a little off-topic...I'd really like to use a tool of some sort to lay out objects, nest them, layer them for various reasons (scaling for responsive design), etc, like this map I'm building...then write all the code to connect everything up. It seems silly to me to have lay out all my objects manually plus what about loosing some level of OOP? Do you guys have a tool that you've experimented with that you like? I've looked into Hype, Edge and a few others I can't remember and Flash's export option seemed like the way to go for me. I like keeping all of my "apps" sort of self-contained so they plug into our CMS easier on existing sites so really using elements from the DOM might be too ideal. Thoughts? I'm just looking for some direction on what's the proper way to go about building these Canvas-type apps.
  9. We posted at the same time... Yeah, I've researched both of those pages. I think since I'm generating objects from the createJS Flash plugin something is different. For example, I'm trying this inside my onmouseover: e.target.cache(e.target.x, e.target.y, e.target.width, e.target.height); and I get this error: InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
  10. I trying to use the Cache method as instructed in your easelJS doc to no avail. http://api.greensock.com/js/com/greensock/plugins/EaselPlugin.html This sure seems a lot more difficult than it should be to adjust the color of an object. lol
  11. That makes a ton of sense. Being so new to easelJS I guess I assumed all that was packaged into easeljs-0.5.0.min.js. I loaded the ColorFilter script and now I'm getting the following error: uncaught exception: EaselPlugin warning: for filters to display in EaselJS, you must call the object's cache() method first. [Container (name=null)] *scratching head...
  12. Thanks for taking a quick look. I've got a very stripped down version of my map attached. I double checked that the error still occurs and it does. Take a look in SuncadiaMap.js line 42. Thank you! test.zip
  13. Well dang. I wish that solved it. I'm using EaselJS_v0_5_0 and just downloaded and plugged in the latest GSAP scripts. I still get the error and the object doesn't do anything. Thanks Jack!
  14. Hey everyone! Long-time user and fan of TweenMax, et al for Flash. I'm building my first real project in Canvas and am using the CreateJS plugin for Flash as my asset layout manager. I'm trying to change the color of a hotspot on onmouseover: To cover all bases: I've included the EaselPlugin.min.js file. Here are all the GSAP files included: <script type="text/javascript" src="libs/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="libs/plugins/EaselPlugin.min.js"></script> <script type="text/javascript" src="libs/easing/EasePack.min.js"></script> <script type="text/javascript" src="libs/TweenMax.min.js"></script> The object I'm trying to tween doesn't seem to respond to this code: TweenMax.to(e.target, .3, {easel:{tint:0x00FF00}}); I know e.target is correct because I can apply GSAP transforms on it like so: TweenMax.to(e.target, .3, {scaleX:2, scaleY:2}); and it works fine. Also, I'm getting this error when I try: easel:{tint:0x00FF00} uncaught exception: EaselPlugin error: The EaselJS ColorFilter Javascript file wasn't loaded. Maybe I'm missing something small? Also, just to be sure, I can't use CSS properties on elements that are not part of the DOM right? Like this object I'm trying to tint. Any help is greatly appreciated!
  15. Thanks Carl, I've certainly used alpha properties on my objects and it works great. I was just trying to avoid objects layered over each other with alpha:0 and still be clickable. HOWEVER, with more exploration I've since discovered that once an object's alpha = 0 it can't be interactive with. It's as if it's doing what autoAlpha does...fade it out and then remove it. I know it's not removing the object but at least it's not clickable. I suppose this is because of easelJS? Or is that a characteristic of Canvas in general?
×
×
  • Create New...