Takaisin Flash-ohjelmoinnin etusivulle


Flash Away3D: Planeettaselain omilla kuvilla



Teen tässä toisessa Away3D-tutoriaalissani tämän tutoriaalin perusteella hieman laajennetun planeettaselaimen, jossa käyttäjä voi itse ladata kotikoneeltaan haluamansa kuvan pallon kuvapinnalle. Toisin kuin tässä ensimmäisessa tutoriaalissani tällä kertaa en käytä ollenkaan palvelinpuolen PHP-skriptejä. Sekä kuvien lataaminen että tallentaminen suoritetaan kokonaisuudessaan käyttäjän omalla koneella.

Annan koko AS3-koodin opastuksineen tämän sivun alaosassa, mutta katsotaan ensin alla olevaa valmista planeettaselainta.

Planeettaselaimeen voi ladata mielivaltaisen PNG- tai JPG-kuvan. Kuva piirretään pallopinnalle, joten näyttääkseen hyvältä ladattavan kuvan on hyvä olla "pallolle piirtyvää muotoa". Tällaisia kuvia löytyy esim. tässä linkistä.

Kuitenkaan mikään ei estä sinua kokeilemasta muitakin kuin planeettojen pintakuvia. Kannattaa kokeilla myös hyvin korkeammankin resoluution kuvia. Esim. yllä olevasta linkistä löytyvää 4000x2000-pikselin kuun pinnan kuvaa ja zoomata hieman lähemmäs.

Tutkiakseni tekstin esittämistä 3D-pinnoilla tein samalla myös tämän Flash-demon.

Toteutin planeettaselaimeni myös helpompikäyttöisellä käyttöliittymällä ( demo )

Planeettaselaimen käyttöohjeet:

Napit:

Maa (päivä): Näyttää päiväkuvan maapallon pinnasta.
Maa (yö): Näyttää yökuvan maapallon pinnasta.
Karttoja: Avaa nettiselaimeen planeettakarttoja sisältävän nettisivun.
Lataa kuva: Lataa oma PNG- tai JPG-kuva pallonpinnalle.
Tallenna PNG: Tallentaa Flash-komponentin näkymän PNG-kuvana.
Tallenna JPG: Tallentaa Flash-komponentin näkymän JPG-kuvana.

Hiiri:

Pyöritä ja liikuta palloa painamalla hiirennappi pohjaan ja liikuttamalla hiiren kursoria.

Näppäinkomennot:

Nuoli ylös: Liikuta palloa x-akselin positiiviseen suuntaan.
Nuoli alas: Liikuta palloa x-akselin negatiiviseen suuntaan.
Nuoli oikealle: Liikuta palloa y-akselin positiiviseen suuntaan.
Nuoli vasemmalle: Liikuta palloa y-akselin negatiiviseen suuntaan.

Shift + Nuoli ylös: Pyöritä palloa x-akselin ympäri positiiviseen suuntaan.
Shift + Nuoli alas: Pyöritä palloa x-akselin ympäri negatiiviseen suuntaan.
Shift + Nuoli oikealle: Pyöritä palloa y-akselin ympäri positiiviseen suuntaan.
Shift + Nuoli vasemmalle: Pyöritä palloa y-akselin ympäri negatiiviseen suuntaan.

Ctrl + Nuoli ylös: Liikuta kameraa lähemmäs palloa.
Ctrl + Nuoli alas: Liikuta kameraa kauemmas pallosta.


AS3-koodi



Olen pakannut kaiken yllä olevan Flash-komponentin tarvitseman koodin yhdeksi Away3DSphere-nimiseen luokkaan, jonka lähdekoodin tallensin tiedostoksi Away3DSphere.as:


AS3-koodin oleelliset kohdat:



1) Flash Professional CS4:lla Flash-komponentteja tehdessä voi upottaa Action Script -koodin suoraan pääaikajanan tai objektien omien aikajanojen frameihin. Usein pienissä sovelluksissa onkin kätevää koodata kaikki Action Script -koodi pääaikajanan frameen 1.

Vähänkään isommissa ohjelmointiprojekteissa on kuitenkin suositeltavampaa käyttää AS3:n olio-ohjelmointiominaisuuksia hyödyksi ja kirjoittaa AS3-koodi yhden tai useamman luokan sisään.

AS3-luokiksi pakattua koodia voi käyttää sovelluksissaan joko

a) luomalla aikajanalla olevassa koodissaan luokan ilmentymiä / käyttämällä luokan staattisia muuttujia tai metodeja. Tällöin täytyy muistaa ottaa tarvittavat luokat käyttöön import-lauseiden avulla.

b) Tekemällä jostain AS3-luokasta pääluokan, joka käynnistetään sovelluksen käynnistyessä. Käytän tässä tutoriaalissani b-kohdan tapaa, joka onnistuu tässä tapauksessa FP CS4:lla:

2) AS3-luokkia käyttäessään on hyvä tietää:
3) Käyttöliittymän nappeja (toimintoineen) on helppo lisätä joko CS4:n graafisen käyttöliittymän kautta suoraan aikajanalle tai sitten kuten tässä teen lisäämällä napit ja tapahtumankäsittelijät AS3-koodilla:
4) Hiirikäyttöisen näkymän objektien ja kameran liikuttelun toteuttaminen on tehty Away3D:ssa varsin helpoksi. Etenkin HoverCamera3D-luokan käyttö mahdollistaa varsin näyttävien käyttöliittymien toteuttamisen melko pienellä vaivalla.
5) Näppäinkomentojen lisääminen:
6) Kuvan lataaminen Flash-komponenttiin FileReference-luokan avulla.
7) Flash-komponentin sisällön tallentaminen JPG- tai PNG-kuvaksi.

Itse opettelin aikoinaan JPG-kuvien kaappaamisen Flash-komponentista tämän tutoriaalin avulla. Kuvan kaappaustoiminnon toteuttaminen edellyttää siis as3corelibin asentamista koneelle. Tämän voi asentaa vaikkapa vain purkamalla kyseisen paketin projektihakemistoon oikean hakemistohierarkian säilyttäen.

Kun as3corelib on oikein asennettu, voimme tehdä tarvittavat lisäykset AS3-koodiin:
Loppukommentit

Toivottavasti tässä tutoriaalissani tekemäni planeettaselain innostaa joitain teistä tekemään omia pidemmälle kehitettyjä nettisovelluksia Away3D-kirjaston avulla.

Tässäkin tutoriaalissani olen jälleen kerran osoittanut:

Flashillä pystyy nykyisin tekemään melkein millaisen tahansa sovelluksen joka pyörii käyttäjän nettiselaimessa (ja Flash Playerissä, molemmat saatavissa useimpiin ympäristöihin).

Jos äskeiseen vielä lisätään Flashin kyky kommunikoida palvelinpuolen skriptien ja ohjelmien kanssa, ei taivaskaan enää ole rajana sovelluksia kehiteltäessä...

Takaisin Flash-ohjelmoinnin etusivulle