Een Hangman iPad-app bouwen met Flash - Aan de slag

Deze tutorial leert je hoe je een eenvoudige app voor de iPad kunt ontwikkelen met behulp van Flash CS 5.5. In deze tweedelige serie bouwen we een eenvoudig galgje. Na het voltooien van deze serie, zou je je comfortabel genoeg moeten voelen om te beginnen met het ontwikkelen van je eigen iOS-applicaties met Flash.


Stap 1: Een CSR genereren

Voordat we aan de slag gaan met het bouwen van onze applicatie, laten we een stapje terug doen en de installatie van de ontwikkelomgeving opzetten. Als je Flash-ontwikkelaar nieuw voor iOS-ontwikkeling bent, dan heb je waarschijnlijk geen idee hoe je Flash-toepassingen op een iOS-apparaat kunt testen. Helaas is het niet zo eenvoudig als klikken op "Uitvoeren". U moet eerst een CSR of Certificate Signing Request maken. U moet dit CSR uploaden naar de Apple Provisioning Portal, wat betekent dat u ook een iOS-ontwikkelaarsaccount moet maken op de officiële iOS-ontwikkelingssite. We zullen hier niet alle stappen bespreken van het opzetten van een account bij het iOS-ontwikkelaarsprogramma, maar de instructies op de Apple-site zijn eenvoudig te volgen. Als je nog geen lid bent van het iOS-ontwikkelingsprogramma, meld je dan nu aan.

Nadat u zich bij Apple als een iOS-ontwikkelaar hebt geregistreerd, bent u klaar om verder te gaan met het opstellen van een CSR. In je applicatiemap op een Mac vind je een map met de naam 'Hulpprogramma's'. Binnen deze map is er een applicatie genaamd 'Sleutelhangertoegang'. Open Sleutelhangertoegang om aan de slag te gaan met het proces voor het genereren van certificaten.

NOTITIE: Helaas moet u de nieuwste versie van OS X gebruiken om iOS-toepassingen met succes te kunnen ontwikkelen, testen en implementeren, ook al bouwt u ze met Flash op!

Open het programma Sleutelhangertoegang en kies de volgende menu-opties: KeyChain Access> Certificate Assistant> Vraag een certificaat aan bij een certificeringsinstantie.

U moet het e-mailadres invoeren dat u hebt gebruikt om u bij Apple te registreren en vervolgens dezelfde naam invoeren. Nadat u deze hebt ingevuld, zorgt u ervoor dat "Opgeslagen naar schijf" is geselecteerd en drukt u op Doorgaan. U moet kiezen waar u het verzoek wilt opslaan. Ik heb ervoor gekozen om het op te slaan op de desktop.

Nu kunnen we het uploaden naar de provisioning portal. Log in op het ontwikkelaarscentrum op developer.apple.com en aan de linkerkant van de pagina ziet u een link naar de provisioningportal, klik op die link.

Klik in de provisioningportal op "Certificaten" en vervolgens op de knop "Certificaat aanvragen".

Onderaan deze pagina bladert u naar waar u de CSR van de vorige stap hebt opgeslagen en klikt u vervolgens op "Verzenden".

U keert terug naar de vorige pagina. Er staat "Pending Issuance" onder "Status". Wacht een paar seconden en vernieuw de pagina en uw certificaat moet beschikbaar zijn om te downloaden. Download het nog niet, we hebben nog een paar stappen te gaan.


Stap 2: Een apparaat registreren

Sluit uw apparaat aan en open iTunes. Zorg ervoor dat uw apparaat is geselecteerd en u zult er wat informatie over zien. Klik op het serienummer en het zal veranderen in uw apparaat-ID.

Ga naar Bewerken> Kopiëren. Hiermee wordt de apparaat-UDID naar uw klembord gekopieerd.

Terug in de provisioningportal, klik op het menu-item "Apparaten" en kies vervolgens "Apparaten toevoegen"

Voer een naam in voor uw apparaat en de "Device ID" die u in de vorige stap hebt gekopieerd en klik vervolgens op verzenden. Je apparaat is nu klaar.


Stap 3: Een app-ID genereren

Klik nog steeds binnen de provisionele portal op het menu-item "App-ID's" en kies vervolgens "Nieuwe app-ID".

Voer een naam in waarnaar u naar deze app wilt verwijzen. Ik koos voor "MobileTuts Hangman". Kies vervolgens een bundel-seed-ID en kies 'Use Team Id' gebruiken.

Kies ten slotte uw bundelidentificatie, ik koos voor "com.mobiletuts.hangman".

Als u klaar bent met het invoeren van de informatie, klikt u op "Verzenden".

Als alles goed gaat, zou je app moeten worden ingeschakeld.


Stap 4: Een profiel voor ontwikkelingstoevoeging verkrijgen

Kies het menu-item "Provisioning" en zorg ervoor dat u zich onder "Ontwikkeling" bevindt, kies "Nieuw profiel".

Op het volgende scherm, zorg ervoor dat je onder "Ontwikkeling" bent, voer een "Profielnaam" in (ik kies "MobileTutsHangman"), vink je certificaat aan, kies de app-ID die je in de bovenstaande stap hebt gemaakt, kies het apparaat dat je gaat gebruiken test op en klik vervolgens op verzenden.

U keert terug naar de vorige pagina. De status zegt in behandeling, wacht een paar seconden en vernieuw de pagina en je profiel moet klaar zijn om te downloaden. Ga je gang en download het nu.

Ga vervolgens terug naar de link "Certificaten" en u zou "MobileTutsHangman" moeten zien onder de "Provisioning Profiles" van uw certificaat.

Ga je gang en download je certificaat nu en download het "WWDR intermediate certificate" terwijl je er nog steeds bent.


Stap 5: Het certificaat toevoegen aan KeyChain Access en een .P12 maken

Als u geen sleutelhangertoegang hebt geopend, doet u dit nu. Dubbelklik vervolgens op het certificaat dat u hierboven hebt gedownload, voeg het toe aan de sleutelhanger-toegang en dubbelklik ook op het "WWDR-tussencertificaat".

Kies bij sleutelhanger toegang tot certificaten en draai het certificaat dat u zojuist hebt toegevoegd naar beneden, klik met de rechtermuisknop op uw persoonlijke sleutel en kies "Exporteren".

Ik heb de mijne opgeslagen in een map met de naam "MOBILETUTS HANGMAN". Zorg ervoor dat het type is ingesteld op "Personal Information Exhange (.p12)" en klik op "Opslaan".

U wordt gevraagd om een ​​wachtwoord voor uw .P12, vergeet dit wachtwoord niet, we hebben het nodig wanneer we de .P12 importeren om te flitsen. U moet ook het wachtwoord voor uw machine invoeren nadat u dit wachtwoord hebt ingevoerd.


Stap 6: Maak een nieuw Flash-project

Nu we alles hebben opgezet, zijn we klaar om met ons Flash-project te beginnen.

Ga naar Bestand> Nieuw en kies "Air For iOS".

Zorg ervoor dat de volgende eigenschappen zijn ingesteld en druk vervolgens op "OK".

  • Breedte: 768
  • Hoogte: 1024
  • Framesnelheid: 24
  • Achtergrondkleur: wit

Sla dit document op als Hangman.fla.

Stap 7: Main.as maken

Ga naar bestand> nieuw en kies "Actionscript File".

Sla dit op als "Main.as" en voer vervolgens de volgende code in:

 pakket import flash.display.MovieClip; public class Main breidt MovieClip uit public function Main () trace ("Working"); 

Stel uw documentklasse in op "hoofd" en test de film. Je zou je film moeten zien opengaan in de ADL en "Werken" moeten zien dat getraceerd is naar het outputvenster.


Stap 8: Een tekstveld toevoegen aan het project

Kies het "Tekstgereedschap" en zorg ervoor dat de volgende eigenschappen zijn ingesteld onder het paneel "TEKENS".

  • Grootte: 45pt
  • Kleur: # 0000ff "

Sleep nu een tekstveld naar het werkgebied en voer de volgende tekst erin in: "MOBILETUTS + HANGMAN".

Kies vervolgens het venster "FILTERS" en klik op de nieuwe filterknop en kies "DROP SHADOW".

Stel de volgende eigenschappen in op de slagschaduw.

  • Blur X: 5px
  • Blur Y: 5px
  • Kracht: 50%
  • Kwaliteit: laag
  • Hoek: 45
  • Afstand: 5px

Stel ten slotte de volgende eigenschappen in op het TextField:

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

Zorg ten slotte dat het tekstveld is ingesteld op "Klassieke tekst" en "Statische tekst".


Stap 9: De iOS-voorkeuren instellen en de app bouwen

Klik op de hoofdfase. Selecteer onder 'PUBLISH' de optie Air For iOS.

Voer onder het tabblad 'Algemeen' het 'Uitvoerbestand', 'Naam van app' en 'Versie' in. Ik koos "MobileTutsHangman.ipa", "MobileTuts Hangman" en "1.0" voor de versie. Selecteer vervolgens "Portret" voor de beeldverhouding, vink het volledige scherm af, kies "Auto" voor weergave, "iPad" voor het apparaat en "Standaard" voor de resolutie.

Schakel over naar het tabblad "Implementatie". Blader naar het .P12-bestand dat u in de bovenstaande stappen hebt gemaakt, voer het wachtwoord in dat u ervoor hebt gemaakt en vink 'Wachtwoord onthouden voor deze sessie' aan. Blader vervolgens naar het provisioningprofiel dat je hebt gedownload en voeg het toe.

Vink 'Snel publiceren voor apparaattesten' aan en klik ten slotte op 'Publiceren'. Het kan een paar minuten duren om uw app te bouwen.


Stap 10: Het "Provisioning Profile to iTunes" uploaden

Om te kunnen testen op het apparaat, moet u eerst het Provisioning Profile erop plaatsen.

Ga naar de map waarin u het Provisioning Profile hebt opgeslagen en sleep het naar de iTunes "Bibliotheek". Selecteer vervolgens uw apparaat onder "Apparaten" en klik op synchroniseren.

Als u naar "Instellingen" op uw IPad gaat en "Algemeen" selecteert, zou u een "Profielen" -menu moeten zien. Klik erop en je zou moeten zien dat je profiel is geïnstalleerd.


Stap 11: De app op de iPad installeren

Nu we de app hebben gecompileerd en het Provisioning Profile hebben geïnstalleerd, kunnen we het uploaden naar de iPad en het testen om er zeker van te zijn dat alles naar wens is verlopen.

Sleep het .ipa-bestand dat werd gemaakt toen u de toepassing publiceerde naar de sectie "BIBLIOTHEEK" voor uw iPad in iTunes en kies vervolgens "Synchroniseren".

Als alles goed gaat, zou je de app moeten kunnen starten en de tekst zien die we aan de app hebben toegevoegd.


Stap 12: De standaard afbeelding maken

We hebben nu de app op onze iPad, maar deze is leeg bij het opstarten. In deze stap maken we de standaardafbeelding die wordt weergegeven terwijl de app wordt geladen.

Ik heb een bestand met de naam Default-Portrait.png opgenomen in de oefenbestanden. U moet ervoor zorgen dat dit zich in dezelfde map bevindt als uw .fla-bestand, en niet in submappen, anders werkt het niet. Deze afbeelding moet 768 * 1004 zijn volgens de instructies op de Adobe-site.

Terug in Flash, ga naar de "Air For iOS" -instelling zoals in de bovenstaande stappen.

Controleer op het tabblad "Algemeen" of alle instellingen gelijk zijn en klik op de knop "Toevoegen" (+), blader naar "Default-Portrait.png" en voeg deze toe aan de "Bijbehorende bestanden".


Stap 13: De pictogrammen toevoegen

De pictogrammen worden zowel voor de iPad zelf als voor de App Store gebruikt. Ga naar de "Air For iOS" -instellingen en klik op het tabblad "Pictogrammen". U moet de pictogrammen opgeven in de maten die in dit paneel worden vermeld. Ik heb de pictogrammen opgenomen in de map "icon" van de downloadbestanden. Ze hebben de naam icon (size) .png, waarbij size de grafische grootte is. Doorloop de pictogramformaten en blader naar de respectieve pictogrammen.


Stap 14: publiceer de app opnieuw

Zorg ervoor dat alle instellingen hetzelfde zijn op de tabbladen "Algemeen" en "Deployment" en klik op "Publiceren". Voeg vervolgens het .ipa-bestand toe aan iTunes, wees er zeker van
verwijder eerst de vorige versie van uw iPad en ten slotte synchroniseer je het ipa-bestand met de iPad.

Je zou nu moeten zien dat de app een afbeelding bevat en dat het "Splash-scherm" wordt weergegeven wanneer je de app voor de eerste keer opstart.


Conclusie

Met alle "harde" dingen uit de weg, kunnen we beginnen met het programmeren van ons galgje. Zoek naar het volgende deel van deze tutorial om precies dat te doen. En bedankt voor het lezen!