Come ridimensionare lo stage Adobe Edge Animate - dummies

Lo stage è il luogo in cui posizionerai i tuoi elementi, come immagini, testo e oggetti disegnati. Lo stage è una finestra HTML attiva, il che significa che ciò che vedi sullo schermo è ciò che il pubblico vede quando visualizza e interagisce con la tua composizione. È possibile ridimensionare lo stage in due modi diversi:

• Pixel: Adobe Edge Animate CC consente di impostare lo stage in modo che rimanga una dimensione specifica indipendentemente dalle dimensioni della finestra del browser.

• Percentage: Per coloro che preferiscono un design web più reattivo.

• Test del design web reattivo: Potrebbe essere necessario modificare il colore di sfondo dello stage per testare la reattività del progetto.

Dimensionamento dello stage in base ai valori dei pixel

Molto probabilmente uno dei primi passaggi da eseguire è dimensionare correttamente lo stage. Se si prevede di inserire l'animazione in una pagina Web esistente, determinare innanzitutto lo spazio che si desidera che l'animazione acquisisca in quella pagina, quindi dimensionare lo stage di conseguenza.

Per ridimensionare lo stage, fare clic sui numeri arancioni nella sezione Stage del pannello Proprietà - nella colonna a sinistra in alto nella parte superiore dello schermo - come mostrato. Facendo clic sui numeri della larghezza o dell'altezza è possibile digitare esattamente le dimensioni (in pixel) che si desidera avere per lo stage.

Se non si desidera digitare i numeri, Edge Animate offre un metodo alternativo per ridimensionare lo stage: posizionare semplicemente il cursore su uno dei numeri arancioni. Quando il cursore si trasforma in una doppia freccia (come mostrato), puoi fare clic e trascinare per aumentare o ridurre la dimensione dello stage.

Dimensionamento dello stage in base alla percentuale delle dimensioni dello schermo

Se si desidera creare un'animazione che non deve adattarsi a una dimensione specifica, è necessario passare da pixel (px) a percentuale (%), facendo clic sul pulsante di attivazione (vedere questa figura). Questo è un passo verso la creazione di un web design reattivo. Quando ridimensionate lo stage per percentuale dello schermo anziché per valori di pixel, lo stage si dimensiona in base alla dimensione dell'elemento genitore.

Un esempio di elemento genitore può essere la stessa finestra del browser - se l'animazione è una pagina Web autonoma. Tuttavia, se l'animazione è una parte di una pagina Web, l'elemento padre può essere un elemento div all'interno del quale l'animazione è nidificata.

Per fare in modo che lo stage riempia l'intera finestra del browser, imposta la larghezza e l'altezza dello stage al 100%, come mostrato in questa figura. Per fare in modo che il tuo Stage riempia metà della finestra del browser, imposta lo Stage al 50%; e così via, a seconda di quanta parte della finestra del browser desideri occupare la tua animazione.

Per impostazione predefinita, lo sfondo dello stage è bianco. Pertanto non vedrai alcuna differenza nello stage quando cambi tra px e%.

Per verificare la differenza tra l'utilizzo di px e% per le dimensioni dello stage, cambiare il colore dello sfondo dello stage in qualcosa di diverso dal bianco, ad esempio il rosso. Quindi sperimenta con percentuali diverse e dimensioni px per vedere i diversi effetti.

Per cambiare il colore di sfondo dello stage (come mostrato), fare clic sul quadrato bianco per far apparire un selettore di colori.

Puoi dire a Edge Animate di mantenere invariate la larghezza e le proporzioni dell'altezza facendo clic sull'icona Larghezza e altezza link (evidenziata in questa figura). Per impostazione predefinita, l'icona Larghezza e altezza link è disattivata; con quell'impostazione predefinita, Edge Animate non manterrà la larghezza (o altezza) nella stessa proporzione quando ridimensioni.