In deze tutorial zullen we een Twitter Reader-applicatie maken, gevoed vanuit je eigen Twitter-updates. We zullen kijken naar enkele van de eigenschappen van de native Windows-klasse, hoe deze te ondertekenen en een installatiepakket te maken.
Eindresultaat voorbeeld
Laten we eens kijken naar de laatste applicatie waar we naartoe zullen werken:
Stap 1: installeer Adobe AIR Runtime
Met deze speler kunnen we elke toepassing uitvoeren met de extensie .air, zoals de nieuwe Adobe Media Player. Eerst moeten we de Adobe AIR-speler installeren, dus ga naar Adobe en download de speler. Kies uw besturingssysteem en klik op downloaden. Wanneer de download voltooid is, installeert u deze.
Stap 2: Adobe AIR Extension installeren voor Flash CS3 en CS4
Nu hebben we ons tweede element nodig om AIR-toepassingen te ontwikkelen: de extensie. In dit geval gebruik ik die voor Flash CS3, maar deze is ook beschikbaar voor Flash CS4. Ga naar het Adobe Flash Support Center. Voordat u de Flash-update voor Adobe AIR installeert, moet u de nieuwste Flash Player-update (9.0.2) downloaden en installeren, die u hier kunt downloaden: http://www.adobe.com/support/flash/downloads.html # 902.
Download en installeer vervolgens de Adobe AIR Update voor Flash CS3 Professional: http://www.adobe.com/support/flash/downloads.html.
Stap 3: Documentinstellingen
Op dit moment, wanneer u Flash CS3 of CS4 start, heeft u op het welkomstscherm de mogelijkheid om een Adobe AIR Flash-bestand te maken. Doe het! Stel de stage in op 300px breed en 500px hoog met 30 fps. Ik heb een witte kleur gekozen voor de achtergrond. Bewaar het als "mijn-twitter-updates.fla".
Stap 4: De achtergrond maken
We gaan een iPhone-afbeelding als achtergrond gebruiken, dus ga naar de website van Sam Brown (leuke vectoren) en download het pakket met iPhone-afbeeldingen. Open het bestand met Fireworks of Photoshop en kies een willekeurige grootte (zonder tekst) en exporteer als "bg_iphone.png".
Kies in Flash Bestand> Importeren en importeer vervolgens de "bg_iphone.png" naar fase. Selecteer het en lijn het verticaal en horizontaal in het midden uit. Converteer deze afbeelding naar een filmclipsymbool met de naam "mcIphone", ga vervolgens naar eigenschappen en wijs "twitterApp" toe als de naam van het exemplaar. Dubbelklik op het symbool en hernoem de eerste laag als "bg_iphone". Je zou nu zoiets als de volgende afbeelding moeten hebben:
Stap 5: De dynamische tekstvelden maken
Ga nu en maak een nieuwe laag voor de titel van onze applicatie. Teken een dynamisch tekstveld en wijs het "title_app" toe als instantienaam.
Voeg vervolgens twee nieuwe lagen toe; de eerste met de naam "mijn updates" en de tweede met de naam "volg mij". Maak een dynamisch tekstveld met meerdere regels op de laag 'Mijn updates' met de volgende eigenschappen:
11 lettergrootte
meerregelig tekstveld
witte kleur
activeer rendertekst als html
wijs "myUpdates" toe als de naam van het exemplaar
We hebben een knop nodig voor Volg mij op de laag "volg mij", dus ga naar een rechthoek onderaan het iPhone-gebied en converteer het naar een knopsymbool met de tekst "Follow Me". Wijs vervolgens "btFollowme" toe als de naam van het exemplaar.
Stap 6: Scrollknoppen toevoegen
Op dit punt hebben we twee knoppen nodig; op en neer voor het scrollen van de inhoud van het tekstveld "mijn updates". Ga naar het tijdlijnpaneel en voeg een nieuwe laag toe. Typ de naam "schuifknoppen", teken vervolgens een pijl op het podium en converteer deze naar een filmclipsymbool. Voor de andere knop kopie, plak en draai het verticaal. Wijs "btUp" en "btDown" toe als instantienaam. Ga als laatste terug naar de hoofdtijdlijn. Als je klaar bent moet je zoiets hebben als de volgende afbeelding.
Stap 7: Twitter-feed-URL verkrijgen
Ten eerste hebben we uw RSS-feed-URL nodig, dus ga naar uw Twitter-startpagina. Klik nu op de knop Profiel in de navigatiebalk van de bovenste balk. Ga naar het rechter paneel, klik met de rechtermuisknop op "Rss Feed of gebruikersnaam"en kopieer de URL.
Stap 8: Anatomie van Twitter RSS-feed
Laten we de structuur van onze Twitter RSS-updates bekijken. Het eerste deel is de rss-info van het kanaal en het tweede deel is de lus van updates. We zullen enkele basisknooppunten gebruiken: de link van het eerste deel, de titel, pubDate en de link van het lusitem.
Stap 9: Begin met scripting XML
Ga terug naar Flash en maak een nieuwe laag voor de acties, het is tijd om te beginnen met coderen. Zoals u kunt zien, bevat de eerste variabele de RSS-feed-URL van uw Twitter-profiel, dus plak die van u in:
var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = new URLRequest (twitterURL); var myLoader: URLLoader = new URLLoader (twitterXML); myLoader.addEventListener ("compleet", xmlLoaded);
Stap 10: Begin de XmlLoaded-functie
Met deze functie kunnen we de RSS en elk genoemd knooppunt laden, voordat we beginnen met het definiëren van de variabelen van de xml-knooppunten:
function xmlLoaded (evtObj: Event) var twitter: XML = nieuwe XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .beschrijving; var UserUrl: String = twitter.child (0) .link;
Stap 11: De Updates Loop
In dit deel moeten we de waarden van de xml-knooppunten ophalen en deze toewijzen aan een variabele myUpdates. Gebruik een voor verklaring om dit te doen.
var myUpdates: String = ""; voor elk (var nodo: XML in twitter ... item) myUpdates + = ""+ Nodo.title +" "+""+ nodo.pubDate +"
";
Stap 12: Tekstvelden en gebeurtenis voor de knop Volgen
Eerst tonen we de titel van de applicatie, dan krijgen we de updates en voegen we eindelijk een EventListener toe voor de knop Volgen met de URL van de gebruiker (bijvoorbeeld: http://twitter.com/_dariux).
// DE TITEL-APP> 'Twitter-updates van Darío Gutiérrez / _dariux'. twitterApp.titleApp.text = TwitterTitle; // Geef de waarde van mijnUpdates weer in het tekstveld twitterApp.myUpdates.htmlText = myUpdates; // Acties voor Follow Me-knop twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); functie btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = new URLRequest (UserUrl); navigateToURL (targetUrl);
Stap 13: Acties voor de schuifknoppen
Eenvoudige code voor de schuifknoppen, vink deze code aan:
// Luisteraars en functies voor schuifknoppen twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); function scrollUp (Event: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; function scrollDown (Event: MouseEvent): void twitterApp.myUpdates.scrollV + = 5;
Stap 14: De toepassing testen
Test de film (Menu Control + Test film of cmd + enter). Zoals je kunt zien, is het een normaal venster, net als wanneer je de typische flash-speler gebruikt. In de volgende stap zullen we onze applicatie aanpassen en zult u het verschil merken ...
Stap 15: AIR-instellingen van toepassing en installateur
Voor de AIR-instellingen in Flash CS4 gaat u naar Bestand> AIR-instellingen en voor Flash CS3 gaat u naar Opdrachten> AIR-toepassing en installatie-instellingen. In dit venster beginnen we de toepassing aan te passen, dus laten we naar het beschrijvingsveld gaan en algemene informatie schrijven.
Venster stijl De raamstijl is interessant. Er zijn drie stijlen: chroom, ondoorzichtig en transparant. De Chrome-stijl is als een eenvoudig venster met knoppen, achtergrond en rand, de Opaque is een venster met achtergrond maar zonder knoppen en de laatste stijl Transparant is een venster zonder knoppen en achtergrond. Kies in ons geval de transparante stijl.
Icoon Kies een pictogram (of een ontwerp) voor uw toepassing in de verschillende maten 16px, 32px, 48px, 128px met de extensie .png.
gevorderd In deze optie kunt u de verschillende instellingen voor het venster selecteren wanneer uw toepassing wordt gestart, opties voor het installeren van mappen en updates.
Digitale handtekening Wanneer u uw AIR-toepassing wilt verzenden, hebt u een digitale handtekening nodig voor het installatieprogramma om te installeren in systemen van andere gebruikers. In dit geval ondertekenen we onze applicatie met een niet-vertrouwd certificaat om runtime AIR te laten installeren als niet-geverifieerde uitgever. Als u meer informatie nodig hebt over het verkrijgen van een certificaat, gaat u naar de volgende koppeling: Adobe AIR-toepassingen digitaal ondertekenen.
Bestemming Kies de mapbestemming en een naam voor uw toepassing.
Bestanden opnemen Automatisch Flash selecteert een aantal bestanden die nodig zijn om de applicatie uit te voeren. Als u andere bestanden in uw app gebruikt (zoals bijvoorbeeld een caurina-tween), moet u deze bestanden opnemen als onderdeel van de app.
Stap 17: Scripting Window Move
In dit deel gebruiken we de klasse "NativeWindow" en de functie "startMove ()", zodat onze toepassing de hele fase kan doorlopen. Ga naar de actielaag en voeg de volgende code toe. Test het dan:
Nu kan onze applicatie de hele fase doorlopen, maar als u wilt sluiten of minimaliseren, kunt u dat niet. Ga twee ontwerpknoppen ontwerpen: minimaliseer (btMinsinstalleer instantienaam) en sluit (btClose-instantienaam), zoals de volgende afbeelding, maar deze keer moet u de hoofdfilmclip (twitterApp) gebruiken. Voeg ten slotte de volgende code toe:
Deze functie is heel eenvoudig. Voeg eenvoudig een knop toe onder de knop Follow Me, zodat er een nieuwe laag in de hoofdfilmclip "twitterApp" wordt gemaakt. Schrijf "btAlwaysfront" als een instantienaam:
Zodra je deze knop hebt gemaakt, ga je naar binnen en maak je een ander frame, elk met een stopactie. Het doel is om twee toestanden voor de knop te hebben. Frame een gedeactiveerd en het tweede frame geactiveerd. Deze functie gebruikt de alwaysInFront methode uit de native Windows-klasse. Hierna moeten we de acties toevoegen aan de btAlwaysfront-knop, dus ga naar actiesframe en plak de volgende code:
// Twitter rss url var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = new URLRequest (twitterURL); var myLoader: URLLoader = new URLLoader (twitterXML); myLoader.addEventListener ("compleet", xmlLoaded); function xmlLoaded (evtObj: Event) var twitter: XML = nieuwe XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .beschrijving; var UserUrl: String = twitter.child (0) .link; var myUpdates: String = ""; // De lus voor elk (var nodo: XML in twitter ... item) myUpdates + = ""+ Nodo.title +" "+""+ nodo.pubDate +"
Om uw .air-bestand te publiceren in flash CS4 ga naar Bestand> menu Instellingen AIR en klik op de knop "AIR-bestand publiceren".
Voor flash CS3 ga naar Opdrachten> AIR - AIR-bestand maken.
Dan zie je een nieuw venster (de digitale handtekening). Kies een certificaat en typ uw wachtwoord. Het duurt enige tijd om het .air-bestand te maken, maar wanneer u klaar bent, ziet u een ander venster met de volgende tekst: "AIR-bestand is gemaakt". Het .air-bestand wordt in dezelfde werkmap gemaakt als uw .fla-bestand.
Stap 22: laatste details
Zoals u kunt zien, heeft mijn app een slagschaduw. Als u een mac-windows-stijl wilt, selecteert u gewoon de hoofdfilmclip "twitterApp" en past u toe:
Conclusie
Dus daar hebben we onze AIR-toepassing! Het is een kleine applicatie, maar ik hoop dat het je helpt als een referentie om je eigen te ontwikkelen. Met deze technologie kunnen we geweldige applicaties ontwikkelen, mashable met API's zoals Twitter, Gmaps en Flickr. Er zijn veel andere functies die niet worden behandeld in deze zelfstudie, veel ruimte voor een toekomstige zelfstudie of een korte handleiding! Bedankt voor het lezen.
Share
Accentsconagua
