¿Cómo puedo crear animaciones interactivas sin Flash? [cerrado]

Creo que todo eso podría hacerse con la animación SVG SMIL. El inconveniente inmediato de esto es que actualmente no es compatible con ninguna versión de Internet Explorer, por lo que es una solución bastante poco práctica. ^[1]

Aquí hay un ejemplo básico de una imagen SVG giratoria (tomada de Wikipedia ):

Los efectos de mouseover se pueden agregar con JavaScript

Dependiendo de los navegadores que necesite admitir, puede salirse con la suya con css3. Pequeña muestra http://jsfiddle.net/4Vz63/1/ Acabo de buscar en Google 'rotación continua css3'. ¿Quizás puedas usar 2 gifs animados diferentes para cada equipo y usarlos para fondos de pequeños divs? De esta manera, puede controlar el evento moseover y mouseout (use más claro para uno más oscuro para el otro). Es posible que deba usar js para controlar el resto de los elementos: líneas y elementos de texto.

Suena como algo que podrías hacer entre varias imágenes, gifs para cualquiera de los engranajes giratorios y css. Como no en animaciones css3, sino en código antiguo que funciona en todos los navegadores.

La forma más fácil es con javascript o jquery, pero necesitaría entender javascript para eso.

Con respecto a su otra pregunta con el ejemplo de jfiddle, intente agregar:

onmouseover="this.style.opacity=1.0;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity=20"

a la etiqueta div.

Si esa biblioteca de Rafael no está disponible, aún puede usar este método, por ejemplo, con un gif animado:

Coloque el gif en la página y luego superponga divs con un radio de esquina grande para crear regiones semiopacas circulares dispuestas encima del gif, y luego el texto emergente como un elemento div oculto separado, quizás con coordenadas absolutas negativas. Cuando pasa el mouse sobre un div en particular, reduce la opacidad y luego reposiciona el cuadro de texto adecuado y establece la visibilidad del div de texto en 'visible'.

Si bien puede simplificar las cosas si el gif es un solo elemento, probablemente sea más conservador para el ancho de banda colocar cada engranaje individualmente. En este caso, coloca cada gif en un div y ajusta la opacidad con el desplazamiento.

Tenga en cuenta también que para un solo engranaje aislado, no necesita animar una rotación completa de 360 ​​%: para la rotación en el sentido de las agujas del reloj, solo necesita animar de manera que el diente a la izquierda del que está en las 12 llegue a las 12 posición de las horas.

Personalmente, me gusta la sensación del lado del cliente animado sobre la marcha, pero tenga cuidado con los problemas de soporte del navegador y especialmente con el tiempo de procesamiento de la CPU. Esta es la navegación principal o al menos la edad de aterrizaje, así que pruébalo en una computadora más antigua.