Scoprite come creare siti Web Muse interattivi ricchi di contenuti utilizzando le animazioni e gli effetti di scorrimento creati con Edge Animate.

Nota:

Non verranno più aggiunte ulteriori funzioni ad Adobe Muse, e il supporto verrà sospeso a partire dal giovedì 26 marzo 2020. Per ulteriori informazioni e assistenza, consultate la pagina dedicata alla fine del ciclo di vita di Adobe Muse.

Adobe Edge Animate è uno strumento per la creazione di esperienze di interazione Web che permette di inserire nei siti contenuti animati, utilizzando standard come HTML5. Potete usare l’interfaccia intuitiva basata su timeline in Animate per creare visivamente animazioni HTML5 coinvolgenti che possono essere riprodotte quando vengono visualizzate in tutti i browser più recenti.

Preparazione delle animazioni in Animate

Prima di aggiungere in Muse dei contenuti creati con Animate, potete apportare alcune modifiche per preparare il file Animate in modo da poter incorporare direttamente i contenuti in Muse. Effettuate una delle seguenti operazioni:

  1. Avviate Animate. Viene visualizzata la finestra iniziale.

  2. Fate clic su Open File (Apri file), quindi individuate e selezionate il file del progetto di esempio scaricato, con estensione .an. In alternativa, aprite un file Animate che avete creato.

    Adobe Muse consente di incorporare le animazioni Edge Animate.
    Fate clic sul collegamento Open File (Apri file) nella finestra iniziale.

  3. Fate clic su Open (Apri) per aprire il file .an e chiudere la finestra di dialogo Open (Apri). Il progetto viene visualizzato nell’area di lavoro di Animate.

    Il progetto viene visualizzato
    Il progetto Animate viene visualizzato nell’area di lavoro.

    Le animazioni create in Animate possono essere impostate per la riproduzione automatica o per la riproduzione a seguito di un clic su un’immagine statica. L’esempio SkyScraper è impostato per la riproduzione automatica e non richiede alcun intervento da parte dell’utente. Tuttavia, se la riproduzione automatica è disattivata, sulla pagina viene visualizzata un’immagine statica finché non si fa clic sull’animazione. Per visualizzare un esempio di un’animazione senza riproduzione automatica, visitate Animate Showcase.

    Nota:

    per determinare se un’animazione è impostata per la riproduzione immediata, selezionate l’area di lavoro quindi selezionate o deselezionate la casella di controllo Autoplay (Riproduzione automatica) nel pannello Properties (Proprietà).

    Opzione Autoplay (Riproduzione automatica)
    Per attivare la riproduzione automatica, selezionate la proprietà Autoplay (Riproduzione automatica).

  4. Fate clic sull’immagine di sfondo per selezionarla nell’area di lavoro. Quando è selezionata, compare un rettangolo di selezione blu e il pannello Properties (Proprietà) a sinistra presenta le proprietà dell’immagine (denominata Image2 in questo esempio). Premete Backspace (Windows) o Ritorno unitario (Mac OS) per rimuovere il file dell’immagine di sfondo.

    Rettangolo di selezione blu
    Selezionate l’immagine di sfondo ed eliminatela.

  5. Con l’area di lavoro ancora selezionata, fate clic sul campione di colore corrispondente nel pannello Properties (Proprietà) e impostate l’opzione Transparent (Trasparente).

    Opzione Transparent (Trasparente)
    Impostate la proprietà di sfondo dell’area di lavoro su trasparente.

    Nota:

    il contenuto dell’area di lavoro si presenta con uno sfondo bianco; lo sfondo trasparente verrà visualizzato nell’area di lavoro solo se esportate o visualizzate l’anteprima dell’animazione.

  6. Scegliete File > Save (Salva) per salvare le ultime modifiche.

  7. Scegliete File > Publish Settings (Impostazioni pubblicazione) per aprire la finestra di dialogo corrispondente.

  8. Nella colonna Publish Target (Destinazione pubblicazione) a sinistra, deselezionate la casella di controllo Web e selezionate l’opzione Animate Deployment Package (Pacchetto implementazione Animate).

  9. Fate clic su Save (Salva) per salvare le modifiche e chiudere la finestra di dialogo delle impostazioni di pubblicazione.

  10. Scegliete File > Publish (Pubblica) per pubblicare il progetto.

  11. Uscite da Animate. In Esplora risorse (Windows) o nel Finder (Mac OS) individuate la cartella del progetto Animate sul disco rigido. Una volta pubblicato il progetto, diventa disponibile una cartella denominata Animate Package (Pacchetto Animate). Il file .OAM presente in questa cartella viene utilizzato per aggiungere il contenuto Animate al sito Muse.

  12. Copiate il file .OAM e salvatelo nella cartella sul desktop contenente tutte le altre immagini e risorse del sito Web. Procedete quindi con la sezione successiva per inserire il contenuto Animate in una pagina.

Inserimento di animazioni create in Animate nella pagina di un sito Web Muse

Per aggiungere animazioni a una pagina del sito Web creato in Muse, effettuate le seguenti operazioni:

  1. Avviate Adobe Muse e aprite il sito da modificare.

  2. Nella vista Pianificazione, fate doppio clic sul nome della pagina in cui desiderate aggiungere l’animazione.

  3. Scegliete File > Inserisci, quindi individuate e selezionate il file .OAM nella cartella del sito.

  4. Fate clic una volta sulla pagina per inserire l’animazione.

    Nota:

    a differenza dell’inserimento di immagini, non potete trascinare per ridimensionare l’animazione Animate mentre la inserite. Per inserire il contenuto in dimensioni diverse, è necessario aggiornare il progetto Edge e pubblicare nuovamente il file .OAM.

  5. Utilizzate lo strumento Selezione per posizionare l’animazione sulla pagina nella posizione desiderata. Anche se lo sfondo dell’animazione sembra opaco in Muse, sarà comunque trasparente quando visualizzate la pagina in anteprima o la pubblicate.

  6. Scegliete File > Anteprima pagina nel browser per verificare la corretta visualizzazione dell’animazione. Per apportare eventuali modifiche, tornate a Muse e riposizionate gli elementi di pagina. Nel pannello Risorse potete osservare che il file .OAM è ora elencato come una risorsa. Le animazioni create con Edge Animate possono essere ricollegate e aggiornate come qualsiasi altra risorsa del sito.

    Ad esempio, se tornate ad Animate potete aprire il progetto e modificarlo. In seguito, quando ripubblicate il file .OAM e lo sostituite alla versione presente nella cartella del sito, nel pannello Risorse viene visualizzata l’icona di collegamento non aggiornato, a indicare che il file originale è stato modificato dopo l’inserimento della risorsa nella pagina.

    Per aggiornare il file inserito, fate clic con il pulsante destro del mouse sul nome del file .OAM nel pannello Risorse e scegliete Ricollega.

    L’opzione Ricollega aggiorna la risorsa inserita in base alle modifiche apportate al file sorgente. Questo metodo consente di aggiornare l’animazione più rapidamente rispetto a un’operazione manuale di eliminazione e sostituzione dei file.

  7. Fate clic sul collegamento Pubblica nel pannello di controllo. Scegliete le opzioni desiderate e fate clic su OK per pubblicare gli aggiornamenti del sito.

Per ulteriori informazioni sulla creazione di contenuti per Web HTML5 e animazioni con Adobe Edge Animate, consultate le risorse dedicate ad Adobe Edge Animate. Per ulteriori suggerimenti sull’utilizzo di Muse, visitate la pagina dedicata all’Aiuto e alle esercitazioni di Muse oppure la pagina dedicata agli eventi Muse per webinar in diretta e registrati.

Incorporamento di contenuto multimediale per aggiungere animazione al sito

  1. Nella vista Pianificazione, fate doppio clic sulla miniatura MasterFlash per aprirla e modificarla nella vista Progettazione. Poiché avete duplicato la pagina A-Mastro, l’immagine statica del logo è ancora presente e può essere utilizzata per posizionare il rettangolo dell’animazione. Tuttavia, accertatevi di eliminare l’immagine statica del logo dopo aver incorporato l’elemento multimediale.

  2. Scegliete File > Inserisci. Nella finestra di dialogo Importa, cercate dentro la cartella Kevins_Koffee_Kart e selezionate il file denominato logo.swf.

  3. Inserite il file SWF nell’angolo in alto a sinistra, in corrispondenza della posizione dell’immagine del logo esistente.

  4. Dopo aver allineato la nuova finestra SWF appena inserita al precedente logo statico, selezionate quest’ultimo e premete il tasto Canc per eliminarlo.

  5. Per controllare come si presenta il sito con le modifiche apportate alla pagina Home, scegliete File > Anteprima del sito nel browser e controllate il logo nelle varie pagine. Senza pubblicare il sito, potete lavorare localmente sul vostro computer e visualizzare un’anteprima del sito in un browser per fare clic nell’area di navigazione del sito e passare alle varie pagine. L’animazione (file SWF) viene visualizzata una sola volta e quindi si interrompe nella pagina Home. Se fate clic su altre pagine, viene visualizzato solo il logo statico.

    Nota:

    se scegliete File > Anteprima pagina nel browser, la nuova finestra del browser viene caricata rapidamente per visualizzare la pagina Home, ma si tratta solo di un’anteprima della pagina attiva (Home). Scegliete questa opzione per verificare una pagina del sito, anziché l’intero sito Web.

Aggiunta di effetti di scorrimento alle animazioni

Adobe Muse consente di aggiungere alle pagine Web delle animazioni create con Adobe Edge Animate. Per utilizzare gli effetti di scorrimento Adobe Edge Animate, occorre innanzitutto creare un’animazione specificamente per questo scopo.

In Adobe Muse è possibile applicare ai file OAM degli effetti di scorrimento che agiscano sulle animazioni inserite nella timeline principale. Potete progettare l’animazione in modo che la timeline principale contenga solo gli elementi che si dovranno spostare con lo scorrimento della pagina. Tutti gli altri elementi dell’animazione dovranno essere inseriti in timeline nidificate. Quando un visitatore fa scorrere la pagina, le impostazioni degli effetti di scorrimento agiranno solo sulla riproduzione degli elementi animati presenti nella timeline principale.

Per ulteriori informazioni sugli effetti di scorrimento in Adobe Muse, consultate Effetti di scorrimento.

Per utilizzare la scheda Presentazione del pannello Effetti di scorrimento:

  1. Esportate un file OAM Animate e salvatelo nella cartella del sito. Per informazioni sull’esportazione di file OAM da Animate, consultate Inserimento di animazioni in Adobe Muse.
  2. Avviate Muse e fate doppio clic su una pagina per aprirla nella vista Progettazione. Verificate che la pagina sia sufficientemente lunga da richiedere lo scorrimento, impostando l’altezza minima nella finestra di dialogo Proprietà di pagina.
  3. Scegliete File > Inserisci e selezionate il file OAM nella cartella del sito.
  4. Aprite il pannello Effetti di scorrimento. Fate clic sulla scheda Adobe Edge Animate (quarta scheda da sinistra) e osservatene le impostazioni.
  5. Con il file OAM selezionato, attivate la casella di controllo Edge Animate.
Pannello Effetti di scorrimento
Impostate l’animazione Edge Animate in modo che la riproduzione inizi quando la pagina raggiunge una determinata posizione oppure impostatela per passare al fotogramma successivo ogni volta che la pagina scorra di una distanza specifica (in pixel).

Nell’immagine qui sopra, la posizione chiave è impostata su 700 pixel. Per modificare tale valore, potete trascinare la maniglia a T oppure immettere un valore diverso nel campo Posizione chiave.

Dopo aver impostato la posizione chiave, potete controllare la riproduzione dell’animazione mediante due opzioni:

  • Riproduzione automatica: quando questa opzione è selezionata, l’animazione nella timeline principale viene riprodotta non appena la pagina scorre oltre la posizione chiave, indipendentemente dal numero di fotogrammi presenti nella timeline principale. La riproduzione dell’animazione continua finché la pagina non ritorna al di sopra della posizione chiave.
  • Cambia fotogrammi ogni: quando questa opzione è selezionata, l’animazione della timeline principale avanzerà di un fotogramma ogni volta che la pagina venga fatta scorrere del numero di pixel specificato. Ad esempio, se create una pagina con un’altezza di 3000 pixel e immette 10, l’animazione della timeline principale verrà riprodotta alla velocità di 1 fotogramma ogni 10 pixel di scorrimento della pagina. Se il visitatore scorre la pagina più velocemente, aumenta anche la velocità dell’animazione.

Nota:

le impostazioni Effetto di scorrimento non hanno alcun effetto sugli oggetti animati nidificati o collegati dalla timeline principale nella composizione di Animate. Potete quindi optare per uno sfondo statico o per la riproduzione continua degli elementi nidificati, che si muoveranno sempre allo stesso modo indipendentemente dallo scorrimento della pagina da parte del visitatore.

  1. Dopo aver scelto le impostazioni nella scheda Edge Animate del pannello Effetti di scorrimento, scegliete File > Anteprima pagina nel browser (o fate clic sul pulsante Anteprima). Verificate il funzionamento della pagina facendola scorrere verso l’alto e il basso per vedere come viene riprodotto il contenuto dell’animazione Edge Animate (aggiunto alla timeline principale).
  2. Se dovete apportare modifiche, tornate a Muse (o fate clic sul pulsante Progettazione) e modificate le impostazioni nel pannello Effetti di scorrimento.

Esempio

Questo esempio illustra come gestire i file OAM esportati da Adobe Edge Animate mediante gli effetti di scorrimento. In questo esempio, la pagina è stata riempita con una sfumatura verticale che va dal turchese chiaro al blu scuro. È possibile scaricare il file da ScrollEffects.com.

L’effetto di animazione è ottenuto con una combinazione di impostazioni applicate nelle schede Movimento ed Edge Animate.

Tre istanze dello stesso file OAM sono state inserite affiancate in orizzontale, in modo da formare una fila di bussole animate. Quando guardate il sito di esempio in un browser, tutte e tre le bussole entrano in posizione e quindi si fermano. Le tre bussole sembrano girare a velocità diverse: questo è dovuto alle impostazioni del pannello Effetti di scorrimento e non al modo in cui è stato creato il file Edge Animate.

Per creare un effetto simile con tre file OAM inseriti:

  1. Nella vista Progettazione, scegliete Pagina > Proprietà di pagina. Impostate il campo Altezza minima su un valore elevato. In questo sito di esempio, l’altezza minima della pagina è impostata su 7465 pixel.
  2. Selezionate tutte e tre le istanze della bussola sulla pagina. Nella scheda Movimento del pannello Effetti di scorrimento, osservate come tutti i valori sono visualizzati: questo significa che tutti i file OAM hanno la stessa posizione chiave e le stesse impostazioni di movimento.
Stesse posizioni chiave e impostazioni di movimento
Le bussole si alzano finché la pagina scorre fino alla loro posizione chiave, quindi restano in posizione mentre la pagina continua a scorrere verso il basso.

Osservando un’anteprima del sito di esempio in un browser, potete vedere i tre elementi OAM che si spostano insieme verso l’alto e quindi restano in fila come se fossero stati fissati in posizione.

  1. Fate clic fuori dalle bussole per deselezionarle, quindi selezionate solo la bussola a sinistra. Tenete premuto il tasto Maiusc e selezionate la bussola a destra, in modo che siano entrambe selezionate. Aprite la scheda Edge Animate del pannello Effetti di scorrimento e osservatene le impostazioni.
Cambia fotogrammi ogni 350 pixel
Per le due bussole laterali, il campo Cambia fotogrammi ogni è stato impostato su 350 pixel.

Le due bussole laterali sono configurate in modo da passare al fotogramma successivo dell’animazione della timeline ogni volta che la pagina scorre di 350 pixel verso il basso.

  1. Deselezionate le due bussole laterali. Selezionate la bussola centrale e osservate di nuovo la scheda Edge Animate: in questo caso il campo Cambia fotogrammi ogni è impostato su 400 pixel. L’animazione centrale si muove quindi più lentamente rispetto alle due bussole laterali.
Cambia fotogrammi ogni 400 pixel
Per il file OAM centrale, il campo Cambia fotogrammi ogni è impostato su 400 pixel.

Per creare effetti di animazione interessanti, provate a variare la velocità di diverse animazioni Edge Animate inserite, rispetto alla velocità di scorrimento della pagina. Ad esempio, potete creare un banco di pesci, un cielo pieno di nuvole che scorrono o altri effetti aggiungendo più copie dello stesso file OAM con diverse impostazioni di effetto di scorrimento.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online