Takaisin Flash-ohjelmoinnin etusivulle


Flash-komponentti:
3D-kuvaselain thumbnails-kuvilla
3D Imageviewer with thumbnails



Käyttöohjeet:

Klikkaa Flash-komponettia aktivoidaksesi näppäinkomennot.

Ruudulla olevaa valokuvakangasta voi käyttää seuraavilla näppäimillä:

nuoli oikealle = seuraava kuva
nuoli vasemmalle = edellinen kuva
nuoli ylös = kelaa 10 kuvaa eteenpäin
nuoli alas = kelaa kymmenen kuvaa taaksepäin

z = liikuttaminen z-akselin suunnassa (katsojaan päin)
z + shift = liikuttaminen z-akselin suunnassa (poispäin katsojasta)

x = liikuttaminen x-akselin suunnassa (vasemmalle)
x + shift = liikuttaminen x-akselin suunnassa (oikealle)

a = liikuttaminen y-akselin suunnassa (ylöspäin)
a + shift = liikuttaminen y-akselin suunnassa (alaspäin)

q = kierrä kangasta myötäpäivään
q + shift = kierrä kangasta vastapäivään

w = kierrä kangasta myötäpäivään
w + shift = kierrä kangasta vastapäivään

t = poikkeuta kangasta positiiviseen y-suuntaan 5 pistettä
y = poikkeuta kangasta negatiiviseen y-suuntaan 5 pistettä
r = paluttaa alkutilan (aiheuttaa värähtelyn koska kysessä on "kimmoisa" kangas.

8 = Thumbs-kuvat (päälle/pois)
9 = Kuvatekstit (päälle/pois)

Lisäksi komponentissa on vielä "ylimääräisiä" kokeilutoimintoja:

1 = Valon punaisuuden säätö +5 (+Shift -5).
2 = Valon vihertävyyden säätö +5 (+Shift -5).
3 = Valon sinisyyden säätö +5 (+Shift -5).
4 = Kuvapinnan ambient-arvon säätö +0.1 (+Shift -0.1) välillä 0-10.
5 = Kuvapinnan diffuse-arvon säätö +0.1 (+Shift -0.1) välillä 0-10.
6 = Kuvapinnan gloss-arvon säätö +0.1 (+Shift -0.1) välillä 0-10.
7 = Kuvapinnan specular-arvon säätö +0.1 (+Shift -0.1) välillä 0-10.

u = Valonsuunnan osoittavan vektorin x-komponentin säätö +5 (+Shift -5) välillä 0-100.
i = Valonsuunnan osoittavan vektorin y-komponentin säätö +5 (+Shift -5) välillä 0-100.
o = Valonsuunnan osoittavan vektorin z-komponentin säätö +5 (+Shift -5) välillä 0-100.

p = Valon voimakkuuden säätö +5 (+Shift -5) välillä 0-150.


Oheinen Flash-komponentti on vapaasti kaikkien hyödynnettävissä vaikka omille nettisivulle laitettavaksi.

Asentaminen onnistuu seuraavasti:

1) Muuttamalla/lisäämällä omien kuvien tiedot gallery-photos.xml tiedostoon.

2) lisäämällä tiedostot Example033.swf ja gallery-photos.xml samaan hakemistoon kuin nettisivu.

3) Leikkaamalla/liimaamalla tämän nettisivun lähdekoodista

a) head-osion javascript-lisäykset.
b) body-osan flash-komponentin lisäävä kohta haluttuun kohtaan omaa sivustoa.

4) Leikkaa/liimaa php-koodi tämän nettisivun alaosassa olevasta tekstikentästä ja tallenna se tiedostoksi nimeltä create_thumbs.php. Tämä tiedosto tulee sijoittaa palvelimella samaan hakemistoon kuin swf-tiedosto.

5) Komponentti vaatii palvelimelta php-tuen sekä GD-kirjaston

Flash-komponentteihin liittyen minuun voi ottaa yhteyttä kirjoittamalla osoitteeseen talaakso@gmail.com



Niitä (ja itseäni) varten, jotka ovat kiinnostuneita vastaavien komponenttien tekemisestä Flash Professional CS3/CS4 -ohjelmilla kerään tähän alle muutaman linkin ja selosteen käyttämistäni osasista, joista olen tämän kuvaselaimeni parsinut kasaan.

Alla olevan listan pituus ja käyttämieni "valmiiden" ratkaisujen helppokäyttöisyys demonstroikoon osaltaan sitä varsin laajalti hyväksyttyä näkökantaa, että pyörää ei kannata keksiä joka kerta uudelleen.

1) Komponentin 3D-osuus on toteutettu Sandy 3D ja WOW Flash-kirjastojen varaan.

2) Kuvatason toteutuksessa, jossa yhdistyvät WOW fysiikkapuoleen ja visualisointiin Sandy 3D, käytin apuna Max Pellizzaron loistavaa tutoriaalia .

3) Thumbs-kuviengeneroimisskriptin (php) työstin tämän oppaan avulla. Tuo totetus vaatii toimiakseen, että palvelimelle on asennsettuna GD-kirjasto . Kaikeksi onneksi nettisivuni sijaitsevat Sigmaticin palvelimella, joka tukee tuota kirjastoa.

Tutoriaalin pohjalta tein skriptitiedoston create_thumbs.php, jonka lähdekoodin olen laittanut alla olevaan tekstikenttään:



4) Kuvien värien uint-luvun purkamiseksi RGB-komponenteiksi opin tästä tutoriaalista.

5) Kuvien siirtymisanimaatioissa olen käyttänyt TweenLitea.

6) Thumbs-kuvien TileList komponentin drag-and-drop ominaisuuden toteutin dd_tile_list-luokan varaan.

7) Interaktiivisaten komponenttien tabulointijärjestyksen asettaminen selvitetty lyhyesti tässä tutoriaalissa .



Takaisin Flash-ohjelmoinnin etusivulle