Costruire un'app per iPad Hangman con Flash come iniziare

Questo tutorial ti insegnerà come sviluppare una semplice app per iPad con Flash CS 5.5. In questa serie in due parti, costruiremo un semplice gioco dell'impiccato. Dopo aver completato questa serie, dovresti sentirti abbastanza a tuo agio da iniziare a sviluppare le tue applicazioni iOS con Flash.


Passaggio 1: generazione di una CSR

Prima di iniziare a costruire la nostra applicazione, facciamo un passo indietro e otteniamo l'impostazione dell'ambiente di sviluppo. Se sei uno sviluppatore Flash nuovo per lo sviluppo iOS, probabilmente non hai idea di come testare le applicazioni Flash su un dispositivo iOS. Sfortunatamente, non è così semplice come fare clic su "Esegui". Innanzitutto devi creare una cosiddetta CSR o richiesta di firma del certificato. Dovrai caricare questo CSR sul portale Apple Provisioning, il che significa che dovrai anche creare un account sviluppatore iOS sul sito ufficiale di sviluppo iOS. Non copriremo tutte le fasi di creazione di un account con il programma per sviluppatori iOS qui, ma le istruzioni sul sito Apple sono facili da seguire. Se non sei già un membro del programma di sviluppo iOS, registrati ora.

Dopo esserti registrato con Apple come sviluppatore iOS, sei pronto per continuare a configurare un CSR. All'interno della cartella delle applicazioni su un Mac, troverai una cartella chiamata utility, e all'interno di questa cartella c'è un'applicazione chiamata "Accesso Portachiavi". Apri Accesso Portachiavi per iniziare con il processo di generazione del certificato.

NOTA: Sfortunatamente, per eseguire correttamente, costruire, testare e distribuire applicazioni iOS, dovrai eseguire l'ultima versione di OS X, anche se le stai creando con Flash!

Con il programma Accesso Portachiavi aperto, scegli le seguenti opzioni di menu: Accesso a KeyChain> Certificate Assistant> Richiedi un certificato da un'autorità di certificazione.

Dovrai inserire l'indirizzo e-mail che hai usato per registrarti con Apple, e poi inserire lo stesso nome. Dopo averli riempiti, assicurati che "Saved To Disk" sia selezionato e premi continua. Dovrai scegliere dove salvare la richiesta. Ho scelto di salvarlo sul desktop.

Ora possiamo caricarlo sul portale di provisioning. Accedi al centro sviluppatori all'indirizzo developer.apple.com e sulla sinistra della pagina dovresti vedere un collegamento al portale di provisioning, vai avanti e fai clic sul link.

All'interno del portale di provisioning fare clic su "Certificati" e quindi sul pulsante "Richiedi certificato".

In fondo a questa pagina, vai al punto in cui hai salvato il CSR dal passaggio precedente, quindi fai clic su "Invia".

Sarai restituito alla pagina precedente. Dice "In attesa di rilascio" in "Stato". Attendi qualche secondo e aggiorna la pagina e il tuo certificato dovrebbe essere disponibile per il download. Non scaricalo ancora, abbiamo ancora alcuni passi da fare.


Passaggio 2: registrazione di un dispositivo

Collega il dispositivo e apri iTunes. Assicurati che il tuo dispositivo sia selezionato e vedrai alcune informazioni a riguardo. Fare clic sul numero di serie e cambierà all'ID del dispositivo.

Vai a Modifica> Copia. Questo copierà l'UDID del dispositivo negli Appunti.

Tornando nel portale di provisioning, fare clic sulla voce di menu "Dispositivi" e quindi selezionare "Aggiungi dispositivi"

Inserisci un nome per il tuo dispositivo e "ID dispositivo" che hai copiato nel passaggio precedente, quindi fai clic su Invia. Il tuo dispositivo è ora pronto.


Passaggio 3: generazione di un ID app

Sempre all'interno del Portale di provisioning, fare clic sulla voce di menu "App ID", quindi selezionare "Nuovo ID app".

Inserisci un nome per cui vuoi fare riferimento a questa app. Ho scelto "Hangout MobileTuts". Successivamente scegliere un ID seme Bundle, scegliendo "Usa ID squadra" è più comune.

Infine, scegli il tuo identificatore del pacchetto, ho scelto "com.mobiletuts.hangman".

Quando hai finito di inserire le informazioni clicca "Invia".

Se tutto va bene dovresti vedere la tua app abilitata.


Passaggio 4: ottenere un profilo di provisioning di sviluppo

Scegli la voce di menu "Provisioning", quindi assicurati di essere in "Sviluppo", scegli "Nuovo profilo".

Nella schermata successiva, assicurati di essere in "Sviluppo", inserisci un "Nome profilo" (ho scelto "MobileTutsHangman"), spunta il tuo certificato, scegli l'ID app creato nel passaggio precedente, scegli il dispositivo che stai per prova, quindi fai clic su Invia.

Sarai restituito alla pagina precedente. Lo stato dirà in sospeso, attendi qualche secondo e aggiorna la pagina e il tuo profilo dovrebbe essere pronto per il download. Vai avanti e scaricalo ora.

Quindi, torna al link "Certificati" e dovresti vedere "MobileTutsHangman" elencato sotto "Profili di provisioning" del tuo certificato.

Vai avanti e scarica il tuo certificato ora, e, mentre è ancora lì, scarica anche il "certificato intermedio WWDR".


Passaggio 5: aggiunta del certificato all'accesso con KeyChain e creazione di un file .P12

Se non hai aperto l'accesso portachiavi, fallo ora. Quindi fai doppio clic sul certificato scaricato sopra, aggiungilo all'accesso con portachiavi e fai doppio clic sul "certificato intermedio WWDR".

Nell'accesso a portachiavi, scegli i certificati e quindi "fai roteare" il certificato che hai appena aggiunto, fai clic con il tasto destro sulla tua chiave privata e scegli "Esporta".

Ho salvato il mio in una cartella denominata "MOBILETUTS HANGMAN". Assicurati che il tipo sia impostato su "Personal Information Exhange (.p12)" e fai clic su "Salva".

Ti verrà richiesta una password per il tuo .P12, assicurati di ricordare questa password, ne avremo bisogno quando importeremo il .P12 in flash. Sarà inoltre necessario inserire la password per la macchina dopo aver inserito questa password.


Passaggio 6: creare un nuovo progetto Flash

Ora che abbiamo impostato tutto, siamo pronti per iniziare il nostro progetto Flash.

Vai su File> Nuovo e scegli "Air per iOS".

Assicurati che le seguenti proprietà siano impostate, quindi premi "OK".

  • Larghezza: 768
  • Altezza: 1024
  • Frequenza fotogrammi: 24
  • Colore di sfondo: bianco

Salva questo documento come Hangman.fla.

Passaggio 7: creazione di Main.as

Vai al file> nuovo e scegli "File Actionscript".

Salvalo come "Main.as", quindi inserisci il seguente codice:

 package import flash.display.MovieClip; public class Main estende MovieClip public function Main () trace ("Working"); 

Imposta la tua Document Class su "Main" e prova il film. Dovresti vedere il filmato aperto nell'ADL e vedere "Lavorare" tracciato nella finestra di output.


Passaggio 8: aggiunta di un campo di testo al progetto

Scegli "Strumento di testo" e assicurati che le seguenti proprietà siano impostate nel pannello "CARATTERE".

  • Dimensione: 45pt
  • Colore: # 0000ff "

Ora trascina un campo di testo sul palco e inserisci il seguente testo: "MOBILETUTS + HANGMAN".

Quindi, seleziona il pannello "FILTRI" e fai clic sul nuovo pulsante del filtro e scegli "DROP SHADOW".

Imposta le seguenti proprietà sull'ombra esterna.

  • Sfocatura X: 5 px
  • Sfocatura Y: 5 px
  • Forza: 50%
  • Qualità: basso
  • Angolo: 45
  • Distanza: 5px

Infine, imposta le seguenti proprietà sul TextField:

  • X: 76,00
  • Y: 26,00
  • W: 561,00
  • H: 56,00

Infine, assicurati che il campo di testo sia impostato su "Testo classico" e "Testo statico".


Passaggio 9: Impostazione delle preferenze di iOS e creazione dell'app

Clicca sul Main Stage. Sotto "PUBLISH", seleziona l'opzione Air For iOS.

Sotto la "Scheda Generale", inserisci "File di output", "Nome app" e "Versione". Ho scelto "MobileTutsHangman.ipa", "MobileTuts Hangman" e "1.0" per la versione. Quindi, seleziona "Verticale" per il rapporto di aspetto, spunta lo schermo intero, scegli "Auto" per il rendering, "iPad" per il dispositivo e "Standard" per la risoluzione..

Passa alla scheda "Distribuzione". Cerca il file .P12 che hai creato nei passaggi precedenti, inserisci la password che hai creato e seleziona "Ricorda la password per questa sessione". Quindi, cercare il profilo di provisioning scaricato e aggiungerlo.

Spunta "Pubblicazione rapida per test del dispositivo" e infine fai clic su "Pubblica". Potrebbero essere necessari alcuni minuti per creare la tua app.


Passaggio 10: caricamento del "Profilo di provisioning su iTunes"

Per poter eseguire il test sul dispositivo, è necessario prima inserirvi il profilo di provisioning.

Vai alla cartella in cui hai salvato il profilo di provisioning e trascinalo nella "libreria" di iTunes. Quindi seleziona il tuo dispositivo in "Dispositivi" e fai clic su Sincronizza.

Se vai su "Impostazioni" sul tuo iPad e seleziona "Generale", dovresti vedere un menu "Profili". Fare clic e si dovrebbe vedere che il tuo profilo è stato installato.


Passaggio 11: installazione dell'app su iPad

Ora che abbiamo compilato l'app e installato il profilo di provisioning, possiamo caricarlo sull'iPad e testarlo per accertarci che tutto sia andato come previsto finora.

Trascina il file .ipa che è stato creato quando hai pubblicato l'applicazione nella sezione "LIBRERIA" del tuo iPad in iTunes, quindi scegli "Sincronizza".

Se tutto va bene dovresti essere in grado di avviare l'app e vedere il testo che abbiamo aggiunto all'App.


Passaggio 12: creazione dell'immagine predefinita

Ora abbiamo l'app sul nostro iPad, ma è vuota quando si avvia. In questo passaggio creeremo il grafico predefinito che verrà mostrato durante il caricamento dell'app.

Ho incluso un file chiamato Default-Portrait.png nei file degli esercizi. Dovrai assicurarti che si trovi nella stessa cartella di .fla, e non in alcuna sottodirectory, altrimenti non funzionerà. Questa immagine deve essere 768 * 1004 come da istruzioni sul sito di Adobe.

Tornati in Flash, vai all'impostazione "Air per iOS" come hai fatto nei passaggi precedenti.

Nella scheda "Generale", assicurati che tutte le impostazioni siano uguali e fai clic sul pulsante "Aggiungi" (+), seleziona "Default-Portrait.png", quindi aggiungilo ai "File inclusi"..


Passaggio 13: aggiunta delle icone

Le icone sono utilizzate per l'iPad stesso e per l'App Store. Vai alle impostazioni "Air For iOS" e fai clic sulla scheda "Icone". Devi fornire le icone nelle dimensioni indicate in questo pannello. Ho incluso le icone nella cartella "icona" dei file di download. Si chiamano icon (size) .png, dove size è la dimensione grafica. Passare attraverso le dimensioni dell'icona e selezionare le rispettive icone.


Passaggio 14: ripubblicare l'app

Assicurati che tutte le impostazioni siano le stesse nelle schede "Generale" e "Distribuzione" e fai clic su "Pubblica". Quindi aggiungi il file .ipa su iTunes, assicurati di farlo
elimina prima la versione precedente dal tuo iPad e infine risincronizza il file ipa con l'iPad.

Ora dovresti vedere che l'app ha un'immagine associata e la "schermata iniziale" viene visualizzata al primo avvio dell'app.


Conclusione

Con tutte le cose "difficili" fuori mano, possiamo iniziare a programmare il nostro gioco dell'impiccato. Stai cercando la prossima parte di questo tutorial per fare proprio questo. E grazie per la lettura!