The moo.rd Code-It Video - 2
Dopo il grande successo del precedente video apparso nella sezione Code-It di ictv, che permetteva di creare una vetrina multimediale avvalendosi della libreria moo.rd, è ora di studiare i comportamenti di un’altra interssante applicazione, esemplificata dal nuovo video denominato “Creare una hit parade animata con MooRD“.
In questa nuova presentazione, come al solito completa di file CSS, HTML e Javascript, vediamo come utilizzare i Cycles (visti nel precedente video) in collaborazione con gli effetti Fx offerti da moo.rd. Ne abbiamo a disposizione veramente tanti e tutti si presentano completamente personalizzabili.
Nunzio ha deciso di usufruire dell’effetto Fx.Shake scegliendo un andamento verticale unito ad un numero specifico di oscillazioni (parametri impostabili tramite l’oggetto options).
Otteniamo cosi delle simpatiche animazioni che si azionano quando passiamo il mouse al di sopra delle anteprime, mentre nel corpo principale della Hit Parade i Cycles cambiano ritmicamente i dischi della nostra collezione.
Come per tutti gli altri Code-It, è possibile scaricare il pacchetto zip contenente tutto il necessario presentato nel video ed analizzare i comportamenti congiunti di moo.rd e MooTools.
Riccardo, come al solito sei geniale e indispensabile a noi poveri mortali.
Ho visto video e trascrizione qui http://www.ictv.it/file/vedi/837/creare-una-hit-parade-animata-con-moord/ ed ho subito scritto un commento che contiene alcune richieste:
MIO COMMENTO
Decisamente accattivante, complimenti! Sarebbe possibile far continuare all’infinito la visualizzazione sulla finestra grande senza che, arrivati al primo in classifica, l’animazione si fermi? In altre parole, poniamo che io voglia presentare una serie di Cd (o qualsiasi altro prodotto). Sulla sinistra le icone e sulla destra la loro presentazione più larga, ma senza soluzione di continuità nell’animazione (Invece di “Al X posto abbiamo”, inserirei una breve descrizione del prodotto). Infine, non ho provato il tutto, ma credo sia semplice assegnare un link alle icone, o no? Grazie e ancora complimenti per la vostra professionalità.
RISPOSTA DI NUNZIO FIORE
@SudWebmaster è sicuramente possibile cio che descrvivi. Ti consiglio di guardare le istruzioni chain di mootools. IN questo script abbiamo concatenato delle azioni in una catenza (chain) e poi chiamato le cinque azioni con una callChain… per vedere le cinque posizioni… ma…. si puo’ ripensare la logica e vedere di fare qualcosa per un ciclo infinito… anche MooRD puo aiutarti con certi loop… potresti sentire lo stesso Riccardo Degni, inventore di MooRD, sul suo sito http://www.riccardodegni.it e farti consigliare. Saluti Nunzio Fiore
Ho colto al volo il suggerimento di Nunzio e, non essendo propriamente un genio, ti chiederei se e come sarebbe possibile, appunto,far diventare il ciclo infinito e non farlo bloccare al 1° in classifica.
In ogni caso, grazie per l’attenzione e complimenti vivissimi!
@SudWebmaster: innanzitutto ti ringrazio per i complimenti. Passando al lato tecnico, posso affermarti che “con i loop puoi ottenere ciò che vuoi”. Partiamo con il dire che per default, i Cycles entrano in un loop infinito, se li azioni con l’opzione autostart impostata a true o con il metodo autostart.
Questo farebbe proprio al caso tuo: inserisci i dischi della tua collezione in un markup adatto ai Cycles ed applichi una transizione a tua scelta (tra le tante offerte dalle classi Fx.Cycle ed Fx.Cycles): invece che crearti la catena e richiamarla con il metodo ‘callChain’ (come succede nel video per stoppare l’animazione alla prima posizione), utilizzi direttamente i Cycles per cambiare ritmicamente le slides.
Altrimenti, in una maniera più complessa, utilizzi le catene offerte da MooTools e le ‘ricarichi’ quando l’ultimo anello è stato completato. Ciò implica l’utilizzo di cicli e loop personalizzati adattati per questa determinata situazione.
E’ incredibile come dall’utilizzo della tua libreria si possano creare animazioni decisamente accattivanti come afferma giustamente SudWebmaster: nel giro di una settimana abbiamo avuto a disposizione 2 ottimi Code-It… complimenti davvero.
Dato che anch’io sto sperimentando diversi lavori con moo.RD, volevo allacciarmi alla domanda di SudWebmaster e chiederti: è possibile fare in modo, mentre è in corso un ciclo infinito creato con una classe di Fx.Cycles, che l’utente possa cambiare la slide ad una qualsiasi posizione desiderata, in un qualsiasi momento?
Grazie in anticipo e ancora complimenti a te ed allo staff di ictv!
Ti ringrazio davvero tanto per il tempo che mi hai dedicato.
Il fatto è che ho sopravvalutato le mie capacità che, effettivamente, sono oltremodo più limitate.
Non voglio più che tu dedichi nemmeno un secondo del tuo prezioso tempo a star dietro a un caprone come me.
Sono stato finora a provare e riprovare, ma non so cosa asignifichi
“inserisci i dischi della tua collezione in un markup adatto ai Cycles ed applichi una transizione a tua scelta (tra le tante offerte dalle classi Fx.Cycle ed Fx.Cycles): invece che crearti la catena e richiamarla con il metodo ‘callChain’ (come succede nel video per stoppare l’animazione alla prima posizione), utilizzi direttamente i Cycles per cambiare ritmicamente le slides”,
per cui ti ringrazio ancora tantissimo e rinnovo la mia grande ammirazione nei tuoi confronti.
Sinceramente.
Maurizio
@SudWebmaster: in parole povere, i costrutti di MooTools utilizzati nel video, come le catene, sono piuttosto avanzati e richiedono conoscenze specifiche del linguaggio e sopratutto del framework. Il mio consiglio era di usare direttamente i Cycles per azionare le animazioni sui dischi (in questo modo te la cavi con poche righe di codice).
In conclusione, anche se in questo momento ti risulta difficile, con la pratica e l’esercizio certamente riuscirai ad ottenere ciò che desideri.
@Trok: certo che è possibile, i Cycles nascono per creare slideshows full-featured completamente personalizzabili ed adattabili. Ti segnalo il link al tutorial che ho scritto tempo fa per il blog Six Revisions, dove trovi delle demo da me create che ti permettono di realizzare una galleria con navigazione ‘thumbnails-based’ e non solo.
Ciao,
mi accodo ai complimenti. Le funzioni che ho usato su CODE-IT sono utili ai fini di vedere anche qualche cosa di leggeremente piu’ avanzato con MooTools… forse SudWebmaster non abbia visto il link http://www.moord.it/examples/ in cui sono presenti Cycles… con le loro prerogative di loop.
Saluti a tutti, Riccardo attendo tue notizie al piu’ presto :),
Nunzio FIore
Credo che i miei commenti siano del tutto pleonastici.
Ad ogni modo, anzitutto mi devo scusare con Riccardo per la mia scarsa partecipazione degli ultimi tempi (ma come sai sono impegnato in un grosso progetto che, per fortuna, sta per esaurirsi) che si è manifestata non solo con bassissima “presenza” in moo.rd ma anche sul mio sito stesso.
Ciò non toglie che non sia riuscito a trovare il tempo per visionare entrambi i video: devo fare i complimenti a Nunzio per l’ottima realizzazione e per l’interessante didattica adottata.
Riccardo non ha bisogno di complimenti da parte mia, a parte la promessa di un mio rinnovato impegno (a prestissimo mi auguro) nel sostegno al progetto.
Un saluto ad entrambi ed allo staff di ictv.