HTML Animation

Re: HTML Animation

Sam — Wed, 16 Jul 2008 19:05:31 -500

FANTASTIC! Walter Forgive my silly mistakes… what could you expect from a designer (after all) Many thanks again Sam

2008/7/16 Walter Lee Davis <email@hidden>:

Ah. A simple and classic mistake. You have named all three functions myFunction. They each fire, but the definition of the function is whatever the last invocation is.

If you name each function uniquely, this will work. So in the second instance, you would name the function myFunction2, then change the afterFinish call to myFunction2, and outside of the function block, call myFunction2().

By the way, you could wrap all of this into a single function, too, and it would run all three blocks at once.
var myFunction = function(){
   var d= 3;
    $('a1').morph('background-color:#fecccb',{
           queue: { scope: 'a1' },
           duration:d
   });

   $('a1').morph('background-color:#ccccfe',{
           queue: { position: 'end', scope: 'a1' },
           duration:d
   });

   $('a1').morph('background-color:#3398cc',{
           queue: { position: 'end', scope: 'a1' },
           duration:d,
           afterFinish:myFunction
   });

   $('b1').morph('background-color:#feccff',{
           queue: { scope: 'b1' },
           duration:d
   });

   $('b1').morph('background-color:#cccc98',{
           queue: { position: 'end', scope: 'b1' },
           duration:d
   });

   $('b1').morph('background-color:#666632',{
           queue: { position: 'end', scope: 'b1' },
           duration:d,
           afterFinish:myFunction
   });

   $('c1').morph('background-color:#cccccc',{
           queue: { scope: 'c1' },
           duration:d
   });

   $('c1').morph('background-color:#cb9998',{
           queue: { position: 'end', scope: 'c1' },
           duration:d
   });

   $('c1').morph('background-color:#ffcb99',{
           queue: { position: 'end', scope: 'c1' },
            duration:d,
           afterFinish:myFunction
   });
}

myFunction();
That way you could just call one function at the end.

Walter

On Jul 16, 2008, at 2:16 PM, Sam wrote:

Hi Walter, need some more help… please Please look at the link below… many thanks

http://www.thebookdesign.com/ani/index.htm

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

Re: HTML Animation

waltd — Wed, 16 Jul 2008 18:47:25 -500

Ah. A simple and classic mistake. You have named all three functions myFunction. They each fire, but the definition of the function is whatever the last invocation is.

If you name each function uniquely, this will work. So in the second instance, you would name the function myFunction2, then change the afterFinish call to myFunction2, and outside of the function block, call myFunction2().

By the way, you could wrap all of this into a single function, too, and it would run all three blocks at once.

var myFunction = function(){
    var d= 3;
    $('a1').morph('background-color:#fecccb',{
        queue: { scope: 'a1' },
        duration:d
    });

    $('a1').morph('background-color:#ccccfe',{
        queue: { position: 'end', scope: 'a1' },
        duration:d
    });

    $('a1').morph('background-color:#3398cc',{
        queue: { position: 'end', scope: 'a1' },
        duration:d,
        afterFinish:myFunction
    });

    $('b1').morph('background-color:#feccff',{
        queue: { scope: 'b1' },
        duration:d
    });

    $('b1').morph('background-color:#cccc98',{
        queue: { position: 'end', scope: 'b1' },
        duration:d
    });

    $('b1').morph('background-color:#666632',{
        queue: { position: 'end', scope: 'b1' },
        duration:d,
        afterFinish:myFunction
    });

    $('c1').morph('background-color:#cccccc',{
        queue: { scope: 'c1' },
        duration:d
    });

    $('c1').morph('background-color:#cb9998',{
        queue: { position: 'end', scope: 'c1' },
        duration:d
    });

    $('c1').morph('background-color:#ffcb99',{
        queue: { position: 'end', scope: 'c1' },
        duration:d,
        afterFinish:myFunction
    });
}

myFunction();

That way you could just call one function at the end.

Walter

On Jul 16, 2008, at 2:16 PM, Sam wrote:

Hi Walter, need some more help… please Please look at the link below… many thanks

http://www.thebookdesign.com/ani/index.htm

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

Re: HTML Animation

Sam — Wed, 16 Jul 2008 18:17:11 -500

Hi Walter, need some more help… please Please look at the link below… many thanks

http://www.thebookdesign.com/ani/index.htm

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

Re: HTML Animation

waltd — Wed, 16 Jul 2008 17:36:02 -500

I just tried (should have done before answering!)

You can apply the Action to a master page, and its settings properly copy down to the child pages. What you may have to look for is the name of the elements that you expect it to apply to. Perhaps those are not being set as you intend. If you called your animation object item1 on one page, check to be sure it is called item1 on each page in the entire set. The effect will not work any other way.

Walter

On Jul 16, 2008, at 12:47 PM, Sam wrote:

Hi Walter I may be going somewhere wrong… this effect doesn’t apply to ‘master page’… for that matter all pages within the master style do not read this effect. HELP!

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

Re: HTML Animation

waltd — Wed, 16 Jul 2008 17:33:15 -500

Actions and Master Pages are something of a problem. Try applying it to the page in question first, and see if it works there.

Walter

On Jul 16, 2008, at 12:47 PM, Sam wrote:

Hi Walter I may be going somewhere wrong… this effect doesn’t apply to ‘master page’… for that matter all pages within the master style do not read this effect. HELP!

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

Re: HTML Animation

Sam — Wed, 16 Jul 2008 16:47:47 -500

Hi Walter I may be going somewhere wrong… this effect doesn’t apply to ‘master page’… for that matter all pages within the master style do not read this effect. HELP!

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

Re: HTML Animation

Sam — Tue, 15 Jul 2008 22:32:30 -500

SUPER! WALTER Many many thanks for your help and insight Will keep you updated once my site is finished… I’m sure you’ll be pleased to see that Sam

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

Re: HTML Animation

waltd — Tue, 15 Jul 2008 21:54:56 -500

I posted a question on the Prototype-Scriptaculous list, and got the clue I needed. You make an anonymous function containing all of your effects, and you use the queue feature that all of the effects share to “chain” the effects together. Then, in the last step of this chain, you call your anonymous function again.

var myFunction = function(){
    var d= 3;
    $('thing1').morph('background-color:#00f',{
        duration:d
    });
    $('thing1').morph('background-color:#0ff',{
        queue:'end',
        duration:d
    });
    $('thing1').morph('background-color:#0f0',{
        queue:'end',
        duration:d
    });
    $('thing1').morph('background-color:#f0f',{
        queue:'end',
        duration:d
    });
    $('thing1').morph('background-color:#f00',{
        queue:'end',
        duration:d
    });
    $('thing1').morph('background-color:#ff0',{
        queue:'end',
        duration:d,
        afterFinish:myFunction
    });
}
myFunction();

It’s not important what you call this function, but notice that it is defined first, then called in the afterFinish event of the last effect. Then, after it is defined, it is called once. This will fire when the page finishes loading.

This particular rainbow is very primary/ugly/clashy. But with some care and taste, you can make some cool transitions.

Walter On Jul 15, 2008, at 10:46 AM, Walter Lee Davis wrote:

It should be possible. I would have to investigate making a recursive function work in this context. But sure, it’s possible.

Walter

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

Re: HTML Animation

Sam — Tue, 15 Jul 2008 17:07:45 -500

Thanks Walter, Shall wait for your guidance. Sam

2008/7/15 Walter Lee Davis <email@hidden>:

It should be possible. I would have to investigate making a recursive function work in this context. But sure, it’s possible.

Walter

On Jul 15, 2008, at 7:17 AM, Sam wrote:
Draw a colored HTML box on the page. Apply the Protaculous Action[1] to the page, and select scriptaculous-packed from the library menu. Click on either of the Function Body buttons in the Actions palette, and paste the following in there:
 $('thing1').morph('background-color:#999999',{duration:3,delay:1}=
);
Hi Walter this is perfect=85 I really liked smooth morphing effect=85 At this code it just morphs once (thing1=97gray) and then stops. Is it possible to morph it in a loop (colour1=97colour2=97colour3=97colour= 1)

Thanks Sam

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

Re: HTML Animation

waltd — Tue, 15 Jul 2008 14:46:47 -500

It should be possible. I would have to investigate making a recursive function work in this context. But sure, it’s possible.

Walter

On Jul 15, 2008, at 7:17 AM, Sam wrote:

Draw a colored HTML box on the page. Apply the Protaculous Action[1] to the page, and select scriptaculous-packed from the library menu. Click on either of the Function Body buttons in the Actions palette, and paste the following in there:

$(‘thing1’).morph(‘background-color:#999999’,{duration:3,delay:1});

Hi Walter this is perfect I really liked smooth morphing effect At this code it just morphs once (thing1gray) and then stops. Is it possible to morph it in a loop (colour1colour2colour3colour1)

Thanks Sam

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

HTML Animation

Sam — Tue, 15 Jul 2008 02:52:40 -500

Is there anyway to create simple animation (colours fade-in and fade-out) with pure html objects, like this GIF animation….

http://www.thebookdesign.com/ani/animation.html

I’d remain grateful. Many thanks

Sam

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options