In questo tutorial vedremo come passare ed utilizzare dei dati variabili con un’animazione realizzata in Edge Animate.
INTRODUZIONE
Ci sono situazioni in cui serve avere animazioni che variano in base a dei specifici parametri, per fare questo in Adobe Edge Animate utilizzeremo delle variabili javascript instanziate da dei parametri passati alla pagina.
In questo esempio viene passato nell’url il parametro param con valore “variable value” e recuperato con PHP.
In questo tutorial recupereremo i dati utilizzando PHP in quanto è un lingaggio comodo e veloce, ma si possono tranquillamente utilizzare altre tecnologie come ASP.NET o anche solamente javascript.
Per fare ciò dividiamo il tutorial in due parti:
- recupero delle informazioni inviate alla pagina;
- utilizzo delle informazioni nell’animazione realizzata in Edge Animate.
1. RECUPERIAMO I DATI INVIATI ALLA PAGINA
Premessa: quando parlerò della “pagina” intenderò la pagina in cui dovrà essere inclusa la vostra animazione creata utilizzando Edge Animate.
Passiamo un parametro in get inserendolo nell’url della nostra pagina:
page.php?param=variable%20valueUtilizziamo PHP per recuperarlo ed inserirlo all’interno di una variabile javascript:
<script charset=”utf-8″ type=”text/javascript”>
var paramValue = ‘<?php echo $_GET[‘param’]; ?>’;
</script>In questa maniera avremmo all’interno della variabile paramValue il valore passato alla pagina.
2. UTILIZZIAMO I DATI NELL’ANIMAZIONE EDGE ANIMATE
Adesso abbiamo il nostro dato in una variabile javascript, come facciamo a recuperalo all’interno di Edge Animate?
Niente di più semplice! Basta richiamare il nome della variabile in qualsiasi punto di uno script di Edge Animate.
Ad esempio se creiamo un campo di testo dinamico e vogliamo che il contenuto di questo sia il valore della nostra variabile paramValue basterà scrivere questa riga di codice
sym.$(“dynamicText”).html(paramValue);In questa maniera il contenuto del campo di testo DynamicText sarà uguale alla nostra variabile paramValue settata nella nostra pagina.
Puoi scaricare il file .an di Edge Animate e la versione compilata del tutorial cliccando qui sotto:
Pacchetto tutorial Edge Animate: passare dati ad un’animazione
Come potete vedere in questa maniera potrete passare in get, post, put o qualsiasi metodo vogliate dei dati ad una vostra animazione Edge Animate per poterla variare dinamicamente.
Se avete domande su questo tutorial o su argomenti correlati, come ad esempio il recupero di dati da post o l’utlizzo di altri linguaggi diversi da PHP, lasciate pure un commento qui sotto.
Ringrazio Carla per il commento lasciato su Edge Animate Tutorial: contenuto dinamico utilizzando Ajax e che ha portato alla realizzazione di questo tutorial.
