Jump to content
Search Community

cerulean last won the day on April 30 2013

cerulean had the most liked content!

cerulean

Members

  • Posts

    133

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Everything posted by cerulean

1
2
3
...
6
Page 2 of 6  
  1. cerulean
    Thanks! — position:relative seems to do it. Why is that? Yes, I should have posted a code pen — but the HTML and CSS is immense for this project and winnowing it down seemed a massive undertaking if I was missing the obvious (as I was).
  2. cerulean
    I am having some issues related to tweening HTML elements in 3d — specifically <li>'s in this case. I'm working on a site which is generated by PHP and have a menu generated for me of this type (the real menu is longer) <ul id="menu-main" class="menus menu-secondary sub-menu sf-js-enabled"><li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42" style="visibility: visible; opacity: 1; transform: translate3d(0px, 0px, 0px);"><a href="http://whatever.com/category/about/">About</a></li> <li id="menu-item-1350241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1350241" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/search/">Search</a></li> <li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/category/popular/">Popular</a></li> </ul> Wanted to fool around with some simple GSAP animation, and all works fine but I cannot get the li's to tween rotationX or rotationY within the jQuery hover callbacks. rotationZ works. If someone could point out the obvious point I'm missing I'd be grateful. initMenus(); function checkMenuItem(theTween) { if ($(theTween.target).hasClass('current-menu-item')) { tl = new TimelineMax(); tl.to(theTween.target,.25,{ease:Quad.easeInOut,scale:1.5}); tl.to(theTween.target,1,{ease:Bounce.easeOut,scale:1}); } } function menuover() { var tl = new TimelineMax(); tl.to(this,.25,{rotationX:'+=30deg',ease:Quad.easeIn,scale:1.5}); tl.to(this,.35,{rotationX:'-=30deg',ease:Quad.easeOut,scale:1.25}); } function menuout() { TweenMax.to(this,1,{ease:Bounce.easeOut,scale:1}) } function initMenus() { var tl = new TimelineMax({}); $('#menu-main li').css('visibility','visible'); $('#menu-main li ').hover(menuover,menuout); tl.staggerFrom('#menu-main li ',1.4,{onStart:checkMenuItem,onStartParams:["{self}"],alpha:0,x:"-=100",ease:Elastic.easeOut},.15,.1); }
  3. cerulean
    Thanks! That's very helpful!
  4. cerulean
    Has anyone done any work with Greensock 3D transforms to create dynamic perspective shadows with CSS3? I was thinking this morning that it would most likely not be that difficult, but my 3D math/trigonometry skills are somewhat dormant. What I mean is shadows that will fall on a flat horizontal plane ("the ground") behind the object, as at sunset, and will, as the object moves in x and z directions (not y, as that seems complicated). The shadows would respond to a central light point (perhaps the center of the screen) Something like this image — Thanks for any way forward —
  5. cerulean
    Thanks — the last bit does it perfectly — I tween the parent's height while tweening the interior autoAlpha and display — perfect!
  6. cerulean
    I'd like to understand the best way to do those 'hiding and showing" elements that are not in the HTML flow — for instance, the sort of thing where you slick on a form element and more choices appear underneath. I believe, from looking at the forums, that if you have an element that is hidden, and not in the flow, you set visibility:none,opacity:0 and then TweenMax.to(element, time {autoAlpha:1, visibility:block}) — but will this "slide" the element into place, that is both make it tween opacity as well as tween the other elements to make room? If not, what's the best way to achieve this? How does one make it hide again? Perhaps I'm not on the right track, but it's an ubiquitous internet visual technique, so I'm open for best practices how to achieve. Or perhaps one should simply keep the place occupied, have visible:hidden? — but then there are a lot of blank spaces, no? Any help appreciated, sorry if at all vague.
  7. cerulean
    I'd like to tween a CSS value, say a div background color, through multiple colors based on scroll position -- as if I could set up a gradient of colors (for instance a spectrum/rainbow). My thought was to set up tweens on a TimelineMax and then check on each scroll update as to percentage scrolled and seek to that percentage position on the TLM. I can do the grunt work, but I'm curious to know whether using TLM in this way would even be possible -- any help appreciated --
  8. cerulean
    Thanks very much — I came across the IAB guidelines, but wasn't sure what weight it carried, what it 'really' meant — as you said, it seems a bit wild west out there. Thanks, too, for the Sizzle rec -- very useful -- I'll check out the other links
  9. cerulean
    I'm a seasoned flash developer who's done a lot of flash banner. Have been asked to look into doing an HTML5 banner, and since I know a fair amount of Javascript, some jQuery, GSAP, etc, I think I can do it. This is a concept banner, the ad agency doesn't really know what they're doing, so I don't know if what they want is possible. I also must admit, I don't see the forest for the trees as far as creating HTML5 banners, never having done it, so any help on how to best-practice it would be helpful. Specs are: "One 300x250 unit, does not expand, HTML5, 40k initial load (we can do 50k if it helps), 61k subsequent load (polite), 30 max animation, 24 fps, 3 loops max." * the animation they want originally was a flash animation, a little cartoon with many moving images, text — a typical flash banner ad — including little action figures hitting each other (it's an advertisement for an online game). Obviously the animation would be fairly crude, I told them that, but what does one do? Just set up divs and tween around? Would one want to use canvas at all? Can GSAP work with canvas? * what does file size mean in the HTML5 world? All the HTML, JS, CSS files plus images? I assume GSAP will do fine, but jQuery too? Coming from Flash, I really don't want to worry about browser issues (I know nothing about them), so jQuery keeps it nicely abstract. * they asked if HTML5 allowed video and suggested layering that in to show the figures fighting. This seems needless complex and size-intensive, no? In any case, I've done a zillion flash banners with GSAP, but am not too clued in how to make an HTML5 banner work the best way. There are a lot of tutorials out there, and I've looked at some, but they all seem very different in their approach; and the client wants this done very quickly, so I'm keen to leverage my Flash knowledge and make the transition to HTML5. Any help much appreciated.
  10. cerulean
    I am having some basic trouble getting a div within a div to alpha tween on and off. Basically I'm trying to randomly change the text inside the div (it will be using a pictorial font so the image will change). The text changes, thus the timelineMax is working, but there is no tweening on and off -- no alpha tweening. I'll include the relevant js and css below -- if the full zip is needed, can do, but I'm sure it's something really simple I'm missing. I also noticed that storing the div in a 'global' variable -- grabbing it at the start with jquery -- wasn't working for whatever reason, and that's why I'm grabbing it each function. Thanks for pointing the errors of my ways. JS startRotateDiv(); function startRotateDiv() { var rotateDiv = $('#home_div div.content_image'); var tl = new TimelineMax({repeat:-1}); tl.add(setText); tl.to(rotateDiv,.5,{autoAlpha:1}); tl.to(rotateDiv,.5,{autoAlpha:0},"+=2"); tl.play(); } function makeid(len) { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < len; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } function setText() { var rotateDiv = $('#home_div div.content_image'); var txt = makeid(1); rotateDiv.html('<div class="notice">'+ txt + '</div>'); } CSS .notice { font-size: 80px; font-family: 'noticenotice2'; color: red; background: url('http://media.npr.org/assets/news/2010/04/11/panda-f8a7c9331bbac776e52b26feeccc53de959f46d1-s6-c30.jpg'); }
  11. cerulean
    Thanks — first, the second point, my typo, I can only say: doh!, and feel ashamed. I thought I understood how bubbling works (having pored through Moock several times years ago) — events go from top to bottom in the display hierarchy and then back from bottom to top, and you can watch for them in one direction (I don't remember which) or both — At this remove I confess I've gotten a little fuzzy. I'd always thought that 'currentTarget' is the one that was bound through the addEventListener — that is, if you did abc.addEventListener(Event.WHATEVER,functionario) the currentTarget of functionario would always be abc -- and that 'target' would vary depending on whether you were catching it at some phase in the bubbling, and all of this is dependent on the display hierarchy. Do I have this backwards? But in any case, does the event itself change over time? I think that's what you're saying. That is, with bubbling, if I save an event, and test target (or currentTarget), the bubbling mechanism will actually change it in the event I've saved? In the end I had done exactly what you suggested, just grabbed the currentTarget -- worked fine, but I felt rather uneasy as I didn't know why this was happening — your explanation helped, so thatnks!; I hadn't thought of bubbling! Although I'm apparently unclear about the details, as per above…
  12. cerulean
    I'm sure there's an error in my code, but when I do this ($event is a mouseEvent) TweenMax.delayedCall(_gameClickDelay,showDetailScreen,[$event]); when I get to showDetailScreen($event:MouseEvent) private function showDetailScreen($event:MouseEvent):void { $event.current is no longer the button on which I originally clicked, but instead Stage, the trace is: $event.currentTarget = [object Stage] and $event itself traces as "0". trace("$event = " + $event); TweenMax.delayedCall(0,function ($x:MouseEvent) {trace("delayed call? " + x)},[$event]); yields $event = [MouseEvent type="click" bubbles=true cancelable=false eventPhase=2 localX=49.72636795043945 localY=109.43730163574219 stageX=487.6 stageY=709.2 relatedObject=null ctrlKey=false altKey=false shiftKey=false buttonDown=false delta=0] delayed call? 0
  13. cerulean
    Thanks for the help! I was able to get it up to client's satisfaction by removing some animations (or at least giving them the option to do so), but most importantly I was calling a somewhat lengthy status check function on each onUpdate of one of the main tweens — I replaced this with something Timer based (the client can set the time via xml and thus tweak it); when I set the check to be every .4 seconds or so, it seemed to help; I think onUpdate was firing more often than I needed…(nothing to do with GS, of course -- 'too often' strictly in context of what I was doing on the onUpdate firing) I will investigate the other things above. For the moment, at least, the client is happy. (I have to say that the app actually runs fine on its own, a testament both to GS, which is used everywhere, and also in some part to my coding; it was when loaded into this 3rd party video playing system that the PCs CPU began to get overloaded)
  14. cerulean
    First, I want to be clear that I know that GS is highly optimized, and that in no way do I mean to imply there's any problem with the GS speed. I've never had one. I've been working on a large sectional project for 3 months where games are being run along with videos inside an external player. One of those games -- using rudimentary Flash 3D, etc and using a touchscreen for touch detection -- runs slower than the client wants. The issue is, of course, with the videos and the external player, and with the multitude of external videos being played. That having been said, is there anything I can do to turbo-charge GS — the game relies on many TweenMax's, TimelineMax's, etc -- to get some small performance boost? I was thinking of something along the lines of fine-tuning onUpdates, or something, perhaps make them check less often — grasping at straws here. We believe the fault is in the videos/player, again, but I thought I'd investigate all angles…
  15. cerulean
    I'm trying to check for the existence of an XML file — I'm doing this by doing a bogus load and returning the value of success or failure, thus: public static function RFIDExists($func:Function):void { var filename:String = RFID_READ_FILE; TTUtils.trc(7,"RFIDExists $func", $func); var loader:XMLLoader = new XMLLoader(SERVER_PATH + filename, {onComplete:function() {$func(true)},onIOError:function() {$func(false)}}); loader.load(); } Where $func is a function that will be called and take action based on the result. It works perfectly. My question is that the IDE keeps reporting errors such as Error on XMLLoader 'loader9' (http://localhost/tt/xml/scan.xml): Error #2032: Stream Error. URL: http://localhost/tt/xml/scan.xml Which is understandable, of course, but I don't want the program to 'crash' because I'm trying to load a file that isn't there. Is there a way to 'trap' this error so that it basically disappears? Is there another way (outside of AIR) to check for a file existence than this?
  16. cerulean
    OK,thanks. It is fine, however, to use the XMLLoader to send XML data to a php script to write to the server, though? I'm sure I read this in the APIs or forum or somewhere — and I'm using the technique (which seems to work fine) in code shipping next week, so I want to be sure. No, of course, never ask you to troubleshoot PHP code (I'm not a PHP person but found some workable code I could use, which, as said, works fine). But I'm keen to know if XMLLoader is designed to load and send XML data, via a technique as below. As I said, I believe I read that it was (but perhaps I'm dreaming :->) private static function sendXML($xml:XML):void { // declaring var xmlcontents String. You should set this first. var xmlcontents:String = $xml.toString(); // declaring var SERVER_PATH String. This is the path for the saving-xml.php. var SERVER_PATH:String = TTConstants.SERVER_PATH + "/php/"; // declaring var foldername String. This is the folder container of the saved XML file var foldername:String = "../xml"; // declaring var dataPass URLVariables var dataPass:URLVariables = new URLVariables(); var previewRequest:URLRequest = new URLRequest(TTConstants.SERVER_PATH + "/php/ttwrite.php"); previewRequest.method = URLRequestMethod.POST; // setting dataPass variables to be passed to PHP dataPass.filename = USER_XML_FILENAME; dataPass.xmlcontents = xmlcontents; dataPass.foldername = foldername; // passing dataPass data PHP previewRequest.data = dataPass; var loader:XMLLoader = new XMLLoader(previewRequest, {onComplete:serverSendComplete,onIOError:onIOError,onSecurityError:onSecError,onError:onError}); // calling the PHP or loading the PHP loader.load(); }
  17. cerulean
    I've been using XMLLoader to write XML files via a php script: private static function sendXML($xml:XML):void { // declaring var xmlcontents String. You should set this first. var xmlcontents:String = $xml.toString(); // declaring var SERVER_PATH String. This is the path for the saving-xml.php. var SERVER_PATH:String = TTConstants.SERVER_PATH + "/php/"; // declaring var foldername String. This is the folder container of the saved XML file var foldername:String = "../xml"; // declaring var dataPass URLVariables var dataPass:URLVariables = new URLVariables(); var previewRequest:URLRequest = new URLRequest(TTConstants.SERVER_PATH + "/php/ttwrite.php"); previewRequest.method = URLRequestMethod.POST; // setting dataPass variables to be passed to PHP dataPass.filename = USER_XML_FILENAME; dataPass.xmlcontents = xmlcontents; dataPass.foldername = foldername; // passing dataPass data PHP previewRequest.data = dataPass; var loader:XMLLoader = new XMLLoader(previewRequest, {onComplete:serverSendComplete,onIOError:onIOError,onSecurityError:onSecError,onError:onError}); // calling the PHP or loading the PHP loader.load(); } I want to call a PHP script to simply delete ("unlink") an xml file on the server. Can I use XMLLoader to do this as well (for ease of complete and error functions -- callbacks instead of adding/removing event listeners)? There's no XML loading involved, so I don't know if it's 'kosher' - var deleteRequest:URLRequest = new URLRequest("http://localhost/tt/php/ttdelete.php"); deleteRequest.method = URLRequestMethod.POST; var loader:XMLLoader = new XMLLoader(deleteRequest, {onComplete:serverDeleteComplete,onIOError:onIOError,onSecurityError:onSecError,onError:onError}); // calling the PHP or loading the PHP loader.load();
  18. cerulean
    I'm playing a video loaded through VideoLoader and looping it when it's complete _videoLoader.addEventListener(VideoLoader.VIDEO_COMPLETE,videoCompleteHandler,false,0,true); private function videoCompleteHandler($event:Event):void { _videoLoader.gotoVideoTime(0,true); } I'm getting a slight pause on looping, which I guess is understandable, but it's not pretty. Any suggestions on how to avoid? I know with an FLVPlayback (I believe) one can load a video into different layers and switch them on and off. Can I do something similar here? Grab two copies of the video from the VideoLoader? Or do I simply need to load the video twice, with two VideoLoaders? Or…… Thanks for any advice!
  19. cerulean
    Thanks. That did solve it. But it introduced other weirdness — this was the timeline which you helped me with before, where the tweens are spread out and then restarted as each one comes to completion — I think there's probably an issue with that technique when smoothChildTiming is true. They're OK with this game for the moment without the timeScale so I'll investigate later… As a sidenote, has anyone done a graphic of how TimelineMax works with childSmooth: true? In my head, from the API docs, I'm picturing it like the Flash IDE timeline, where one is flipping and moving the child tweens…I suppose it's exactly like that.
  20. cerulean
    This is almost certainly a bug in my code, but I'm moving some elements forward in z-space (that is low to high z) using TweenMax's in a TimelineMax // pseudo code TLM:TimelineMax = new TimelineMax; for (var i:int = 0; i< someNumber; i++) { var tw:TweenMax = new TweenMax(anAsset,TWEEN_TIME,{onUpdate:doUpdate,onUpdateParams:["{self}"],z:someFinalZ}); TLM.add(tw,TWEEN_Time/i); } private function doUpdate($tw:TweenMax):void { sortElementsOnZPosition(); // sort all the elements display position based on z, using addChild() if (something) { $tw.timeScale(0.5); // slow down } else { $tw.timeScale(1); // set back to normal } } Sometimes I want to slow down the tweened elements' z-motion (and in a separate call I'm moving them on x axis), but when I want to set the tween back to normal speed, they suddenly jump forward in z-space, as if they were suddenly set back to where they'd been if they'd never been slowed. There's a lot going on behind the scenes, including addChild()-ing the elements (based on a z-sort), etc. Surely something in my code, but the tweens are pretty separate from everything else, so I'm wondering if there's something related to timeScale of Tweens in a Timeline that I'm missing. Thanks!
  21. cerulean
    Solved: in the XMLLoader that I was using to auto-magically auto-load the MP3Loaders, I was setting autoDipose:true. The MP3Loaders were getting disposed out from under me… Thanks Jack and everyone for their help!
  22. cerulean
    Thanks. I'm sure any 'glitches' are at my end. I was just wondering if adding a timeline at, say, "+-8" and setting it to "time(8)" would cause any sideeffects to any sibling timelines, but I assume that's totally silly… My one other question would be this: if I had a child timeline with a negative time offset, as we've been doing, does the parent timeline have to have sufficient duration() to "accommodate" it? parentTimeline = new TimelineMax; childTimeline = new createMyChildTimeline; // duration() == 20, for example. childTimeline.time(10); parentTimeline.add(childTimeline,"-=10"); // but parentTimeline.duration() == 0 at this point Or would the parent need to have a duration() of at least 10 to accommodate the "-" time setting in the add?
  23. cerulean
    Thanks -- one question -- what is 'b' in the second line? And are you adding this tween to simply give the timeline some space to add the second one? Seems to work well when I applied to my own code. Thanks for giving me an insight into a new way to work with timelines. I've been kind of assembling them beforehand and then trying to put together different ones in larger structures, like lego, but this approach is very useful, where you operate through a callback and can reference the current state of running timlines. Thanks. One thing -- although it works well, I'm getting a glitch where another timeline already added to the main timeline, the one just preceding the one I'm adding, gets its last bit replayed. When I add a timeline at a point before the current end of the timeline, and have it already set forward in time (as per your example), can this in any way affect other timelines already on the main timeline? I shouldn't think so, but this method of adding already-time()'d timelines at an 'earlier' point is new to me.
  24. cerulean
    Ah. So I have to also move the parent's timeline forward some as well? That is, if the child timeline is 5 seconds into playing and I add the child timeline at 25 seconds into the parent timeline, I would have to move the parent timeline immediately to 30 seconds for the child timeline to be where I set it? If so, I am confused -- if you have a snippet illustrating, good karma to you!
  25. cerulean
    Thanks. I'll try to see if I can get an FLA together. I'm quite certain it will work, and that the error lies in my code, though. I don't call unload() anywhere, and I'm actually not using LoaderMax in many places, only to load xml really. And they asked me on a rush to add a lot of voiceovers -- the somewhat rushed code which resulted from their rush is causing me headaches. I don't think I'm using similar names for images, etc -- the names are quite unique. My uncertainty stems from the fact that I seem to affecting something internal to LM with my code, but I don't know how to monitor LM to see what's going on -- I was looking to see if there were a list of loaded assets I could get statically to see "what's in there", but couldn't find it -- My point regarding GC wasn't that there was a bug in LoaderMax, or anything like that, but was in reference to this note in the API. I seem to have misread it -- it refers only to canceled or unloaded MP3Loaders...
1
2
3
...
6
Page 2 of 6  
×
×
  • Create New...