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

Get Flash

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:


<?php

// Only run this script if the sendRequest is from our flash application
if ($_POST['sendRequest'] == "parse") {

function createThumbs( $pathToImages, $pathToThumbs, $thumbHeight )
{
  // open the directory
  $dir = opendir( $pathToImages );

  // loop through it, looking for any/all JPG files:
  while (false !== ($fname = readdir( $dir ))) {
	// Do only if thumb image file don't exist
	if( !file_exists("{$pathToThumbs}{$fname}") ) {	  	  
    	// parse path for the extension
    	$info = pathinfo($pathToImages . $fname);
    	// continue only if this is a JPEG image
    	if ( (strtolower($info['extension']) == 'jpg') ||  (strtolower($info['extension']) == 'jpeg') )
    	{
      		//echo "Creating thumbnail for {$fname} <br />";

      		// load image and get image size
      		$img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
      		$width = imagesx( $img );
      		$height = imagesy( $img );

      		// calculate thumbnail size
      		$new_height = $thumbHeight;
		  	$new_width  = floor( $width * ( $thumbHeight / $height ) );
	
      		// create a new temporary image
      		$tmp_img = imagecreatetruecolor( $new_width, $new_height );

      		// copy and resize old image into new image
      		imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

      		// save thumbnail into a file
      		imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
    	}
	}
  }
  // close the directory
  closedir( $dir );
}

if( !file_exists("./thumbs") ) {
	mkdir("./thumbs");
}

// call createThumb function and pass to it as parameters the path
// to the directory that contains images, the path to the directory
// in which thumbnails will be placed and the thumbnail's width.
// We are assuming that the path will be a relative path working
// both in the filesystem, and through the web for links

createThumbs("./pics/","./thumbs/", 225);

}

?>

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

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

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