Scoprite come applicare gli effetti di scorrimento Movimento e Opacità agli elementi di pagina in Adobe Muse.

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.

Applicazione degli effetti di scorrimento agli elementi di pagina

Il pannello Effetti di scorrimento contiene quattro schede per il controllo del movimento, dell’opacità, dei widget presentazione e dei contenuti Adobe Edge Animate in base allo scorrimento di una pagina. Se si applicano più effetti di scorrimento e alcuni elementi vengono inoltre fissati in posizione, impostati su Larghezza 100% e/o disposti sopra e sotto ad altri elementi con il pannello Livelli, è possibile creare numerosi effetti particolari.

Applicazione degli effetti di scorrimento Movimento con il pannello Effetti di scorrimento

L'interfaccia del pannello Effetti di scorrimento è simile a quella del pannello degli effetti di scorrimento per Riempimento browser e Riempimento sfondo. Seguite questa procedura per applicare gli effetti di scorrimento a un elemento di pagina mediante la scheda Movimento del pannello Effetti di scorrimento:

  1. In Muse, passate alla vista Progettazione e scegliete Pagina > Proprietà di pagina.
  2. Impostate il valore Altezza minima su almeno 2000 pixel, in modo che la pagina sia abbastanza lunga da consentirne lo scorrimento.
  3. Fate clic su OK per salvare le modifiche e chiudere la finestra di dialogo Proprietà di pagina.
  4. Nella vista Progettazione, disegnate sulla pagina un rettangolo o una cornice di testo.
  5. Utilizzate la scheda Riempimento del menu Riempimento per aggiungere un’immagine di sfondo affiancata o non affiancata. Oppure selezionate semplicemente un colore di riempimento in tinta unita o sfumatura.
  6. Scegliete Finestra > Effetti di scorrimento per aprire il pannello Effetti di scorrimento.
Aprite il pannello Effetti di scorrimento per accedere alle impostazioni per gli effetti di scorrimento.
Aprite il pannello Effetti di scorrimento per accedere alle impostazioni per gli effetti di scorrimento.

  1. Attivazione degli effetti di scorrimento: nel pannello Effetti di scorrimento, viene visualizzata la scheda Movimento (a sinistra). Con l’elemento selezionato sulla pagina, attivate la casella di controllo Movimento.

    Suggerimento: una volta attivata la casella Movimento, il bordo superiore dell’elemento presenta una maniglia a forma di T. La maniglia a T indica la posizione chiave dell’effetto di scorrimento applicato all’elemento. L’effetto di scorrimento viene avviato quando un visitatore che scorre la pagina raggiunge la posizione chiave.

    Per impostazione predefinita la maniglia a T si trova al di sopra dell’elemento. Tuttavia potete trascinarla più in alto, verso il basso per allinearla al bordo superiore dell’elemento oppure al di sotto dell’elemento.

  2. Posizionamento della maniglia a T per impostare la posizione chiave: trascinate la maniglia a T per impostare la posizione chiave. Questo consente di definire il movimento che si verificherà prima e dopo che la pagina avrà raggiunto la parte superiore della maniglia a T.

    In alternativa, specificate un valore numerico nel campo Posizione chiave al centro del pannello Effetti di scorrimento mentre è attiva la scheda Movimento. Nell’immagine qui sopra, la posizione chiave è impostata su 200 pixel. 

    La posizione della maniglia a forma di T rappresenta la posizione chiave. Quando si fa scorrere la pagina verticalmente, vengono applicate le impostazioni definite nella sezione Movimento iniziale in modo che la posizione dell’elemento corrisponda alla posizione nella vista Progettazione.

    Quando il visitatore fa scorrere la pagina o fa clic su un collegamento di ancoraggio per passare oltre la posizione chiave dell’elemento, vengono applicate le impostazioni definite nella sezione Movimento finale.

    La sezione Movimento iniziale contiene frecce di direzione verticale e orizzontale e opzioni di velocità.

  3. Impostazione della direzione verticale di Movimento iniziale: scegliete una direzione verticale (in alto o in basso) facendo clic su uno dei pulsanti verticali. Immettete un valore di velocità nel campo accanto alle frecce di direzione verticale per impostare la velocità del movimento rispetto alla velocità di scorrimento della pagina. Se immettete 0, l’elemento non si sposterà in verticale. Potete anche immettere una percentuale mediante un valore decimale. Ad esempio, se immettete 0,5 l’elemento si sposta in verticale a metà della velocità di scorrimento della pagina.

  4. Impostazione della direzione orizzontale di Movimento iniziale: impostate la direzione di scorrimento orizzontale (verso sinistra o destra) facendo clic sulla freccia sinistra o destra per impostare la direzione in cui si dovrà spostare l’elemento prima di raggiungere la posizione chiave. Nel campo a destra delle frecce orizzontali, impostate il valore di velocità per la direzione orizzontale. Per evitare che l’elemento si sposti in orizzontale, impostate su 0 il campo della velocità iniziale orizzontale.

  5. Ripetete i passaggi 7 e 8 per impostare la direzione e la velocità del movimento nella sezione Movimento finale.

Nell’illustrazione di seguito, la posizione chiave è impostata su 500 pixel. Quando il browser inizia a scorrere, l’elemento si sposta verso il passo e arriva alla posizione chiave con la stessa velocità in cui scorre la pagina. L’elemento arriva in posizione quando la pagina scorre fino alla posizione chiave. Quando la pagina scorre oltre la posizione chiave, l’elemento si sposta verso destra al doppio della velocità di scorrimento della pagina.

Applicare le impostazioni di Movimento per impostare l’effetto di scorrimento in Adobe Muse
Applicare le impostazioni di Movimento per impostare l’effetto di scorrimento

  1. Premete Anteprima oppure scegliete File > Anteprima pagina nel browser per verificare gli effetti di scorrimento. Fate scorrere la pagina verso il basso e di nuovo verso l’alto e osservate lo spostamento dell’elemento.
  2. Al termine, tornate a Muse o fate clic sul pulsante Progettazione per continuare a modificare la pagina.

Applicazione degli effetti di scorrimento Opacità con il pannello Effetti di scorrimento

In questa sezione viene descritto come modificare la visibilità di un elemento in base allo scorrimento della pagina da parte del visitatore. Questo è utile per visualizzare e nascondere contenuti con dissolvenza in entrata o in uscita mentre il visitatore fa scorrere la pagina per visualizzarne un’altra sezione. Per applicare effetti di scorrimento che modificano la trasparenza di un elemento della pagina mediante la scheda Opacità del pannello Effetti di scorrimento:

  1. Mentre modificate una pagina nella vista Progettazione, accertatevi che in Proprietà di pagina il campo Altezza minima sia impostato su un valore superiore all’altezza media della maggior parte dei monitor, ad esempio 2000 pixel. In alternativa, potete aggiungere alla pagina una quantità di contenuto tale da richiedere lo scorrimento.
  2. Nella vista Progettazione, disegnate sulla pagina un rettangolo o una cornice di testo.
  3. Utilizzate la scheda Riempimento del menu Riempimento (o il pannello Riempimento) per aggiungere un’immagine di sfondo affiancata o non affiancata all’elemento selezionato sulla pagina, oppure impostate un riempimento in tinta unita o sfumatura. Oppure, se preferite, aggiungete un widget presentazione o inserite un file OAM di Adobe Edge Animate sulla pagina.
  4. Con l’elemento selezionato, fate clic sulla scheda Opacità (seconda scheda da sinistra) nel pannello Effetti di scorrimento e attivate la casella Opacità.
Selezionate la casella Opacità per attivare gli effetti di scorrimento per l’elemento selezionato.
Selezionate la casella Opacità per attivare gli effetti di scorrimento per l’elemento selezionato.

Quando l’opzione Opacità è attivata, viene visualizzato sull’elemento un tipo di maniglia diverso. Così come si fa con la maniglia a T per impostare la posizione chiave nella scheda Movimento, potete trascinare la maniglia al di sopra dell’elemento, potete trascinarla verso il basso per allinearla al bordo superiore (o su una parte qualsiasi dell’elemento), oppure potete trascinarla al di sotto dell’elemento. La maniglia Opacità ha tre parti differenti che possono essere trascinate in modo indipendente per impostare i valori Posizione chiave, Posizione dissolvenza 1 e Posizione dissolvenza 2.

  1. Trascinate la porzione quadrata centrale della maniglia per impostare la posizione chiave. Nell’esempio raffigurato di seguito, la posizione chiave è impostata su 150 pixel.
Impostate la posizione chiave trascinando in verticale la maniglia quadrata centrale.
Impostate la posizione chiave trascinando in verticale la maniglia quadrata centrale.

  1. Trascinate la parte circolare superiore della maniglia per portarla nella posizione desiderata. Nell’esempio raffigurato di seguito, la Posizione dissolvenza 1 è impostata su 100 pixel.
Impostare Posizione dissolvenza 1 per la maniglia Opacità
Trascinate la parte superiore sinistra della maniglia circolare per impostare la prima posizione che inciderà sulla trasparenza dell’elemento.

  1. Trascinate la parte circolare inferiore della maniglia per portarla nella posizione desiderata. Nell’esempio raffigurato di seguito, la Posizione dissolvenza 2 è impostata su 200 pixel.
Impostare Posizione dissolvenza 2 per la maniglia Opacità
Trascinate la parte superiore destra della maniglia circolare per impostare la seconda posizione che inciderà sulla trasparenza dell’elemento.

Nota:

se necessario, è possibile trascinare la posizione chiave insieme alle maniglie di posizione della dissolvenza, per impostarla sullo stesso valore. Invece di trascinare le maniglie, potete anche immettere valori numerici nei relativi campi nel pannello Effetti di scorrimento.

In questo esempio, l’elemento è inizialmente trasparente e diventa progressivamente più opaco, fino a essere completamente opaco (il valore Opacità per la posizione chiave è impostato su 100%) quando la pagina raggiunge la posizione chiave. Quando lo pagina scorre oltre la posizione chiave, l’elemento diventa progressivamente più trasparente e scompare quando la pagina scorre oltre la posizione 200 pixel.

Impostare la percentuale di opacità per gli effetti di scorrimento
Impostate la percentuale di opacità (0% significa completamente trasparente) nella scheda Opacità del pannello Effetti di scorrimento.

  1. Premete Anteprima oppure scegliete File > Anteprima pagina nel browser per verificare gli effetti di scorrimento. Fate scorrere la pagina verso il basso e di nuovo verso l’alto per visualizzare come l’opacità dell’elemento cambia con lo scorrimento della pagina.
  2. Al termine, tornate a Muse o fate clic sul pulsante Progettazione per continuare a modificare la pagina.

Utilizzo della scheda Presentazione nel pannello Effetti di scorrimento

Il movimento di scorrimento può essere utilizzato per combinare l’interazione di scorrimento con la visualizzazione delle immagini di una presentazione. Potete aggiungere un widget presentazione alla pagina e quindi utilizzare la scheda Presentazione del pannello Effetti di scorrimento per applicare effetti di scorrimento. Ad esempio, potete impostare la visualizzazione automatica di una nuova immagine della presentazione ogni volta che la pagina scorre fino a una posizione specifica.

Fate clic sulla scheda Presentazione (terza scheda da sinistra) e osservate le impostazioni di questa sezione.

In genere, quando si usa questa parte dell’interfaccia per il movimento di scorrimento, si fissa un widget presentazione alla pagina. Il widget presentazione sarà configurato (con il menu Opzioni) con il solo contenitore più grande, mentre le miniature e i pulsanti Successivo e Precedente saranno nascosti.

Per questo effetto è particolarmente indicato utilizzare una presentazione a schermo intero, ma potete scegliere il tipo di widget presentazione che più si addice al vostro sito.

Per applicare gli effetti di scorrimento a un widget presentazione:

  1. Impostate un valore di Altezza minima in Proprietà di pagina tale da rendere la pagina sufficientemente lunga da consentirne lo scorrimento. Oppure aggiungete una quantità di contenuto tale da creare una pagina più lunga.
  2. Trascinate un widget Presentazione dalla Libreria di widget alla pagina. Usate il menu Opzioni per configurare le opzioni della presentazione. Quando si applicano gli effetti di scorrimento ai widget Presentazione, le opzioni Successivo, Precedente e Miniature sono in genere disattivate.
  3. Aggiungete delle immagini al widget presentazione facendo clic sulla cartella accanto alla sezione Immagini nel menu Opzioni. Individuate sul computer le immagini da aggiungere alla galleria di immagini.
  4. Utilizzate l’interfaccia Fissa nel pannello di controllo per fissare la presentazione alla sua posizione corrente nella finestra del browser. Con la presentazione selezionata, fate clic su una delle sei posizioni di fissaggio.
Applicare gli effetti di scorrimento ai widget Presentazione
Fissate il widget presentazione in una posizione specifica in modo che rimanga fermo nella finestra del browser mentre la pagina scorre.

Dopo avere aggiunto e configurato la presentazione fissata, aggiungete gli effetti di scorrimento.

Con il widget Presentazione selezionato, selezionate la casella Presentazione nella scheda Presentazione del pannello Effetti di scorrimento.

Attivate l’opzione Presentazione nel pannello Effetti di scorrimento.
Selezionate il widget presentazione e attivate l’opzione Presentazione nel pannello Effetti di scorrimento.

Non appena viene selezionata l’opzione Presentazione, la maniglia per la posizione chiave viene aggiunta alla presentazione nella vista Progettazione. Se desiderate modificare i valori della posizione chiave di scorrimento, potete trascinare il lato destro e sinistro della maniglia o immettere i valori desiderati nel campo Posizioni di scorrimento chiave. Potete anche fare clic sulle frecce verso l’alto e il basso nel pannello Effetti di scorrimento per aumentare o ridurre il valore numerico.

La scheda Presentazione del pannello Effetti di scorrimento permette di controllare la riproduzione delle immagini della presentazione in due modi diversi. Potete impostare la presentazione per la riproduzione automatica oppure potete impostarla per l’avanzamento incrementale delle immagini in base allo scorrimento della pagina.

Il primo metodo consiste nell’impostare la posizione chiave desiderata e quindi attivare l’opzione Riproduzione automatica.

Quando la pagina viene fatta scorrere oltre la posizione chiave (o quando il visitatore fa clic sul collegamento di un tag di ancoraggio e si sposta oltre la posizione chiave) la presentazione viene avviata. La funzione di riproduzione automatica continua a visualizzare le immagini in sequenza e a ciclo continuo finché la pagina ritorna al di sopra della posizione chiave o finché il visitatore non esca dalla pagina.

Nell’esempio riportato nella figura sopra, la presentazione viene avviata quando la pagina scorre fino alla posizione di 100 pixel (o ovunque al di sotto della posizione chiave). Se il visitatore scorre di nuovo verso l’alto, la presentazione si interrompe quando la pagina raggiunge una posizione al di sopra della posizione chiave (99 pixel o meno).

Il secondo modo per controllare il widget presentazione consiste nell’impostare la posizione chiave e quindi attivare il pulsante di scelta Cambia diapositive ogni. Potete anche impostare il numero di pixel nel campo che si trova sotto il pulsante di scelta, per specificare la frequenza con cui le immagini della presentazione avanzeranno rispetto alla distanza di scorrimento della pagina verso il basso.

Ad esempio, potete fissare un widget presentazione su una pagina più lunga, in modo che rimanga nella stessa posizione mentre gli altri contenuti della pagina scorrono. Impostando un valore numerico per l’opzione Cambia diapositive ogni, potete specificare che la presentazione passi all’immagine successiva ogni volta che la pagina scorre verso il basso del numero di pixel specificato.

Nell’immagine qui sopra, la posizione chiave è impostata su 200. Quando la pagina scorre oltre i 200 pixel dal bordo superiore, viene visualizzata l’immagine successiva della presentazione ogni volta che la pagina scorre di altri 30 pixel.

Impostare gli effetti di scorrimento per le presentazioni in Adobe Muse
Impostate la presentazione in modo da passare all’immagine successiva ogni volta che la pagina scorre verso il basso della distanza specificata (in pixel).

Utilizzo della scheda Adobe Edge Animate nel pannello Effetti di scorrimento

Adobe Edge Animate è uno strumento di progettazione intuitivo che consente di creare animazioni Web basate sul linguaggio HTML5. Con Edge Animate potete creare composizioni contenenti simboli e grafica animata con ripetizione ciclica. Le animazioni create con Adobe Edge Animate possono essere esportate come file OAM e inserite nelle pagine dei siti creati con Muse. Le animazioni create in Edge Animate vengono riprodotte nel browser senza la necessità di alcun plug-in.

Per creare delle animazioni in Edge Animate, dovete trascinare degli elementi sullo stage e impostarne i movimenti mediante una timeline. Oltre ad aggiungere degli elementi direttamente nella timeline principale, potete anche creare elementi nidificati con elementi secondari che vengono riprodotti in base a una propria timeline interna. Per ulteriori informazioni sull’uso di Adobe Edge Animate, visitate la relativa pagina del prodotto. Su Adobe TV sono inoltre disponibili esercitazioni video su Adobe Edge Animate.

Per utilizzare la funzione di movimento di scorrimento di Adobe Edge Animate, occorre innanzi tutto creare una composizione specificamente per questo scopo. È possibile applicare ai file OAM degli effetti di scorrimento che agiscano sulle animazioni inserite nella timeline principale. Per creare delle animazioni interattive, dovrete 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 informazioni sulla creazione di animazioni da aggiungere a un sito Adobe Muse, visitate Aggiungere contenuti di Adobe Edge Animate.

Per utilizzare la scheda Presentazione del pannello Effetti di scorrimento:

  1. Esportate un file OAM Adobe Edge Animate e salvatelo nella cartella del sito.
  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 o aggiungendo alla pagina altro contenuto.
  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.
Impostare gli effetti di scorrimento per le animazioni in Adobe Muse
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 50 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 1 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 dell’effetto di movimento di scorrimento non hanno alcun effetto sugli oggetti animati nidificati o collegati dalla timeline principale nella composizione di Adobe Edge 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.

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