I have decided that sound is not plausible at this time. It starts late every time due to having to load, so the sound effects are off. But the adventure was well worth my time :) I'm thankful that you started this project and gave me something to test my skills on. If you happen to create any more animations shoot me an email, even if you don't want any improvements on them, it's nice to have something to mess around with :P
On Nov 8, 2:02 pm, CodingCyborg <[EMAIL PROTECTED]> wrote: > http://codingcyborg.com/jQueryFun/Robot/robotSound.html > > Not the best sound file, it's actually a couch sound, but I couldn't > find anything better in the time I had. The timeouts weren't clearing > properly for awhile. When I switched the order they worked better, but > they didn't all clear at the same time like they should have. This one > is a bit rough around the edges, but the sound is a nice addition :) > > On Nov 8, 1:46 pm, CodingCyborg <[EMAIL PROTECTED]> wrote: > > > I was actually pleased to find that there is a jQuery plug-in for > > playing sounds! Now if I could only get these darn timeouts to clear > > properly! > > > On Nov 8, 12:07 am, "Jeffrey Kretz" <[EMAIL PROTECTED]> wrote: > > > > It's actually workable to use Flash as a basis for the sound. It's easier > > > with ActionScript 3.0, but it can still be done in earlier versions. You > > > have to bind a flash method to an external interface (look up > > > ExternalInterface in the docs). > > > > Then you can find the <object> by ID, and call the method on it directly. > > > > $('#swffile')[0].playSound(); > > > > JK > > > > -----Original Message----- > > > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On > > > > Behalf Of CodingCyborg > > > Sent: Friday, November 07, 2008 9:04 PM > > > To: jQuery (English) > > > Subject: [jQuery] Re: animated robot cartoon with jquery > > > > I am sad to report that finding cross browser audio playing javascript > > > is pretty tough stuff... I found one plug-in that used flash, but > > > couldn't get it implemented correctly. I may try again tomorrow, but > > > don't count on it too much, if somebody else could implement some > > > squeaky wheel sounds for when it's moving that would be nice :) Best > > > of luck. > > > > On Nov 7, 10:12 pm, CodingCyborg <[EMAIL PROTECTED]> wrote: > > > > I found the "edge of the cliff" while allowing the robot to roll > > > > multiple times without resetting the backgrounds. From there I thought > > > > it would be fun to have him fall :) Now I'm looking into adding some > > > > fun sound effects :) I'll let ya know how that goes in a couple > > > > hours... > > > > > On Nov 7, 8:58 pm, "anthony.calzadilla" <[EMAIL PROTECTED]> > > > > wrote: > > > > > > Thats incredible! How did you do that?! I'm going to dig into your > > > > > code and try to figure it out... AWESOME! > > > > > > -A > > > > > > On Nov 7, 8:50 pm, CodingCyborg <[EMAIL PROTECTED]> wrote: > > > > > > > Well, I decided to add some more fun stuff :) > > > > > > >http://codingcyborg.com/jQueryFun/Robot/robotHumor.html > > > > > > > There are now some "movement" images on the wheels. And I added an > > > > > > old > > > > > > school off the cliff cartoon style ending :) > > > > > > > On Nov 7, 11:58 am, "anthony.calzadilla" > > > > > > > <[EMAIL PROTECTED]> wrote: > > > > > > > Hi, > > > > > > > I changed the 'bounceHim' function a bit so that the different > > > pieces > > > > > > > of the robot look like they are separated and bouncing > > > > > > > individually: > > > > > > > > function bounceHim(){ > > > > > > > $("#sec-content,#branding").animate({top:"-=5px"}, > > > > > > > 150).animate({top:"+=5px"},150); > > > > > > > > > > $("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150); > > > > > > > setTimeout("bounceHim()",300); > > > > > > > > } > > > > > > > >http://robot.anthonycalzadilla.com/ > > > > > > > > Once again thanks for your insight. I really am a complete novice > > > > > > > at > > > > > > > programming in general. I'm really scrutinizing your code so as to > > > > > > > learn from it. > > > > > > > > -Anthony > > > > > > > > On Nov 7, 8:34 am, CodingCyborg <[EMAIL PROTECTED]> wrote: > > > > > > > > > I just noticed, after looking over the code again, that since > > > > > > > > you > > > have > > > > > > > > all three pieces of the robot that are bouncing bounce at the > > > > > > > > same > > > > > > > > time the line of code can be condensed into one. As well as the > > > two > > > > > > > > that bounce together at the beginning. > > > > > > > > This: > > > > > > > > > > > > $("#content").animate({top:"-="+num+"px"},150).animate({top:"+="+num > > > > > > > > +"px"},150); > > > > > > > > > > > $("#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num > > > > > > > > +"px"},150); > > > > > > > > > Becomes this: > > > > > > > > > $("#content,#branding").animate({top:"-="+num+"px"}, > > > > > > > > 150).animate({top:"+="+num+"px"},150); > > > > > > > > > And in the next function this: > > > > > > > > > > > > $("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"}, > > > > > > > > 150); > > > > > > > > > > > $("#content").animate({top:"-=5px"},150).animate({top:"+=5px"},150); > > > > > > > > > > > $("#branding").animate({top:"-=5px"},150).animate({top:"+=5px"},150); > > > > > > > > > Becomes this: > > > > > > > > > > > > $("#sec-content,#content,#branding").animate({top:"-=5px"}, > > > > > > > > 150).animate({top:"+=5px"},150); > > > > > > > > > Of course, if you wished to have each part bounce a different > > > amount > > > > > > > > or at different rates you would need to set up different > > > "timeouts" > > > > > > > > with different functions if they couldn't be set with the > > > > > > > > current > > > 300 > > > > > > > > ms function. But if you wanted something to go at half speed or > > > > > > > > a > > > > > > > > whole number multiple speed you could just changed how much code > > > was > > > > > > > > in the function and the numbers associated with it. (If any of > > > that > > > > > > > > makes sense.) > > > > > > > > > But that saves more code, and again, makes the file a bit (Quite > > > > > > > > seriously only a few bits :P) smaller. > > > > > > > > > On Nov 7, 12:44 am, "anthony.calzadilla" > > > > > > > > > <[EMAIL PROTECTED]> wrote: > > > > > > > > > Wow! Thank you CodingCyborg! Thank You! I'm going to study and > > > learn > > > > > > > > > from your code example and implement it into mine. > > > > > > > > > > -Anthony > > > > > > > > > > On Nov 7, 12:24 am, CodingCyborg <[EMAIL PROTECTED]> wrote: > > > > > > > > > > > I made a few more modifications such that the robot doesn't > > > keep > > > > > > > > > > bouncing and the sky keep moving when the ground has > > > > > > > > > > stopped. > > > Though I > > > > > > > > > > did the cheap way, in the sense that I just made it a short > > > clip > > > > > > > > > > rather than a full length repeat. > > > > > > > > > > >http://codingcyborg.com/jQueryFun/Robot/robot.html > > > > > > > > > > > That has the same basic directory set up, but with the > > > modified > > > > > > > > > > script.js file for viewing. > > > > > > > > > > > On Nov 6, 11:07 pm, CodingCyborg <[EMAIL PROTECTED]> > > > wrote: > > > > > > > > > > > > This is Beautiful! To save yourself from the copy/paste to > > > create the > > > > > > > > > > > repeated bounce, and to make the file smaller, you can > > > simply replace > > > > > > > > > > > the three lines that were enormously long with this: > > > > > > > > > > > > startHim(); > > > > > > > > > > > > And then add this at the bottom of the js file: > > > > > > > > > > > > var num = 1; > > > > > > > > > > > function startHim(){ > > > > > > > > > > > num++; > > > > > > > > > > > > > > $("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"}, > > > > > > > > > > > 150); > > > > > > > > > > > > > > $("#content").animate({top:"-="+num+"px"},150).animate({top:"+="+num > > > > > > > > > > > +"px"},150); > > > > > > > > > > > > > > $("#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num > > > > > > > > > > > +"px"},150); > > > > > > > > > > > if(num<4){ > > > > > > > > > > > setTimeout("startHim()",300); > > > > > > > > > > > } else { > > > > > > > > > > > setTimeout("bounceHim()",300); > > > > > > > > > > > } > > > > > > > > > > > > } > > > > > > > > > > > > function bounceHim(){ > > > > > > > > > > > > > > $("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"}, > > > > > > > > > > > 150); > > > > > > > > > > > > > > $("#content").animate({top:"-=5px"},150).animate({top:"+=5px"},150); > > > > > > > > > > > > > > $("#branding").animate({top:"-=5px"},150).animate({top:"+=5px"},150); > > > > > > > > > > > setTimeout("bounceHim()",300); > > > > > > > > > > > > } > > > > > > > > > > > > This allows for more control of the looped animation and > > > easier to > > > > > > > > > > > edit the "bounciness" of the robot. That's all I could > > > enhance, if you > > > > > > > > > > > could call it that. It's an amazing display of js and > > > > > > > > > > > jQuery > > > skills, > > > > > > > > > > > and I admire you for that. > > > > > > > > > > > > On Nov 5, 10:56 pm, "anthony.calzadilla" > > > > > > > > > > > > <[EMAIL PROTECTED]> wrote: > > > > > > > > > > > > Hi all, > > > > > > > > > > > > I occasionally volunteer as a guest speaker for the web > > > design class > > > > > > > > > > > > at my child's elementary school. I wanted to introduce > > > them to jquery > > > > > > > > > > > > and html in a fun way so I created an animated jquery > > > 'robot'. Now, > > > > > > > > > > > > I'm not really adept at javascript or any type of > > > programming at all. > > > > > > > > > > > > I'm a designer turned wannabe' web developer :) > > > > > > > > > > > > > I used multiple divs and transparent png's to create the > > > different > > > > > > > > > > > > parts of the parallax background and the bouncing robot. > > > The code I > > > > > > > > > > > > was able to piece together to make it work is absolutely > > > horrendous, > > > > > > > > > > > > even for me. I was hoping maybe some of you jquery > > > > > > > > > > > > masters > > > might be > > > > > > > > > > > > able to take a looksy and help me out? > > > > > > > > > > > > > The url is: robot.anthonycalzadilla.com > > > > > > > > > > > > (I would just post the code but its so > > ... > > read more »
