casa › Aliquote › Esempio: creazione di un'applicazione di base. Come creare un'applicazione Flash nell'editor Flash Applicazioni Flash

Esempio: creazione di un'applicazione di base. Come creare un'applicazione Flash nell'editor Flash Applicazioni Flash

Chiunque sia interessato a creare applicazioni per VKontakte, unisciti al gruppo VKontakte vk.com/club17157755. In esso imparerai nuove lezioni e fonti che ti aiuteranno a imparare come creare le tue applicazioni in VKontakte.

Per creare la tua applicazione in VKontakte, hai bisogno di conoscenze di programmazione. Il processo per ottenere questa conoscenza è molto lungo e difficile. Dovrai leggere molti libri ed esercitarti molto. Se non hai un tutor personale, dovrai capire molte cose da solo.

Sei pronto a dedicare diversi anni all'apprendimento della programmazione? Quindi su questo sito troverai materiali utili che ti aiuteranno a iniziare a comprendere la programmazione. Acquisirai altre conoscenze nel processo di pratica indipendente, quando saprai già quale libro leggere su uno specifico linguaggio di programmazione.

Come imparare a programmare

Creare applicazioni in contatto è programmare. Senza la capacità di programmare, non sarai in grado di iniziare immediatamente a creare buone applicazioni.

Per sapere come creare app di contatto, devi prima imparare a programmare. Devi capire cosa sono le variabili, le funzioni, le condizioni, i cicli, ecc. È necessario acquisire le basi della programmazione prima di iniziare a provare a creare un'applicazione specifica per un contatto.

Per coloro che hanno poca esperienza nella programmazione o non hanno mai incontrato la programmazione, nell'argomento “A tutti i principianti della programmazione! "descrive quanto sforzo devi fare solo per comprendere le basi della programmazione.

Sviluppo di applicazioni Flash per VKontakte

Sviluppo di applicazioni VKontakte

Solo dopo aver appreso le basi della programmazione puoi passare a imparare come creare un'applicazione per il social network VKontakte.

A seconda del tipo di applicazione che hai scelto: Flash o IFrame, puoi leggere lezioni che ti aiuteranno a capire come lavorare con l'API VKontakte.

Se non vuoi imparare a programmare

Se non vuoi imparare a programmare, puoi provare a creare la tua applicazione VKontakte IFrame utilizzando il servizio 3apps.ru - IFrame Application Designer.

Problemi durante la creazione di applicazioni

Quando hai poca esperienza di programmazione o il compito da svolgere è difficile anche per i professionisti, puoi chiedere aiuto

Iniziamo

Per creare un'applicazione flash, devi avere un'idea specifica al riguardo. È che dovresti pensare almeno a uno scenario applicativo approssimativo. Successivamente, puoi iniziare a lavorare direttamente nell'editor Flash.

Innanzitutto, è necessario determinare la dimensione della futura applicazione. Ad esempio, se si tratta di un banner standard, le sue dimensioni saranno 468 mm per 60 mm. Specifica questi parametri nella sezione Proprietà film nei campi Larghezza e Altezza: indicano rispettivamente la larghezza e l'altezza. Quindi seleziona il colore dello sfondo principale dell'applicazione flash. Per completare le impostazioni, inserire il numero di fotogrammi al secondo nel campo Frame Rate.

Un programma speciale ti aiuterà a creare un'applicazione flash

Subito dopo aver completato le impostazioni, fare clic con il tasto sinistro del mouse sul pulsante OK. Ora entra in gioco l'editor flash stesso, che ti aiuterà a creare un'applicazione flash.

Iniziamo a creare applicazioni animate, ad esempio un'iscrizione in movimento. Per fare ciò, seleziona lo strumento Testo e apri il pannello delle impostazioni – Pannelli finestra Caratteri. Nel menu Carattere visualizzato, fai clic sul pannello Caratteri e seleziona un carattere, ad esempio Times New Roman. Impostane il colore e la dimensione desiderata, ad esempio 26, scrivi loro un messaggio o un suggerimento. La base di base della tua applicazione flash è pronta!

Puoi creare un'applicazione flash in forma animata

Dopodiché puoi farlo. Per fare ciò, devi convertire ciò che hai scritto in un simbolo. Per fare ciò, utilizzare il comando Inserisci Converti in simbolo. Dagli anche un nome in modo da poterlo salvare sul tuo disco rigido in seguito.

Successivamente, seleziona il fotogramma n. 20 sulla Timeline e inserisci il primo, il cosiddetto fotogramma chiave, con il comando Inserisci fotogramma chiave. Allo stesso tempo, sul lato sinistro del nuovo fotogramma vedrai una striscia grigia che corre nella direzione del fotogramma chiave.

Adesso non ti resta che rendere attiva l'applicazione flash. Per fare ciò, torna di nuovo al primo fotogramma e sposta l'iscrizione che hai fatto oltre il suo bordo in una posizione arbitraria oltre il bordo destro. Quindi, senza rimuovere la selezione dal primo fotogramma, aprire il pannello Frame Pannelli Finestra e passare immediatamente alla scheda Frame.

Tutto quello che devi fare è selezionare il tipo di animazione di cui hai bisogno dal menu Tweening. Subito dopo, la striscia grigia che separa i fotogrammi chiave diventerà blu. Questo è tutto, una semplice applicazione flash è pronta!

ActionScript 3.0 può essere utilizzato in diversi ambienti di sviluppo di applicazioni, inclusi gli strumenti Flash Professional e Flash Builder e qualsiasi editor di testo.

Questo esempio illustra i passaggi per creare e modernizzare una semplice applicazione ActionScript 3.0 utilizzando Flash Professional o Flash Builder. L'applicazione creata è un modello semplice per l'utilizzo di file di classe ActionScript 3.0 esterni negli strumenti Flash Professional e Flex.

Progettazione di un'applicazione ActionScript

Questo esempio è un'applicazione ActionScript standard chiamata "Hello World" che ha una struttura semplice.

L'app si chiama HelloWorld.

Visualizza una singola casella di testo con le parole "Hello World!"

L'applicazione utilizza una classe Greeter orientata agli oggetti. Questa struttura consente di utilizzare la classe in un progetto Flash Professional o Flex.

Questo esempio crea innanzitutto una versione base dell'applicazione. Vengono quindi aggiunte delle funzioni in modo che l'utente possa inserire il proprio nome e l'applicazione verifica se il nome è in un elenco di utenti conosciuti.

Dopo questa breve definizione, puoi iniziare a creare la tua applicazione.

Creazione del progetto HelloWorld e della classe Greeter

Il brief di progettazione per l'applicazione Hello World afferma che il suo codice dovrebbe essere facilmente riutilizzabile. Per raggiungere questo obiettivo, l'applicazione utilizza un'unica classe Greeter orientata agli oggetti. Questa classe viene utilizzata in un'applicazione creata in Flash Builder o Flash Professional.

Creazione di un progetto HelloWorld e di una classe di benvenuto in Flex

In Flash Builder, scegli File > Nuovo > Progetto Flex.

Inserisci HelloWorld nel campo Nome progetto. Assicurati che Tipo di applicazione sia impostato su "Web (funziona in Adobe Flash Player)" e quindi fai clic su Fine.

Flash Builder crea il progetto e lo visualizza nella finestra Package Explorer. Per impostazione predefinita, il progetto contiene un file chiamato HelloWorld.mxml, che si apre nell'editor.

Ora, per creare un file di classe ActionScript personalizzato in Flash Builder, scegli File > Nuovo > Classe ActionScript.

Nella finestra di dialogo Nuova classe ActionScript, nella casella Nome, immettere Salutatore come nome della classe e fare clic su Fine.

Per creare una classe Greeter in Flash Professional, attenersi alla seguente procedura:

In Flash Professional, scegliete File > Nuovo.

Nella finestra di dialogo Nuovo documento, selezionare il file ActionScript e fare clic su OK.

Verrà ora visualizzata la finestra per la modifica di un nuovo file ActionScript.

La classe Greeter definisce un oggetto Greeter utilizzato nell'applicazione HelloWorld.

Aggiunta di codice alla classe Greeter

Inserisci il seguente codice in un nuovo file (una parte del codice potrebbe essere già stata aggiunta):

Pacchetto ( public class Greeter ( public function sayHello():String ( var saluto:String; saluto = "Ciao mondo!"; return saluto; ) ) )

La classe Greeter include un metodo, sayHello(), che restituisce una stringa con la frase "Hello World!"

Per salvare questo file ActionScript, scegli File > Salva.

La classe Greeter è ora pronta per essere utilizzata nella tua applicazione.

Crea un'applicazione utilizzando il codice ActionScript

La classe Greeter che abbiamo appena creato definisce un insieme autonomo di funzioni software, ma non rappresenta un'applicazione completa. Per utilizzare la classe, è necessario creare un documento Flash Professional o un progetto Flex.

Quando crei il codice, devi utilizzare un'istanza della classe Greeter. Di seguito viene descritta la procedura per utilizzare la classe Greeter in un'applicazione.

Per creare un'applicazione ActionScript utilizzando lo strumento Flash Professional, attenersi alla seguente procedura:

Scegli File > Nuovo.

Nella finestra di dialogo Nuovo documento, selezionate File Flash (ActionScript 3.0) e fate clic su OK.

Si apre la finestra di creazione del documento.

Dalla tavolozza degli strumenti di Flash Professional, selezionate lo strumento Testo. Trascinalo sullo stage per definire una nuova casella di testo larga circa 300 pixel e alta 100 pixel.

Nel pannello Proprietà, con la casella di testo ancora selezionata nell'area di lavoro, imposta il tipo di testo su Testo dinamico e inserisci mainText come nome dell'istanza del campo di testo.

Fare clic sul primo fotogramma della sequenza temporale. Apri il pannello Azioni scegliendo Finestra > Azioni.

Nel pannello Azioni, inserisci il seguente script:

Var mioGreeter:Greeter = new Greeter(); mainText.text = mioGreeter.sayHello();

Salvare il file.

Per creare un'applicazione ActionScript utilizzando lo strumento Flash Builder, procedi nel seguente modo:

Apri il file HelloWorld.mxml e aggiungi il codice secondo la seguente stampa:

Questo progetto Flex include quattro tag MXML:

Etichetta definisce il contenitore dell'applicazione.

Etichetta Definisce lo stile di layout (layout verticale) per il tag Applicazione.

Etichetta include del codice ActionScript.

Etichetta definisce il campo in cui vengono visualizzati i messaggi di testo per l'utente.

Codice nell'etichetta definisce il metodo initApp(), che viene chiamato quando viene caricata l'applicazione. Il metodo initApp() imposta il valore del testo dell'area di testo mainTxt sulla stringa "Hello World!" restituita dal metodo sayHello() della classe Greeter appena creata.

Per salvare l'applicazione, scegli File > Salva.

Pubblica e testa un'applicazione ActionScript

Lo sviluppo del software è un processo interattivo. Una volta scritto il codice, è necessario compilarlo e modificarlo fino a raggiungere pienamente gli obiettivi. È necessario eseguire l'applicazione compilata e verificare che esegua le attività descritte nell'assegnazione. In caso contrario, è necessario modificare il codice finché non si ottiene il risultato desiderato. Gli ambienti di sviluppo Flash Professional e Flash Builder forniscono diversi modi per pubblicare, testare ed eseguire il debug delle applicazioni.

Di seguito sono riportati i passaggi principali per testare l'applicazione HelloWorld in ciascuno degli ambienti menzionati.

Per pubblicare e testare un'applicazione ActionScript utilizzando lo strumento Flash Professional, attenersi alla seguente procedura:

Pubblica la tua applicazione e controlla eventuali errori di compilazione. In Flash Professional, scegliete Gestisci > Prova filmato per compilare il codice ActionScript ed eseguire l'applicazione HelloWorld.

Se provi l'applicazione e visualizzi errori e avvisi nella finestra di output, correggi gli errori nel file HelloWorld.fla o HelloWorld.as. Quindi controlla nuovamente l'applicazione.

Se non sono presenti errori di compilazione, nella finestra di Flash Player verrà visualizzata l'applicazione Hello World.

Dopo aver creato con successo un'applicazione ActionScript 3.0 orientata agli oggetti semplice ma completa, è possibile iniziare.

Per pubblicare e testare un'applicazione ActionScript utilizzando lo strumento Flash Builder, segui questi passaggi:

Seleziona Esegui > Esegui HelloWorld.

Verrà avviata l'applicazione HelloWorld.

Se provi l'applicazione e visualizzi errori e avvisi nella finestra di output, correggi gli errori nel file HelloWorld.mxml o Greeter.as. Quindi controlla nuovamente l'applicazione.

Se non sono presenti errori di compilazione, nella finestra del browser che si apre apparirà l'applicazione Hello World. Lo schermo dovrebbe visualizzare il testo "Hello World!"

Dopo aver creato con successo un'applicazione ActionScript 3.0 orientata agli oggetti semplice ma completa, puoi iniziare a modernizzare la tua applicazione HelloWorld.

Aggiornamento dell'app HelloWorld

Per rendere l'applicazione più interessante, puoi inserire la conferma del nome utente dopo aver controllato un determinato elenco di nomi.

Innanzitutto dobbiamo aggiornare la classe Greeter, ampliandone le funzionalità. Successivamente, dovresti aggiornare l'applicazione in modo che possa sfruttare le nuove funzionalità.

Aggiornamento del file Greeter.as

Apri il file Greeter.as.

Modificare il contenuto del file come segue (le righe nuove e modificate sono in grassetto):

Pacchetto (classe pubblica Greeter ( /** * Definisce i nomi che ricevono un saluto adeguato. */ public static var validNames:Array = ["Sammy", "Frank", "Dean"]; /** * Costruisce una stringa di saluto utilizzando il nome indicato. */ funzione pubblica sayHello( nomeutente:String = ""):String ( var saluto:String; se (nomeutente == "") { saluto = "Ciao. Digita il tuo nome utente, quindi premi " + "il tasto Invio."; } altrimenti se (nomevalido(nomeutente)) { saluto = "Ciao, " + nomeutente + "."; } altro { saluto = "Mi spiace " + userName + ", non sei nella lista."; } ricambiare il saluto; ) /** * Controlla se un nome è presente nell'elenco validNames. */ funzione statica pubblica validName(inputName:String = ""):Boolean { if (nomevalido.indexOf(nomeinput) > -1) { restituisce vero; } altro { restituire falso; } } } }

La classe Greeter ora ha nuove proprietà:

L'array validNames contiene un elenco di nomi utente consentiti. Quando viene caricata la classe Greeter, l'array viene impostato su un elenco di tre nomi.

Il metodo sayHello() prende il nome utente e modifica il saluto in base a determinate condizioni. Se il nome utente userName viene specificato come una stringa vuota (""), la proprietà di saluto è impostata per richiedere il nome utente. Se il nome utente viene accettato, il saluto sarà simile a questo: "Ciao, nome utente." E infine, se le due condizioni precedenti non sono soddisfatte, la variabile di saluto è impostata in questo modo: "Scusa nome utente, non sei nella lista." ("Scusa, [nome utente], non sei nella lista").

Il metodo validName() restituisce true se l'inputName immesso viene trovato nell'array validNames e restituisce false se il nome non viene trovato. L'istruzione validNames.indexOf(inputName) controlla ogni riga dell'array validNames rispetto alla stringa del nome immesso, inputName . Il metodo Array.indexOf() restituisce la posizione dell'indice della prima istanza di un oggetto nell'array. Restituisce -1 se l'oggetto non viene trovato nell'array.

È quindi necessario modificare il file dell'applicazione in cui esiste il riferimento alla classe ActionScript.

Per modificare l'applicazione utilizzando lo strumento Flash Professional, attenersi alla seguente procedura:

Apri il file HelloWorld.fla.

Modificare lo script nel fotogramma 1 in modo che la stringa vuota ("") vada nel metodo sayHello() della classe Greeter:

Var mioGreeter:Greeter = new Greeter(); mainText.text = mioGreeter.sayHello("");

Seleziona lo strumento Testo dalla tavolozza Strumenti. Crea due nuovi campi di testo nell'area di lavoro. Posizionali uno accanto all'altro sotto il campo di testo mainText esistente.

Nella prima nuova casella di testo, ovvero l'etichetta, inserisci il testo Nome utente:.

Seleziona un altro campo di testo e impostane il tipo nella finestra di ispezione Proprietà su Testo input. Selezionare Linea singola come tipo di linea. accedere testoIn come nome dell'istanza.

Fare clic sul primo fotogramma della sequenza temporale.

Nel pannello Azioni, aggiungi le seguenti righe alla fine dello script esistente:

MainText.border = vero; textIn.border = vero; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); funzione keyPressed(event:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )

Il nuovo codice aggiunge le seguenti funzionalità:

Le prime due righe impostano semplicemente i confini dei due campi di testo.

Un campo di testo di input, come textIn , ha una serie di eventi che può distribuire. Il metodo addEventListener() consente di specificare una funzione che viene eseguita quando si verifica un evento di un certo tipo. In questo caso, l'evento corrisponderà alla pressione di un tasto sulla tastiera.

La funzione personalizzata keyPressed() controlla se verrà premuto il tasto Invio. Se viene premuto il tasto desiderato, il metodo sayHello() dell'oggetto myGreeter passa il testo dal campo di testo textIn come parametro. Questo metodo restituisce una stringa di saluto in base al valore passatogli. La stringa restituita viene quindi assegnata alla proprietà text del campo di testo mainText.

Lo script completo per il fotogramma 1 è simile al seguente:

Var mioGreeter:Greeter = new Greeter(); mainText.text = mioGreeter.sayHello(""); mainText.border = vero; textIn.border = vero; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); funzione keyPressed(event:KeyboardEvent):void ( if (event.keyCode == Keyboard.ENTER) ( mainText.text = myGreeter.sayHello(textIn.text); ) )

Salvare il file.

Per avviare l'applicazione selezionare i comandi “Gestisci” > “Prova filmato”.

Quando esegui l'applicazione, ti viene richiesto di inserire il tuo nome utente. Se il nome viene accettato dal programma apparirà un messaggio di conferma "ciao".

Per modificare un'applicazione utilizzando lo strumento Flash Builder, procedi nel seguente modo:

Apri il file HelloWorld.mxml.

Quindi cambia l'etichetta per indicare all'utente che il testo è solo a scopo di visualizzazione. Cambia il colore di sfondo in grigio chiaro e imposta l'attributo modificabile su false:

Ora aggiungi le seguenti righe direttamente dopo il tag di chiusura . Queste righe creano un componente TextInput che consente all'utente di inserire un valore nome utente:

L'attributo enter specifica le azioni che vengono eseguite quando l'utente preme il tasto Invio nel campo userNameTxt. In questo esempio, il codice passa il testo immesso nel campo al metodo Greeter.sayHello(). Il saluto nel campo mainTxt cambia di conseguenza.

Il file HelloWorld.mxml è simile al seguente:

Salva il file HelloWorld.mxml modificato. Selezionare Esegui > Esegui HelloWorld per eseguire l'applicazione.

Quando esegui l'applicazione, ti viene richiesto di inserire il tuo nome utente. Se il nome (Sammy, Frank o Dean) viene accettato dal programma, verrà visualizzato un messaggio di conferma “Ciao, nome utente».

Prima di iniziare il post vero e proprio, leggerò un piccolo disclaimer:
Devi pensare prima di creare una nuova applicazione, cos'è per te, cos'è per gli altri, andrà a beneficio degli altri, puoi persino guadagnare bene dall'applicazione! Maggiori dettagli su - regole per il posizionamento delle domande. Se sei convinto di tutto, possiamo iniziare!

introduzione

Scriveremo l'applicazione in ActionScript 3.0, che attualmente è la versione più recente e più conveniente. Non aver paura, qui non ci saranno grosse difficoltà! Puoi scegliere tu stesso l'ambiente software per sviluppare un'applicazione in Flash, ma io consiglio Adobe Flash Professional e ti spiego perché:

Non è la prima volta che ci lavoro, quindi posso dire con sicurezza che è facile da usare
Non pone soglie tra funzionalità e design
Puoi persino creare app per telefoni

Creeremo un'applicazione utilizzando l'esempio di un normale biglietto da visita; ho tutto il materiale pronto.

Dove iniziare? Cornici di collegamento.

Crea un documento ActionScript:

Nella finestra "Timeline", crea "livelli", salva il loro nome e ordine:

Ogni 5 fotogrammi premere “F6”, alla fine “F5”. Dovrebbe apparire come nello screenshot.

Penso che non ci sia nulla da spiegare qui:
Il livello "ActionScript" è dove verrà posizionato il codice.
Livello "Segni" - per non perdere di vista i fotogrammi, saranno numerati, ma quasi come un livello aggiuntivo.
Livello “Pulsanti” - contiene i pulsanti che saranno nella stessa posizione in tutto il progetto, anche con i livelli “Sfondo” e “Materiali”. Adesso numeriamo i fotogrammi, non per niente è stato creato il livello “Segni”. Fai clic sui fotogrammi che hai creato nel livello "Segni", vedi il tipo "Frame", inserisci un nome per il fotogramma.

Il livello "Segni" non ha uno scopo speciale, è creato solo per aiutare. Quindi abbiamo imparato a creare cornici!

Simboli e risorse

Ora sarà facile come prima. Fare clic sul livello "Sfondo" su qualsiasi fotogramma e inserire un'immagine dal computer. All'inizio sarà come un'immagine raster, lì possiamo modificare la larghezza e l'altezza. Lasciamo lo sfondo così com'è.

Eseguiamo la stessa procedura con il livello “Pulsanti”, solo che ora convertiamo l'immagine raster in un simbolo facendo clic con il tasto destro del mouse su “Converti in simbolo”:

Chiamiamo l'istanza del pulsante come vogliamo. Chiamiamolo "Personaggio 1". Tipo: frammento video. Quindi assegniamo il nome dell'istanza al simbolo stesso e il suo tipo come mostrato nello screenshot:

Attivazione della pagina

Successivamente, dobbiamo attivare le pagine tramite il livello “ActionScript”, fare clic sul livello, premere “F9”. Apparirà una finestra vuota; per attivare inserire il codice:

Importa flash.events.MouseEvent;
fermare();
btn1.addEventListener(MouseEvent.CLICK,OnClickDve);

Funzione OnClickDve(e:MouseEvent):void
{
gotoAndStop("Due");
}

Penso che capirai cosa è cosa! Nota: quando si avvia l'applicazione, viene lanciato per primo il frame Adyn.

Compilazione della domanda con i materiali

Clicca sul livello “Materiali”, cioè su quei fotogrammi sotto i quali nel livello “Marchi” è indicata la parola “Adyn”, il principio di caricamento di una foto è lo stesso, quindi il resto sarà facile, e puoi anche scarica il test!