Scoprite come aggiungere diversi effetti di scorrimento, come “pezzo per pezzo”, menu con scivolamento, effetto tendina e altri.

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.

Idee creative con effetti di scorrimento

Questa sezione descrive alcuni dei molti modi in cui è possibile utilizzare gli effetti di scorrimento per aggiungere nei siti Muse funzioni interattive, funzioni particolari di navigazione e grafica animata accattivante.

Per iniziare, effettuate le seguenti operazioni:

  1. Visitate il sito di esempio e fate clic su ciascuna sezione per vedere l’effetto che si desidera conseguire con ognuno degli esempi qui descritti. Fate scorrere ogni pagina di esempio verso il basso e osservate come gli effetti di scorrimento determinano la visualizzazione degli elementi sulla pagina.
  2. Scorrete fino alla fine del sito di esempio per scaricare il file .muse.
  3. Aprite il sito di esempio ed esaminate il progetto nell’area di lavoro di Muse.
  4. Aprite il pannello Livelli ed espandete la sezione Contenuto per visualizzare gli elementi con cui è stato creato ciascun esempio.

Effetto “pezzo per pezzo”

Con questo effetto un set di singoli elementi compare e si riassembla sulla pagina mentre il visitatore fa scorrere la pagina verso il basso. Gli elementi grafici e le cornici di testo sono controllati da effetti di scorrimento che creano un effetto di composizione interattiva, come i pezzi di un puzzle che viene composto. Questo effetto può essere utilizzato ad esempio per mettere in evidenza i singoli dettagli di un prodotto in una pagina Web.

Per questo esempio viene utilizzata la sezione Movimento iniziale della scheda Movimento nel pannello Effetti di scorrimento per riunire i vari elementi in una struttura unificata. Quando ogni pezzo si trova nella giusta posizione, le impostazioni Movimento finale impostate su 0 evitano che gli elementi esistenti si spostino mentre arrivano nuovi elementi.

Per creare un effetto di tipo “pezzo per pezzo”:

  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 14.120 pixel.
  2. Con lo strumento testo, create una cornice di testo e digitate il testo desiderato.
  3. Aprite la scheda Movimento del pannello Effetti di scorrimento e selezionate la casella Movimento. In questo esempio, le impostazioni della sezione Movimento iniziale fanno sì che la cornice di testo scenda in posizione a un quarto (0,25 volte) della velocità di scorrimento. Quando la pagina raggiunge la posizione chiave per la cornice di testo, questa raggiunge il punto in cui si trova nella vista Progettazione. Quindi, le impostazioni Movimento finale (0 per entrambe le direzioni) mantengono fermo il primo elemento, come se fosse fissato.
  4. Sotto la cornice di testo si trova un file PNG con trasparenza (con un profilo di telefono cellulare). Per questo elemento, le impostazioni nella scheda Movimento del pannello Effetti di scorrimento provocano la comparsa sulla pagina da sinistra fino ad arrivare in posizione e a fermarsi.
  5. Dietro il profilo del telefono, un elemento bianco più piccolo segue un movimento simile: entra da sinistra e si ferma in posizione. L’elemento grafico bianco simula l’auricolare nella parte superiore di un telefono cellulare. Questa risorsa (phone-earpiece.png) viene collocata al di sopra del profilo del telefono cellulare nel pannello Livelli, in modo da essere visualizzata sopra di esso nella pagina. 
  6. Direttamente dietro l’auricolare, un piccolo elemento bianco che simula il pulsante Home del telefono entra da destra in modo analogo all’auricolare e viene visualizzato anch’esso sopra il profilo del telefono cellulare nella pagina.
  7. Quindi, un elemento grafico rettangolare di colore chiaro con una leggera sfumatura verticale dal bianco al grigio chiaro entra in posizione all’interno dell’area centrale trasparente del profilo del cellulare. Una volta in posizione, resta fermo e simula il display del telefono. Questo elemento (phone-screen.png) si trova nella parte inferiore del pannello Livelli e apparirà quindi dietro agli altri elementi della pagina.
  8. A questo punto entrano in posizione quattro rettangoli (con riempimento in tinta unita di colore blu, verde, giallo e rosso). Per creare l’effetto di pezzi dispersi che si riuniscono, ciascun rettangolo è impostato con valori diversi di direzione e velocità nella scheda Movimento del pannello Effetti di scorrimento. Il rettangolo blu si sposta verso il basso e a destra, quelli verde e giallo verso l’alto e a destra e quello rosso verso l’alto e a sinistra in base ai valori di Movimento iniziale. Nella sezione Movimento finale, tutti rettangoli hanno impostazioni pari a 0 per entrambe le direzioni: restano quindi fermi una volta raggiunta la posizione finale sul display del cellulare.
  9. Una volta che tutti gli altri pezzi sono stati assemblati, un secondo campo di testo arriva dal basso fino a sotto il primo campo di testo, con una velocità pari alla metà (0,5 volte) della velocità di scorrimento della pagina.

Infine, vi sono altri due elementi nella parte inferiore: un rettangolo con la stessa tinta unita della pagina (e quindi invisibile) e, dietro, un gruppo di oggetti (un rettangolo giallo con una lampadina).

Il rettangolo in tinta unita ha lo scopo di nascondere il gruppo dietro a esso.

Effetto di scorrimento “pezzo per pezzo” di Adobe Muse
Effetto di scorrimento “pezzo per pezzo” di Adobe Muse

Nota:

quando entrambi gli elementi sono selezionati, nei campi vengono visualizzati solo i valori che sono condivisi da tutti gli elementi selezionati. In questo esempio, sia il rettangolo che il gruppo sono impostati su 0 per la direzione verticale nella sezione Movimento iniziale e su 0,0 nella sezione Movimento finale. Nessun valore viene visualizzato nel campo orizzontale della sezione Movimento iniziale, perché il gruppo è impostato su 1 (per spostarsi verso sinistra alla stessa velocità di scorrimento della pagina), mentre il rettangolo è impostato su 0.  

  1. In pratica, il rettangolo è fissato in posizione e non si sposta mai perché tutti i valori di Movimento iniziale e Movimento finale sono impostati su 0. Man mano che la pagina scorre e raggiunge la posizione chiave del gruppo della lampadina, questo si sposta verso sinistra e non è più nascosto dal rettangolo che lo copre. Il gruppo della lampadina si trova al di sopra dell’elemento del display del telefono cellulare ma sotto al profilo del telefono cellulare. La lampadina sembra quindi scorrere in posizione e simula la transizione visualizzata sul display di un vero telefono cellulare quando si passa il dito su di esso. Il gruppo della lampadina copre il rettangolo con la sfumatura utilizzato come display del telefono.

Come illustrato da questo semplice esempio, potete usare una combinazione di pagina molto lunga, elementi disposti strategicamente su più livelli nel pannello Livelli e la scheda Movimento del pannello Effetti di scorrimento per creare l’illusione di pezzi che vengono assemblati con un’animazione mentre la pagina scorre verso il basso.

L’effetto di menu con scivolamento utilizza molte delle convenzioni già descritte per l’effetto “pezzo per pezzo”. Gli elementi sembrano entrare grazie alle impostazioni della scheda Movimento del pannello Effetti di scorrimento e alcuni rettangoli nascondono alcuni degli elementi fino al momento in cui questi ultimi devono diventare visibili sulla pagina.

Per questo esempio vengono utilizzati gruppi di rettangoli in posizioni strategiche per simulare l’aspetto di una pagina con angolazione complessa.

Guardate il sito di esempio in un browser e osservate l’aereo che vola attraverso la pagina da destra a sinistra, seguito da un set di voci di menu formattate e uno sfondo sfumato con strisce diagonali.

Per creare un effetto di menu con scivolamento:

  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 4.665 pixel.
  2. L’immagine dell’aereo è disposta sopra agli altri contenuti della pagina e corrisponde quindi al primo livello nel pannello Livelli. È impostata per spostarsi verso sinistra prima e dopo la sua posizione nella scheda Movimento del pannello Effetti di scorrimento.
Effetto di scorrimento menu con scivolamento di Adobe Muse
Effetto di scorrimento menu con scivolamento di Adobe Muse

  1. Quattro cornici di testo sono configurate per entrare verso sinistra e incolonnarsi in verticale per creare il menu di navigazione. Nella scheda Movimento del pannello Effetti di scorrimento, per ogni cornice di testo è stata impostata la stessa velocità (1,25 volte la velocità di scorrimento della pagina) nella sezione Movimento iniziale. Ogni cornice di testo ha una posizione chiave diversa. Mentre la pagina scorre verso il basso, ogni cornice di testo scivola in posizione e si allinea al lato sinistro della pagina. Nella sezione Movimento finale, per tutte le cornici di testo sono impostati i valori 0,0 e le voci di menu restano quindi ferme nella posizione raggiunta.
  2. Le cornici di testo sono riempite con il colore di sfondo in tinta unita; a prima vista sembrano delle immagini perché i lati non sono verticali ma piuttosto tagliati in diagonale. Questo effetto è conseguito disponendo un gruppo di tre rettangoli al di sopra delle cornici di testo, riempiti con lo stesso colore in tinta unita del riempimento del browser.
Raggruppate e disponete dei rettangoli al di sopra delle voci di menu per simulare bordi laterali inclinati.
Raggruppate e disponete dei rettangoli al di sopra delle voci di menu per simulare bordi laterali inclinati.

  1. L’animazione delle cornici di testo è inizialmente nascosta da un altro gruppo di rettangoli; le cornici di testo si trovano infatti sotto a tale gruppo nel pannello Livelli. Il gruppo è composto da tre rettangoli: un rettangolo più grande con sfumatura verticale e due rettangoli più piccoli (uno quadrato e uno ruotato) con riempimento in tinta unita uguale al colore superiore della sfumatura.
  1. Se scorrete verso il basso per esaminare la parte inferiore del gruppo, potete osservare altri quattro rettangoli con diverse larghezze che sono ruotati e allineati al di sopra dell’angolo inferiore destro del rettangolo più grande con la sfumatura.
Dei rettangoli ruotati con lo stesso riempimento della pagina sembrano tagliare l’angolo del rettangolo con sfumatura.
Dei rettangoli ruotati con lo stesso riempimento della pagina sembrano tagliare l’angolo del rettangolo con sfumatura.

I gruppi sono molto utili per combinare insieme più elementi e controllarli come fossero un oggetto singolo. In questo esempio, ai gruppi dei diversi rettangoli sono stati applicati effetti di scorrimento tali da spostare il gruppo come fosse una singola entità.

Questo esempio illustra inoltre l’uso creativo di spazio negativo. Se al riempimento del browser viene applicato un colore di sfondo in tinta unita, potete ottenere molti effetti di ritaglio interessanti sovrapponendo rettangoli con lo stesso colore di riempimento. Invece di creare la grafica in un programma di elaborazione immagini e di inserire una singola immagine, potete usare i rettangoli per creare l’elemento grafico direttamente in Muse.

Dissolvenza

Per questo esempio di un’alba e un tramonto animati è stata usata una combinazione di due effetti di scorrimento: movimento e opacità. Sono state usate una pagina con riempimento sfumatura e una singola immagine PNG del sole. L’immagine PNG include aree trasparenti attraverso le quali è visibile il colore di sfondo della pagina.

Guardate il sito di esempio in un browser e osservate come il sole entra con una trasparenza del 100% e attraversa la pagina. Al suo picco, è completamente opaco ma, mano a mano che la pagina scorre, il sole tramonta e diventa di nuovo sempre più trasparente fino a scomparire.
Per creare un effetto di dissolvenza:

  1. Nella vista Progettazione, scegliete Pagina > Proprietà di pagina. Impostate il valore del campo Altezza minima su un valore più elevato di quanto possa rientrare in un monitor medio, in modo che la pagina possa scorrere. In questo sito di esempio, l’altezza minima della pagina è impostata su 2.988 pixel.
  2. L’immagine del sole viene inserita al centro della pagina. Nella scheda Movimento del pannello Effetti di scorrimento, la posizione chiave è impostata su 1410 pixel. Osservate le impostazioni di Movimento iniziale e Movimento finale.
Impostate Movimento iniziale e Movimento finale per l’effetto Dissolvenza.
Impostate Movimento iniziale e Movimento finale per l’effetto Dissolvenza.

Con queste impostazioni, il sole segue un percorso semicircolare che inizia dalla parte in basso a sinistra della pagina, si alza al centro (quando viene raggiunta la posizione chiave) e quindi scende fino all’angolo inferiore destro della pagina.

  1. Con il sole ancora selezionato, fate clic sulla scheda Opacità e osservatene le impostazioni. Posizione dissolvenza 1 è impostata su 726 pixel (al di sopra del sole). Posizione dissolvenza 2 è impostata su 1925 pixel (al di sotto del sole). Il sole inizia con opacità pari allo 0% (completamente trasparente) e quindi diventa totalmente opaco quando la pagina raggiunge la posizione chiave. Mentre la pagina scorre verso il basso oltre la posizione chiave del sole, l’opacità passa dal 100% allo 0%, per creare un effetto di dissolvenza in entrata e in uscita.
Regolate la quantità di trasparenza nella scheda Opacità del pannello Effetti di scorrimento.
Regolate la quantità di trasparenza nella scheda Opacità del pannello Effetti di scorrimento.

  1. Per verificare il comportamento della pagina, scegliete File > Anteprima pagina nel browser. Fate scorrere la pagina per vedere il sole che sorge e quindi che tramonta andando a scomparire in basso a destra.
  2. Chiudete il Browser e tornate all’area di lavoro di Muse.

Edge Animate

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.

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.
Creare un effetto di animazione per i file OAM utilizzando gli effetti di scorrimento
Creare un effetto di animazione per i file OAM utilizzando gli effetti di scorrimento

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.
Deselezionate le tre bussole e selezionate la bussola a sinistra e quella a destra.
Deselezionate le tre bussole e selezionate la bussola a sinistra e quella a destra.

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.
Selezionate la bussola centrale e impostate gli effetti di scorrimento.
Selezionate la bussola centrale e impostate gli effetti di scorrimento.

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.

Effetto presentazione

Potete controllare il modo in cui la serie di immagini di un widget presentazione viene visualizzata rispetto allo scorrimento della pagina. In questo caso è necessario aggiungere alla pagina un widget presentazione e impostare quindi le opzioni della scheda Presentazione del pannello Effetti di scorrimento.

In questo esempio, la presentazione contiene una serie di immagini che creano una vista a 360 gradi di uno zaino. Per ottenere immagini simili, utilizzate un treppiedi e scattate le foto di un oggetto collocato su una base rotante. Questo effetto è utile per presentare un prodotto in modo interattivo e consentire ai potenziali clienti di visualizzare un articolo da ogni suo lato prima di acquistarlo.

Per creare un effetto simile con un widget presentazione:

  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 7.465 pixel.
  2. Una cornice di testo con la dicitura Superpack è stata impostata con effetti di scorrimento. Nella scheda Movimento, configurate le impostazioni Movimento iniziale per spostare il testo da sinistra a destra alla stessa velocità con cui scorre la pagina. Nelle impostazioni Movimento finale, entrambe le direzioni sono impostate su 0. La cornice di testo resta quindi ferma in posizione sulla pagina.
Selezionate la casella Movimento e configurate gli effetti di scorrimento per spostare la cornice di testo verso destra.
Selezionate la casella Movimento e configurate gli effetti di scorrimento per spostare la cornice di testo verso destra.

  1. Aprite la libreria dei widget e trascinate un widget presentazione al centro della pagina, a destra della posizione finale della cornice di testo.
  2. Utilizzate l’opzione Aggiungi immagini nel menu Opzioni per inserire i file immagine nella presentazione. 

Quando la presentazione è selezionata, potete selezionare il widget presentazione e utilizzare la funzione Fissa nel pannello di controllo per fissare la presentazione in posizione. Provate anche ad aggiungere un widget per presentazione a schermo intero e a impostarne gli effetti di scorrimento. 

  1. Con la presentazione selezionata, aprite la scheda Presentazione del pannello Effetti di scorrimento e attivate la casella Presentazione.
  2. Trascinate la maniglia a T oppure immettete un valore nel campo per impostare la posizione chiave. In questo esempio, la posizione chiave è impostata su 1066 pixel.
  3. Attivate il pulsante di scelta Cambia diapositive ogni e impostate il campo sottostante su 50 pixel.
Impostate la presentazione affinché avanzi di un’immagine ogni volta che la pagina scorre verso il basso di 50 pixel.
Impostate la presentazione affinché avanzi di un’immagine ogni volta che la pagina scorre verso il basso di 50 pixel.

  1. Verificate il funzionamento della pagina nell’Anteprima o in un browser. Fate scorrere la pagina verso il basso per visualizzare lo zaino che ruota. Potete anche creare delle immagini che sembrino alzarsi o cadere, inserendo nella presentazione una serie di immagini simili ma leggermente diverse, come i fotogrammi di un file GIF con animazione.
  2. Dopo avere verificato gli effetti di scorrimento, tornate alla vista Progettazione di Muse e continuate a modificare le pagine.

Effetto tendina

Utilizzando gli effetti di scorrimento potete creare una pagina molto lunga divisa in sezione visivamente molto diverse l’una dall’altra. Facendo scorrere la pagina verso il basso, il visitatore passa alle varie sezioni con un effetto di transizione di tipo tendina, con testo animato e bordi di separazione che conferiscono un effetto ombra.

Potete aggiungere tag di ancoraggio o semplicemente una nota per invitare i visitatori a scorrere la pagina verso il basso per visualizzare tutte le sezioni. Una volta raggiunta la fine della pagina di esempio, facendo clic sul pulsante “Top” per tornare all’inizio l’intera pagina sembra richiudersi.

Per creare un effetto tendina:

  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 16.990 pixel.
  2. Nel menu Riempimento browser, impostate il colore di riempimento del browser su un blu in tinta unita.
Impostate il colore di riempimento del browser nel menu Riempimento browser.
Impostate il colore di riempimento del browser nel menu Riempimento browser.

  1. Con l’intera pagina selezionata, usate il menu Riempimento per impostare il colore della pagina su Nessuno, in modo che il riempimento blu del browser sia visibile.
  2. Scorrete la pagina verso il basso fino a circa 2248 pixel dal bordo superiore. Con lo strumento rettangolo, disegnate un rettangolo largo 3000 pixel e alto 2000 pixel. Con lo strumento Selezione, centrate il rettangolo sulla pagina con entrambi i lati che si estendono oltre i lati della finestra del browser.
  3. Con il rettangolo ancora selezionato, usate il menu Riempimento per impostare un colore di riempimento verde in tinta unita. Utilizzate il menu Effetti per impostare un effetto ombra.
Aggiungete un effetto ombra al rettangolo per creare un bordo di maggior impatto.
Aggiungete un effetto ombra al rettangolo per creare un bordo di maggior impatto.

  1. Con il rettangolo verde selezionato, attivate la casella Movimento nella scheda Movimento del pannello Effetti di scorrimento. Trascinate la maniglia a T e abbassatela in modo che la posizione chiave corrisponda al bordo superiore del rettangolo, ossia a 2248 pixel come nel sito di esempio.
  1. Nella sezione Movimento iniziale, impostate il rettangolo in modo che si sposti verso il basso a una velocità pari a 1,5 volte la velocità di scorrimento della pagina. Impostate tutte le altre direzioni su 0.
  2. Con lo strumento testo create un campo di testo vicino al bordo superiore del rettangolo verde. In questo esempio, nel campo di testo è stata inserita la dicitura “This is the roll-up” (Ecco l’effetto tendina). Potete inserire il testo che preferite e applicarvi la formattazione desiderata.
  3. Con la cornice di testo selezionata, passate alla scheda Movimento del pannello Effetti di scorrimento. Trascinate la maniglia a T per allinearla al bordo superiore del rettangolo verde e modificate le impostazioni per definire il modo in cui la cornice di testo deve essere visualizzata in basa allo scorrimento della pagina.
Allineate la maniglia a T con il bordo superiore del rettangolo verde.
Allineate la maniglia a T con il bordo superiore del rettangolo verde.

  1. Nella sezione Movimento iniziale, impostate la direzione verso il basso su una velocità pari a 1,5 volte la velocità di scorrimento della pagina. Impostate tutti gli altri valori su 0. In questo modo il campo di testo si sposta verso il basso nella stessa direzione e alla stessa velocità del rettangolo verde. Sia il rettangolo che la cornice di testo restano fermi in posizione una volta raggiunte e oltrepassate le rispettive posizioni chiave.
  2. Fate clic su Anteprima e fate scorrere la pagina verso il basso per vedere come il rettangolo verde e il campo di testo scendono dall’alto con effetto tendina. Al termine, fate clic su Progettazione per continuare a modificare la pagina.
  3. Dal menu Visualizza riducete la visualizzazione del sito al 10%. Selezionate il rettangolo verde e il campo di testo. Tenete premuto il tasto Opzione/Alt e trascinate i due elementi più in giù sulla pagina, per duplicarli. Impostate il colore di riempimento del rettangolo duplicato su blu scuro e con lo strumento testo modificate il testo.
Per creare una nuova sezione sulla pagina, modificate il colore del riempimento di sfondo del rettangolo duplicato e il contenuto della cornice di testo.
Per creare una nuova sezione sulla pagina, modificate il colore del riempimento di sfondo del rettangolo duplicato e il contenuto della cornice di testo.

In questo esempio, la cornice di testo duplicata contiene la dicitura “Use it to drastically alter the appearance of your website” (Usatelo per modificare radicalmente l’aspetto del sito Web). Potete inserire il testo che preferite per identificare la sezione blu scuro della pagina.

  1. Con lo strumento selezione, posizionate il rettangolo e la cornice di testo duplicati a circa 5.448 pixel verso il basso dal bordo superiore della pagina.
  2. Con il rettangolo blu scuro selezionato, passate alla scheda Movimento del pannello Effetti di scorrimento. La posizione chiave è stata aggiornata automaticamente alla posizione del nuovo rettangolo (5.448 pixel) e la direzione verso il basso nella sezione Movimento iniziale è ancora impostata su una velocità pari a 1,5 volte la velocità di scorrimento. Tutti gli altri valori sono impostati su 0. Anche per la cornice di testo duplicata sono stati mantenuti gli effetti di scorrimento dell’elemento originale.
  3. Ripetete i punti 12 e 13 altre quattro volte per creare un totale di sei grandi rettangoli con relative cornici di testo. Ogni rettangolo ha lo stesso effetto ombra e gli stessi effetti di scorrimento applicati al rettangolo originale. Posizionate gli ultimi quattro rettangoli alle seguenti posizioni chiave: 8.648 pixel, 11.852 pixel, 15.058 pixel e 18.251 pixel, separando quindi ogni sezione di circa 1.200 pixel.
  4. Utilizzate il menu Riempimento per impostare un colore di riempimento diverso per ciascun rettangolo. Provate ad applicare riempimenti in tinta unita o sfumatura, in modo da dare risalto a ciascuna sezione.
  5. Con lo strumento Testo modificate il contenuto della cornice di testo di ciascuna sezione. Ad esempio, potete scrivere del testo che richiami il colore di ogni sezione: “Questa è la sezione blu” e così via.
  6. Per verificare il comportamento della pagina, scegliete File > Anteprima pagina nel browser. Fate scorrere la pagina per vedere come ogni sezione compare e viene quindi sostituita da quella successiva.
  7. Chiudete il Browser e tornate all’area di lavoro di Muse.

Testo dinamico

Utilizzando una combinazione di effetti di scorrimento Movimento e font Web di Adobe Edge potete creare interessanti composizioni tipografiche. I font Web consentono di formattare il testo con un’ampia gamma di font che vengono caricati insieme alla pagina. Invece di inserire e animare immagini di testo create con un programma di elaborazione immagini, utilizzando i font Web di Edge potete creare delle pagine di grande impatto e facili da aggiornare con nuovo testo. Applicando inoltre gli effetti di scorrimento potete creare animazioni di grande impatto in relazione allo scorrimento della pagina.

Per creare un effetto di testo dinamico:

  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 4.854 pixel.
  2. Impostate il colore di riempimento della pagina su Nessuno. Il colore di riempimento del browser non è importante, perché la pagina verrà coperta da un rettangolo lungo.
  3. Con lo strumento rettangolo, disegnate un rettangolo largo di 1.159 pixel e alto 4.854 pixel. Con il menu Riempimento, riempite il rettangolo con un colore in tinta unita o una sfumatura. In questo esempio, è stato applicata una sfumatura da ottanio a fucsia. Con lo strumento selezione, centrate il rettangolo in modo da riempire l’intera area del browser. Se necessario, riducete la visualizzazione per verificare che il rettangolo sia centrato nella pagina.
Effettuate uno zoom out e posizionate il rettangolo al centro della pagina.
Effettuate uno zoom out e posizionate il rettangolo al centro della pagina.

  1. Dopo aver centrato il rettangolo, impostate nuovamente la visualizzazione su 100% nel menu Visualizza.
  2. Sul lato sinistro della pagina, create una serie di cornici di testo con lo strumento testo. In questo esempio sono state create cinque cornici di testo. Il contenuto di ogni cornice è descritto di seguito, ma potete usare il testo che preferite:
    • Five Frames
    • Scrolling
    • At Different Speeds Will
    • Create
    • Dynamic Tension

(Cinque cornici - scorrono - a velocità diverse per - creare - un effetto dinamico). Se lo desiderate, potete anche duplicare alcune delle cornici e applicarvi una formattazione leggermente diversa. In questo esempio, la cornice di testo con la parola “Create” è stata duplicata e le due copie sono sovrapposte l’una all’altra per creare un effetto ombra esterna di colore azzurro.

  1. Con lo strumento testo, selezionate ciascuna cornice di testo. Servitevi del pannello Testo (o delle opzioni di formattazione disponibili nel pannello di controllo) per applicare diverse combinazioni di font Web, dimensione, colore e altre impostazioni tipografiche a ciascuna cornice di testo.
  2. Selezionate tutte le cornici di testo. Con le cornici di testo selezionate, passate alla scheda Movimento del pannello Effetti di scorrimento. Immettete lo stesso valore numerico per impostare simultaneamente la posizione chiave per tutte le cornici di testo selezionate. In questo esempio, la posizione chiave è impostata su 1372 pixel. Impostate anche la direzione orizzontale nelle sezioni Movimento iniziale e Movimento finale a destra. Impostate tutte le direzioni verticali nelle sezioni Movimento iniziale e Movimento finale su 0 in modo che le cornici di testo non si spostino in verticale.
  3. Fate clic al di fuori delle cornici di testo per deselezionarle tutte, quindi fate clic su ogni cornice di testo singolarmente. Immettete valori leggermente diversi per ciascuna delle cornici di testo. Nell’elenco di seguito, il primo valore è la velocità di Movimento iniziale e il secondo è la velocità di Movimento finale per la direzione orizzontale (destra):
    • “Five Frames”: 0,9x, 0,1x
    • “Scrolling”: 0,12x, 0,5x
    • “At Different Speeds Will”: 0,7x, 0,17x
    • “Create”: 1,1x, 0,005x
    • “Dynamic Tension.”: 1x, 0,01x

Nota:

se avete duplicato una cornice di testo per creare un effetto ombra esterna, potete raggruppare le due o più copie della cornice di testo duplicata in modo da gestirle insieme come un singolo gruppo quando applicate gli effetti di scorrimento.

  1. Con lo strumento testo, create un campo di testo e digitate il numero 5 nella parte destra della pagina. Anche in questo caso potete duplicare la cornice di testo e applicavi colori e formattazione del testo diversi, in modo da ottenere un effetto di bordi smussati e ombra esterna. Se duplicate una cornice di testo a scopo grafico, raggruppate le varie copie insieme: potrete così applicare gli stessi effetti di scorrimento all’intero gruppo.
  2. Con il campo di testo del numero 5 selezionato, attivate la casella Movimento nella scheda Movimento del pannello Effetti di scorrimento. Impostate la posizione chiave specificandone il valore o trascinando la maniglia a T (in questo esempio, 1425 pixel). Nella sezione Movimento iniziale, impostate l’elemento in modo che si sposti verso sinistra alla stessa velocità (1x) dello scorrimento della pagina. Nella sezione Movimento finale, impostate l’elemento in modo che si sposti verso sinistra a una velocità pari a 0,01 volte la velocità di scorrimento della pagina.
  3. Per verificare il comportamento della pagina, scegliete File > Anteprima pagina nel browser. Fate scorrere la pagina per vedere come le cinque cornici di testo entrano sulla pagina da sinistra mentre la cornice con il numero 5 entra da destra. Fate scorrere la pagina verso l’alto e il basso per vedere come si muovono le cornici di testo.
  4. Chiudete il Browser e tornate all’area di lavoro di Muse.
     

Potete utilizzare gli effetti di scorrimento per creare un sistema di navigazione interattivo, con diversi pulsanti che entrano sulla pagina e si allineano fino a formare una barra di menu in verticale. In questo esempio, mano a mano che si scorre la pagina quattro pulsanti rollover entrano dal basso e si fermano in posizione in modo da formare una barra di menu verticale.

Una volta che i quattro pulsanti sono allineati, da entrambi i lati della pagina entra anche il contenuto di sfondo (una lampadina con sfondo colorato, una cornice di testo e alcune linee diagonali) che crea una sezione del sito.

In questo esempio ai pulsanti non è associato alcun collegamento. Tuttavia potete aggiungere i collegamenti o i tag di ancoraggio necessari dal menu a discesa Collegamento ipertestuale, in modo che quando un visitatore farà clic su un pulsante verrà caricata una nuova pagina o verrà visualizzata una particolare area della pagina corrente.

Per creare un effetto di menu in colonna:

  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. Impostate il colore di riempimento della pagina su Nessuno e il riempimento del browser su un colore in tinta unita. Nel sito di esempio, il riempimento del browser è impostato su un beige chiaro.
  3. Con lo strumento testo, create una nuova cornice di testo. Digitate il testo “Home”. Utilizzate le opzioni di formattazione disponibili nel pannello di controllo per aggiungere un colore di sfondo alla cornice di testo. Modificate a piacere le opzioni di formattazione per formattare il testo. Utilizzate le maniglie ai lati del pulsante per ridimensionarlo fino a circa 300 pixel di larghezza e 115 pixel di altezza.
Utilizzate le opzioni nel pannello di controllo per formattare la cornice di testo.
Utilizzate le opzioni nel pannello di controllo per formattare la cornice di testo.

  1. Aprite il pannello Stati. Selezionate lo stato Al passaggio del mouse e aggiungete un colore di riempimento diverso (o una diversa formattazione) per creare un pulsante rollover.
Selezionate lo stato Al passaggio del mouse e formattate il pulsante per differenziarlo dallo stato Normale.
Selezionate lo stato Al passaggio del mouse e formattate il pulsante per differenziarlo dallo stato Normale.

  1. Dopo aver impostato lo stato Al passaggio del mouse, selezionate nuovamente lo stato Normale.
  2. Passate alla scheda Movimento del pannello Effetti di scorrimento. Con il pulsante selezionato, attivate la casella Movimento. Impostate la posizione chiave trascinando la maniglia a T o immettendo un valore numerico. Nella sezione Movimento iniziale, impostate l’elemento in modo che si sposti verso l’alto a una velocità pari a 0,75 volte la velocità di scorrimento della pagina. Lasciate tutti gli altri campi impostati su 0.
Attivate gli effetti di scorrimento nella scheda Movimento e impostate la direzione e la velocità di movimento.
Attivate gli effetti di scorrimento nella scheda Movimento e impostate la direzione e la velocità di movimento.

  1. Tenete premuto il tasto Opzione/Alt e trascinate il pulsante Home più in giù sulla pagina. Viene così creato un duplicato del pulsante. Assicuratevi che il duplicato sia allineamento verticalmente con il pulsante Home originale. Quando i due elementi sono allineati e il duplicato è ancora selezionato, al centro compare temporaneamente una guida avanzata di colore blu scuro.
Tenete premuto il tasto Opzione/Alt e trascinate per creare un duplicato del pulsante allineato verticalmente.
Tenete premuto il tasto Opzione/Alt e trascinate per creare un duplicato del pulsante allineato verticalmente.

  1. Spostate il pulsante duplicato verso il basso sulla pagina, a circa 460 pixel dal pulsante originale.
  2. Ripetete i passaggi 7 e 8 per duplicare il pulsante altre due volte. Vengono così creati sulla pagina un totale di quattro pulsanti, uniformemente distanziati. Con lo strumento testo, modificate il secondo, il terzo e il quarto pulsante dall’alto immettendo il testo seguente: Products, Photos, Contact Us (Prodotti, Foto, Contattati).
Modificate il testo nelle cornici di testo dei quattro pulsanti.
Modificate il testo nelle cornici di testo dei quattro pulsanti.

Con la duplicazione del primo pulsante Home, erano stati duplicati anche la formattazione e il contenuto della cornice di testo nonché le impostazioni degli effetti di scorrimento. Selezionate uno dei pulsanti duplicati e osservate le impostazioni nel pannello Effetti di scorrimento: le impostazioni nella scheda Movimento corrispondono a quelle applicate al pulsante Home; inoltre la posizione chiave di ogni pulsante è 460 pixel sotto il pulsante precedente (distanza pari allo spazio tra ciascun pulsante alla pagina).

  1. Per calcolate l’altezza totale dei quattro pulsanti allineati nelle rispettive posizioni finali, sommate i valori di altezza e spaziatura. In questo esempio, ogni pulsante è alto 116 pixel e tra un pulsante e quello successivo sono stati lasciati 4 pixel. L’altezza totale della barra di menu verticale completa è quindi di 476 pixel. Con lo strumento rettangolo, disegnate un rettangolo della larghezza desiderata per questa sezione della pagina e con la stessa altezza della barra dei menu. In questo esempio, il rettangolo è di 931x476 pixel.
  2. Se desiderate riprodurre fedelmente questo sito di esempio, potete impostare il riempimento del rettangolo su un colore rosa chiaro, più chiaro del colore dello stato Normale dei pulsanti. Potete anche creare angoli arrotondati, impostando un valore di raggio nel pannello di controllo. In questo esempio, tutti e quattro gli angoli sono impostati su 10 pixel.
Selezionate il rettangolo selezionato e impostate il raggio degli angoli arrotondati.
Selezionate il rettangolo selezionato e impostate il raggio degli angoli arrotondati.

  1. Con lo strumento di selezione, allineate il rettangolo in modo che il bordo superiore sia a circa 5094 pixel dalla parte superiore della pagina. Accertatevi inoltre che il lato sinistro del rettangolo sia allineato verticalmente al lato sinistro dei pulsanti. In questo esempio, il rettangolo e i pulsanti si trovano a 14 pixel dal lato sinistro della pagina. Per vedere le impostazioni, selezionate un elemento e aprite il pannello Trasformazione. Il valore X è la distanza da sinistra (14 pixel) e il valore Y è la distanza dal bordo superiore della pagina (5094 pixel).
  2. Con il rettangolo selezionato, aprite il pannello Effetti di scorrimento e attivate la casella Movimento. Impostate la posizione chiave su 4979.
  3. Per Movimento iniziale, impostate uno spostamento verso destra alla stessa velocità (1) dello scorrimento della pagina. Lasciate tutti gli altri campi della scheda Movimento impostati su 0.
Applicate gli effetti di scorrimento in modo che il rettangolo entri nella pagina da sinistra e si sposti verso destra fino ad arrivare in posizione.
Applicate gli effetti di scorrimento in modo che il rettangolo entri nella pagina da sinistra e si sposti verso destra fino ad arrivare in posizione.

  1. Per fare in modo che il rettangolo si trovi sotto i quattro pulsanti, con il rettangolo selezionato scegliete Oggetto > Porta sotto.
  2. Scegliete File > Inserisci, selezionate un file immagine e fate clic una volta sulla pagina per inserirlo. In questo esempio, è stato inserito un file PNG con trasparenza con l’immagine di una lampadina. La lampadina è stata collocata sopra il rettangolo grande, a destra dell’area dei pulsanti del menu. In questo esempio, l’immagine è posizionata a 501 pixel da sinistra (posizione X) e 5245 pixel dal bordo superiore della pagina (posizione Y).
  3. Per fare in modo che l’immagine inserita si trovi sotto i quattro pulsanti, con l’immagine selezionata scegliete Oggetto > Porta sotto. L’immagine inserita dovrà trovarsi sopra al rettangolo grande ma sotto ai quattro pulsanti.
  4. Con l’immagine inserita selezionata, aprite la scheda Movimento del pannello Effetti di scorrimento e attivate la casella Movimento. Impostate la posizione chiave sul valore desiderato. In questo esempio è impostata su 4979 pixel.
  5. Nella sezione Movimento iniziale, impostate il valore di destra in modo che si sposti a una velocità pari a 0,75 volte la velocità di scorrimento della pagina. Impostate tutti gli altri valori di direzione su 0.
Impostate Movimento iniziale in modo da ottenere uno spostamento verso destra alla stessa velocità del rettangolo.
Impostate Movimento iniziale in modo da ottenere uno spostamento verso destra alla stessa velocità del rettangolo.

  1. Con lo strumento testo, create una cornice di testo. In questo file di esempio, la cornice contiene il seguente testo: “Stack linked text frames with high contrast roll-overs to create unusual menus” (Disponete in colonna cornici di testo collegate con rollover contrastanti per creare menu insoliti). Potete inserire il testo che preferite. Formattate il testo con le opzioni di formattazione disponibili nel pannello di controllo. In questo esempio, alla cornice di testo non è stato applicato alcun riempimento di sfondo.
  2. Con lo strumento selezione, posizionate la cornice di testo a destra dell’immagine inserita. In questo esempio, per la cornice di testo è stato impostato il valore X su 357 pixel (da sinistra) e il valore Y su 5136 pixel (dall’alto). La posizione effettiva dipende dal contenuto di testo e dalle opzioni di formattazione applicate alla cornice di testo.
  3. Con la cornice di testo selezionata, scegliete Oggetto > Porta indietro oppure spostatela nel pannello Livelli in modo che venga visualizzata dietro ai quattro pulsanti ma sopra al rettangolo grande.
  4. Selezionate la casella Movimento nel pannello Effetti di scorrimento. Impostate la posizione chiave trascinando la maniglia a T o immettendo un valore. Nel sito di esempio, la posizione chiave è impostata su 4979 pixel, come l’immagine della lampadina.
  5. Nella sezione Movimento iniziale, impostate la cornice di testo in modo che si sposti verso sinistra a una velocità pari 0,5 volte la velocità di scorrimento della pagina. Impostate tutti gli altri campi su 0.
La cornice di testo è impostata per spostarsi verso sinistra (nella direzione opposta del rettangolo e dell’immagine inserita) e più lentamente.
La cornice di testo è impostata in modo da spostarsi più lentamente verso sinistra.

La sezione del menu in colonna è ora completa. Tuttavia, potete aggiungere ancora un elemento grafico. Dovrete aggiungere alcuni rettangoli ruotati al di sopra dell’angolo in basso a destra del rettangolo grande, così come nell’esempio del menu con scivolamento erano stati aggiunti dei rettangoli ruotati per creare un effetto di righe diagonali.

  1. Con lo strumento rettangolo disegnate alcuni rettangoli con larghezze diverse. Riempite i rettangoli con il colore di sfondo applicato al riempimento del browser. In questo modo, i rettangoli diventeranno visibili solo quando il rettangolo grande si sposterà verso destra dietro di essi. Se necessario, potete raggruppare i rettangoli ruotati per gestirli come un unico elemento.
Ruotate una serie di rettangoli in modo da creare delle righe diagonali nell’angolo in basso a destra del rettangolo più grande.
Ruotate una serie di rettangoli in modo da creare delle righe diagonali nell’angolo in basso a destra del rettangolo più grande.

  1. Se necessario, usate il pannello Livelli o scegliete Oggetto > Porta sotto per disporre il rettangolo più grande dietro a tutti gli altri elementi della pagina.
  2. Verificate periodicamente il risultato, facendo clic su Anteprima o osservando un’anteprima della pagina in un browser e facendo scorrere la pagina verso il basso per osservare come il menu in colonna entra in posizione. Al termine della verifica, tornate in Muse. 

Sfondo con movimento

Per creare un effetto di sfondo con movimento, potete creare una serie di grandi rettangoli riempiti con immagini di sfondo affiancate che coprono tutta la lunghezza della pagina. In questo esempio per applicare le impostazioni di movimento non viene utilizzata la scheda Movimento del pannello Effetti di scorrimento, ma piuttosto la scheda Scorrimento del menu Riempimento.

Per creare un effetto di sfondo con movimento:

  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 6254 pixel.

Nota:

per questo esempio non è importante impostare un colore di riempimento del browser, poiché la pagina verrà coperta da rettangoli. Impostate il colore di riempimento della pagina su Nessuno.

  1. Nella parte superiore della pagina, disegnate un grande rettangolo con lo strumento rettangolo. In questo esempio, il rettangolo è largo 1159 pixel e alto 1312 pixel. Con lo strumento Selezione, centrate il rettangolo sulla pagina con entrambi i lati che si estendono oltre i lati della finestra del browser.
  2. Con il rettangolo ancora selezionato, usate il menu Riempimento per impostare un’immagine di sfondo. Impostate il menu Adatta su Affianca per affiancare l’immagine.
Impostate un’immagine di sfondo affiancata come riempimento del rettangolo.
Impostate un’immagine di sfondo affiancata come riempimento del rettangolo.

  1. Se necessario, potete utilizzare il menu Effetti per impostare un effetto ombra e creare un bordo attorno al rettangolo.
  2. Con il rettangolo riempito ancora selezionato, fate clic sulla scheda Scorrimento del menu Riempimento. Attivate la casella Movimento e trascinate la maniglia a T oppure immettete un valore nel campo per impostare la posizione chiave. Nel sito di esempio, la posizione chiave è impostata su 512 pixel. Tuttavia potete abbassare la maniglia per allinearla al bordo superiore del rettangolo.
  3. Nella sezione Movimento iniziale, impostate la direzione di spostamento verso il basso e a sinistra, impostandole entrambe su una velocità pari a 0,2 volte la velocità di scorrimento della pagina. Utilizzate queste stesse impostazioni anche per la sezione Movimento finale.
Impostare le opzioni Movimento nella scheda Scorrimento del menu Riempimento.
Impostare le opzioni Movimento nella scheda Scorrimento del menu Riempimento.

  1. Ripetete i passaggi da 2 a 6 per creare un altro rettangolo con riempimento. Posizionate il nuovo rettangolo direttamente sotto al primo, in modo da coprire tutta l’area di riempimento del browser e da non lasciare spazio vuoto tra i due rettangoli. Riempite il nuovo rettangolo con un altro riempimento di sfondo con immagine affiancata.
  2. Ripetete il passaggio 7 per creare un terzo rettangolo e posizionatelo immediatamente sotto al secondo. Dal menu Riempimento impostate un’altra immagine di sfondo affiancata. Potrebbe essere utile ridurre la visualizzazione dal menu Visualizza in modo da poter visualizzare tutti i rettangoli e allinearli verticalmente sulla pagina.
Riducete la visualizzazione e con lo strumento selezione posizionate verticalmente i tre rettangoli grandi.
Riducete la visualizzazione e con lo strumento selezione posizionate verticalmente i tre rettangoli grandi.

Nota:

in questo sito di esempio, il terzo rettangolo è più lungo dei primi due. Potete trascinare le maniglie per allungare il terzo rettangolo duplicato o crearne un quarto in modo da riempire eventuale area rimanente in fondo alla pagina.  

  1. Con il secondo rettangolo selezionato, aprite la scheda Scorrimento del menu Riempimento. Nella sezione Movimento iniziale, impostate il rettangolo in modo che si sposti verso destra a una velocità pari a 0,3 volte la velocità di scorrimento della pagina. Nella sezione Movimento finale, applicate le stesse impostazioni per spostare il rettangolo verso destra a una velocità pari a 0,3 volte la velocità di scorrimento. Lasciate i campi di direzione verticale impostati su 0.
Impostate le opzioni di Movimento iniziale e Movimento finale per spostare il secondo rettangolo verso destra.
Impostate le opzioni di Movimento iniziale e Movimento finale per spostare il secondo rettangolo verso destra.

  1. Selezionate il terzo rettangolo e modificate le impostazioni nella scheda Scorrimento del menu Riempimento. Nella sezione Movimento iniziale, impostate uno spostamento verso l’alto a una velocità pari a 0,25 volte la velocità di scorrimento della pagina e verso sinistra a una velocità pari a 0,6 volte la velocità di scorrimento. Utilizzate queste stesse impostazioni anche per la sezione Movimento finale del terzo rettangolo.
  2. Per verificare il comportamento della pagina, scegliete File > Anteprima pagina nel browser. Fate scorrere la pagina per vedere i rettangoli con affiancamento che si spostano in diagonale man mano che scorrete fino al fondo della pagina. I rettangoli continuano a muoversi anche quando fate scorrere la pagina verso l’alto.
  3. Chiudete il Browser e tornate all’area di lavoro di Muse.

Maschere

In questo esempio, un grafico a barre entra in posizione con un effetto di animazione. Una freccia rosa si estende verso l’alto, passando davanti e dietro alle barre del grafico. Anche se le barre nel grafico sembrano crescere dal fondo del grafico, in realtà sono rettangoli colorati in tinta unita con effetti di scorrimento che entrano in posizione dietro ad altri rettangoli bianchi più grandi (con riempimento bianco in tinta unita, come il colore di sfondo della pagina).

In questo esempio vengono utilizzate diverse tecniche insieme agli effetti di scorrimento. La disposizione degli elementi viene eseguita con il pannello Livelli. I rettangoli bianchi sono disegnati sopra agli elementi del grafico. Quando i rettangoli bianchi coprono il grafico a barre, le barre e la freccia sono nascoste, come se fossero mascherate. I rettangoli bianchi e la tabella del grafico utilizzano impostazioni pari a 0 negli effetti di scorrimento in modo da restare fermi in posizione mentre la pagina scorre. Alle barre e alla freccia rosa sottostanti sono stati applicati effetti di scorrimento in modo che si spostano verso l’alto e diventano visibili mano a mano che il grafico viene composto.

Per creare un effetto maschera:

  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 6076 pixel.
  2. Impostate il riempimento della pagina e del browser su bianco in tinta unita (potete anche scegliere un altro colore, ma ricordate di usare poi lo stesso colore anche per il riempimento dei rettangoli che fungono da maschera).
  3. Con lo strumento rettangolo, disegnate un rettangolo grande sulla pagina. In questo esempio, il rettangolo è largo 804 pixel e alto 489 pixel.
  4. Impostate il colore di riempimento del rettangolo su Nessuno. Impostate un colore di traccia di vostra scelta. Nel menu Traccia, impostate su 20 lo spessore dei lati sinistro e inferiore e su 0 lo spessore dei lati superiore e destro (per nascondere la traccia). Viene così creata la base del grafico a barre.
     
Con il menu Traccia applicate una traccia ai lati sinistro e inferiore del rettangolo.
Con il menu Traccia applicate una traccia ai lati sinistro e inferiore del rettangolo.

  1. Con il rettangolo selezionato, passate alla scheda Movimento del pannello Effetti di scorrimento. Impostate la posizione chiave e immettete 0 in tutti e quattro i campi. Con questa impostazione il rettangolo non si sposta né prima né dopo che sia stata raggiunta la posizione chiave e resta quindi fermo nella stessa posizione.
Immettete 0 in tutti i campi per “fissare” il rettangolo sulla pagina.
Immettete 0 in tutti i campi per “fissare” il rettangolo sulla pagina.

  1. Con lo strumento rettangolo disegnate due rettangoli più grandi. Disegnate il primo rettangolo in modo che sia allineato al lato sinistro del grafico. In questo esempio, il rettangolo è largo 657 pixel e alto 1810 pixel.
  2. Disegnate il secondo rettangolo sotto il grafico, allineandolo al bordo inferiore. In questo esempio, il rettangolo è largo 1002 pixel e alto 1541 pixel.
  3. Impostate il colore di riempimento di entrambi i rettangoli su bianco (o sul colore utilizzato come riempimento del browser, se diverso da bianco) e la traccia su 0. Con lo strumento selezione, allineate i rettangoli ai due lati del grafico.
Posizionate i due rettangoli più grandi a sinistra e sotto il grafico.
Posizionate i due rettangoli più grandi a sinistra e sotto il grafico.

  1. Con i rettangoli selezionati, fate clic con il pulsante destro del mouse e scegliete Oggetto > Raggruppa per raggruppare i due rettangoli maschera.
  2. Con il gruppo dei rettangoli selezionato, passate alla scheda Movimento del pannello Effetti di scorrimento. Impostate la posizione chiave (in questo esempio è impostata su 1516 pixel) e immettete 0 in tutti e quattro i campi. Con questa impostazione il gruppo dei rettangoli bianchi non si sposta né prima né dopo che sia stata raggiunta la posizione chiave. Il gruppo resta fermo in posizione come la tabella esterna del grafico.
  3. Usate il pannello Livelli per nascondere e bloccare temporaneamente il gruppo.
  4. Scorrete verso il basso fino allo spazio sotto il gruppo. Con lo strumento Rettangolo disegnate cinque rettangoli tutti della stessa larghezza. In questo esempio, tutte le barre sono larghe 74 pixel e hanno altezze diverse. Da sinistra a destra, i cinque rettangoli di esempio sono alti rispettivamente 141, 188, 292, 444 e 583 pixel. A tutti i rettangoli è stato applicato come riempimento lo stesso colore verde della traccia che definisce i bordi sinistro e inferiore del grafico.
Disponete i cinque rettangoli sulla pagina.
Disponete i cinque rettangoli sulla pagina.

  1. Di seguito sono riportati i valori X e Y della posizione dei rettangoli (da sinistra a destra):
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
  2. A questo punto selezionate ciascuno dei rettangoli, a partire da quello più a sinistra. Per ciascun rettangolo selezionato, attivate la casella Movimento nella scheda Movimento del pannello Effetti di scorrimento e impostate le seguenti posizioni chiave.
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
  3. Con tutti i rettangoli selezionati, modificate le impostazioni nel pannello Effetti di scorrimento, in modo che il movimento iniziale avvenga verso l’alto alla stessa velocità (1x) dello scorrimento della pagina. Impostate tutti gli altri campi su 0.
Nel pannello Effetti di scorrimento, impostate i valori di movimento contemporaneamente per tutti e cinque i rettangoli.
Nel pannello Effetti di scorrimento, impostate i valori di movimento contemporaneamente per tutti e cinque i rettangoli.

  1. Inserite sulla pagina un’immagine PNG con trasparenza. Nel sito di esempio, il file PNG è un’immagine di una freccia rosa che avanza a zigzag verso l’alto. Il file PNG utilizzato in questo esempio è di 695x443 pixel. Dopo averlo inserito sulla pagina, portatelo in posizione, X: 78 e Y: 3427.
  2. Nel pannello Livelli, portate il file PNG sotto alla prima e alla terza barra (da sinistra) ma sopra alla seconda, quarta e quinta barra.
Usate il pannello Livelli per disporre la freccia del file PNG in modo che sembri avanzare a slalom tra le barre del grafico.
Usate il pannello Livelli per disporre la freccia del file PNG in modo che sembri avanzare a slalom tra le barre del grafico.

  1. Con l’immagine della freccia selezionata, aprite la scheda Movimento del pannello Effetti di scorrimento e attivate la casella Movimento. Impostate la posizione chiave (in questo esempio è impostata su 3238 pixel). Nella sezione Movimento iniziale, impostate le direzioni verso l’alto e a destra e immettete 0,25 per la velocità di entrambi i campi di movimento iniziale. Impostate entrambi i campi della sezione Movimento finale su 0.
Modificate le impostazioni di movimento nel pannello Effetti di scorrimento.
Modificate le impostazioni di movimento nel pannello Effetti di scorrimento.

  1. Nel pannello Livelli, rendete visibile e sbloccate il gruppo dei due rettangoli bianchi che avevate precedentemente nascosto e bloccato. Spostate il gruppo sopra agli altri elementi, in modo che venga visualizzato sopra agli altri contenuti della pagina. Poiché il gruppo si trova sopra, fungerà da maschera e le barre e la freccia diventeranno visibili solo mano a mano che si spostano verso l’alto nella cornice del grafico.
  2. Per verificare il comportamento della pagina, scegliete File > Anteprima pagina nel browser. Fate scorrere la pagina per vedere come il grafico a barre entra in posizione, con i due rettangoli bianchi che mascherano le barre e nascondono gli elementi del grafico finché questi non si trovano all’interno del grafico.
  3. Chiudete il Browser e tornate all’area di lavoro di Muse.

Esempi di progettazioni di siti con effetti di scorrimento

Nel sito Web Demential Lab potete vedere la funzione degli effetti di scorrimento in azione.

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