In questo tutorial vedremo come utilizzare jQuery ed Ajax per caricare dinamicamente dei contenuti all’interno di un’animazione creata utilizzando Adobe Edge Animate.
In questo tutorial tratteremo i seguenti argomenti:
- Ajax con jQuery
- Azioni su bottoni
- Azioni all’avvio
INTRODUZIONE
Edge Animate utilizza come base per le sue API la libreria javascript jQuery, noi sfrutteremo questa caratteristica per caricare dinamicamente tramite Ajax del testo all’interno di un’animazione.
Se non avete molto chiaro cosa sia Ajax o la libreria jQuery eccovi subito il risultato del tutorial
Cliccando su “RELOAD TEXT” vi si caricherà dinamicamente una nuova stringa di testo proveniente da una sorgente esterna.
CREIAMO IL CONTENITORE PER L’OUTPUT
Creiamo un testo sullo stage e diamogli una dimensione abbastanza grande
da poter contenere il testo caricato dinamicamente, come nome scegliamo
“Placeholder”.
Su questo testo ho
creato un’animazione per rendere meglio l’idea del tutorial (variando
colore e dimensione), ma ai fini tecnici non risulta essenziale quindi
non verrà trattata in questo tutorial.
Se volete avere maggiori informazioni riguardo le animazioni
potete dare uno sguardo a Edge Animate Tutorial: Animazione di Simboli.
CREIAMO IL PULSANTE CHE SCATENA L’EVENTO
Creiamo un testo sul nostro stage, scriviamo al suo interno “RELOAD TEXT” a settiamo come nome dell’oggetto “btnReload”.
RECUPERIAMO IL CONTENUTO VIA AJAX
Clicchiamo col pulsante destro sull’oggetto “btnReload” e selezionamo “Open Actions for btnReload”, si aprirà una finestra.
Clicchiamo sul pulsante [+] in alto a sinistra e selezionamo l’evento “click” dal menù a tendina.
All’interno della finestra inseriamo le seguenti righe di codice:
$.ajax({
url: ‘ajax.php’,
dataType: ‘json’,
success: function(data) {
sym.$(“Placeholder”).html(data);
}
});Il codice chiama la funzione jQuery.ajax() (abbreviata in $.ajax()) passandogli tre parametri:
- url: è l’indirizzo dello script che tornerà la stringa di output
- dataType: è il tipo di dato ritornato, nel nostro caso json
- success: è la funziona che riceve l’output, lo elabora e lo va a visualizzare
La funzione definita in “success” riceve l’output nella variabile “data” e lo inserisce all’interno del nostro oggetto di testo “Placeholder”.
Le opzioni e le potenzialità di jQuery.ajax() sono innumerevoli, per avere una visione totale della funzione e dei suoi parametri potete visitare la pagina ufficiale sul sito di jQuery: funzione jQuery.ajax().
Lo script “ajax.php” che ritorna la stringa di testo è il seguente
<?php
switch(rand(1,5))
{
case 1:
echo json_encode(‘This text is loaded dynamically from an external source via ajax.’);
break;
case 2:
echo json_encode(‘This text is loaded externally, jQuery calls a php script that returns json.’);
break;
case 3:
echo json_encode(‘This content is loaded via ajax using jQuery.ajax() function.’);
break;
case 4:
echo json_encode(‘You can load every content you want from dom, xml, json and also plain text’);
break;
case 5:
echo json_encode(‘Adobe Edge using jQuery can load dynamic content form every source.’);
break;
}
?>questo file deve essere raggiungibile dall’url che avete settato nello script jQuery e deve essere ospitato su un server con supporto PHP.
Lo script PHP ritorna semplicemente una stringa casuale fra 5 possibili, ma ovviamente potrebbe fare qualsiasi tipo di azione come la connessione ed il recupero di dati da un database esterno.
RECUPERIAMO IL CONTENUTO ALL’AVVIO
Al momento l’azione di recupero del testo avviene solamente alla pressione del pulsante “btnReload”.
Per
fare in modo che avvenga anche all’avvio dell’animazione selezionate lo
stage (deselezionando l’oggetto con focus) ed in alto a sinistra
cliccate su “Open Actions”, vi si aprirà una finestra.
Qui
cliccate su [+] in alto a sinistra e selezionate “creationComplete”,
nella finestra incollate lo stesso codice utilizzato per “btnReload”.
Come potete vedere grazie a questo sistema potete caricare all’interno delle vostre animazione create con Edge Animate, qualsiasi tipo di contenuto proveniente da database, html, xml e più in generale da qualsiasi fonte che possa essere letta utilizzando jQuery.ajax().
Buongiorno
sono capitato casualmente nel suo sito mentre cercavo consigli per fare delle animazioni, e ho scperto Adobe Edge grazie ai suoi tutorial brevi e molto chiari, quindi per prima cos la vorrei ringraziare del tempo che dedica a scrivere questi articoli e ci tengo a dirle che c’è gente come me che aprezza molto il suo lavoro. Vorrei però chiederle un consiglio. Vorrei fare un sito dove tenere materiale del gruppo degli amici, vorrei farlo con edge per renderlo più simpatico, al momento sto facendo delle prove ma mi sono bloccato perchè non conosco il comando per entrare in altre pagine (link interni) cliccando sui vari menù. Potrebbe fare un tutorial di questo argomento?
Le auguro buon lavoro.
Andrea
Innanzitutto grazie per i complimenti 🙂
In attesa di un vero e proprio Tutorial ti do già una risposta veloce.
Nell’azione legata all’oggetto inserisci questo codice:
window.open(“http://www.tuosito.it/pagina-che-vuoi-aprire.html”, “_self”);
Così dirai al browser di andare su “pagina-che-vuoi-aprire.html” utilizzando la stessa finestra, se vuoi aprire una nuova finestra puoi usare “_blank” al posto di “_self”.
Ciao Riccardo, mi puoi dare una mano?
Ho creato un’animazione con Adobe edge, però un elemento della mia animazione dovrebbe essere cambiato a secondo di un parametro che passerò alla pagina. Mi chiedevo come poter fare questo. Premetto che quando chiamerò la pagina saprò già quale sarà il valore di questo elemento. Da dentro adobe Edge, me bastava scrivere : sym.$(“Text”).html(“NewText”);
Ma dalla pagina html o asp come faccio a passare il valore di “TEXT” ?
Ho cercato di capire qualcosa da questo tuo articolo, ma non ho avuto molto successo.
Grazie, Carla.
Ciao Carla! Per passare ad Adobe Edge Animate un parametro (ad esempio una dato proveniente da GET o POST) basta scrivere una variabile in javascript nella stessa pagina che include il js di Edge, mi spiego meglio: nella pagina in cui includi index_edgePreload.js basta scrivere un ibrido js / php / asp
<script type="text/javascript" charset="utf-8">var textValue = '<?php echo $_GET['textValue']; ?>';
</script>
e da dentro al file di Edge Animate richiamare la variabile tipo così:
sym.$("DynamicText").html(textValue);ciao,
tutorial molto interessante!
sto cercando di integrare edge con wordpress
mi spiego meglio, creo l’animazione con edge che andrà nell’header e quest’animazione avrà anche dei pulsanti che richiameranno le pagine o i post creati in wordpress
in questo caso come devo scrivere l’azione sul pulsante affinché mi carichi la pagina o il post senza refreshare l’intera home page?
grazie!
Ciao Elda,
inizio con un discorso più generale: sconsiglio di caricare via ajax pagine WordPress perché può capitare che pagine differenti contengano script o plugin differenti che non sono caricati in tutte le pagine e quindi non funzionino.
Detto questo comunque la logica dovrebbe essere come quella di questo tutorial solamente che:
– nella chiamata $.ajax() il campo “url” sarà uguale al valore restituito dalla funzione admin_url(‘admin-ajax.php’) del tuo WordPress (solitamente è “http://tuosito.tld/wp-admin/admin-ajax.php”), poi dovrai passare in get o post come “data” l’id (o lo slug) della pagina ed il NOMETUAFUNZIONE da richiamare;
– la funzione che io ho messo dentro ad ajax.php dovrai metterla dentro a functions.php del tuo tema WordPress e dovrà fare un “recupero l’id della pagina da visualizzare da get/post/request, estraggo il contenuto di questa pagina e lo restituisco in echo”. Poi dovrai collegare questa funzione al hook ajax di WordPress grazie a “add_action(‘wp_ajax_nopriv_NOMETUAFUNZIONE’, ‘NOMETUAFUNZIONE’);”
Per maggiori info su ajax e wordpress ti link la paigna ufficiale: http://codex.wordpress.org/AJAX_in_Plugins
Non è sicuramente una cosa semplice, ma con un po’ di tempo se ne dovrebbe venire fuori 🙂