Tero Laakso | Flash | Flash Away3D-palapeli

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ö:

            
package com.techlabs.puzzle {

	import com.bit101.components.PushButton;
	import com.techlabs.puzzle.events.PuzzleEvent;
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Matrix;
	
	import flash.net.FileReference;
	import flash.net.URLRequest;
	import flash.net.URLVariables;
	import flash.net.URLRequestMethod;
	
	import flash.events.DataEvent;
	import mx.utils.StringUtil;

	public class ControlPanel extends Sprite {

		private var _shuffleButton:PushButton;
		private var _flashPuzzle:PushButton;
		private var _flexPuzzle:PushButton;
		private var _preview:Bitmap;
		
		private var uploadBtn:PushButton;
		
		private var uploadFileReference:FileReference;
		private var uploadURL:URLRequest;
		private var uploadFilename:String;
		
		private var uploadVariables:URLVariables;
		private var uploadVarSend:URLRequest;

		public function ControlPanel() {
			uploadFileReference       = new FileReference();
			uploadFileReference.addEventListener(Event.SELECT, selectHandler);
			uploadFileReference.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadCompleteDataHandler);
			
			// Buttons
			_flashPuzzle       = new PushButton(this, 20, 20, "Lauhahiipijä", changeImageHandler);
			_flexPuzzle        = new PushButton(this, 20, 45, "Mustatäplahiipijä", changeImageHandler);
			uploadBtn          = new PushButton(this, 20, 75, "Lataa kuva", uploadBtnHandler);
			
			_shuffleButton     = new PushButton(this, 20, 105, "Sekoita", shuffleBoardHandler);
			
			
			uploadFilename     = null;
		}

		function uploadBtnHandler(e:Event):void {
			uploadFileReference.browse();
		}
		
		function selectHandler(e:Event):void
		{
			uploadVariables             = new URLVariables();
			uploadVarSend               = new URLRequest("./image_upload.php")
			
			uploadVarSend.method        = URLRequestMethod.POST;
			uploadVarSend.data          = uploadVariables;
				
			uploadVariables.fName       = "default_name";		
			uploadVariables.sendRequest = "parse";
			
			uploadFileReference.upload(uploadVarSend);
		}

		function uploadCompleteDataHandler(e:DataEvent):void 
		{
			var strData:String = StringUtil.trim(e.data);
			var vars:URLVariables = new URLVariables(strData);
				
			var uploadFile:String    = vars.fName;
			
			if( (uploadFile == null) || (uploadFile == "0") || 
				(uploadFile == "1") || (uploadFile == "2") || (uploadFile == "3") ) { 
				return;
			}
			
			uploadFilename = "./tmp/" + uploadFile; 
			dispatchEvent(new PuzzleEvent(PuzzleEvent.CHANGE_IMAGE, null, uploadFilename));
		}
		
		// Sets the small preview image
		// It is there only give the user a hint about how
		// the result should look like
		public function setPreview(image:Bitmap):void {
			
			// This is the scale we need to get 100x100px image
			// -> 100px = Originalwidth / scaleFactor;
			// -> scaleFactor = 100px / Originalwidth;
			var scale:Number = 100/image.width;
			
			// Transform matrix for scaling
			var m:Matrix = new Matrix();
			m.scale(scale, scale);
		
			var bmd:BitmapData = new BitmapData(image.width*scale, image.width*scale);
			bmd.draw(image, m);
			_preview = new Bitmap(bmd, PixelSnapping.AUTO, true);
			
			addChild(_preview);

			_preview.x = 20;
			_preview.y = 135;
		}
		
		private function shuffleBoardHandler(e:Event):void {
			dispatchEvent(new PuzzleEvent(PuzzleEvent.SHUFFLE));
		}

		private function changeImageHandler(e:Event):void {
			if (e.target.label == "Lauhahiipijä")
				dispatchEvent(new PuzzleEvent(PuzzleEvent.CHANGE_IMAGE, null, "assets/lauhahiipija.jpg"));
			else
				dispatchEvent(new PuzzleEvent(PuzzleEvent.CHANGE_IMAGE, null, "assets/mustataplahiipija.jpg"));
		}

	}

}

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:

            
function uploadBtnHandler(e:Event):void {
    uploadFileReference.browse();
}

function selectHandler(e:Event):void
{
    uploadVariables             = new URLVariables();
    uploadVarSend               = new URLRequest("./image_upload.php")
    
    uploadVarSend.method        = URLRequestMethod.POST;
    uploadVarSend.data          = uploadVariables;
        
    uploadVariables.fName       = "default_name";		
    uploadVariables.sendRequest = "parse";
    
    uploadFileReference.upload(uploadVarSend);
}

function uploadCompleteDataHandler(e:DataEvent):void 
{
    var strData:String = StringUtil.trim(e.data);
    var vars:URLVariables = new URLVariables(strData);
        
    var uploadFile:String    = vars.fName;
    
    if( (uploadFile == null) || (uploadFile == "0") || 
        (uploadFile == "1") || (uploadFile == "2") || (uploadFile == "3") ) { 
        return;
    }
    
    uploadFilename = "./tmp/" + uploadFile; 
    dispatchEvent(new PuzzleEvent(PuzzleEvent.CHANGE_IMAGE, null, uploadFilename));
}

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:


<?php

function createOneThumb( $pathToImages, $imageFile, $pathToThumbs, $thumbWidth, $thumbHeight )
{
		 $thumbFileArr = explode(".", $imageFile);
		 $thumbFile = $thumbFileArr[0] . "_t.jpg";
		 
		 // load image and get image size
		  $img = imagecreatefromjpeg($pathToImages . $imageFile);
		  $width = imagesx( $img );
		  $height = imagesy( $img );
	
		  // calculate thumbnail size
		  $new_width = $thumbWidth;
		  $new_height = $thumbHeight;
	
		  // 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 . $thumbFile );		  
}

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

	if(array_key_exists('Filedata', $_FILES)) {
			if($_FILES['Filedata']['size'] === 0 || empty($_FILES['Filedata']['tmp_name'])) {
    			echo "fName=0";
				die();
			} 
			else if( $_FILES['Filedata']['size'] > 500000) {
    			echo "fName=0";
				die();
			} 
			else if(exif_imagetype($_FILES['Filedata']['tmp_name']) != IMAGETYPE_JPEG) {
    			echo "fName=1";
				die();
			}
			else if($_FILES['Filedata']['error'] !== UPLOAD_ERR_OK) {
    			echo "fName=2";
				die();
			} 
			else {
				// tee images alihakemisto jo sitä ei jo ole.
	
				if(!file_exists( $basedir . 'tmp')) {
					mkdir($basedir . 'tmp');
				}
				
				$updatedt = date("Y-m-d-H-i-s");
				$imageName = "tmp_image_" . $updatedt . ".jpg";
				$imageThumbName = "tmp_image_" . $updatedt . "_t.jpg";
				
				// Tallenna kuva images alihakemsitoon
				if(move_uploaded_file($_FILES['Filedata']['tmp_name'], $basedir . 'tmp/' . $imageName)) {
					
					createOneThumb( $basedir . 'tmp/', $imageName, $basedir . 'tmp/', 500, 500 );
					echo "fName=$imageThumbName";
					die();
				} else {
    				echo "fName=3";
					die();
				}
			}
		}
		else {
			echo "fName=3";
			die();
		}
}

echo "fName=3";
die();
?>

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

Flash Away3D: Palapeli omalla kuvalla