Dinamizzare una presentazione SMIL con ASP
Le presentazioni SMIL possono essere eseguite in pagine Web di qualsiasi tipo come le pagine HTML tradizionali oppure pagine Web dinamiche come ASP, PHP e cosi via.
Esaminiamo come rendere dinamica una presentazione SMIL eseguendola in un file ASP.
L'esempio che andiamo a realizzare è solo uno dei tanti espedienti che si possono usare per dinamizzare le presentazioni SMIL, quindi lo si prenda solo come consiglio didattico.
Al click su uno dei bottoni che vediamo sulla pagina all'atto del caricamento della presentazione, attiviamo differenti effetti di transizione su un'immagine che sarà visibile solo a click avvenuto.
vediamo un esempio di codice:
<%@LANGUAGE = VBScript%>
<%
Dim effetto
effetto = Request.QueryString("effetto")
Dim filtro(2)
filtro(0) = "clockWipe"
filtro(1) = "fade"
%>
<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
<?import namespace="time" implementation="#default#time2">
<style type="text/css">
.time
{
behavior: url(#default#time2);
}
</style>
<script type="text/javascript">
function effetto(id)
{
location.href = "smil.asp?effetto=" + id;
}
</script>
<head>
<body>
<input type="button" value="Effetto clock" onclick="effetto(0)">
<input type="button" value="Effetto fade" onclick="effetto(1)">
<%
If effetto <> "" Then
%>
<br /><br />
<time:transitionfilter
targetelement="X"
type="<%=filtro(effetto)%>"
begin="X.begin"
dur="5s" />
<img src="immagine.gif" id="X" class="time" />
<%
End If
%>
</body>
</html>
Prima dell'apertura del codice SMIL specifichiamo, in un blocco ASP, un array che contiene diversi effetti di transizione. Consiglio la lettura di questa lezione della guida a SMIL di Mr. Webmaster per un elenco completo degli effetti disponibili.
A questo punto verifichiamo che la querystring sia stata valorizzata, ovvero che il click sul bottone di scelta sia avvenuto, allo scopo di mostrare l'immagine filtrata dal relativo effetto scelto.
Lanciate il file smil.asp all'indirizzo:
http://localhost/smil.aspSegue un'anteprima dell'effetto di transizione clockWipe sull'immagine:
