Nella scorsa lezione abbiamo visto gli attributi necessari a specificare manipolazioni del tempo, ora costruiremo una presentazione che sfrutta tali funzionalità.

Prendiamo una versione semplificata della presentazione costruita due lezioni fa:

…

<body>
<par dur=”10″>
  <img src=”media/particolare.jpg” width=”50″ height=”50″ fit=”meet” dur=”10″>
    <animate dur=”10″ attributeName=”left” from=”0″ to=”355″/>
  </img>
</par>
</body>

…

Inseriamo, a questo punto, un effetto di accelerazione in entrata e di decelerazione in uscita all’animazione:

…

<body>
<par dur=”10″>
  <img src=”media/particolare.jpg” width=”50″ height=”50″ fit=”meet” dur=”10″>
    <animate dur=”10″ attributeName=”left” from=”0″ to=”355″
          accelerate=”0.3″ decelerate=”0.3″ />
  </img>
</par>
</body>

…

Procediamo inserendo un’altra animazione che faccia oscillare verticalmente l’immagine, esattamente come due lezioni fa, solo che ora utilizziamo l’attributo autoReverse:

…

<body>
<par dur=”10″>
  <img src=”media/particolare.jpg” width=”50″ height=”50″ fit=”meet” dur=”10″>
    <animate dur=”10″ attributeName=”left” from=”0″ to=”355″ accelerate=”0.3″ decelerate=”0.3″ />
    <animate dur=”1″ attributeName=”top” from=”0″ to=”50″
          autoReverse=”true” repeatCount=”5″ />
  </img>
</par>
</body>

…

Infine riproduciamo il tutto al doppio della velocità:

<?xml version=”1.0″?>

<!DOCTYPE smil PUBLIC “-//W3C//DTD SMIL 2.0//EN” “http://www.w3.org/2001/SMIL20/SMIL20.dtd”>

<smil xmlns=”http://www.w3.org/2001/SMIL20/Language”>

<head>
<layout>
  <root-layout backgroundColor=”white” width=”405″ height=”275″/>
</layout>
</head>

<body>
<par dur=”10″ speed=”2″>
  <img src=”media/particolare.jpg” width=”50″ height=”50″ fit=”meet” dur=”10″>
    <animate dur=”10″ attributeName=”left” from=”0″ to=”355″ accelerate=”0.3″ decelerate=”0.3″ />
    <animate dur=”1″ attributeName=”top” from=”0″ to=”50″ repeatCount=”5″ autoReverse=”true” />
  </img>
</par>
</body>

</smil>

In questa lezione abbiamo costruito una presentazione che sfrutta le funzionalità di manipolazione del tempo; nella prossima lezione impareremo ad adattare il contenuto di una presentazione alle capacità dei singoli sistemi.
19 / 30

Adattare la presentazione al sistema

I Video di HTML.it

Marcello Teodori, gestire il workflow JavaScript