Tero Laakso | PHP | SWF-tiedostojen generointi PHP-kielellä

Olen kahdessa edellisessä PHP-tutoriaalissani käynyt läpi thumbnails-kuvien sekä PDF-tiedostojen generoimisen omalle palvelimelle ja antanut ohjeita generaattorien käskyttämiseksi nettiselaimen kautta, joko XHTML-koodista tai nettisivuille sijoitettavasta Flash/AS3-komponentista käsin. Tässä kolmannessa osassa opastan hieman alkuun oman swf-generaattorin tekemisessä omille nettisivuille.

Tämän tutoriaalin tarkoituksena on opastaa kuinka tehdä yksinkertainen SWF-generaattori, joka pystyy käyttäjän antaman kuvan ja tekstin perusteella generoimaan yksinkertaisen SWF-komponentin.

Näytän aluksi tutoriaalin tuloksena tehtävän SWF-generaattorin. Sitten punnitsen eri vaihtoehtoja SWF-generaattorin toteuttamiseksi omalle palvelintilalle. Lopuksi käyn läpi generaattorin toteuttamisen SWFTOOLS-ohjelmien avulla.

"VALMIS" SWF-generaattori

Tässä alla on yksinkertainen SWF-generaattori joka palvelimelle lähettämäsi kuvan ja antamasi tekstin perusteella tekee SWFTOOLS:iin kuuluvan swfc-kääntäjän avulla SWF-tiedoston ja avaa lataus-dialogin, jolla kyseisen komponentin voi ladata kotikoneelle.

Valitettavasti jouduin tietoturvan varmistamiseksi poistamaan PHP-skriptejä käyttäviä demoja nettisivuiltani. Poistin samalla tämänkin demon.

Erilaisia SWF-generaattorivaihtoehtoja

Aivan kuten thumbnails-kuvien (GD-kirjasto) ja PDF-tiedostojen (FPDF-kirjasto) tapauksessa jälleen tarvitaan SWF-tiedoston generoimiseksi ulkopuolinen laajennus tavallisen PHP-kielen lisäksi.

Itse olen tehnyt Flash-toteutuksiani Adobe Professional CS4 kehitysohjelmalla, joka yhdistää tehokkaalla tavalla graafisen suunnittelun ja animaation työkaluja (layerit, aikajana) koodaamistyökaluihin.

Miettiessäni SWF-generaattorin tekemistä oli kuitenkin ilmeistä, ettei tuota työkalua voinut sellaisenaan käyttää kotikoneeni sijaan ulkoisella palvelimella, jolle generaattori siis olisi asennettava, jotta sitä voitaisiin käyttää netistä käsin. Lisäksi CS4 on aika kallis hankinta, joten se ei sellaisenaan sovellu tavallisen nettiharrastelijan kotisivuprojektien toteuttamiseen.

Päädyinkin miettimään erilaisia ratkaisuja SWF-generaattorin toteuttamiseksi:

RATKAISU 1 (FLEX-kääntäjä, vaatii JAVA-tuen palvelimelta):

Adobekin tarjoaa ilmaisen ratkaisun oman SWF-generaattorin tekemiseksi. Ja tuo ratkaisu on koodaajien enemmän suosima Adobe Flex.

Adobe Flex -ratkaisujen tekemiseksi Adobe tarjoaa maksullista Flex Builder 3 , josta löytyy Adoben sivuilta myös kokeiltaksi (60 päivää) Trial-versio , jolla voi halutessaan tutustua tuotteeseen ennen kuin ottaa sen varsinaisesti käyttöön.

Oman SWF-generaattorin tekemiseksi ei kuitenkaan välttämättä tarvitse ostaa Flex Builderia, vaan Adobe tarjoaa nettisivuillaan myös ilmaisesti ladattavaksi Adobe Flex 3.4 SDK :n, jonka avulla pystyy toteuttamaan kotisivuilleen SWF-generaattorin.

Oman SWF-generaattorin idea kaikessa yksinkertaisuusessaan on seuraava:

1) Asennetaan Adobe Flex 3.4 ja etenkin tuohon pakettiin kuuluva mxmlc-kääntäjä nettisivujen palvelimelle niin että kääntäjää voi käyttää normaaleilla systeemikomennoilla. Jos nettisivujen kehitys tapahtuu omalla kotikoneella niin tuon paketin voi myös asettaa omalle koneelle, jolloin kehitystyön voi suorittaa kotikoneella ennen sivujen siirtämistä palvelimelle.

2) Tehdään käyttäjän antamaa syötetettä (ladattavat kuvat ja tekstit) varten lomake joko XHTML:llä tai Flashillä.

3) Yhdistetään Lomakkeen käsittely PHP-skripteihin.

4) Generoidaan PHP-skripteillä, käyttäjän lomakkeella antaman syötteen perusteella, käyttäjän syötettä vastaava mxml-tiedosto, joka syötetään SWF-tiedoston generoimiseksi mxmlc-kääntäjälle.

5) Avataan lataus-dialogi SWF-tiedoston lataamiseksi kotikoneelle.

Etuna tässä ratkaisussa on, että mxmlc-kääntäjän tekijä on itse Adobe, joten tämän ratkaisun avulla pystyy maksimaalisesti hyödyntämään Flashin tarjoaman toiminnallisuuden ja koodaajille tarjotun tuen.

Huonoja puolia on JAVA-tuen tarpeellisuus ja SWF-tiedostojen generoinnissa tarvittavien MXML-tiedostojen monimutkaisuus.

RATKAISU 2 (php_ming-kirjaston käyttö, ei vaadi FLEX-komponentteja, mutta vaatii PHP-moduulin asentamisen admin-oikeuksin):

Tässä SWF-tiedostojen generointivaihtoehdossa rakennetaan SWF-generaattori Ming-kirjaston ja sen tarjoaman PHP-ohjelmointirajapinnan varaan.

1) Ensimmäinen tehtävä on asentaa ming-kirjasto palvelimelle. Ming kirjaston voi ladata projektin sourceforge-osoitteesta .

2) Ming-kirjaston asentamiseksi Linux/Unix-ympäristöön tarvitsee asentaa se itse joko rpm-tiedostosta tai kääntää so-tiedosto palvelimella itse.

Kokeilin testausmielessä kääntämistä omassa palvelintilassani komennoilla:

3) Tämä vaihe onkin sitten monille se vaikein (kuten itsellenikin). Vaikka saisikin itse käännettyä php_ming.so-kirjaston omassa palvelintilassaan, ei silti pysty ilman admin-oikeuksia asentamaan tuota kirjastotiedostoa PHP-tulkin käyttämään ja PHP-alustustiedoston php.ini rivillä annettavaa extension_dir-hakemistoon.

Alla ote php.ini tiedostosta Windows-ympäristössä: Jos Asennusmahdollisuus on olemassa niin silloin voit itse kopioida tuo kääntämäsi php_ming.so-tiedoston tuohon extension_dir-hakemistoon. Lisäksi php.ini-tiedostoosi kannattaa lisätä rivi: Jos et halua lisätä tuota extension-riviä php.ini-tiedostoon niin joudut kirjoittamaan jokaiseen php_ming-kirjastoa käyttävään PHP-tiedostoon dl-funktion kutsun: dl-funktion käyttäminen ei kuitenkaan ole järkevää, sillä se on tulevaisuudessa jäämässä pois PHP-kielestä, joten on ehdottomasti suositeltavaa muokata mieluummin php.ini-tiedostoa.

Käytännössä php_ming-kirjaston käyttöönotto siis edellyttää, että saa nettitilanpalveluntarjoajan asentamaan tuon php_ming-kirjaston nettisivujen palvelimelle. Jos on oikein kiinnostunut kyseisestä ratkaisusta niin tuon luulisi monessa tapauksessa onnistuvan ainakin jos on valmis hieman maksamaan kyseisestä asennuksesta.

RATKAISU 3 (SWFTOOLS-ohjelmien asentaminen omaan palvelintilaan, onnistuu ilman admin-apua):

1) Ensin on syytä tutustua SWFTOOLS-ohjelmapakettiin nettisivuilla http://www.swftools.org/ .

Tarkoitukseni tässä tutoriaalissa on tehdä yksinkertainen Flash-komponenttigeneraattori, jossa käyttäjä lähettää jpg-kuvan ja kirjoittamansa tekstin joista palvelimella generoidaan käyttäjän ladattavaksi annettava SWF-tiedosto. SWFTOOLS-ohjelmista tähän tarkoitukseen soveltuu erinomaisesti swfc-kääntäjä, jonka käyttämien .sc-tiedostojen syntaksiin voi tutustua osoitteessa http://www.swftools.org/swfc/swfc.html . Kuten tuosta tutoriaalista voi havaita pystyy swfc-kääntäjän käyttämällä skriptikielellä tehdä pienellä vaivalla varsin monimutkaisiakin SWF-komponentteja.

Lisäksi swftools-ohjelmiin kuuluu Action Script 3 -kääntäjä as3compile , joka mainostaa olevansa Abode Flex -yhteensopiva.

2) Asennetaan seuraavaksi SWFTOOLS-paketti omaan palvelintilaamme. Paketin voi ladata osoitteesta http://www.swftools.org/download.html . Itse asensin tuon paketin swftools-0.9.0.tar.gz.

3) Ladatun paketin voi siirtää ja purkaa palvelimella johonkin tilapäishakemistoon esim. tmp. Tärkeää tuossa komentosarjassa on antaa oikea asennushakemisto parametrilla --prefix. Yllä olevilla komennoilla olemme siis asentaneet palvelimellemme ajettavan SWFTOOLS-ohjelmapaketin hakemistoon /home/talaakso/shared/bin sekä tuon ohjelman ajamiseen tarvittavat kirjastotiedostot hakemistoon /home/talaakso/shared/lib. Lisäohjeita asenukseen voi tarvittaessa lukea pakettiin kuuluvasta tiedostosta INSTALL.

Swftools-pakettiin kuuluvan swfc-kääntäjän pitäisi nyt toimia Unixin/Linuxin komentoriviltä ajettuna komennolla:

Minulla tuo toimi heti, mutta jos swfc-kääntäjä ei löydä tarvitsemiaan kirjastoja niin saatat joutua lisäämään Linux/Unix-komentotulkkisi käynnistystiedostoon kirjastohakemiston osoitteen.

Esim. BASH-komentotulkille voi lisätä johonkin kotihakemistosi käynnistystiedostostoista (.bash_profile tai .bashrc) rivit:

Flash SWF-generaattori

Kun olemme vakuuttuneet siitä, että swfc-kääntäjä todella toimii omassa palvelinympäristössämme tehdään vielä esittely mielessä yksinkertainen Flash-komponentista toimiva SWF-generaattori, jolla käyttäjä voi ladata kuvan ja antaa tekstikenttään tekstin, jotka sitten käännetään toimivaksi SWF-tiedostoksi.

Tarkoitukseni ei ole tässä antaa mitään valmiiksi kehitettyä SWF-generaattoria, vaan opastaa alkuun SWF-generaattorien kehittelyssä, jokainen toteuttakoon omanlaisiansa ratkaisuja parhaaksi katsomillaan tekniikoilla.

Käydään SWF-generaattorin tekeminen nyt läpi vaihe vaiheelta:

1) SWF-komponenteissa käytetään hyväksi erikoisfontteja, joita ei välttämättä löydy käyttäjän koneelta. SWFTOOLS-ohjelmien avulla voi kuitenkin joko käyttää suoraan palvelimelleen tallentamiaan ttf-fontteja tai sitten kääntää ttf-fontit SWFTOOLS-pakettiin kuuluvan apuohjelman font2swf avulla swf-tiedostoiksi.

Käännetään malliksi arial-fontti SWF-tiedostoksi:

a) Normaalisti Windows XP-koneella fontit sijaitsevat hakemistossa C:\windows\fonts, joten siirretään aluksi sftp-ohjelmalla fonttitiedosto arial.ttf tuosta hakemistosta omaan palvelintilaamme hakemistoon /home/talaakso/shared/fonts/ttf

b) Käännetään TTF-tiedosto SWF-tiedostoksi:

2) Tehdään seuraavaksi Flash-komponintistamme ajettavat PHP-skriptit, jotka generoivat .sc-tiedoston palvelimellemme. Tässä yhteydessä kannattaa ensin käydä läpi tämä sc-tiedosto tutoriaali (huom! Tutoriaaliin kuuluu useita sivuja).

Kasataan sc-tiedoston rakentavat apufunktiot alla olevaan tiedostoon swftools_functions.php:


<?php

function print_flash_begin($version,$width,$height,$fps,$name)
{
	$flash_begin = 	".flash bbox=$width" . "x" . "$height version=$version fps=$fps name=\"$name\"\n";
					
	return $flash_begin;				
}

function print_flash_end()
{ 
	$flash_end = 	".end\n";
					
	return $flash_end;				
}

function print_frame($index)
{
	$frame = 	".frame $index\n";
					
	return $frame;				
}

function print_load_jpg($id,$image_path,$quality)
{
	$load_jpg = 	".jpeg $id \"$image_path\" quality=$quality%\n";
					
	return $load_jpg;				
}
 
function print_put($id,$x,$y,$scaleX,$scaleY)
{
	$put = 	".put $id x=$x y=$y scalex=$scaleX% scaley=$scaleY%\n";
					
	return $put;				
}

function print_font($font_name,$font_path,$font_file)
{
	$font = 	".font $font_name $font_path$font_file\n";
					
	return $font;				 
}

function print_text($text_id,$text_str,$font_name,$text_size,$text_color)
{
	$text = 	".text $text_id text=\"$text_str\" font=$font_name size=$text_size" . "% color=$text_color\n";
					
	return $text;				
} 

function print_texture($id1,$id2,$x,$y,$width,$height,$rotate)
{
	$text = 	".texture $id1=" . "$id2 x=$x y=$y width=$width height=$height rotate=$rotate\n";
					
	return $text;				
} 

function print_filled($id,$id2,$x,$y,$width,$height,$rotate)
{
	$text = 	".filled $id " . "$id2 x=$x y=$y width=$width height=$height rotate=$rotate\n";
					
	return $text;				
} 

function print_box($id,$width,$height,$color,$fill_id)
{
	if( ($fill_id == null) || ($fill_id == "") ) {
		$text = 	".box $id width=$width height=$height color=$color\n";
	}
	else {
		$text = 	".box $id width=$width height=$height color=$color fill=$fill_id\n";
	}
	
	return $text;				
} 

?>

Tehdään sitten tiedostoon swftools_generate_swf.php SWF-tiedoston palvelimellemme generoiva toiminto:

            
<?php

// Only run this script if the sendRequest is from our flash application
if ($_POST['sendRequest'] == "parse") {
		
	include("./swftools_functions.php");
	
	$image_path        = $_POST['image_path'];
	$text              = $_POST['image_text'];
	
	if( $text == null ) {
		$text = '';
	}
	
	$text              = trim($text);
	
	$flash_version     = 9;
	$movie_width       = 550;
	$movie_height      = 400;
	$fps               = 25;
	$movie_name        = "test.swf";
	
	$image_id          = "image1";
	$image_quality     = 100;
	$image_x           = 0;
	$image_y           = 0;
	$image_scaleX      = 100;
	$image_scaleY      = 100;
	
	$box_id           = "box_id1";
	$texture_rotate    = 0;
	
	$font_path         = "/var/www/fs1/7/talaakso/swftools/fonts/swf/";
	$font_file         = "arial.swf";
	$font_name         = "arial";
	
	$box_x             = 0;
	$box_y             = 300;
	$box_width         = 550; 
	$box_height        = 100;
	
	$text_id           = "text_id1";
	$text_size         = 125;
	$text_color        = "black";
	$text_alpha        = 80;
	
	$text_x            = 550;
	$text_y            = 375;
	$text_width        = 50 * strlen($text);
	
	$text_end_x        = -50 * strlen($text);
	$text_scaleX       = 100;
	$text_scaleY       = 100; 
	
	$xml_string        = print_flash_begin($flash_version,$movie_width,$movie_height,$fps,$movie_name);
	$xml_string       .= print_frame(1);
	$xml_string       .= print_load_jpg($image_id,$image_path,$image_quality);
	$xml_string       .= print_put($image_id,$image_x,$image_y,$image_scaleX,$image_scaleY);
	
	if( $text != '' ) { 
		$xml_string       .= print_box($box_id,$box_width,$box_height,"white","white");
		$xml_string       .= print_put($box_id,$box_x,$box_y,$image_scaleX,$image_scaleY);
	
		$xml_string       .= print_font($font_name,$font_path,$font_file);
		$xml_string       .= print_text($text_id,$text,$font_name,$text_size,$text_color);
		$xml_string       .= print_put($text_id,$text_x,$text_y,$text_scaleX,$text_scaleY);
	
		$xml_string       .= print_frame(250);
		$xml_string       .= ".change $text_id x=$text_end_x\n";
	}
	  
	$xml_string       .= print_flash_end();
	
	$swfpath           = "./swf/";
	
	if( !file_exists($swfpath) ) {
		mkdir($swfpath);
	}
	
	$filename          = "test_swf_";
	$updatedt          = date("Y-m-d-H-i-s");
	$filename         .= $updatedt;
	
	$fp = fopen($swfpath . $filename . ".sc", "w");
	fwrite($fp, $xml_string);
	fclose($fp); 
	
	$binpath  = "/var/www/fs1/7/talaakso/swftools/bin/";
	$swfcom   = $binpath . "swfc " . $swfpath . $filename . ".sc -o " . $swfpath .  $filename . ".swf";
	exec($swfcom);
	
	echo "fName=" . $swfpath . $filename . ".swf";
}

?>

Oleellisia asioita yllä olevassa PHP-skriptissä ovat

a) SWF-tiedoston generoimiseksi tarvittavan .sc-tiedoston sisältö lisätään string-muuttujaan $xml_string.

b) Muuttujan $xml_string sisältö tallennetaan palvelimelle XML-tiedostoon, joka sitten syötetään swfc-kääntäjälle SWF-tiedoston generoimiseksi.

c) swfc-kääntäjää kutsutaan PHP-funktiolla exec.

Tuolla yllä olevalla PHP-skriptillä (tallennettuna tiedostoon swftools_generate_swf.php) yhdessä funktiotiedoston swftools_functions.php kanssa pystyy siis generoimaan palvelimelleen SWF-tiedoston.

Tarvitsemme kuitenkin vielä toisen PHP-skriptin käyttäjän lähettämän kuvan tallentamiseksi palvelimellemme:


<?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'])) {
    			/* header( 'Location: php-tietokanta-etusivu.php?infomsg=1' );
				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 . 'images')) {
					mkdir($basedir . 'images');
				}
				
				$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 . 'images/' . $imageName)) {
					
					createOneThumb( $basedir . 'images/', $imageName, $basedir . 'images/', 550, 400 );
					echo "fName=$imageThumbName";
					die();
				} else {
    				echo "fName=3";
					die();
				}
			}
		}
		else {
			echo "fName=3";
			die();
		}
}

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

Oleellisia asioita yllä olevassa PHP-skriptissä ovat

a) Skriptissä käytetään apufunktiota createOneThumb käyttäjän antaman kuvan muuttamiseksi Flash-komponenttiin soveltuvaan kokoon. Tämä thumbnails-kuvien tekemistekniikka on selostettu tässä oppaassani .

b) Tiedostot välitetään PHP-skripteihin XHTML:stä tai Flash-komponentista $_FILES-taulukossa.

c) PHP-skripteissä kannattaa yleensä tehdä käyttäjän antamalle syötteelle moninaisia tarkastuksia.

Esim.
Tässä skriptissä on tarkeistettu lähetetyn tiedoston koko (vain alle 0.5 MB sallittu) Lähetetyn kuvatiedoston tyyppi (vain JPG-kuvat sallittuja): Käyttäjän antama syöte on siis hyvä tarkistaa ENNEN kuin skripti suorittaa toimintonsa. Jos käyttäjän antama syöte on viallista skriptin on syytä i) tulostaa virhekoodi ja ii) keskeyttää skriptin suoritus vaikkapa die-funktion kutsulla.

d) Palvelimelle lähetetyn tiedoston tallentaminen onnistuu PHP-skriptissä helposti funktiolla move_uploaded_file: 3) Yllä tekemiemme kolmen PHP-tiedoston käyttämiseksi minun tarvitsi koodata alle laittamani AS3-koodi pääaikajanan frameen 1. Lisäksi lisäsin tarvittavat napit, tekstikentät ja MovieClip-objektit oikeilla instance nameilla CS4:n graafisen käyttöliittymän kautta.

            
            
import flash.net.FileReference;
import mx.utils.StringUtil;
import genutils.*;
import gs.*;

lataaMc.visible     = false;
imageMc.visible     = false;
generoiBtn.visible  = false;

var variables:URLVariables = new URLVariables();
var varLoader:URLLoader    = new URLLoader();
var varSend:URLRequest;

var fileRef:FileReference = new FileReference();

var downloadFile:FileReference = new FileReference();
var downloadURL:URLRequest;

var uploadFile:String = new String();

var lataaSWFFile:String = new String();

lataaMc.suljeBtn.addEventListener(MouseEvent.CLICK, suljeBtnClicked);

function suljeBtnClicked(event:MouseEvent):void {
	lataaMc.visible  = false;
}

lataaMc.eiBtn.addEventListener(MouseEvent.CLICK, eiBtnClicked);

function eiBtnClicked(event:MouseEvent):void {
	lataaMc.visible  = false;
}

lataaMc.kyllaBtn.addEventListener(MouseEvent.CLICK, kyllaBtnClicked);

function kyllaBtnClicked(event:MouseEvent):void {
	lataaMc.visible  = false;
	
	if( (lataaSWFFile != null) && (lataaSWFFile != null) ) {
		var saveName:String    = "test.swf";
		downloadURL            = new URLRequest(lataaSWFFile);
    	downloadFile           = new FileReference();
		
		downloadFile.download(downloadURL,saveName);
	}
}

lataaBtn.addEventListener(MouseEvent.CLICK, lataaBtnClicked);

function lataaBtnClicked(event:MouseEvent):void {
	fileRef.browse();
}

TweenLite.to(textFooterMc, 10.0, {x:-610, onComplete:footerComplete});

function footerComplete(): void
{
	textFooterMc.x = 610;
	TweenLite.to(textFooterMc, 10.0, {x:-610, onComplete:footerComplete});
}


textMc.inputText.text            = "Kirjoita teksti";
textFooterMc.textFooterText.text = textMc.inputText.text;

textMc.inputText.addEventListener(Event.CHANGE, textChange);

function textChange(e:Event):void {
	textFooterMc.textFooterText.text = textMc.inputText.text;
}

generoiBtn.addEventListener(MouseEvent.CLICK, generoiBtnClicked);

function generoiBtnClicked(event:MouseEvent):void {
	
	if( (imageFileName != null) && (imageFileName != "") ) {
		var imageText:String = textMc.inputText.text; 
	
		variables  = new URLVariables();
		varSend    = new URLRequest("./swftools_generate_swf.php")
	
		varSend.method = URLRequestMethod.POST;
		varSend.data = variables;
		
		variables.image_path  = imageFileName;
		variables.image_text  = imageText;
   		variables.sendRequest = "parse";
		
		varLoader = new URLLoader();
		varLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
		varLoader.addEventListener(Event.COMPLETE, generoiCompleteHandler);
		
		varLoader.load(varSend);
	}
}

function generoiCompleteHandler(e:Event):void{
	lataaSWFFile = e.target.data.fName;
	lataaMc.visible = true;
}

// Add Tooltips
var tooltipDelayTime:String               = "1.5";
var tooltipAlpha:String                   = "0.8";
var tooltipMaxWidth:String                = "300";
	
var tooltipCorner:String                  = "10";
	
var tooltipMarginLeft:String              = "4";
var tooltipMarginRight:String             = "4";
var tooltipMarginTop:String               = "4";
var tooltipMarginBottom:String            = "4";
	
var tooltipColor:String                   = "0x000000";
var tooltipBgColor:String                 = "0xFFFFFF";

var tooltipFontFamily:String              = "Verdana,Helvetica,_sans";
var tooltipFontSize:String                = "12";
var tooltipFontWeight:String              = "normal";
	
var tooltipFollowMouse:String             = "1";
var tooltipDuration:String                = "1.0";
	
var tooltipOffsetX:String                 = "20";
var tooltipOffsetY:String                 = "25";


var toolOptions:Object = {delay: tooltipDelayTime,alpha:tooltipAlpha,width:tooltipMaxWidth,corner:tooltipCorner,marginLeft:uint(tooltipMarginLeft),marginRight:uint(tooltipMarginRight),marginTop:uint(tooltipMarginTop),marginBottom:uint(tooltipMarginBottom),color:tooltipColor,backgroundColor:tooltipBgColor,fontFamily:tooltipFontFamily,fontSize:tooltipFontSize,fontWeight:tooltipFontWeight,followMouse:new Boolean(uint(tooltipFollowMouse)),duration:tooltipDuration,offsetX:uint(tooltipOffsetX),offsetY:uint(tooltipOffsetY) };	

var tooltipLataaBtn:String     = "Lataa kuva generoitavan SWF-komponentin taustakuvaksi.";
Tooltip.subscribe(lataaBtn, tooltipLataaBtn,toolOptions);

var tooltipGeneroiBtn:String     = "Generoi SWF-komponentti antamallasi taustakuvalla ja tekstillä.";
Tooltip.subscribe(generoiBtn, tooltipGeneroiBtn,toolOptions);

var tooltipTextMc:String     = "Kirjoita tekstikenttään SWF-komponenttiin tuleva teksti.";
Tooltip.subscribe(textMc, tooltipTextMc,toolOptions);

// Add Drag and drop to text field
var offsetTextMcX:Number; 
var offsetTextMcY:Number; 

function pickTextMc(e:MouseEvent):void {
    var locX:int = textMc.mouseX;
	var locY:int = textMc.mouseY;	
	
	offsetTextMcX = e.stageX - textMc.x; 
    offsetTextMcY = e.stageY - textMc.y; 
    
    addEventListener(MouseEvent.MOUSE_MOVE, dragTextMc); 	
}

function dropTextMc(event:MouseEvent):void {
    removeEventListener(MouseEvent.MOUSE_MOVE, dragTextMc); 
}

function dragTextMc(e:MouseEvent):void 
{  
	var locX:int = textMc.mouseX;
	var locY:int = textMc.mouseY;	
	
    textMc.x = e.stageX - offsetTextMcX; 
    textMc.y = e.stageY - offsetTextMcY;  
} 

textMc.addEventListener(MouseEvent.MOUSE_DOWN, pickTextMc);
textMc.addEventListener(MouseEvent.MOUSE_UP, dropTextMc);

fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadCompleteDataHandler);

function selectHandler(e:Event):void
{
	variables  = new URLVariables();
	varSend    = new URLRequest("./image_upload.php")
	
	varSend.method = URLRequestMethod.POST;
	varSend.data = variables;
		
	variables.fName  = "default_name";		
   	variables.sendRequest = "parse";
	
	try
	{
		fileRef.upload(varSend);
	}
	catch (error:Error)
	{
		//output_ta.appendText("Unable to upload file.\n");
	}
}
		
function uploadCompleteDataHandler(e:DataEvent):void 
{
	var strData:String = StringUtil.trim(e.data);
	var vars:URLVariables = new URLVariables(strData);
		
	uploadFile    = vars.fName;
	
	if( (uploadFile == null) || (uploadFile == "0") || 
		(uploadFile == "1") || (uploadFile == "2") || (uploadFile == "3") ) { 
		generoiBtn.visible  = false;
		return;
	}
	
	imageFileName = "./images/" + uploadFile; 
	
	imageRequest = new URLRequest(imageFileName);
	imageLoader.load(imageRequest);
	generoiBtn.visible  = true;
}
		
/* Initialize imageLoader */
var imageFileName:String = new String();
var imageRequest:URLRequest = new URLRequest();
var imageLoader:Loader = new Loader();

/* Sprite for loaded image */
var imageSprite:Sprite = new Sprite();

imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadImage); 

function LoadImage(e:Event):void {	
	imageSprite.addChild(imageLoader);
	imageMc.imageBgMc.addChild(imageSprite);
	
	imageSprite.width  = 550; // imageLoader.contentLoaderInfo.width;	
	imageSprite.height = 400; // imageLoader.contentLoaderInfo.height;
	imageSprite.x = 0;
	imageSprite.y = 0;
	imageMc.visible = true;
}

Oleellisia asioita yllä olevassa AS3-koodissa ovat

1) Todella kätevä tapa toteuttaa Tooltipsit AS3/Flashiin löytyy tästä .

2) FileReference-luokkaa voidaan käyttää sekä download että upload -dialogien avaamiseen. Tapahtumankäsittelijöidensä kautta FileReference-luokka huolehtii myös tarvittavien PHP-skriptien ajamisesta palvelimella. Tämä Flash Player 10:een liittyvä asia on aina syytä pitää mielessä FileReference-luokkaa käytettäessä.

3) Yksinkertaisten Flash-animaatioiden tekemiseen voi käyttää vaikkapa TweenLitea

4) Kommunikointi Flashin/AS3:n ja palvelimella sijaitsevien tiedostojen (JPG, XML, PHP) hoidetaan yleensä AS3:lla luokkien URLLoader, URLRequest ja URLVariables avulla. Samaa rajapintaa voi siis käyttää varsin erityyppisille tapauksille (kuvanlataaminen, PHP-skriptin suorittaminen).

5) Eräs tapa toteuttaa drag-and-drop -ominaisuus MovieClip-ikkunalle:

            
            
// Add Drag and drop to text field
var offsetTextMcX:Number; 
var offsetTextMcY:Number; 

function pickTextMc(e:MouseEvent):void {
    var locX:int = textMc.mouseX;
	var locY:int = textMc.mouseY;	
	
	offsetTextMcX = e.stageX - textMc.x; 
    offsetTextMcY = e.stageY - textMc.y; 
    
    addEventListener(MouseEvent.MOUSE_MOVE, dragTextMc); 	
}

function dropTextMc(event:MouseEvent):void {
    removeEventListener(MouseEvent.MOUSE_MOVE, dragTextMc); 
}

function dragTextMc(e:MouseEvent):void 
{  
	var locX:int = textMc.mouseX;
	var locY:int = textMc.mouseY;	
	
    textMc.x = e.stageX - offsetTextMcX; 
    textMc.y = e.stageY - offsetTextMcY;  
} 

textMc.addEventListener(MouseEvent.MOUSE_DOWN, pickTextMc);
textMc.addEventListener(MouseEvent.MOUSE_UP, dropTextMc);

Olen yllä olevassa tutoriaalissani esitellyt kolme varteenotettavaa tapaa SWF-generaattorin toteuttamiseksi omalle palvelimelle. Näistä SWFTOOLS-ohjelmien asentaminen omaan palvelintilaan onnistuu myös ilman admin-oikeuksia. Tein myös esimerkin vuoksi oman yksinkertaisen Flash-pohjaisen SWF-generaattorin.

On kuitenkin syytä huomata, että SWFTOOLS:in avulla pystyy toteuttamaan oman SWF-generaattorin myös pelkästään XHTML/JavaScript/PHP -pohjalta täysin ilmaisohjelmienkin avulla. Eli ratkaisu sopii myös harrastelijoille. Lisäksi sc-tiedostojen oma skriptikieli on syntaksiltaan erittäin kompakti, joten se soveltuu myös pienempiin projekteihin.

Toisaalta sc-tiedostojen skriptikielen kompaktius ja erillinen Flex-yhteensopiva (sekä pakettiin kuuluvat muut työkaluohjelmat) as3compile-kääntäjä houkuttelevat käyttämään SWFTOOLS-pakettia myös ammattimaisissa projekteissa...

Takaisin PHP-ohjelmoinnin etusivulle

PHP: SWF-tiedostojen generointi PHP-kielellä