Takaisin Flash-ohjelmoinnin etusivulle


Flash Away3D: Palapeli omalla kuvalla



Flashille tehdyistä 3D-kirjastoista olen jo aiemmin tutustunut Sandy3D:hen , jolla olen tehnyt kotisivuilleni mm. 3D-kuvaselaimen .

Tänään päätin kokeilla minulle entuudestaan tuntemattoman Away3D-kirjaston avulla, saanko yhden päivän työllä mitään käyttökelpoista aikaiseksi sivustolleni.

Täytyy sanoa, että yllätyin taas positiivisesti kuinka nopeasti toimivia koodipohjia voi hyödyntää omilla nettisivuillaan. Pelkän API:n avulla ei yleensä pääse kovin nopeasti hyödyntämään kirjastoa, mutta onneksi suosituille kirjastoille on kirjoitettu paljon loistavia tutoriaaleja.

Away3D:n tapauksessa eksyin tälle Timo Virtasen kirjoittamalle tutoriaalille. Tuossa tutoriaalissa on opetettu miten tehdä 3D-palapeli hyvin toimivalla käyttöliittymällä.

Innostuin heti tuosta hyvin tehdystä palapelistä ja päätin heti yrittää lisätä tuohon käyttöliittymään mahdollisuuden ladata palapeliin kotikoneelta valittava oma palapelikuva. Kaikeksi onneksi tutoriaalin koodi oli niin selkeästi ja järkevästi koodattu, että tällainen laajennus oli hyvin helppo toteuttaa.

Alkuperäisen palapelin tekemisen voi opetella yllä olevasta linkistä, mutta opastan tämän sivun alaosassa, kuinka kuvanlataamistoiminnon voi lisätä Timo Virtasen alkuperäiseen toteutukseen.

Alla on Timo Virtasen palapelisovellus itse lisäämälläni omien kuvien lataamisominaisuudella.

Palapeliin voi ladata oman kuvan, joka on mieluusti kovasuhteella 1:1. Ohjelma tarkistaa, että kuva on jpg-formaattia, alle 0.5 MB, ja kuva skaalataan kokoon 500x500 pikseliä).

Palapelin palat sekoitetaan painamalla Sekoita-nappia.

Esimerkkikuvina tarjoan kuvat kurjesta ja käpytikasta , jotka voi linkeistä ladata omalle koneelleen ja edelleen, Flash-sovelluksen Lataa kuva -napilla sisälle palapelisovellukseen. Suosittelen kuitenkin omien jpg-kuvien tekemistä ja kokeilemista.

Käytän tässä tutoriaalissani, PHP-skriptien ajamisen ja tiedostojen palvelimelle tallentamisen demonstroimiseksi, tarpeettoman monimutkaista tapaa ladata kuva käyttäjän kotikoneelta Flash-komponenttiin. Usein kuvan lataaminen ja tallentaminen Flash-komponentista on kätevintä suorittaa kokonaan käyttäjän koneella ilman tarvetta palvelinpuolen PHP-ohjelmointiin. Opastankin tässä oppaassani kuinka kuvien lataaminen ja tallentaminen Flash-komponentista onnistuu kokonaan käyttäjäpuolen AS3-ohjelmoinnilla.
Oman kuvan lataamistoiminto



Muutokset AS3-koodiin

Tutkimalla palapelin lähdekoodia huomasin, että pelin kontrollinapit oli järkevästi toteutettu saman ControlPanel-nimisen luokan sisään.

Osoittautuikin, että kaikki tarvitsemani AS3-koodiin tehtävät muutokset, yhtä lukuun ottamatta, voitiin tehdä ControlPanel-luokkaa vastaavaan AS3-tiedostoon ControlPanel.as.

Alla on uudelleen muotoilemani ControlPanel.as-tiedoston sisältö:
Oleelliset lisäykset AS3-koodissa:

1) Tarvittavien luokkien import-lauseet:

2) Tarvittavien yksityisten (private) muuttujien lisääminen luokkaan:

3) Konstruktoriin lisättävät alustukset ja tapahtumankäsittelijöiden kiinnittäminen FileReference-objektiin:

4) Upload-nappiin sekä FileReference-objektiin liittyvien tapahtumankäsittelijöiden toteutukset:

Yllä onkin annettu kaikki AS3-koodin muutokset, jotka kuvanlatausnapin-toteuttamiseksi tarvitaan. Koska käyttäjän lähettämä kuva kuitenkin tallennetaan tilapäisesti palvelimelle niin tarvitaan tätä toimintoa varten vielä PHP-skripti.

PHP-skripti

Koska lataan kuvan tilapäisesti palvelimelle, niin päätin käyttää samalla hyväkseni GD-kirjastoa käyttäjän lähettämän kuvan skaalaamiseksi haluttuun 500x500-pikselikokoon. Selostan enemmän thumbnails-kuvien generoimista tässä tutoriaalissani.



Alla on koko tiedostoksi image-upload.php tallentamani PHP-koodi:
Olleeliset asiat PHP-koodissa

1) Tiedostot lähetetään PHP-skriptille $_FILES-taulukossa.

2) PHP-skriptissä vastaanotettaville käyttäjän lähettämille muuttujille kannattaa tehdä erilaisia tarkastuksia ennen kuin niitä käytetään.

Tässä tapauksessa testataan hieman käyttäjän lähettämää jpg-kuvatiedostoa:
3) Jos palvelimella ei ole PHP:n GD-kirjastoa käytettävissä pitää lähdekoodista poistaa kuvien skaalaustoiminto poistamalla koodista createOneThumb-funktion esittely, poistamalla rivi:

Sekä muuttamalla sen jälkeinen echo-lause muotoon:


Olen yllä olevan lyhyen Flash/Away3D -tutoriaalini avulla jälleen kerran osoittanut, että Flash-tekniikalla löytyy netistä paljon edistyneitä ja nopeasti hyödynnettäviä ratkaisuja. Toivottavasti tämä tutoriaalini osaltaan innostaa teitä löytämään ja hyödyntämään netistä löytyviä ilmaisratkaisuja omilla sivuillanne.



Takaisin Flash-ohjelmoinnin etusivulle