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 long it wouldn't be
> > visibly
> > > > > > > > > > > viable)
>
> > > > > > > > > > > Anthony
> > > > > > > > > > > [EMAIL PROTECTED]
