simple animation

Freeway
1

Hi folks…

What I’m looking to do is make very simple animation, but I don’t know if I need to use FLASH or can easily do it in HTML inside Freeway.

I’m looking for basically alternating items to be displayed in a simple form of animation…like lights that appear to be flashing around the main item:

bulb numbers 1,3,5,7,9 on, bulbs 2,4,6,8 off. Then switch to bulbs 1,3,5,7,9 off and bulbs 2,4,6,8 on…does that make sense? That would give the appearance of movement of the lights around the main object.

I’d like this to be a static action…something that is ‘flashing’ with or without a rollover.

Any suggestions??

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

2

You could make this pretty simply using Prototype.js (through the
Protaculous Action, available on ActionsForge) and AddSelector (or
just the Extended dialog).

The quickest way to lay this out will be to set up two image boxes,
then duplicate them to make your alternating blinkenlights. Draw a
graphic box, fill it with your first image, then apply the AddSelector
Action to it. Use that Action to add the class ‘even’ to the box. Now
do the same thing to a new image, but set it to the class ‘odd’.
Duplicate the images until you have all of your even and odd images,
and place them where you would like them to appear.

Next, apply Protaculous to the page, and select protaculous-packed
from the library picker. Click on the top Function Body button, and
enter the following:

var evens = $$('.even');
var odds = $$('odd');
var flash = function(){
	if(evens.first().visible()){
		evens.invoke('hide');
		odds.invoke('show');
	}else{
		odds.invoke('hide');
		evens.invoke('show');
	}
};
new PeriodicalExecuter(flash, 5);

Now everything with these classnames applied will flash off and on
every 5 seconds, but you can change that to any interval you like by
editing the last line of the code. If you want to flash at less than 1
per second, use 0.3 (decimal) notation.

You could use other techniques for getting the classname onto the
images, if you create a style using the Styles palette, you could
probably get it to attach to the images, but that might not work
predictably – Freeway is sometimes funny about what it does with
“empty” styles or applying styles to non-text content. You can also
use the Item > Extended dialog to add the class by pressing New, then
entering class in the Name field and even (or odd) in the Value field.
This gets to be a pain, though.

Walter

On Dec 30, 2008, at 2:00 AM, Jimmydreams wrote:

Hi folks…

What I’m looking to do is make very simple animation, but I don’t
know if I need to use FLASH or can easily do it in HTML inside
Freeway.

I’m looking for basically alternating items to be displayed in a
simple form of animation…like lights that appear to be flashing
around the main item:

bulb numbers 1,3,5,7,9 on, bulbs 2,4,6,8 off. Then switch to bulbs
1,3,5,7,9 off and bulbs 2,4,6,8 on…does that make sense? That
would give the appearance of movement of the lights around the main
object.

I’d like this to be a static action…something that is ‘flashing’
with or without a rollover.

Any suggestions??

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

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

3

On Dec 30, 2008, at 1:47 PM, Walter Lee Davis wrote:

Next, apply Protaculous to the page, and select protaculous-packed
from the library picker. Click on the top Function Body button, and
enter the following:

One omission, and one typo corrected. Here’s the tested version of
this script. It works pretty well. 5 seconds between blinks was pretty
aeon-like, so I changed that to a half-second. I also left the leading
dot off of the odd classname and forgot to run the blink function once
first to prime the pump before the PeriodicalExecutor started its cycle.

var evens = $$('.even');
var odds = $$('.odd');
var flash = function(){
	if(evens.first().visible()){
		evens.invoke('hide');
		odds.invoke('show');
	}else{
		odds.invoke('hide');
		evens.invoke('show');
	}
};
flash();
new PeriodicalExecuter(flash, 0.5);

Walter

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