Come creare un nuovo file (documento) in Flash CS6. Creazione di giochi in flash Come creare animazioni in flash

Creazione di un sito flash ndash; la questione è piuttosto complicata. Ciò richiede conoscenze in molti ambiti: programmazione, computer grafica, nozioni di base per l'ottimizzazione e la promozione dei siti, è necessario conoscere bene lo stesso flash, alla fine, sia a livello di conoscenza dell'ambiente di sviluppo che del linguaggio di programmazione action script 2.0. o lo script di azione 3.0, che attualmente ha una priorità più alta.
Le applicazioni Flash sono sviluppate in Adobe Flash Professional ndash; è un programma multimediale utilizzato per creare contenuti come applicazioni Web, film, giochi, applicazioni per dispositivi mobili e altri dispositivi incorporati.
Flash ndash; un fenomeno unico. In precedenza, questo prodotto si chiamava "Macromedia Flash", dopo l'acquisizione da parte di Adobe, questo programma è diventato noto come "Adobe Flash" dal 2005. L'animazione flash viene utilizzata per lo streaming di pagine Web. A volte svuota il ndash; questa fa parte della pagina html, e capita che l'intera pagina sia interamente realizzata in Flash, oppure sia stato creato l'intero sito con essa. I file Flash risultanti sono speciali file swf ("ShockWave Flash") che richiedono speciali plug-in del browser gratuiti per visualizzare il contenuto, possono essere facilmente e rapidamente scaricati e installati dal sito Web ufficiale di Adobe. Il vantaggio dei filmati flash è stato il caricamento molto veloce e l'utilizzo di animazioni vettoriali con interattività. Il flash può essere caricato prima che l'intero video venga visualizzato sullo schermo, ovvero puoi implementare l'opzione quando inizi a guardare l'animazione e il resto dei "stream" sullo schermo vengono caricati in background.
La grafica flash utilizzata nel vettore più il codice del programma consentono di creare un'applicazione completa che può sostituire alcuni raster, frammenti video, codici di programma, ma la rendono molto più ottimale, viene utilizzata meno larghezza di banda per i flussi, meno potenza del processore viene consumato. Oltre al rendering vettoriale, Flash Player (un lettore necessario per la visualizzazione di filmati Flash) include una macchina virtuale (ActionScript Virtual (AVM)) per supportare gli script di interazione in fase di esecuzione e supporta anche video e mp3.
Consideriamo i tipi di grafica esistenti ed evidenziamo i vantaggi della grafica vettoriale, con cui Flash funziona direttamente.
Tutta la grafica può essere suddivisa in tre tipi: raster, vettoriale, 3D. Nella grafica raster, come su un monitor TV, ogni immagine è costituita da un insieme di piccoli elementi ndash; pixel ndash; è l'abbreviazione di elemento immagine.
Il principio della grafica a punti è molto semplice: come un bambino disegna celle a scuola, solo qui queste celle sono molto più piccole. Questo tipo di grafica è semplice sia nell'implementazione che nell'elaborazione e presentazione, è tecnicamente conveniente per implementare, automatizzare l'input o la digitalizzazione di informazioni pittoriche.
Ma la grafica raster presenta degli svantaggi: è voluminosa, il peso del file di conseguenza diventa grande e quando l'immagine viene ridotta o ingrandita, la qualità dell'immagine viene persa.
La codifica delle informazioni grafiche nella grafica vettoriale è diversa: tutte le immagini sono specificate come contorni ndash; oggetti matematici. Questi contorni sono un oggetto indipendente che può essere spostato, ridimensionato, ridimensionato e qualsiasi numero di volte. Le linee sono impostate da punti di partenza, formule che indicano le linee stesse. Grazie a ciò, quando si cambia il motivo, le proporzioni vengono sempre mantenute esattamente. La grafica vettoriale è anche grafica orientata agli oggetti, perché il disegno è costituito da singoli oggetti: linee rette e curve, ellissi, rettangoli, forme chiuse e aperte, ecc., Che hanno le proprie caratteristiche di spessore del contorno, colore, stile della linea, ecc. D.
La grafica vettoriale è economica in termini di risorse, le informazioni al riguardo sono memorizzate sotto forma di formule e non informazioni per ogni punto, le descrizioni dei colori non aumentano significativamente le dimensioni del file. La grafica vettoriale è facile da modificare praticamente senza alcuna perdita di qualità dell'immagine. Ci sono aree della grafica in cui la conservazione dei contorni netti è fondamentale, ad esempio nella creazione di loghi, nei caratteri, ecc.
Il vettore sfrutta appieno la risoluzione di tutti i dispositivi di output, come una stampante. L'immagine sembra sempre di alta qualità, chiara, tutto dipenderà solo dalla stampante stessa.
Inoltre, il vantaggio della grafica vettoriale può essere chiamato il fatto che si trasforma facilmente in grafica raster, ma non viceversa! E può includere oggetti grafici raster, sebbene non possa essere elaborato con gli stessi mezzi.
Un serio vantaggio della grafica vettoriale è considerato un mezzo per integrare testo e immagini, un approccio ad essi, rispettivamente, la capacità di creare un prodotto finale. Gli editor di grafica vettoriale più popolari sono CorelDRAW, Adobe Illustrator e, naturalmente, Adobe Flash.
Il vettore è limitato quando si creano immagini realistiche: ndash chiaro e da cartone animato; si, ma ecco come formulare un pino o una nuvola. C'è anche un problema quando si inseriscono le informazioni grafiche: ad esempio, lo scanner trasmette le informazioni sull'immagine pixel per pixel: la posizione e il colore di ciascun punto a seconda della reazione del raggio di luce. Non può coprire oggetto per oggetto, e non tutte le immagini, come ho scritto sopra, possono essere formalizzate.

Flash è diventato ndash universalmente popolare; i banner dei cartoni animati appaiono su quasi tutte le pagine Web. Sono interattivi, riproducono animazioni e occupano poco spazio su disco, il che è importante quando si lavora in rete.
L'animazione viene creata visualizzando ciascun fotogramma flash per un determinato periodo di tempo. Quando ci sono molti fotogrammi, si crea l'illusione del movimento. Le prime tecnologie flash sono apparse con animazioni GIF, ma le possibilità di Flash sono molto più ampie. Quindi con il suo aiuto puoi creare elementi di navigazione, cartoni animati doppiati, loghi animati, calcolatrici, interi siti con una serie di vari elementi interattivi e quali miracoli di animazione possono essere creati su flash: sembrano molto impressionanti e altre tecnologie per il web non possono vantarsi di tali capacità.
Le animazioni flash sono chiamate film. Le possibilità di animazione non si limitano all'animazione, vengono animati vari oggetti: menu, immagini, collegamenti, testi.
All'avvio del programma, si apre una finestra con un'area di lavoro e una barra degli strumenti, oltre a finestre aggiuntive che possono essere collegate durante il lavoro. Vengono visualizzate anche le schede per lavorare con la sequenza temporale, le impostazioni di controllo degli errori, ecc. Nel programma, i film vengono creati disegnando o importando disegni già pronti, vengono posizionati in un'area speciale della finestra di lavoro di ndash; scena (Fase) e i fotogrammi vengono creati utilizzando la linea temporale (linea temporale).
Possono esserci diverse scene in un film; quando avvii il film, vengono riprodotte nell'ordine in cui sono state create, a meno che questo ordine non sia stato modificato di proposito. Ciò ti consente di modificare comodamente e rapidamente i singoli episodi, cambiarne l'ordine.
L'animazione stessa viene eseguita cambiando i fotogrammi uno dopo l'altro, modificandone il contenuto, ovvero gli oggetti con i parametri necessari vengono aggiunti al fotogramma. Gli oggetti sul palco possono essere ruotati, posizione, colore, trasparenza, la loro forma, dimensione possono essere impostati, lo stesso può essere fatto con qualsiasi altro oggetto.
L'animazione può essere creata nei seguenti modi:
Animazione fotogramma per fotogramma ndash; il disegno in ogni cornice è fatto a mano e le cornici vanno in fila;
calcolato (Animazione Tweened) ndash; vengono realizzati solo i frame iniziali e finali (chiamati frame chiave), e tra di essi il programma stesso costruisce i frame; due tipi di tali animazioni: movimento (interpolazione movimento, quando i parametri di movimento cambiano, rotazione, dimensione, posizione), forme (interpolazione forma);
programmaticamente ndash; quando i parametri per la modifica di un oggetto vengono impostati utilizzando i comandi del linguaggio di programmazione Action Script.
Nel processo di lavorazione di un film, i dati originali vengono salvati in un file speciale con estensione .fla. Ciò include la scena con tutti gli oggetti, nonché parametri aggiuntivi sugli oggetti che non sono stati inclusi nel film, ma sono stati creati in esso, nonché opzioni audio, commenti, codici di script, impostazioni del programma, ecc. Dopo aver creato tale fonte, è necessario tradurla in un formato adatto per Internet ndash; vale a dire SWF, quindi pubblichiamo il filmato o compiliamo il codice. Ciò rimuoverà le informazioni dal file che non sono necessarie per la riproduzione nella forma desiderata del film. Pertanto, la dimensione del file diventa minima e viene caricata rapidamente dall'utente. Tale file può essere aperto separatamente da ndash; il giocatore lo riprodurrà, ma puoi collegarlo a qualsiasi pagina html come oggetto.

Il film è creato da elementi ndash prefabbricati; standard (simboli) o simboli. Un riferimento è un'immagine, un pulsante, un'animazione, un clip filmato che vengono utilizzati ripetutamente in un video. Possono essere creati o importati. Una volta creati, i simboli vengono archiviati in uno speciale negozio ndash; biblioteca. Nel processo di montaggio del film, in quei luoghi ove necessario, sono le istanze (Istanza) degli standard (che sono conservate in libreria) ad essere inserite, e non completamente ogni volta. E puoi inserirli un numero qualsiasi di volte e ovunque. In questo caso, puoi modificare i parametri di istanza a tuo piacimento: posizione, dimensione, scala, rotazione, piega, trasparenza, tono, ecc., mentre i simboli di riferimento stessi non cambiano. Questo è molto conveniente ndash; non è necessario creare nuovamente un elemento ogni volta o copiarlo, l'elemento è uno e le sue modifiche sono quante ne vuoi. E durante il processo di pubblicazione, il file del video finale, che viene creato in formato swf, viene assemblato in modo tale che in un posto ci sia direttamente un oggetto di riferimento, e in tutto il resto ndash; solo indicazioni ad esso. Immagina quanto si riduce il peso del video in questo modo rispetto alla copia di elementi quasi identici.
Gli standard sono:
Toro; clip filmato (moviklip) ndash; include suoni, grafica, animazione, può essere programmato tramite script;
Toro; Grafico (grafico) ndash; disegni statici, animazioni, suoni, ma non controllati programmaticamente;
Toro; Pulsante (pulsante): include immagini, suoni; rispetto ad altri tipi di riferimenti simbolici, include solo quattro riquadri, che mostrano i cambiamenti nello stato del pulsante quando si verificano vari eventi del mouse.
Prima di creare direttamente un simbolo di riferimento, è necessario impostarne il tipo, in seguito può essere modificato.
Oltre ai simboli di riferimento e alle loro istanze, un filmato può contenere immagini da file esterni, font.
Intero video in Adobe Flash ndash; questa è una sequenza di fotogrammi (Frame), vengono mostrati a turno alla velocità specificata. Funzionano con l'aiuto della Timeline. A sinistra sulla scala ci sono i livelli i cui nomi devono essere impostati, a destra ndash; una serie di fotogrammi vuoti che vengono riempiti man mano che gli oggetti vengono creati e posizionati sullo stage. Non appena la cornice si riempie di oggetti, cambia colore in grigio. I fotogrammi chiave sono indicati da un punto nero. Sulla timeline, il fotogramma corrente è contrassegnato da un indicatore ndash rosso; una testa da gioco attraverso la quale passa verticalmente una sottile linea rossa, che attraversa tutti gli strati e laquo; vede traquo; il fotogramma corrente in ciascuno di essi. Sono questi fotogrammi, ovvero il loro contenuto sotto forma di clip filmato, che vengono visualizzati sullo schermo.

Per implementare l'interattività e la capacità di creare siti a tutti gli effetti, Adobe Flash utilizza il linguaggio di programmazione Action Script.
Per rendere interattivo un filmato, Flash utilizza programmi di script (script-script), che contengono una serie di istruzioni (azioni) in ActionScript e vengono eseguiti quando si verificano determinati eventi: l'utente preme un pulsante, raggiunge un determinato fotogramma del filmato, reazioni al movimento del mouse, alla sua rotellina, al posizionamento del puntatore su un'area specifica e molti altri. I comandi script determinano come reagisce Flash quando si verifica un evento.

I comandi di script che vengono eseguiti quando viene implementato un evento vengono specificati per una clip, un fotogramma, un pulsante, e ciò avviene in una scheda speciale nella parte inferiore della schermata Azioni (Comandi) (Fotogramma Azioni, Clip filmato Azioni), Pulsante Azioni.
Possibili eventi:
Tasto Premere ndash; quando l'utente preme i tasti della tastiera, il parametro della funzione è il nome del tasto.
Passa il mouse (rotola sopra) ndash; quando il puntatore del mouse è sopra l'oggetto, ma il mouse non è premuto;
Rilascia ndash; se il pulsante del mouse viene rilasciato quando il puntatore si trova sopra il pulsante programmato, ovvero se l'utente fa clic sul manipolatore laquo;mouseraquo;;
Premere ndash; se si preme il pulsante del mouse (a sinistra) mentre il puntatore si trova sopra il pulsante programmato. In questo caso viene presa in considerazione l'area di attuazione e non la sua immagine visibile, questa viene determinata nel frame Hit;
Rimuovere (srotolare) ndash; c'era un puntatore del mouse sopra il pulsante, non è stato premuto e il mouse viene tolto dal pulsante programmabile;
Shift (Drag Out) - il pulsante del mouse viene posizionato sull'oggetto, premuto e rimosso;
Rilascio esterno ndash; se il pulsante del mouse è stato premuto sull'oggetto e quindi è stato rilasciato dall'utente all'esterno dell'oggetto;
Trascina sopra ndash; un puntatore viene posizionato sull'oggetto, il pulsante sinistro del mouse viene premuto e non rilasciato, ma il puntatore viene portato dietro l'oggetto, quindi restituito nuovamente.

Il linguaggio ActionScript 3.0, rispetto ad ActionScript 2.0, è più moderno in quanto si basa sui fondamenti della programmazione orientata agli oggetti. Dove i concetti principali sono una classe, un oggetto, i suoi attributi o proprietà, nonché i metodi inerenti a questo oggetto.
ActionScript viene eseguito utilizzando una macchina virtuale (Virtual Machine ActionScript), fa parte di Flash Player.
La base di qualsiasi codice di programma è una variabile, che in ActionScript è impostata in questo modo: var ndash; uno speciale comando Flash, il che significa che in questa sezione viene designata una variabile e se ne determina il tipo; nome ndash; nome della variabile, specificato in formato testo-numerico, ma non inizia con un numero; digitare ndash; indicazione del tipo di variabile (numerica - Numero, ndash logico; Booleana, testo - Stringa, ecc.). ovvero, specificherai: Var x: String;
Assicurati di includere i due punti dopo il nome della variabile e un punto e virgola alla fine della riga. Durante l'esecuzione del codice è possibile modificare il valore, e di conseguenza il tipo di variabile.
Una variabile che contiene una grande quantità di dati è chiamata matrice. In AC 3.0. viene specificato con il tipo Array: Var Mas: Array.
Tutti gli elementi dell'array sono numerati a partire da 0, quindi per accedere, ad esempio, al primo elemento, è necessario specificare Mas. Cioè, tra parentesi quadre indichi la posizione dell'elemento desiderato nell'array.
Il codice stesso sarà costituito da funzioni che descrivono la sequenza di comandi che si verificano su un particolare evento ndash; clic del mouse, pressione di un tasto, raggiungimento di un valore, ecc.
La funzione viene specificata utilizzando la funzione parola riservata, quindi si specifica il suo nome - nome - qualsiasi nome testo-numerico, ma non inizia con un numero, quindi tra parentesi () è possibile specificare i parametri della funzione ndash; ciò che gli viene fornito come input, possono essere assenti, quindi due punti e il tipo di dati restituito dalla funzione o void ndash; quando la funzione non restituisce nulla. Successivamente, racchiudere l'intero codice della funzione tra parentesi graffe ( ). E si accede alla funzione, specificandone nome e parametri se necessario: nome (). "Condizioni in AC 3.0. vengono impostati tramite l'operatore if: if(x==y), ovvero tra parentesi tonde, è necessario specificare la condizione di confronto stessa. I loop sono definiti tramite for(), dove i suoi parametri sono impostati tra parentesi: la variabile contatore, il passo della sua modifica.
Ogni oggetto è caratterizzato dai suoi parametri o proprietà; puoi allegare listener di eventi agli oggetti in flash usando la funzione addEventListener. Questo listener gestirà gli eventi che si verificano con l'oggetto e se le reazioni ad essi sono descritte nella funzione dal programmatore, il programma reagirà di conseguenza.

Questa è solo una piccola parte di ciò che devi sapere quando inizi a creare un sito flash. Non devi creare un sito da zero, ci sono modelli speciali che puoi acquistare e modificare in base alle tue esigenze (ad esempio, il sito templatemonsters). Il design è già completamente sviluppato lì, è necessario modificare il contenuto e nell'implementazione del software tutto ciò che sarà necessario può essere riprogrammato. Quindi è necessario acquistare un dominio e un hosting, inserire un file html in cui è collegato l'swf.
Leggi libri (ad esempio, il libro laquo; 100% tutorial M.Flash MXraquo; mi ha aiutato per lavoro e articoli), impara dai colleghi sui forum (demiart, flasher.ru) e anche quale dovrebbe essere il tuo primo assistente è aiuto sul sito Web ufficiale di Adobe. Il linguaggio Opsian ActionScript è molto dettagliato e dettagliato, vengono mostrati degli esempi e anche il materiale è presentato in russo.
Dopo aver creato un video, devi pubblicarlo. È possibile impostare le opzioni di pubblicazione del programma nella voce di menu File Opzioni di pubblicazione. Indica in quali formati caricare il video, quali sono le impostazioni di qualità per grafica e audio e molti altri. Una volta che hai il file swf, puoi usarlo come un'applicazione finita completa. Per modificare, aggiornare il video creato, è necessario modificare la sorgente ndash; fla e ripubblicare.

Fortunatamente, la maggior parte degli utenti Internet attivi può creare un gioco in flash. Per i principianti, anche le capacità di programmazione iniziali aiutano molto in questo (acquisirle, tra l'altro, non è così difficile - ci sarebbe un desiderio). È vero, avrai bisogno di tempo per padroneggiare uno dei tanti designer di giochi flash speciali (ad esempio, Macromedia Flash).

Molti siti di software contengono, tra le altre cose, proprio tali costruttori. L'installazione su un computer, di norma, non crea problemi particolari per l'utente. Ricorda che il programma selezionato deve essere registrato e installato con tutte le modifiche necessarie, quindi ti servirà fedelmente, cioè ininterrottamente. La maggior parte dei game designer sono realizzati in inglese, ma puoi cercare una crack o una versione in russo. Spesso nelle impostazioni stesse c'è una finestra in cui puoi impostare la tua lingua madre.

Come creare un gioco in flash: preparazione preliminare

Anche prima di sederti per padroneggiare il designer, dovresti già avere uno scenario approssimativo per il gioco, una trama. È una buona idea pensare in anticipo all'animazione e al design: questo ti farà risparmiare molto tempo. Prima di creare il tuo gioco in flash, decidi il tipo desiderato. Per trarre ispirazione, visita i siti che dispongono di librerie di giochi in flash.

I professionisti consigliano ai principianti di iniziare creando semplici applicazioni, come i giochi arcade. E solo allora sarà possibile passare a tipi di giochi più complessi e persino creare le proprie strategie. Puoi scegliere il tipo di futuro giocattolo nello stesso costruttore, dove tutti i generi sono ordinati comodamente. Attiva, ad esempio, l'arcade (doppio clic).

Come creare un gioco in flash: lavorare nel game designer

Apri il modello e trascina gli oggetti desiderati dalle sezioni Oggetti animati e Oggetti statici su di esso. Crea uno sfondo scegliendo una trama e un colore. Per gli oggetti, seleziona i colori utilizzando la tavolozza dei colori. Usa Animation Player per verificare quali altre funzioni non sono abilitate. Nelle impostazioni, imposta i livelli di movimento dei personaggi del gioco (nelle sale giochi) o degli oggetti (nei giocattoli logici).

Dopo aver fatto tutto il necessario, avvia il debugger. In questa modalità, puoi affrontare il tuo gioco, a partire da qualsiasi livello: questo è importante per testarne le prestazioni. Elimina gli errori rilevati e controlla di nuovo il gioco flash. Se tutto è a posto, salva le modifiche.

Come creare un gioco in flash: porta il gioco "alla mente"

Ora puoi trovare un nome originale per la tua idea di flash, scrivere una breve annotazione. Usa il designer della schermata iniziale per creare una schermata iniziale spettacolare per il tuo gioco. Salva anche le modifiche apportate.

Passa attraverso il tuo gioco in flash dall'inizio alla fine per trovare (o non trovare) errori e malfunzionamenti in esso, e in generale non fa male dare un'occhiata critica al tuo lavoro. È molto importante che il gioco abbia parti logiche e ben definite, come un buon libro o un film: l'inizio, lo sviluppo degli eventi, la fine.

Invia una versione pulita del tuo gioco ai tuoi amici: lascia che i critici più onesti valutino i risultati che hai ottenuto. Bene, dopo puoi già caricare un gioco flash sul Web.

Come creare un gioco in flash se hai un desiderio, ma nessuna conoscenza?

A quei numerosi utenti che sono così preoccupati per questo problema, vogliamo sicuramente dare una risposta. Ricorda che qualsiasi conoscenza non può venire dal nulla. Qualsiasi nuova attività deve iniziare da qualche parte. Col tempo, inizierai a capire che tipo di conoscenza ti manca per creare giochi. Inizierai a chiedere consigli, cercare consigli, leggere letteratura pertinente, grazie alla quale inizierai ad avanzare sempre di più nelle tue abilità. Non aver paura del nuovo, altrimenti non otterrai mai ciò che desideri. Buona fortuna!

Un programma per creare giochi in flash senza la conoscenza dei linguaggi di programmazione. Ti permette di creare giochi da blocchi logici e immagini pre-preparate.

Qualche tempo, probabilmente già un paio di anni fa, è apparso sul nostro sito Web il programma Game Maker, che ti ha permesso di creare giochi praticamente senza alcuna conoscenza di alcun linguaggio di programmazione!

Finora questa pagina è stata una delle più discusse con noi, e spesso nei commenti ci sono lamentele che non può essere utilizzata per creare giochi che potrebbero essere giocati online. Oggi torneremo di nuovo sull'argomento dello sviluppo di giochi e considereremo un programma simile che può ancora creare giochi in flash - Stencyl!

Funzionalità del programma

Con l'aiuto di Stencyl, puoi creare giochi 2D di qualsiasi genere, ma soprattutto il motore del programma è "affilato" per vari sparatutto di giochi di ruolo. Strutturalmente, il programma è un intero set di strumenti in cui puoi, se lo desideri, creare un gioco da zero senza utilizzare applicazioni di terze parti.

Chiudiamo la finestra pop-up con le informazioni sulla nuova versione del programma con il pulsante “Chiudi” o “Non mostrare più” (se non vogliamo vedere questa finestra ogni volta che il programma si avvia) e invece otteniamo la seguente finestra:

Qui ci viene offerto di creare il nostro account nella comunità di sviluppatori Stencyl. In linea di principio, non è necessario creare un account (a tal fine, fare clic sul pulsante "Ricordami più tardi" di seguito), ma la registrazione ti dà l'opportunità di scaricare modelli e azioni aggiuntivi da uno spazio di archiviazione online chiamato StencylForge, quindi non lo farà fa male :). Per creare un account, fai clic sul pulsante "Crea un account" e vai al modulo di registrazione:

Qui compiliamo i campi standard con il tuo nome utente, password (due volte) e indirizzo e-mail, quindi fai clic sul pulsante "Registrati". Se tutto va bene, l'interfaccia della finestra di avvio del programma si aprirà finalmente di fronte a te.

Inizia l'interfaccia della finestra

Esternamente, l'area di lavoro della finestra iniziale di Stencyl è suddivisa in diverse zone:

Nella parte superiore c'è tradizionalmente la barra dei menu e la barra degli strumenti. Tutte le impostazioni principali e i pulsanti di controllo sono raccolti qui. Sotto la barra degli strumenti, abbiamo una piccola striscia grigia stretta. Contiene schede (sì, l'interfaccia Stencyl è multi-scheda, il che è molto comodo) e pulsanti per passare rapidamente da una all'altra (a destra).

L'area di lavoro principale è divisa in due parti: a sinistra c'è una barra di navigazione per le sezioni del programma e a destra - il contenuto principale (nella schermata principale - un elenco di giochi), che cambia a seconda dell'attuale modalità di funzionamento. Nella parte inferiore ci sono alcuni altri pulsanti aggiuntivi che ti permettono di:

1. Apri la cartella in cui Stencyl memorizza tutte le risorse dei giochi creati e dei giochi stessi (il pulsante "Visualizza cartella giochi" nell'angolo in basso a sinistra).
2. Avviare un corso di formazione sull'utilizzo del programma ("Start Crash Course" sul pannello verde nell'angolo in basso a destra). A proposito, accanto c'è anche un pulsante per nascondere l'offerta per sottoporsi alla formazione ("Non mostrare più").
3. Apri il gioco attualmente selezionato dall'elenco, che è simile al doppio clic sull'icona del gioco ("Apri gioco" nell'angolo in basso a destra).

Per esplorare da solo le possibilità di Stencyl, puoi seguire un corso di formazione (e sarebbe auspicabile superarlo), nonché aprire uno dei giochi già pronti che più si adattano alla tua idea e vedere come funziona tutto lì. E propongo di studiare il lavoro del programma sull'esempio della creazione di un gioco sulle avventure del simbolo del nostro sito e del suo residente virtuale: Frida Best!

Come iniziare a creare un gioco in Stencyl

Se tu, prima di andare a creare il tuo gioco, hai guardato gli esempi standard di giochi su Stencyl, potresti aver notato che in fondo sono tutti abbastanza semplici, a schermo singolo e hanno una vista laterale. Realizzeremo uno sparatutto dinamico dall'alto verso il basso con le riprese del mouse! Tutto è come nei "grandi" giochi :).

Per il tuo progetto, puoi cambiare la logica di uno dei modelli già pronti, ma non stiamo cercando modi semplici e quindi - solo "da zero", solo "hardcore" :). Per fare ciò, fai clic sulla barra degli strumenti dell'area di lavoro (o nel menu "File" - "Crea nuovo") il pulsante "Crea una nuova partita" ed entra nella seguente finestra:

Qui possiamo scegliere un modello di gioco per genere con un insieme preselezionato di funzioni e azioni per il tuo progetto. Tuttavia, creeremo un gioco da zero, quindi seleziona la voce "Gioco vuoto" e fai clic sul pulsante "Avanti".

Nel passaggio successivo, dobbiamo effettuare alcune impostazioni di base:

Nel campo "Nome", dobbiamo specificare il nome del nostro gioco, e nella sezione "Dimensioni dello schermo", impostare le dimensioni del campo di gioco specificandone la larghezza (Larghezza) e l'altezza (Altezza) in pixel. Successivamente, fai clic sul pulsante "Crea" e vai direttamente all'interfaccia dell'editor di gioco:

Per impostazione predefinita, la scheda "Dashboard" si apre davanti a noi, su cui è raccolto l'intero albero delle risorse del gioco a sinistra e a destra c'è l'area di lavoro stessa. Qui, credo, sarebbe opportuno fare alcune precisazioni sulla struttura dell'"albero".

È costituito da quattro rami, i primi due dei quali contengono insiemi di risorse standard (RISORSE) e logica (LOGICA), e gli ultimi due possono facoltativamente archiviare pacchetti di risorse caricati manualmente (PACCHETTI DI RISORSE) ed estensioni (ESTENSIONI).

Il ramo principale qui è il ramo RISORSE. Contiene le seguenti sezioni:

1. Tipi di attori: qui vengono memorizzati gli sprite di tutti i personaggi del gioco e vengono configurate le azioni della loro animazione e interazione reciproca.
2. Sfondi: in questa sezione possiamo memorizzare tutti gli sfondi necessari per il gioco. Inoltre, lo sfondo può essere sia per lo sfondo (sfondo) che per il primo piano (primo piano), il che consente di sovrapporre gli sfondi uno sopra l'altro, ottenendo, ad esempio, l'effetto di parallasse.
3. Caratteri - una sezione in cui possiamo caricare vari bei caratteri per creare iscrizioni originali. Tuttavia, vale la pena considerare che Stencyl può funzionare solo con il set di caratteri inglese, quindi per aggiungere lettere russe al file dei caratteri, dobbiamo sostituire alcuni dei caratteri latini con essi.
4. Scenes è un luogo per creare e modificare i livelli di gioco. È qui che possiamo impostare l'aspetto di qualsiasi livello e posizionare tutti i personaggi, i bonus e altri elementi di gioco.
5. Suoni - rispettivamente il repository di tutti i suoni utilizzati nel gioco.
6. Tilesets - un ramo speciale che memorizza le tessere - sprite speciali che possiamo usare per costruire livelli di gioco.

Creazione e configurazione dei riquadri

Non esiste un'opinione univoca sulla sequenza in cui implementare questo o quel gioco. A questo punto, è conveniente per chiunque, ma consiglierei il seguente algoritmo:

Crea la prima scena - crea il personaggio - crea i nemici - crea i power-up - crea il resto delle fasi

Per creare una scena in Stencyl, devi disegnarne l'aspetto nel ramo Scene. Tuttavia, per disegnare, dobbiamo prima avere dei blocchi con cui possiamo "disegnare". Questi blocchi nel programma sono chiamati tile (tessere) e sono memorizzati nella sezione Tileset:

Un set di riquadri è una semplice matrice di immagini che carichi al suo interno. Puoi caricare una matrice già pronta (un'immagine composta da più immagini di dimensioni uguali in una o più righe) o integrare i set esistenti con immagini separate.

Per prima cosa dobbiamo creare un nuovo set di tessere (il pulsante "Crea nuovo" nella sezione Set di tessere), dopodiché vedremo una finestra, come nello screenshot sopra. Per caricare un'immagine, dobbiamo fare clic sul pulsante "Scegli immagine" e selezionare un file pre-preparato con l'immagine o le immagini desiderate nella finestra di Explorer che si apre.

Quando l'immagine viene caricata, imposteremo i suoi parametri di layout e le dimensioni in larghezza e altezza, dopodiché (se tutto è visualizzato correttamente) puoi aggiungere l'immagine al set facendo clic sul pulsante "Aggiungi".

Per ogni immagine (riquadro) nella matrice, puoi configurare i parametri di interazione con i personaggi e gli oggetti del gioco. Per fare ciò, seleziona la piastrella desiderata e accedi alla seguente finestra:

La sezione "Limiti di collisione" si aprirà nella parte superiore del riquadro a destra. Qui possiamo scegliere una forma arbitraria che indica i confini dell'interazione del nostro oggetto con i personaggi del gioco. Per impostazione predefinita, tutte le tessere hanno il parametro "Quadrato" (quadrato), che rende la piastrella completamente impraticabile e solida. Se è necessario rendere la tessera "trasparente" per i personaggi (ad esempio il pavimento), è sufficiente impostare il parametro "Nessuna collisione".

Oltre ai bordi, è possibile impostare l'animazione per ogni riquadro aggiungendo fotogrammi utilizzando il pulsante "Inserisci fotogrammi" sul pannello inferiore. Per impostazione predefinita, la velocità dell'animazione è di 100 millisecondi, ma questo numero può essere modificato arbitrariamente per ogni fotogramma.

Per fare ciò, basta fare doppio clic sul frame desiderato con il tasto sinistro del mouse e nella finestra che si apre, modificare gli indicatori di ritardo di cui abbiamo bisogno. È anche possibile correggere la cornice selezionata utilizzando l'editor grafico integrato, che si apre tramite il pulsante "Modifica cornice".

Rendering della scena in Stencyl

Dopo aver formato il set di tessere, è logico procedere al passaggio successivo: la formazione dello spazio di gioco finito dalle immagini aggiunte. Puoi farlo facendo clic sul pulsante "Crea nuovo" nella sezione Scene. Dopo aver premuto il pulsante, arriveremo alla finestra delle impostazioni della scena:

Qui dobbiamo assolutamente impostare un nome univoco per la nostra scena nel campo "Nome", specificare le dimensioni (larghezza e altezza in riquadri (di default) o pixel) e opzionalmente (cioè su nostra richiesta) impostare lo sfondo colore per la nuova scena. Fai clic su "Ok" e accedi all'editor di livelli:

Sembra un editor grafico. Al centro c'è l'area di lavoro, dove disegniamo il nostro livello. A sinistra e in alto ci sono piccole barre degli strumenti. Sulla destra ci sono i pannelli della tavolozza, la selezione dei set di tessere e la gestione dei livelli. Ora come funziona tutto...

Prima di tutto, disegniamo lo sfondo del nostro spazio di lavoro. Per fare ciò, nel pannello di destra, attiva la scheda “Palette” e su di essa la scheda “Tiles” e seleziona la tessera desiderata dall'elenco presentato. Quindi, nel pannello di sinistra, seleziona lo strumento Matita e disegna le aree desiderate con la piastrella selezionata.

A causa del supporto dei livelli, le tessere possono sovrapporsi, quindi è più logico organizzare il livello, tenendo conto del fatto che, ad esempio, sul livello "Layer 0" avremo un substrato di sfondo, sopra, un livello con ostacoli e personaggi, e ancora più in alto - livello con vari contatori e indicatori di gioco.

I livelli possono essere controllati utilizzando i pulsanti nel pannello "Livelli". Ci sono pulsanti per creare, eliminare, spostare e rinominare i livelli. Inoltre, qualsiasi livello può essere nascosto o mostrato facendo clic sul pulsante a forma di occhio a destra del nome del livello.

Creazione del personaggio

Dopo aver creato la nostra prima scena, è il momento di popolarla con vari personaggi giocabili. In Stencyl sono chiamati "attori" e sono memorizzati rispettivamente nella sezione "Tipi di attore". Gli attori sono creati secondo lo stesso principio, quindi considereremo questo processo usando l'esempio della creazione del personaggio principale del nostro gioco: Frida.

Per aggiungere un nuovo attore, vai alla suddetta sezione Tipi di attore e fai clic sul pulsante "Crea nuovo" lì. Ci viene già chiesto abitualmente di nuovo come vogliamo nominare il nuovo oggetto di gioco, dopodiché apparirà davanti a noi la finestra di modifica dell'animazione del personaggio:

Qui, sul lato sinistro, viene visualizzato un elenco delle animazioni aggiunte dell'attore (l'impostazione predefinita è un fotogramma vuoto "Animazione 0"), e sul lato destro ci sono gli strumenti per aggiungere e configurare queste stesse animazioni.

Seleziona un'animazione vuota (o aggiungine una nuova facendo clic sul pulsante con un segno più in basso) e fai clic sul campo "Fai clic qui per aggiungere una cornice" sul lato destro. Successivamente, si aprirà la finestra per l'aggiunta di immagini, che è simile a una finestra simile per l'aggiunta di nuove tessere al set. Fare clic sul pulsante "Scegli immagine", selezionare l'immagine desiderata e modificarne il layout e le dimensioni (se necessario).

Quando tutto è impostato, fai clic sul pulsante "Aggiungi" nella parte in basso a destra della finestra di aggiunta: l'animazione dovrebbe essere visualizzata come anteprima nella sezione a sinistra:

Ora non ci resta che regolare il frame rate (doppio clic su uno qualsiasi dei frame) e alcuni parametri aggiuntivi, come il nome (Nome) dell'animazione (molto utile per progetti complessi), la riproduzione in loop (Looping) (attiva di default ), sincronizzazione e origine del punto base (Origin Point) dello sprite (per impostazione predefinita, il centro).

Sulla barra degli strumenti in basso nella sezione di destra troveremo una serie di pulsanti. Loro permettono:

• aggiungere nuovi fotogrammi all'animazione (Importa fotogrammi);
• modificare il frame selezionato in un editor esterno (Edit Frame (External));
• creare una cornice in un editor esterno (Crea cornice (esterna));
• modificare la cornice nell'editor integrato (Modifica cornice);
• rimuovi cornice (Rimuovi cornice);
• copia cornice (Copia cornice);
• inserire una cornice (Incolla cornice);
• sposta di un fotogramma indietro (Sposta indietro) o avanti (Sposta avanti).

Impostazione dei parametri e del comportamento dei personaggi

Sopra, abbiamo realizzato un'animazione della corsa di Frida, utilizzando solo due fotogrammi per questo, che sono, in effetti, la stessa figura riflessa orizzontalmente. Ora dobbiamo assicurarci di poter usare il mouse e la tastiera per controllare i movimenti della nostra eroina e anche che reagisca adeguatamente alle collisioni con gli ostacoli che abbiamo disegnato sul palco.

Prima di tutto, impostiamo le collisioni. Per fare ciò, guarda la riga sotto l'elenco delle schede aperte e trova il pulsante "Collisione" lì.

Per impostazione predefinita, l'area di collisione è un quadrato circoscritto attorno all'intero sprite dell'animazione. Cioè, l'evento di collisione si verificherà sull'intera area dell'oggetto. Tuttavia, in pratica, la nostra immagine contiene molto spesso elementi aggiuntivi (per Frida, ad esempio, un blaster), che, secondo l'idea, non dovrebbero interagire con nulla. È con l'aiuto di questa sezione che possiamo impostare tutte le aree di collisione.

Per cominciare, ridurremo l'area intorno a Frida alle dimensioni del solo suo corpo. Qui dobbiamo tenere conto del fatto che non possiamo spostare l'area con il mouse e per le impostazioni vengono utilizzati quattro parametri numerici nella sezione "Forma corrente". Innanzitutto, impostiamo l'offset dell'area orizzontalmente (dal bordo sinistro) e verticalmente (dall'alto), quindi specifichiamo la nuova larghezza e altezza dell'area di collisione.

Di seguito ci sono alcuni altri parametri raggruppati nella sezione "Proprietà fisiche". Qui ci troviamo di fronte alla casella di controllo "È un sensore?" e il concetto di gruppo.

Se si attiva il flag “sensore”, l'area selezionata non sarà più un oggetto fisico: il personaggio o parte di esso diventerà, per così dire, “trasparente” per i vari ostacoli, ma allo stesso tempo manterrà la capacità di avviare qualsiasi azione in determinate condizioni.

Un esempio dalla vita reale può essere la moderna segnalazione tramite laser: non vediamo il laser stesso, ma se lo tocchiamo, inizia il processo di notifica che siamo saliti nel posto sbagliato :).

Ora, a cosa servono i gruppi ... Supponiamo che il nostro personaggio non abbia un blaster nelle sue mani, ma una spada con cui lui (più precisamente, lei :)) taglia i nemici in cavoli (a proposito, Frida ha un laser blade nel codice sorgente;)).

Il compito è che quando tocchi il nemico con una spada, il nemico muore, ma se abbiamo mancato e l'avversario ha colpito Frida, parte della sua energia è stata portata via. E il problema principale qui è che l'animazione dell'impatto che abbiamo, in effetti, è un'immagine in cui sia Frida che la spada sono presenti contemporaneamente ...

Se leghiamo l'azione della spada all'immagine, chiunque tocchi la nostra eroina durante la riproduzione dell'animazione morirà per il colpo. E proprio per dividere l'immagine in più oggetti con capacità e parametri diversi, è stato inventato il meccanismo di gruppo.

Per impostazione predefinita, abbiamo solo un'area, che corrisponde al personaggio stesso ("Come il tipo di attore"). Tuttavia, utilizzando gli strumenti di disegno sopra l'area di lavoro principale, possiamo creare nuovi oggetti virtuali e impostare un gruppo per loro utilizzando il pulsante "Modifica gruppi".

Con le collisioni, forse, questo è tutto, e ora mi propongo di affrontare il più elementare: impostare il comportamento dell'attore sul palco. Per fare ciò, dobbiamo andare alla sezione "Comportamenti":

Per impostazione predefinita, non ci sono azioni qui all'inizio, ma possiamo aggiungerle facendo clic sul pulsante "Aggiungi comportamento" nell'angolo in basso a sinistra. Vedrai un elenco di funzioni pronte per l'uso per controllare un personaggio o interagire con altri attori sul palco.

Ad esempio, ho scelto il comportamento “8 Way Movement”, che prevede il movimento dell'attore in cerchio in qualsiasi direzione. Ora selezioniamo l'azione aggiunta nell'elenco a sinistra e sul lato destro possiamo configurarne i parametri.

Aggiungere attori sul palco e testare il livello

Se hai seguito le istruzioni, dovresti già avere le risorse minime necessarie per il gioco. Resta da imparare come aggiungere attori sul palco e testare le prestazioni dello spazio di gioco.

Torniamo all'editor della scena creato in precedenza e riattiviamo la tavolozza (Palette), ma ora al posto delle tessere, attiviamo la scheda "Attori" (Attori). Vedremo un elenco di personaggi creati in precedenza che possiamo aggiungere alla scena usando lo strumento Matita:

Abbiamo un personaggio principale, quindi basta un clic con una matita per aggiungerla al palco. E ora è arrivato il momento della verità: la prima prova! Per avviare la pre-compilazione del progetto, basta cliccare sul pulsante "Test Scene" nell'angolo in alto a destra della scheda con la nostra scena. Dopo un po' di tempo (la prima compilation richiede sempre più tempo), possiamo ammirare il nostro lavoro nel flash player:

Oltre al giocatore stesso con il gioco a lato, abbiamo una finestra che mostra i log del gioco. Con il loro aiuto, possiamo trovare rapidamente problemi nel lavoro e provare a risolverli.

Come puoi vedere, possiamo già spostare Frida in diverse direzioni, ma il palco stesso rimane immobile e non appena la nostra eroina va oltre il bordo della parte visibile del palco, scompare ... Disordine :). Puoi risolvere il problema aggiungendo a Frida il comportamento “Camera Follow” o impostando i parametri desiderati tramite gli eventi.

Inoltre, sarebbe utile sostituire il cursore standard con qualcosa di più adatto, ad esempio un mirino. Possiamo implementarlo aggiungendo un nuovo attore come mirino, rimuovendo la sua area di collisione e collegandolo alla scena usando il comportamento standard "Cursore del mouse personalizzato":

Sistema di eventi in Stencyl

I giochi semplici in Stencyl possono essere creati utilizzando solo comportamenti standard (Comportamenti), tuttavia, se abbiamo bisogno di qualcosa di non standard, dobbiamo già pensare all'utilizzo di eventi configurati per attori e scene nella sezione "Eventi":

Infatti, anche i comportamenti (Comportamenti) sono costruiti sulla base degli eventi, ma hanno anche un'interfaccia visiva, che rende più facile l'editing. Qui si tratta direttamente di blocchi funzionali che eseguono determinate azioni.

La finestra dell'evento è divisa in tre sezioni:

1. La sezione di sinistra contiene un elenco di eventi e pulsanti per gestirli (creazione/cancellazione/spostamento). Per aggiungere un evento, dobbiamo fare clic sul pulsante "Aggiungi evento", quindi selezionare il gruppo desiderato nell'elenco a discesa e specificare la funzione specifica di cui abbiamo bisogno. A destra dell'evento creato, c'è una casella di controllo che ci consente di disattivarlo se necessario.
2. Nella sezione di destra, abbiamo un elenco di tutte le azioni disponibili, raggruppate in 10 sezioni, ognuna delle quali è attivata da un pulsante corrispondente. Per maggiore comodità, le azioni in ogni sezione sono ordinate in schede tematiche e hanno il loro colore unico. In fondo ci sono altre tre schede. Per impostazione predefinita, è attiva la scheda "Palette" (palette), in cui si trovano elenchi di azioni. La seconda scheda - "Attributi" - serve per visualizzare le variabili locali (più su di esse sotto), e la terza - "Preferiti" - serve per visualizzare le tue azioni preferite.
3. La sezione centrale è lo spazio di lavoro. È qui che formiamo gli esempi finali del comportamento del personaggio usando varie combinazioni di blocchi d'azione ed eventi, in base ai quali si verificano queste azioni. La combinazione avviene semplicemente trascinando i blocchi nell'area di lavoro e quindi modificando i parametri in essi specificati. Va tenuto presente che la funzione è composta solo da quei blocchi che sono combinati tra loro e inclusi nel blocco dell'evento principale. Pertanto, per rimuovere temporaneamente alcune combinazioni attualmente non necessarie (ma utili), dobbiamo solo spostarle dalla struttura generale a uno spazio libero. Se le azioni si rivelano completamente non necessarie nel tempo, possono essere completamente eliminate spostandole nel cestino, che si trova nella parte in alto a destra dell'area di lavoro.

In realtà, abbiamo già descritto l'algoritmo per la creazione di eventi, ma, ahimè, non posso dare consigli universali: per ogni gioco, gli eventi saranno diversi e possono essercene parecchi... Ad esempio, puoi guarda i codici sorgente del gioco su Frida, che troverai nell'archivio con il programma, ma questa è solo una linea guida, poiché lavorare sugli eventi è la tua creatività personale :).

Impostazione della fisica e delle proprietà

Io e te abbiamo già trattato molte cose, ma non abbiamo toccato alcuni argomenti aggiuntivi che possono essere molto importanti durante la creazione di giochi - sto parlando di impostare tutti i tipi di proprietà dei nostri attori e scene. Questi parametri sono memorizzati nelle ultime due schede. E il primo è "Fisica":

Per scene e attori, la scheda delle impostazioni della fisica ha un aspetto diverso. Ci sono solo due parametri nella scheda delle impostazioni della fisica della scena: le impostazioni della gravità orizzontale e verticale. L'aspetto della sezione delle impostazioni dei parametri fisici degli attori è mostrato nello screenshot sopra e consiste in cinque schede con diverse opzioni:

1. Scheda Generale. Qui abbiamo tre parametri: il tipo di attore (fermo, piattaforma (può muoversi secondo le regole date, ma altri attori non possono muoverlo) e mobile), la rotazione dell'attore (può ruotare o meno) e l'influenza di gravità.
2. Scheda "Pesantezza" ("Peso"). In questa scheda è possibile impostare la massa dell'oggetto virtuale e la sua inerzia.
3. La scheda "Materiale" consente di impostare le caratteristiche per l'attore che simulerà il comportamento di un oggetto reale fatto di un particolare materiale. Abbiamo la possibilità di selezionare uno dei preset dall'elenco a discesa "Materiali preimpostati" o impostare manualmente le caratteristiche di attrito ed elasticità del nostro attore.
4. La scheda Smorzamento ci dà la possibilità di mettere a punto i parametri dell'interazione dell'attore con l'ambiente introducendo valori come la resistenza lineare (ad esempio all'aria) e angolare (durante la rotazione).
5. La scheda "Avanzate" ci dà accesso a varie impostazioni aggiuntive che non sono incluse nelle sezioni precedenti. Qui puoi attivare un modello fisico semplificato (per ottimizzare il gioco), il rilevamento automatico delle aree di collisione, gli eventi di ri-collisione e la possibilità di applicare una pausa all'attore.

Abbiamo scoperto la fisica e ora diamo un'occhiata alle proprietà che vengono chiamate premendo il pulsante "Proprietà":

Come nel caso precedente, le proprietà saranno diverse per scene e attori. Nelle proprietà della scena, possiamo specificarne il nome ("Nome"), le dimensioni (sezione "Dimensioni") e il colore di sfondo ("Colore di sfondo").

Nelle proprietà di un attore, oltre al nome, puoi specificare una descrizione (il campo "Descrizione") dell'oggetto, un gruppo a cui appartiene l'attore (sezione "Scegli gruppo") e un livello di animazione per dispositivi mobili dispositivi (non è possibile modificare nulla qui, poiché la versione gratuita del programma non consente di esportare giochi in formati per telefoni cellulari.

Ma queste non sono tutte le impostazioni a nostra disposizione in Stencyl. Le impostazioni generali del gioco sono disponibili premendo il pulsante "Impostazioni" sulla barra degli strumenti principale:

Nella finestra delle impostazioni, a sinistra c'è un elenco di gruppi di parametri, ea destra c'è l'area principale (a volte divisa in più schede) contenente tutti i tipi di opzioni. Qui siamo interessati alle seguenti sezioni:

1. "Impostazioni" ("Impostazioni"). Il primo gruppo di impostazioni, che ci permette di personalizzare un po' il nostro gioco. Questo gruppo contiene tre schede. Sul primo ("Principale") possiamo dare al gioco un nuovo nome, una breve descrizione, nonché un'immagine di anteprima e un'icona. Nella scheda "Display" viene configurata la dimensione finale dello spazio di gioco e nell'ultima ("Avanzate") è possibile abilitare la fisica semplificata e impostare parametri di anti-aliasing.
2. "Caricatore" ("Caricatore"). In questo gruppo, possiamo parzialmente (tenendo conto di alcune limitazioni della versione gratuita) personalizzare l'aspetto del preloader (loader), che verrà visualizzato prima che il gioco sia completamente caricato. Ci sono già quattro schede. Sulla prima ("Generale" - generale) puoi specificare un link al tuo sito, abilitare la protezione dalla copia del gioco su altre risorse (elenchiamo l'elenco dei siti consentiti nella seconda riga separati da una virgola) e uno del caricatore pelli. Nella scheda Aspetto, possiamo impostare il colore dello schermo del bootloader e l'immagine di sfondo. Utilizzando la scheda "Stile barra", è possibile specificare la dimensione della striscia di caricamento e "Colore barra" consente di impostarne, rispettivamente, i colori.
3. "Attributi" ("Attributi"). Questo gruppo di impostazioni è uno dei più basilari! Qui puoi controllare le variabili globali utilizzate nel gioco (ulteriori informazioni sulle variabili nella prossima sezione di seguito).
4. "Controlli" ("Gestione"). Come suggerisce il nome, in questo gruppo possiamo riconfigurare e aggiungere pulsanti della tastiera con cui verranno eseguite determinate azioni di gioco.
5. "Gruppi" ("Gruppi"). Abbiamo già considerato un po' più alto il meccanismo dei gruppi. Qui abbiamo l'opportunità di vedere tutti i gruppi creati e modificarli.

In realtà, queste sono tutte le impostazioni di cui avremo bisogno per creare giochi flash nella versione gratuita di Stencyl. Ma poiché questa sezione riguarda le impostazioni, sarebbe un peccato non menzionare i parametri del programma stesso. Puoi accedervi attivando la voce "Preferenze" nel menu "File":

Il programma fornisce supporto per un'interfaccia multilingue, tuttavia, al momento esiste solo la localizzazione in inglese, quindi siamo passati direttamente alla seconda scheda: "Area di lavoro". Il fatto è che nella terza versione di Stencyl, una funzione sembrava generare automaticamente immagini adattive dagli sprite caricati.

E per impostazione predefinita, lo sprite è raddoppiato, il che porta a un deterioramento della qualità della grafica. Per evitare che ciò accada, ti consiglio di disabilitare il ridimensionamento dell'immagine selezionando Standard (1x) nel campo Scala.

Ti consiglio anche di guardare la terza scheda: "Editor". Qui puoi associare azioni per l'elaborazione di grafica, suoni e testo con editor esterni più avanzati (piuttosto che quelli integrati in Stencyl).

Un po' di variabili

Abbiamo considerato quasi tutte le sfumature del lavoro in Stencyl, ma non abbiamo toccato una delle funzionalità più potenti: lavorare con le variabili.

Le variabili in qualsiasi linguaggio di programmazione consentono di operare con vari eventi, esprimendoli attraverso determinati numeri (variabili numeriche), condizioni (variabili booleane), testi (variabili stringa), ecc. La caratteristica principale delle variabili è la capacità di sostituire qualsiasi valore entro limiti predeterminati. Un semplice esempio di variabile: un assistente in una classe. Oggi potrebbe essere Ivanov, domani Petrov e dopodomani Sidorov :).

Nel nostro caso, la variabile “in servizio” può assumere uno di tre valori, che verranno automaticamente sostituiti a seconda della condizione specificata (ad esempio l'ordine dei cognomi nella lista).

In Stencyl, le variabili possono essere locali o globali. Possiamo dichiarare variabili locali nell'ambito di alcuni eventi o comportamenti e funzioneranno solo per le azioni specificate. Puoi creare una variabile locale nell'editor di eventi chiamando la sezione "Attributi":

Qui abbiamo diverse schede:

1. La scheda "Getters" consente di impostare variabili che riceveranno un valore da eventuali calcoli o istruzioni dirette.
2. La scheda "Setter" consente di impostare qualsiasi valore per le variabili create in precedenza.
3. La scheda "Attributi dei giochi" memorizza blocchi di variabili globali e, se lo desideri, ti consente di aggiungerne di nuove (anche se considereremo come farlo meglio di seguito).
4. La scheda Elenchi ci dà la possibilità di creare matrici di dati.
5. La scheda Funzioni viene utilizzata per organizzare le funzioni create.

L'algoritmo per creare una variabile locale è semplice: prima crea un nuovo blocco nella scheda "Getters", quindi trova la variabile appena creata nella scheda "Setter" e aggiungi un blocco con essa all'area di lavoro, equiparandolo ad alcuni parametro di gioco. Questo è tutto: la variabile è dichiarata e ha ricevuto una serie di valori validi.

Le variabili globali (Attributi del gioco) in Stencyl vengono impostate immediatamente per l'intero gioco e possono essere richiamate in qualsiasi evento o comportamento. Come accennato in precedenza, puoi crearli nella sezione "Attributi" della scheda "Attributi di gioco":

Tuttavia, è molto più comodo visualizzare e gestire tutte le variabili create utilizzando la sezione "Attributi" nelle impostazioni (il pulsante "Impostazioni" sulla barra degli strumenti o "Mostra attributi di gioco" nella scheda "Attributi di gioco" nell'editor di eventi ):

Qui abbiamo l'intero elenco delle variabili globali ed è possibile crearne di nuove premendo il pulsante "Crea nuovo". Per una nuova variabile, possiamo impostare immediatamente il tipo (numerico, testuale, booleano o array) e il valore iniziale senza uscire dalla finestra, cosa a mio avviso molto comoda.

Utilizzando le variabili globali, è molto conveniente implementare vari contatori, poiché i dati in essi contenuti vengono salvati quando il giocatore passa a nuovi livelli e vengono archiviati in memoria finché il gioco stesso è acceso. Inoltre, consiglio di utilizzare le variabili globali per tenere traccia dell'animazione riprodotta.

Dopo aver assegnato all'attore uno sprite specifico negli eventi, possiamo assegnare un valore specifico a questo sprite in una variabile di seguito (ad esempio, un numero di serie o il nome dell'animazione). Pertanto, legando un'azione a una variabile, possiamo chiamarla in qualsiasi momento impostando questa variabile sul valore desiderato.

Pubblicazione, importazione ed esportazione di giochi

Infine, anche se brevemente, abbiamo familiarizzato con i principi di base del lavoro con Stencyl. Supponiamo di aver creato un gioco, testato e tutto si è rivelato funzionare. Ora sta a te trasformare il gioco da progetto in un vero file SWF che può essere pubblicato su Internet. Per fare ciò, dobbiamo solo aprire il menu "Pubblica" e fare clic sulla voce "Flash" nell'elenco "Web".

Verrà avviata la compilazione del file di gioco, dopodiché apparirà una richiesta dove e con quale nome salvare il file flash risultante. Salviamo e il gioco è fatto: il gioco è pronto :).

Il processo inverso consiste nell'importare il gioco. Grazie alla funzione di importazione, puoi aprire progetti di gioco di altri utenti, ad esempio, per vedere come implementano questa o quella funzione;). Puoi anche importare un gioco dal menu File. Dopo aver importato con successo, il gioco apparirà sulla schermata principale nell'elenco dei progetti. Tuttavia, qui vale la pena fare una piccola prenotazione.

Il problema è che il nuovo Stencyl 3.0 è solo parzialmente compatibile con i progetti creati nelle versioni precedenti, quindi la funzionalità del progetto di gioco che hai importato potrebbe non essere completa o, nel peggiore dei casi, il gioco non si avvierà affatto, dando un errore . Avrai poche opzioni: cercare e correggere gli errori o sopportarlo e lasciare tutto com'è :).

Vantaggi e svantaggi del programma

• facilità di creazione di giochi con poca o nessuna capacità di programmazione;
• la capacità di creare giochi di quasi tutti i generi;
• un'ampia raccolta di comportamenti già pronti e risorse di gioco;
• la possibilità di scambiare progetti di gioco;
• non ci sono restrizioni durante la creazione di giochi flash.

• intensità di risorse piuttosto elevata sia del programma stesso che dei giochi creati;
• un numero limitato di oggetti sul palco: più, più lento è il gioco (fino al mancato avvio);
• non c'è supporto per i caratteri cirillici (è necessario modificare le immagini vettoriali dell'alfabeto latino, sostituendole con le lettere necessarie);
• compatibilità incompleta della nuova versione del programma con i progetti di gioco creati nelle versioni precedenti.

conclusioni

Di tutti i programmi per la creazione di giochi in flash che esistono oggi, Stencyl è il compromesso più ragionevole tra facilità d'uso e ampiezza di possibilità. La buona notizia è che la funzionalità del designer nell'edizione gratuita è praticamente illimitata, il che consente di implementare quasi completamente qualsiasi idea.

Tuttavia, non dimenticare di "quasi" ... Il fatto è che Stencyl stesso funziona sulla base di una macchina JAVA, che, come sai, è piuttosto impegnativa in termini di risorse. Se a questo carico aggiungiamo anche il carico che crea il gioco, si scopre che per il normale funzionamento abbiamo bisogno di un computer moderno e potente.

Questo è il primo "quasi". E la seconda è l'implicita restrizione sul numero degli oggetti sul palco, di cui ho già accennato di sfuggita. Anche se questi oggetti sono solo tessere, ma ce ne sono molti, il gioco potrebbe dare un errore durante il test e non avviarsi finché non ne riduci il numero.

In sintesi, possiamo dire che Stencyl sarà un motore ideale per creare tutti i tipi di giochi flash casuali e sparatutto a scorrimento laterale. Inoltre, dopo esserti esercitato a creare giochi in flash, puoi acquistare uno dei tipi di licenze e, con una piccola modifica nelle meccaniche, portare il tuo gioco nei formati supportati da Android e iOS. E questo è un vero modo per guadagnare denaro piazzando il gioco sul Play Market o sull'App Store!

Infine, non resta che augurare buona fortuna a tutti coloro che decideranno di dedicarsi seriamente allo sviluppo del gioco. Lascia che i tuoi algoritmi funzionino la prima volta e il compilatore si siede e tace in uno straccio quando avvii i tuoi giochi :).

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

* Programmi usati: Flash CS3, Photoshop CS3
* Complessità: medio
* Tempo di consegna stimato: 3 ore

Un sito portfolio è di grande importanza per qualsiasi artista, fotografo, designer e persino musicista contemporaneo. Mostra un approccio serio al business e professionalità. Oggi ti mostreremo come creare un portfolio fotografico originale ed elegante basato sul moderno sistema di gestione dei contenuti Flash Moto CMS.

Utilizzeremo la versione standalone di Moto CMS, che contiene varie utilità, componenti, esempi integrati e modelli di sito puliti con strutture diverse. E utilizziamo il modello più semplice, ovvero creeremo un sito Web di portfolio fotografico da zero.

In questa guida tratteremo i seguenti argomenti:

* Creazione di contenitori.
* Crea slot (pulsante Chiudi, pulsante semplice).
* Crea moduli (lettore musicale e galleria di immagini).
* Modifica il precaricatore del sito
* Creazione di pagine del sito e riempimento di contenuti.

Parleremo anche delle caratteristiche e delle funzionalità del Pannello di controllo Moto CMS.

Avremo bisogno:
* Adobe Photoshop;
* Adobe Flash CS3;
* Versione offline di Moto CMS (prova gratuita);
* Progettazione del sito web c. formato PSD.

Anteprima del risultato finale

Passaggio 1: scarica i file Moto CMS

Per iniziare a creare il nostro sito di portfolio fotografico, devi scaricare la versione standalone di Moto Flash CMS. Per ripetere tutti i passaggi di questa guida e comprendere le capacità di Moto CMS, sarà sufficiente la versione di prova.

Passaggio 2: breve panoramica dei file Moto CMS

Ecco una rapida panoramica dei file e delle cartelle di Moto CMS:

* Componenti. Questa cartella contiene i componenti mxp gestiti da Adobe Extension Manager.
* pannello di controllo. Contiene tutti i file del Pannello di controllo.
* documenti. Questa cartella contiene la documentazione dell'API.
* Esempi. Contiene 4 esempi di siti flash già pronti, dal più semplice al più complesso, con un modulo galleria, un modulo notizie, un lettore musicale e video, un modulo di contatto, ecc.
* Modelli. 5 modelli che puoi utilizzare per creare un sito basato su Moto CMS. Ogni modello ha il set di file necessario e differisce nella sua struttura. Oggi utilizzeremo uno di questi modelli, in particolare il modello n. 1, come base del nostro portfolio fotografico.
* file leggimi, che descrive come iniziare a creare un sito con Moto CMS.

Passaggio 3: esegui su Localhost

Il nostro prossimo passo è lanciare il modello di sito Web da cui costruiremo il nostro sito Web portfolio. Per fare ciò, abbiamo bisogno di un server web locale. Stiamo usando WampServer. Ti permette di creare applicazioni web con database Apache, PHP e MySQL.

Per avviare il modello di sito n. 1, è sufficiente caricare il contenuto della cartella sul server locale modello_01 dalla directory /templates/, così come il contenuto della cartella pannello di controllo.

Successivamente, andiamo al Pannello di controllo di Moto CMS inserendo il nostro URL nella barra degli indirizzi del browser, aggiungendo alla fine /admin

Nota: Non sarai in grado di visualizzare il sito in questo momento perché non contiene ancora nessuna pagina. Verrà visualizzata una pagina di errore 404.

Passaggio 4: modifica di config.xml

Tutto quello che dobbiamo fare è modificare la larghezza e l'altezza del sito e impostare il colore di sfondo.

La dimensione del nostro progetto è 980×800 pixel. Affinché le dimensioni cambino sul grande schermo, dobbiamo impostare "100%" per la larghezza e l'altezza del sito. E affinché venga visualizzato correttamente su uno schermo con una piccola risoluzione, dobbiamo specificare la larghezza e l'altezza minima del sito (appariranno le barre di scorrimento). Il colore di sfondo è nero (#000000).

Passaggio 5: cambia style.css

Ora dobbiamo aprire il file style.css e impostare il colore di sfondo (nero). Tutto il resto può essere modificato utilizzando il pannello di controllo di Moto CMS.

Passaggio 6: crea il precaricatore

I file sorgente moto.xfl e website.xfl si trovano rispettivamente nelle cartelle flamoto e imperfectebsite.
Il preloader del sito deve essere creato in moto.xfl. Il preloader può essere una semplice clip con 100 fotogrammi.

Nel pannello Azioni di questa clip, scriviamo: "Stop ();" per il primo fotogramma. Quindi animiamo il resto dei fotogrammi a nostro piacimento.

Scriviamo anche "Stop ();" nelle azioni del primo fotogramma della timeline in fla.

Non dimenticare di specificare le dimensioni del sito (larghezza e altezza minime) nelle proprietà del file moto.fla.

Il nostro prossimo passo è creare una bella animazione di scomparsa del preloader. Nell'ultimo frame, dobbiamo avviare il sito web attivando la funzione "showWebsite()".

Apri il file website.xfl e aggiorna il preloader.

Passaggio 7: sfondo del sito

Apri la Libreria multimediale di Moto CMS (Impostazioni > Libreria multimediale) e insieme ad altre immagini necessarie (per la pagina principale, le pagine principali o la galleria) carica un'immagine di sfondo utilizzando il pulsante "Aggiungi media".

Successivamente, torna al Pannello di controllo, crea una nuova pagina e inserisci un'immagine di sfondo utilizzando il pulsante "Foto". Trascina l'immagine e centrala.

Il gestore dei font consente agli utenti di gestire i font del sito, che vengono archiviati come file SWF e possono essere scaricati.

Prima di caricare qualsiasi font, dobbiamo prima convertirlo in formato SWF. Per questo useremo Creatore di caratteri onlineè una pratica applicazione online sviluppata dal team MotoCMS che consente di convertire facilmente file TTF e OTF in SWF. Tutto quello che dobbiamo fare è selezionare il file di font richiesto con estensione .TTF o .OTF, aggiungerlo al Creatore di font online, fare clic sul pulsante "Crea font" e scaricare il file SWF finito, dopodiché possiamo usarlo nel nostro portfolio sito web.

Crea un nome e uno slogan per il sito web

Una volta caricato il nuovo font, puoi creare il titolo e lo slogan del sito utilizzando lo strumento Testo e applicare il font desiderato. Per creare lo slogan, utilizziamo il carattere Tahoma, dimensione: 10, colore: # 727272. Successivamente, regola il nome e lo slogan del sito in base al design in .PSD.

Passaggio 9: aggiunta di un'immagine alla home page

Metteremo l'immagine della galleria nella pagina principale del sito. Per fare ciò, seleziona un'immagine dalla Libreria multimediale facendo clic su "Foto" nella barra degli strumenti a sinistra. Se necessario, regolane la posizione in base al design della pagina principale.

Passaggio 10: crea il menu in basso

Usando lo strumento Forma, crea un rettangolo grigio stretto e usa lo strumento Testo per creare pulsanti su di esso. Regola tutto in base al design del tuo sito.
Salva tutte le modifiche e guarda il risultato cliccando su "Anteprima".
Puoi anche utilizzare il modulo menu integrato per creare un menu.

Passaggio 11: crea contenitori di contenuti

Nota: I contenitori sono clip in website.fla in cui il contenuto può essere aggiunto dinamicamente. Possono essere di 4 tipi: 1) un contenitore con oggetti visibili in tutto il sito, 2) un contenitore con oggetti di layout; 3) contenitore con oggetti di pagina; 4) contenitore con oggetti popup.

Il modello di sito n. 1 che abbiamo scelto ha due contenitori per impostazione predefinita: un contenitore con oggetti visibili in tutto il sito e un contenitore con oggetti pagina. Se apriamo il file website.fla li vedremo:

Questi contenitori sono scritti nel file structure.xml. Assicurati che la larghezza sia 980 e l'altezza sia 800px.

Contenitore con oggetti visibili in tutto il sito:

Contenitore con oggetti pagina:

Per rendere visibili su tutte le pagine elementi del sito come lo sfondo, il nome del sito, lo slogan e il menu in basso con una casella grigia, è necessario inserirli in un contenitore di oggetti a livello di sito. Possiamo farlo facilmente utilizzando il pannello di controllo di Moto CMS. Basta cliccare sull'elemento desiderato e selezionarne la posizione: Sito web. (Sull'intero sito web).

Passaggio 12: crea la pagina Chi siamo

Crea una pagina vuota

Nell'angolo in alto a sinistra, fai clic sul pulsante "Crea", che ci consentirà di creare una nuova pagina.

Collegamento dei pulsanti di menu necessari alla nuova pagina

Per fare ciò, torniamo alla pagina principale e colleghiamo il pulsante del menu alla nuova pagina. Evidenzia semplicemente il testo del pulsante del menu e fai clic sull'icona del collegamento a destra per aprire l'editor dei collegamenti. Nel nostro caso, il pulsante del menu Portfolio si collega alla pagina principale del sito e il pulsante Chi siamo si collega alla pagina Chi siamo.

Aggiunta di un'immagine di sfondo alla pagina Informazioni

Abbiamo deciso di aggiungere uno sfondo nero alla pagina. Per fare ciò, vai alla Libreria multimediale facendo clic sul pulsante "Foto" sul pannello di sinistra, seleziona un'immagine precaricata (un normale rettangolo nero) e regola la sua posizione sulla pagina in base al design.

Aggiunta di testo alla pagina Chi siamo

Aggiunta di informazioni di testo a una pagina utilizzando lo strumento Testo. L'editor WYSIWYG integrato mostra tutto ciò che fai, quindi la formattazione del testo è un gioco da ragazzi. Anche l'aggiunta di un indirizzo di contatto è abbastanza semplice, devi solo aprire l'editor di link e inserire un indirizzo e-mail.

Quando hai finito, non dimenticare di posizionare gli elementi della pagina Chi siamo in un contenitore con gli oggetti della pagina. Seleziona ogni elemento uno per uno e seleziona il posizionamento: Pagina (contenuto della pagina).

Passaggio 13: modifica l'immagine del precaricatore

Potresti aver notato precaricatori circolari bianchi mentre navighi tra le pagine. Per configurarli, apri il file website.fla e vai alla libreria. Fare clic con il pulsante destro del mouse sul preloader e selezionare Proprietà.

Nella finestra delle proprietà del simbolo, puoi selezionare la voce "Modifica classe base" e quindi animare il preloader nel modo desiderato. Lasceremo vuoto il preloader ed elimineremo l'immagine grafica.

Passaggio 14: animazione del sito Web

Infine, veniamo alla parte più interessante della nostra guida: le animazioni del sito. Al momento, come avrai notato, il sito è statico, poiché non viene animato un solo contenitore. Quindi il nostro prossimo passo è animare i contenitori e aggiungere altre animazioni per dare vita al nostro sito.

Animazione di contenitori predefiniti

Il contenitore dei contenuti è facile da animare lungo la sequenza temporale. Apri il file website.fla e crea un'animazione di dissolvenza in entrata per ogni contenitore.

Per prima cosa animiamo il contenitore principale con oggetti visibili in tutto il sito. Questo è il livello website_holder_1. Stiamo realizzando una semplice animazione con trasparenza, ma la decoreremo con qualcosa. Crea un secondo fotogramma chiave sul livello, imposta Alpha 0% per il primo fotogramma chiave (rendilo trasparente), crea un fotogramma intermedio dal primo al secondo, quindi aggiungi andamento.

Creiamo un'animazione per il contenitore con gli oggetti della pagina (livello pagina_1_holder_2) allo stesso modo, ma facciamola apparire un po' più tardi.

Quindi aggiungeremo altri due fotogrammi chiave sul livello, renderemo il contenitore trasparente al primo e al secondo fotogramma e creeremo un allentamento tra il secondo fotogramma chiave e il terzo.

Quando compiliamo e carichiamo il sito, vedremo che ogni elemento appare già animato. Ma quando ci si sposta da una pagina all'altra, non c'è animazione, solo un battito di ciglia insolito. La seconda parte della sequenza temporale è responsabile di questo.

È così che realizziamo l'animazione dell'apparizione e della scomparsa del contenitore.

Poiché il carattere del testo proviene dai caratteri di sistema, è necessario modificare la modalità di fusione dal livello normale al livello per tutte le istanze Movieclip sui livelli contenitore.

Creiamo contenitori aggiuntivi e li animiamo.

Per un buon sito in flash, questa animazione non è sufficiente, quindi animeremo anche altre parti del sito, come la parte superiore (evidenziata in giallo nell'immagine sottostante), la parte inferiore (evidenziata in verde) e il contenuto stesso ( nell'immagine nel riquadro rosso).

Poiché le parti superiore e inferiore si trovano a livello dell'intero sito, aggiungeremo due contenitori per queste due parti. Prima di aggiungere i contenitori, dobbiamo determinarne le dimensioni e la posizione. Questo è facile da fare con lo strumento Taglia in Photoshop.

La parte superiore ha le seguenti dimensioni: x=0, y=0, larghezza=980, altezza=120.

Zona inferiore: x=0, y=765, larghezza=980, altezza=35.

Il contenitore in alto conterrà il nome del sito, il contenitore in basso conterrà il menu e verranno visualizzati in modo diverso. Inoltre, rimarranno rispettivamente nella parte superiore e inferiore dello schermo quando si passa a schermo intero.

Dopo aver determinato le dimensioni dei contenitori, apriamo il file structure.xml e aggiungiamo nuovi contenitori (a livello di sito), specificandone coordinate, larghezza, altezza e profondità.


Dopo aver aggiunto i contenitori al file .xml, dobbiamo crearli nel file website.fla. Apri il file website.fla e crea nuovi livelli per i nostri contenitori. L'ordine dei livelli dovrebbe corrispondere ai valori di profondità che abbiamo impostato nel file xml.

Possiamo copiare il movieclip vuoto dal livello website_holder_1 e incollarlo in website_holder_3 e website_holder_4.

Impostiamo le stesse coordinate nella clip come specificato nel file structure.xml.

Per il 3° contenitore: x = 0, y = 0;

Per il 4° contenitore: x = 0, y = 765.

Da quando abbiamo copiato la clip, i vecchi nomi sono rimasti. Li cambiamo in base all'ID in modo che siano facili da trovare.

Lo stesso deve essere fatto per il container 4.

Sulla timeline, impostiamo il primo fotogramma chiave per i contenitori 3 e 4 in modo che inizino a comparire dopo il contenitore con gli oggetti dell'intero sito. Quindi creiamo i secondi fotogrammi chiave e animiamo i fotogrammi intermedi. I primi fotogrammi chiave contengono la posizione iniziale dei contenitori e i secondi fotogrammi chiave contengono la posizione finale dei contenitori nel sito. Il contenitore principale appare dalla parte superiore dello schermo, quindi lo spostiamo sul primo fotogramma chiave; il contenitore inferiore si trova sul lato inferiore, quindi spostiamo anche quello sul primo fotogramma chiave. E aggiungiamo anche facilitazioni per animare le parti intermedie.

Ecco cosa abbiamo:

Dopodiché, dobbiamo aggiungere il codice seguente sul livello delle azioni a livello del primo fotogramma chiave di animazione dei nostri contenitori.

Quindi compiliamo il sito e aggiorniamo il Pannello di controllo.

Metti gli oggetti nei contenitori

Quando selezioni un oggetto, vedrai apparire due nuovi contenitori nell'elenco dei possibili posizionamenti nel menu a tendina: quello superiore e quello inferiore.

Il nome del sito con lo slogan deve essere posizionato nel contenitore in alto e il menu del sito con un rettangolo grigio in quello in basso.

Modificare il contenuto del contenitore inferiore

Ora è auspicabile che su uno schermo grande, il contenitore inferiore si attacchi alla parte inferiore dello schermo. Per fare ciò, dobbiamo spostare l'animazione del contenitore in un'altra clip, perché, come sapete, non possiamo spostare la clip animata a livello di codice (l'animazione non funzionerà). Chiamiamo questo clip website_holder_4_c.

Dopodiché, andiamo alla scena principale, clicchiamo sui primi fotogrammi chiave dei contenitori 3 e 4 e modifichiamo il codice.

Dopo aver compilato il sito, puoi vedere che il contenitore inferiore si attacca alla parte inferiore dello schermo, indipendentemente da come ridimensioniamo lo schermo. Se la risoluzione dello schermo è troppo piccola, il contenitore inferiore non si sovrapporrà al contenuto del sito e rimarrà al suo posto.

Passaggio 15: animare il contenitore dei contenuti

Per animare il contenuto del sito, dovremo animare il contenitore con gli oggetti dell'intero sito come abbiamo fatto per i contenitori superiore e inferiore.

Passaggio 16: crea la pagina dei contatti

Prima di creare una nuova pagina, aggiorniamo il modello di pagina. Creiamo il modello per tutte le nuove pagine, la pagina "Chi siamo". Fare clic con il pulsante destro del mouse sulla pagina Chi siamo e selezionare Aggiorna modello di pagina.

Dopo aver aggiornato il modello di pagina, fai clic sul pulsante "Crea", inserisci il nome della pagina, il titolo, assegna un URL e seleziona la sua posizione nella struttura del tuo sito, come mostrato di seguito, nello screenshot.

La pagina "Contatti" è pronta. Ora resta da modificare il suo contenuto utilizzando un comodo editor WYSIWYG e utilizzare l'editor di collegamenti per collegarlo al pulsante del menu corrispondente.

Passaggio 17: crea uno slot semplice

In Moto Flash CMS, gli slot svolgono il ruolo di oggetti animati. Lo slot può contenere un gran numero di funzioni animate che possono essere controllate direttamente dal Pannello di controllo.

Per prima cosa proveremo a creare uno slot semplice, quindi a migliorarlo.

Iniziamo con il pulsante "Chiudi", aggiungiamolo al sito come immagine, applichiamoci alcuni effetti e assegniamo l'azione "Vai alla pagina" -> "Home".

Animare il pulsante di chiusura non è affatto difficile perché lo faremo utilizzando uno slot. Creiamo uno slot nel file website.fla. Per fare ciò, importiamo l'immagine del pulsante "Chiudi" nella libreria. Nella sezione Slot, dobbiamo creare un nuovo movieclip e chiamarlo CloseButtonSlot.

Impostiamo la classe come CloseButtonSlot. Non è necessario creare una nuova classe, è sufficiente ereditare la classe AbstractMotoSlot. Basta copiare: com.moto.template.shell.view.components.AbstractMotoSlot e incollarlo nel campo Classe base.

Quindi aggiungiamo un'immagine CloseButtonIcon allo stage (CloseButtonSlot MovieClip deve essere aperta) e la convertiamo in una clip chiamata CloseButtonIcon. Poiché abbiamo ereditato il nostro slot dalla classe AbstractMotoSlot, questo ci fornisce l'animazione principale. Ora faremo un bel effetto di espansione/compressione.

Il passaggio successivo è creare un nuovo livello e creare fotogrammi chiave in cui è necessario inserire "Stop ();". Posiziona le etichette principali "sopra" (tra il primo e il secondo fotogramma di arresto) e "fuori" (tra il secondo e il terzo fotogramma chiave di arresto) - vedi screenshot:

Creiamo la stessa chiave e fotogrammi intermedi sul nostro livello di clip.

Ad esempio, il nostro pulsante "Chiudi" ruoterà in senso orario quando il mouse viene posizionato sopra di esso e in senso antiorario quando viene rimosso.

Aggiungiamo la luminosità e l'andamento della rotazione per l'animazione del movimento.

Al termine dell'animazione, compiliamo il file website.fla con il nostro nuovo slot (Ctrl + Invio).

Per poter lavorare con lo slot usando Moto CMS, dobbiamo specificarne i parametri nel file: structure.xml:

librarySymbolLinkage=” ” – esporta lo slot movieclip (nome classe).
animato="true" – un attributo che specifica se lo slot è animato o meno.
resizable="false" - se esiste una logica per ridimensionare lo slot o meno.
bloccato=”falso” – se lo slot deve essere visualizzato o meno nel Pannello di controllo.
– nome dello slot nel Pannello di controllo
– proprietà degli slot che estendono la funzionalità. Non lo useremo in questo esempio.