LA CAMPANA

C'è chi legge queste notizie prima di te.
Iscriviti per ricevere articoli freschi.
E-mail
Nome
cognome
Come vuoi leggere The Bell
No spam

Programma gratuito per la creazione di animazioni flash utilizzando applet già pronte.

Molti di voi, penso, hanno mai provato a creare i propri siti (o forse possiedi persino un portale molto popolare).

In un modo o nell'altro, tutti si trovavano di fronte al problema di una progettazione efficace delle loro pagine web. E poiché l'HTML statico sta gradualmente diventando un ricordo del passato, molti oggi stanno rivolgendo la propria attenzione a tecnologie popolari come JavaScript e Flash. Ti consentono di creare bellissime pagine dinamiche animate con funzionalità avanzate.

Non è difficile per uno specialista creare un piccolo flash-banner animato, tuttavia, cosa fare per il resto senza iniziare? Se uno studio approfondito dei linguaggi di programmazione non è incluso nei tuoi piani immediati, allora puoi, come sempre, ricorrere all'aiuto di software specializzato. Oggi impareremo le nozioni di base per lavorare nel programma Creatore di effetti avanzato.

Questa utility ti consente di creare tutti i tipi di effetti flash e JavaScript, sia i tuoi "da zero", sia basati su modelli già pronti! Advanced Effect Maker esiste in diverse edizioni, che differiscono per il numero di effetti già pronti e il grado di libertà dell'utente. Confronta le configurazioni massime e gratuite:

  Confronto tra la versione gratuita dell'editor flash Advanced Effect Maker Free Edition e la versione commerciale di Commercial Edition

Il più grande svantaggio della versione gratuita del programma è la presenza di una sorta di pre-applauso, che consente di visualizzare alcuni effetti già pronti solo dopo aver fatto clic sul banner creato. Su questo, praticamente tutte le differenze finiscono :).

  Installazione del programma

Advanced Effect Maker è installato in modo standard, quindi andremo subito al lavoro immediato con il programma:

Al primo lancio, ci verrà offerto di familiarizzare con l'accordo di licenza. Per accettarlo, fai clic sul pulsante "Accetto". Successivamente, puoi iniziare a studiare l'interfaccia dell'utilità:

  Interfaccia e lavora con l'editor

Nonostante la lingua inglese, qui tutto è semplice e chiaro. La finestra Advanced Effect Maker è divisa in due parti. A sinistra ci sono solo due pulsanti grandi: il primo per accedere alla galleria degli effetti disponibili e il secondo per aggiungere ulteriori applet (se si desidera acquistarli;)). Nella parte destra, vediamo un catalogo di modelli disponibili con sottosezioni e una finestra di anteprima, nonché un'area di modifica degli effetti.

Per iniziare a modificare il modello desiderato, basta fare clic sulla sua immagine e se vuoi solo vedere come funziona, quindi fai clic sull'iscrizione "Anteprima" sotto l'immagine:

Quando si apre l'effetto desiderato, potrebbe apparire un messaggio su un file esistente. In questo caso, semplicemente ignoralo facendo clic sul pulsante "Ok":

Se il modello si apre correttamente, possiamo vedere diverse schede che contengono tutti i tipi di impostazioni:

  Impostazioni del programma e creazione di animazioni

La prima scheda è Generale. Questo contiene le impostazioni generali del progetto. Di solito si tratta di dimensioni (larghezza - larghezza e altezza - altezza), nome (nome file), qualità del file futuro (qualità), così come la modalità finestra del filmato flash (modalità finestra).

La seconda scheda - "Colore", come suggerisce il nome, è responsabile per i colori utilizzati nel progetto. Qui è tutto molto chiaro, quindi passiamo al prossimo - "Messaggi":

Qui abbiamo due campi. Nel primo campo (a sinistra) inseriamo il testo che dobbiamo visualizzare con un effetto speciale e nel secondo il link che l'utente seguirà facendo clic sul nostro banner. Il vantaggio di Advanced Effect Maker è che possiamo inserire un numero illimitato di righe di testo (così come i collegamenti), ma il principale svantaggio è la mancanza di supporto per la lingua russa :(.

Le due schede successive vengono utilizzate per controllare rispettivamente i caratteri (Caratteri) e le proprietà dell'animazione (Altri). Un avvertimento: se si desidera utilizzare caratteri TTF alternativi, dovranno essere convertiti in anticipo per la compatibilità con Advanced Effect Maker. Per fare ciò, chiama lo strumento Converti font dal menu Strumenti e, dopo aver selezionato il font desiderato, fai clic sul pulsante Converti:

Dopo aver apportato tutte le modifiche, possiamo fare clic sul pulsante Crea applet. Successivamente, verranno creati due file nella cartella di destinazione del progetto: SWF (animazione diretta) e HTML (contiene le istruzioni per incorporare l'animazione risultante nel codice della pagina:

  Salvataggio dei risultati del lavoro

Tuttavia, questo non è tutto. Con Advanced Effect Maker puoi creare il tuo effetto basato su uno esistente o completamente "da zero"! Per fare ciò, vai al menu "Strumenti" e attiva la voce "Plugin Maker":

Qui, dovrai prima specificare un nome per il nuovo progetto, così come alcuni altri parametri (facoltativo). Successivamente, sarà possibile fare clic sul pulsante Crea applet e andremo direttamente alla finestra dell'editor degli effetti:

Qui ci sono diversi pulsanti che ti permettono di inserire alcune funzioni standard nello scenario dell'effetto futuro. Il problema è che tutte le variabili e i valori necessari dovranno essere inseriti manualmente da soli, e qui sono richieste alcune abilità di programmazione in ActionScript o JavaScript :(.

  risultati

Advanced Effect Maker può attirare i web designer alle prime armi, in quanto ti consente di creare facilmente banner accattivanti, menu animati, presentazioni e persino piccoli giochi (come le macchioline). Lo svantaggio sotto forma di un pre-applauso (se disponibile nell'effetto selezionato) può essere eliminato usando speciali programmi di decompilatore di file SWF (compresi quelli gratuiti);).

Buona fortuna in tutti i tuoi sforzi e successo creativo!

Post scriptum È consentito copiare e citare liberamente questo articolo a condizione che sia fornito un collegamento aperto e attivo alla fonte e che sia preservata la paternità di Ruslan Tertyshny.

Siamo costantemente di fronte all'animazione flash - su Internet e nelle trasmissioni televisive. La creazione di una semplice animazione flash mediante la tecnologia Flash è un'operazione abbastanza semplice, poiché Flash offre molti strumenti utili che semplificano l'intero processo. Se vuoi creare un'animazione o un cartone animato in flash, puoi disegnarlo in un paio d'ore.

passaggi

Parte 1

Animazione Flash singolo

    Nozioni di base sull'animazione fotogramma per fotogramma.  Questo metodo è considerato il metodo principale per creare un'animazione "tradizionale", in cui ogni fotogramma successivo include un'immagine, ma leggermente modificata. Quando si riproducono tutti i fotogrammi, l'immagine "prende vita". Lo stesso metodo viene utilizzato dagli animatori che disegnano i cartoni a mano e impiegano più tempo del gemellaggio (vedere la sezione successiva).

    • Per impostazione predefinita, Flash riproduce 24 fotogrammi al secondo (FPS). Ciò significa che verranno visualizzati 24 fotogrammi in un secondo, ma non tutti devono necessariamente essere diversi. È possibile modificare questo parametro (se lo si desidera) in 12 fotogrammi al secondo, ma a 24 fotogrammi al secondo l'animazione verrà riprodotta in modo più fluido.
  1. Installa Flash Professional.  Esistono molti programmi per la creazione di animazioni flash, ma il più potente è Adobe Flash Professional CC. Puoi installare una versione di prova gratuita di questo programma o utilizzare un altro prodotto (se non desideri registrarti ad Adobe Creative Cloud). Il resto di questo articolo descrive come lavorare con Flash Professional.

    Poiché l'animazione fotogramma per fotogramma richiede diverse immagini (leggermente diverse tra loro), è necessario creare queste immagini manualmente. Per fare ciò, utilizzare Adobe Flash Professional o disegnare immagini in qualsiasi editor grafico.

    • Se vuoi che le dimensioni delle tue immagini cambino facilmente senza perdere la loro qualità, crea immagini in grafica vettoriale anziché in bitmap. Le immagini vettoriali si ridisegneranno quando vengono ridimensionate (ovvero, eviterai pixel o anti-aliasing). Le immagini raster sono immagini tradizionali, come fotografie, immagini disegnate e così via. Quando si tenta di ingrandire tali immagini, si ottiene un'immagine molto distorta.
  2. Crea il primo fotogramma.  Quando avvii Adobe Flash Professional per la prima volta, vedrai un'area di disegno vuota (livello) e una sequenza temporale vuota. Man mano che vengono aggiunti i fotogrammi, la sequenza temporale verrà riempita automaticamente. Puoi lavorare con i livelli nello stesso modo in cui lo fai in Photoshop.

    • Prima di aggiungere un'immagine, crea uno sfondo di base per l'animazione. Rinomina "Livello 1" in "Sfondo", quindi bloccalo. Crea un secondo livello e chiamalo come preferisci. Questo sarà il livello su cui creerai l'animazione.
    • Aggiungi un'immagine alla tela del primo fotogramma. Puoi importare il disegno dal tuo computer oppure puoi usare gli strumenti di disegno per creare il disegno direttamente nel programma.
    • Il primo frame è un frame "chiave". Un fotogramma chiave è un fotogramma che include un'immagine e costituisce la base ("backbone") dell'animazione. Creerai un nuovo fotogramma chiave ogni volta che cambi l'immagine.
    • I fotogrammi chiave sulla sequenza temporale sono indicati da un punto nero.
    • Non è necessario un fotogramma chiave in ogni fotogramma successivo. Crea un fotogramma chiave ogni 4-5 fotogrammi per creare una buona animazione.
  3. Converti l'immagine in simbolo.  In questo caso, è possibile aggiungere più volte l'immagine alla cornice. Ciò è particolarmente utile se è necessario aggiungere rapidamente più immagini dello stesso tipo in una cornice (ad esempio, pesci in un acquario).

    • Evidenzia un'immagine. Fare clic destro sull'immagine e selezionare "Converti in simbolo". L'immagine verrà aggiunta alla libreria, che ne semplificherà l'utilizzo in futuro.
    • Elimina il motivo. Non preoccuparti: puoi aggiungerlo al frame semplicemente trascinandolo dalla libreria. Quindi puoi aggiungere la stessa immagine alla cornice più volte.
  4. Aggiungi cornici vuote.  Se il tuo primo fotogramma chiave è pronto, inserisci cornici vuote, quindi procedi alla creazione di un secondo fotogramma chiave. Premi F5 (quattro o cinque volte) per aggiungere cornici vuote dopo il primo fotogramma chiave.

    Crea un secondo fotogramma chiave (dopo aver aggiunto alcuni fotogrammi vuoti).  Esistono due modi diversi per farlo: puoi copiare un fotogramma chiave esistente e apportare piccole modifiche ad esso, oppure puoi creare un fotogramma chiave vuoto e aggiungere una nuova immagine ad esso. Se si utilizza un disegno creato in un altro programma, utilizzare il secondo metodo. Se state inserendo un'immagine creata usando gli strumenti di disegno di Adobe Flash Professional, utilizzate il primo metodo.

    • Per creare un fotogramma chiave utilizzando i contenuti del fotogramma chiave precedente, premere F6. Per creare un fotogramma chiave vuoto, fai clic con il pulsante destro del mouse sull'ultimo fotogramma nella sequenza temporale e seleziona "Inserisci fotogramma chiave vuoto".
    • Dopo aver creato il secondo fotogramma chiave, è necessario apportare modifiche alla sua immagine in modo che l'animazione prende vita. Se hai utilizzato gli strumenti di disegno di Adobe Flash Professional, seleziona lo strumento Trasforma per selezionare l'elemento di disegno (come la mano di un personaggio) e modificarlo.
    • Se inserisci una nuova immagine in ciascun fotogramma chiave, assicurati che sia nel posto giusto (in base alla sequenza logica dei fotogrammi).
  5. Ripeti il \u200b\u200bprocesso.  Dopo aver creato due fotogrammi chiave, ripeti il \u200b\u200bprocesso: aggiungi alcuni fotogrammi vuoti tra ciascun fotogramma chiave e assicurati che l'animazione venga riprodotta in modo "uniforme".

    • Apporta piccole modifiche. Più piccole (meno evidenti) sono le modifiche, più uniforme viene riprodotta l'animazione. Ad esempio, se vuoi che il personaggio alzi la mano, il secondo fotogramma chiave non dovrebbe includere un disegno in cui il personaggio è rappresentato con la mano già alzata. Utilizzare invece alcuni fotogrammi chiave per passare da una mano abbassata a una mano sollevata. In questo caso, l'animazione sarà più fluida.
  6. Trasforma il disegno. Se sono stati creati fotogrammi chiave e un percorso, è possibile trasformare l'immagine in modo che cambi in modo uniforme quando si sposta lungo il percorso dell'interpolazione. È possibile modificare la forma, il colore, l'inclinazione, la dimensione e qualsiasi altro parametro dell'immagine.

    • Seleziona la cornice in cui verrà trasformata l'immagine.
    • Apri il pannello delle proprietà dell'immagine. Per fare ciò, premere F3.
    • Modificare i valori dei parametri nella finestra delle proprietà dell'immagine. Ad esempio, puoi cambiare la tonalità o il colore, aggiungere filtri, cambiare la dimensione.
    • Puoi anche usare lo strumento "Trasformazione libera" per cambiare il modello come preferisci.
  7. Aggiungi gli ultimi ritocchi.  Controlla l'animazione creata premendo Ctrl + Invio. Assicurati che il disegno (personaggio) stia cambiando correttamente e che l'animazione venga riprodotta alla velocità corretta. Se l'animazione viene riprodotta troppo velocemente, ridurre il valore FPS o aumentare la durata dell'interpolazione.

    • Per impostazione predefinita, FPS è 24, quindi prova a ridurre questo valore a 12. Modifica il valore FPS nella barra delle proprietà. Tuttavia, con FPS \u003d 12, l'animazione potrebbe non essere riprodotta abbastanza uniformemente.
    • Per modificare la durata dell'interpolazione, selezionare il livello contenente l'interpolazione e utilizzare il dispositivo di scorrimento per modificare la durata dell'interpolazione. Se si desidera raddoppiare la durata dell'interpolazione, spostare il dispositivo di scorrimento su 48 fotogrammi. Ricorda di inserire lo sfondo in cornici vuote in modo che lo sfondo non scompaia nel mezzo dell'animazione. Per fare ciò, selezionare il livello di sfondo, fare clic sull'ultimo fotogramma dell'animazione (sulla linea temporale), quindi premere F5.

Parte 3

Aggiunta di effetti sonori e musica
  1. Registra o scarica effetti sonori e musica.  Puoi aggiungere effetti sonori all'animazione per renderlo più spettacolare. La musica renderà l'animazione più eccitante e può trasformare una buona animazione in una fantastica. Flash supporta numerosi formati di file audio, tra cui AAC, MP3, WAV e AU. Scegli un formato che garantisca un'alta qualità del suono con una dimensione minima del file.

    • Il formato MP3 garantisce un'alta qualità del suono con una dimensione minima del file. I file WAV sono di grandi dimensioni.
  2. Importa i file audio nella libreria per poter aggiungere rapidamente suoni e musica all'animazione.  Fai clic su "File" - "Importa" - "Importa in libreria". Trova il file audio sul tuo computer. Assicurati che il file audio abbia un nome accattivante in modo da poterlo trovare rapidamente.

    Crea un nuovo livello per ogni file audio. Ciò non è necessario e puoi aggiungere l'audio ai livelli esistenti, ma l'inserimento di un file audio in un livello separato ti consentirà di controllare meglio la colonna sonora dell'animazione.

    Crea un fotogramma chiave da cui inizierà la riproduzione del suono.  Sul livello audio, selezionare il riquadro di animazione da cui inizierà la riproduzione del suono. Premi F7 per inserire un fotogramma chiave vuoto. Ad esempio, se si desidera inserire un file audio che verrà riprodotto durante l'animazione, selezionare il primo fotogramma sul livello con il file audio. Se aggiungi la voce di un personaggio, seleziona il riquadro in cui il personaggio inizia a parlare.

Questo articolo ti mostrerà come iniziare con Adobe Flash CS5 con semplici passaggi. Il tema della lezione è l'animazione semplice, la creeremo senza approfondire la complessità dell'interfaccia e del programma.

Crea un nuovo documento Flash

Apri il programma e crea un nuovo documento "ActionScript 3.0".

Disegna un oggetto per l'animazione successiva

Ora disegna un cerchio. Seleziona lo strumento ovale sul pannello di destra e tieni premuto il pulsante sinistro del mouse e il pulsante Maiusc sulla tastiera, disegna un cerchio su uno sfondo bianco.

Utilizzando lo "Strumento selezione" selezionare l'oggetto appena creato facendo clic su di esso con il mouse o catturandolo in una selezione quadrata.

Converti un oggetto in un simbolo per una semplice animazione

Per ulteriori lavori, è necessario convertire l'oggetto in un simbolo. Poiché il cerchio è già selezionato, premi il pulsante destro del mouse e seleziona "Converti in simbolo" nel menu contestuale.

Dall'elenco "Tipo", selezionare "Grafica"

Ora un quadrato blu dovrebbe apparire attorno al nostro oggetto.

Crea un'animazione classica (Tween classica)

Per creare un'animazione è necessario designare un "fotogramma chiave".

Sul pannello inferiore è presente una scala di animazione, seleziona il venticinquesimo fotogramma e premi il pulsante destro del mouse, seleziona “Inserisci fotogramma chiave” nel menu contestuale che appare.

Seleziona il cerchio e, tenendo premuto il pulsante sinistro del mouse, spostalo verso destra.

Seleziona il primo fotogramma sulla scala dell'animazione e seleziona "Interpolazione classica" nella voce "Inserisci" nel menu principale in alto.

Visualizza l'animazione creata

Ora possiamo vedere l'animazione. Nel menu principale, sotto "Controllo", selezionare "Riproduci".

Aggiungiamo l'effetto di "scomparsa" del cerchio. Per fare ciò, selezionare nuovamente l'oggetto e selezionare “alfa” nel menu “effetto colore” nel pannello di destra, impostare il valore su “0”.

Vediamo cosa è successo. Vai alla voce "Controllo", seleziona "Riproduci".

LA CAMPANA

C'è chi legge queste notizie prima di te.
Iscriviti per ricevere articoli freschi.
E-mail
Nome
cognome
Come vuoi leggere The Bell
No spam