Opas Flash-kuvagallerian tekemiseen

Yksi kätevä tapa dokumentoida vaellus on tallentaa kuvat kuvateksteineen Flash-kuvagalleriaksi. Myös vaellusreittikartat on tällöin hyvä laittaa kuvina mukaan. Valmiita (ja hyviä) ratkaisuja Flash-gallerioiksi löytyy netistä hakemalla helposti useitakin, mutta jos haluaa maksimaalisesti kontrolloida gallerian toiminallisuuden ja ulkonäön niin silloin varmin ratkaisu on tehdä gallerian pohja itse.

Teinkin opettelumielessä oman Flash-kuvagallerian, joka lataa kuvatiedot xml-dokumentista. Tutustutaan ensin kokeilemalla alla olevan Flash-gallerian ominaisuuksiin.

Kiitos Adoben aivan loistavien Flash Professional CS3 tai CS4 kehitysohjelmien tällaisten melko yksinkertaisten Flash-komponenttien tekeminen on kokeneelle Flash/AS3 -koodarille muutaman tunnin työ. Toinen asia on sitten komponentin ulkoasun ja käytettävyyden hiominen, joka veisikin jo paljon enemmän aikaa...

Omalta kohdaltani olen huomannut, että uudet asiat oppii usein nopeiten suoraan lähdekoodia tutkimalla ja kiinnittämällä huomionsa muutamiin olleellisimpiin asioihin. Joten tehdään näin.

1) Komponentin nappien ja muiden toimintojen selaamisen selkiyttämiseksi komponenteille on syytä määritellä, jokin tabulaattorijärjestys:

2) Tehdäkseni kuvagalleriastani hieman yleiskäyttöisemmän luen kuvien osoitteet ja kuvatekstit ulkoisesta xml-tiedostosta gallery_images.xml. Ulkoisen xml-konfigurointitiedoston käyttäminen mahdollistaa saman käännetyn swf-tiedoston käyttämisen useille kuvagallerioille ilman, että flash-komponenttia tarvitsee kääntää uudelleen.

Flash-komponenttini siis lukee alla olevan xml-tiedoston (vain kaksi ensimmäistä kuvaa tekstissä mukana) gallery_images.xml

<?xml version="1.0" encoding="utf-8"?>

<document>
	<transitionint>2</transitionint>
	<gallerycaption>Muotkatunturit 2003</gallerycaption>
	<image>
		<filename>muotkatunturit-2003/muotkatunturit-kartta-1.jpg</filename>
		<imagecaption>Lähdimme matkaan Muotkan Ruoktun tunturikylästä, jossa söimme siika-aterian. Alkumatkan kuljimme Peltojoen vartta lähelle Peltojärveä, josta nousimme Peltoaivin koillispuoliselle upealle hiekkaharjulle. Tullessamme bussilla takaisin Karigasniemeltä yövyimme ja saunoimme tunturikylässä.
		</imagecaption>
	</image>
	<image>
		<filename>muotkatunturit-2003/muotkatunturit-kartta-2.jpg</filename>
		<imagecaption>Vaelluksen keskivaiheiden kauniimpia paikkoja olivat hiekkaharju, Peltoaivi ja Piekanaäytsi. Aurinko paistoi koko ajan Piekanaäytsiin asti. Lämpötila oli korkeimmillaan lähellä 30 astetta. Toinen margariinipakkauksemme sulikin auringossa, onneksi toinen säästyi.</imagecaption>
	</image>
    ...
    ...
    ...
    
</document>

Ladataksemme kyseisen xml-tiedoston komponentin käynnistyksen yhteydessä täytyy komponenttimme Frame 1:een liittää alla oleva koodi:

Ja lisätä vastaavat tapahtuman käsittelijät lataustapahtumaa ja sen valmistumista tarkkailemaan:


function noFile(evt:IOErrorEvent):void {
	captionText.text = "XML file gallery_images.xml not found.";
}

function LoadXML(e:Event):void {
	xmlData = new XML(e.target.data);
	ParseImages(xmlData);
}

function ParseImages(imageInput:XML):void {
	/* Get the gallery caption from imageg.xml */
	mainCaptionText = imageInput.gallerycaption[0].text();
	transitionInt   = int(imageInput.transitionint.text());
	
	/* Check how many filenames are stored in images.xml */
	fileStr   = imageInput.image.filename;
	fileArray = fileStr.split("\n");
	fileArrayLength = fileArray.length;
	
	/* Store the imagenames and caption text to arrays */
	fileArray = new Array();	
	for(i = 0;i<fileArrayLength;i++)
	{
		fileArray.push(imageInput.image.filename[i]);
		captionArray.push(imageInput.image.imagecaption[i]);
	}
	
 	imageRequest = new URLRequest(imageInput.image.filename[currentImage]);
	imageLoader.load(imageRequest);
	
	totalImages.text = String(fileArrayLength);
	currentIndex.text = String(currentImage+1);
	captionText.text = captionArray[currentImage];
	mainCaption.text = mainCaptionText;
}

3) Kuvaselaimen toiminnallisuuden tekemiseksi tarvitsemme lisäksi oman Loader-objektin kuvien lataamiseksi. Yllä olevassa ParseImages onkin käytetty imageLoader-lataajaa, jonka saa lisämme komponenttiimme riveillä:

Koska kuvien lataaminen saattaa kuvien koosta riippuen kestää hetken lisäsin kuvanlataajaan myös lataamisen edistymistä (ProgressEvent.PROGRESS) tarkkailevan tapahtumankäsittelijäfunktion progressFunction. Kuvan latauduttua (Event.COMPLETE) funktio LoadImage hoitaa kuvan lisäämisen näytölle (ladataan objektiin imageSprite).


function openProgress(e:Event):void {
		addChild(pLoad);
		pLoad.x = stage.stageWidth/2+75;
        pLoad.y = stage.stageHeight/2+175;
}

function progressFunction(e:ProgressEvent): void
{
	var perc:Number = e.bytesLoaded / e.bytesTotal;
   	pLoad.progressText.text = Math.ceil(perc*100).toString() + " %";
}

function LoadImage(e:Event):void {
	removeChild(pLoad);
	
	imageSprite.addChild(imageLoader);
	imageFrame.addChild(imageSprite);
	
	imageSprite.width  = imageLoader.contentLoaderInfo.width;	
	imageSprite.height = imageLoader.contentLoaderInfo.height;
	imageSprite.x = 0;
	imageSprite.y = 0;
	
	if( imageFrame.width > imageSprite.width)
	{
		imageSprite.x =(imageFrame.width - imageSprite.width)*0.5;
	}
	if( imageFrame.height > imageSprite.height)
	{
		imageSprite.y = (imageFrame.height - imageSprite.height)*0.5;
	}	
	
	imageSprite.alpha  = 0.0;
	if(transitionInt == 1 ) {
		TweenLite.to(imageSprite, 3.5, {autoAlpha:1.0});
	}
	if(transitionInt == 2 ) {
		TweenLite.to(imageSprite, 3.5, {autoAlpha:1.0});
	}
	
}

4) Kun nyt olemme toteuttaneet kuvannimet ja kuvatekstit xml-tiedostosta komponentin käynnistymisen yhteydessä lataavat (ja tiedot Flash-muuttujiin tallentavat) funktiot sekä yksittäisen kuvan lataamisen mahdollistavan funktion. On seuraava tehtävämme lisätä tämä kuvat lataava toiminto kuvanvaihdoista vastaaviin (kuvia selaaviin) nappeihin.

Käyn tässä yhteydessä vain seuraavaan kuvaan siirtävän napin toteuttamisen läpi. Muut napit voi toteuttaa vastaavasti.

Ensiksi kyseinen nappi tulee lisätä vaikkapa raahaamalla graafisen käyttöliittymän kautta apuikkunasta (Window->Components) tai kääntämäällä teksti- tai kuvaobjekti (Modify->Convert to Symbol... -> Type: Button) nappiobjektiksi. Lisäksi napin voi lisätä alustamalla nappi AS3-koodissa ja lisäämällä napin (addChild), joko suoraan stagelle tai sitten jonkin MovieClip-objekrin sisään.

Kun nappi on luotu niin sille pitää antaa instance name, johon AS3-koodissa sitten viittaamme (Valitse hiiren klikkauksella nappiobjekti ja laita instance nameksi properties-välilehdellä (Window->properties) next_btn).

Kun napilla on annettu nimi next_btn, voidaan siihen yhdistää tapahtumankäsittelijäfunktio nextClickHandler.

Toteuttetaan kuvan vaihtava ja kuvanlataajaa imageLoader-käyttävä tapahtumankäsittelijä nextClickHandler:

Muut komponentin toiminnoista vastaavat napit lisätään samalla tavalla kuin seuraava-nappi.

5) Kun olemme saaneet kaikkien nappien toiminnot toteutettua, voimme liittää vielä nuolinäppäimiin kuvien selaustoiminnon eli omat tapahtumankäsittelijät. Koska näppäinkomennot vastaavat tässä tapauksessa yksi-yhteen nappienpainotoimintoja niin voimme kutsua näitä nappienpainotapahtumankäsittelijöitä lähettämällä (keinotekoisesti) nappienpainotapahtumat käsittelyyn:

            
/* Add keyboard commands for buttons */
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler);

function keyDownHandler(e:KeyboardEvent):void 
{
	if( e.keyCode == Keyboard.LEFT) {
		previous_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.RIGHT) {
		next_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.UP) {
		forwind_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.DOWN) {
		rewind_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.HOME) {
		start_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.END) {
		end_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
}

6) Flashissa on varsin helppoa toteuttaa animaatioefektejä MovieClipeiksi (tai yleisemmin DisplayObjekteiksi) tehdyille objekteille. Animaatioefektejä pystytään tekemään joko suoraan aikajanalla graafisen käyttöliittymän kautta tai sitten kuten tein tässä tapauksessa: kirjoittamalla efekti suoraan Action Script 3 -koodiin.

Flash tarjoaisi oman fl.transitions.TWeen-luokan joka onkin aika monipuolinen ratkaisu animaatioefektien tekemiseen. Oma kokemukseni kuitenkin on, että tuon luokan käyttäminen on tehnyt bugeja animaatioiden toimintaan.

Siksi olenkin siirtynyt käyttämään yksinkertaisissa siirtymäefekteissä TweenLite-luokkaa , jonka käyttö on erittäin nopea oppia.

7) Koska koodin leikkaa/liimaaminen oheisista tekstikentistä erikseen omiin toteutuksiin on melko vaivailloista (ja osa muuttujien määrittelyistäkin puuttuu noista kentistä). Laitan koko tuon komponentissani käyttämäni koodin vielä alle, yhteen kerralla kopioitavaan tekstikenttään.

Itselläni tuo koodi on pääaikajanan framessa 1. Lisäksi tuo koodi vaatii toimiakseen tuon jo mainitsemani TWeenLite-paketin lataamisen ja asentamisen. Ja tiedostoa gallery_images.xml on myös muokattava vastaamaan omien kuvatiedostojen sijaintia palvelimella (ja kyseisiä kuvatekstejä). Jos sinulla lisäksi vielä on käytettävissäsi Flash Professional CS4, niin voi toki myös ladata koko lähdekoodin ja grafiikat oheisesta fla-tiedostosta (CS4-formaattia): xml_loader17.fla

Alla siis jo mainitsemani lähdekoodi vapaasti hyödynnettäväksi:

            
import fl.controls.ProgressBarDirection;
import fl.controls.ProgressBarMode;
import fl.transitions.*;
import fl.transitions.easing.*;

import gs.*;

/* 
	Initialize caption text background as 2 key frame movie clip.
	captionFlag decides whether caption text is shown or not.
*/

captionBg.stop();
captionBg.gotoAndStop(1);
mainCaptionBg.stop();
mainCaptionBg.gotoAndStop(1);
var captionFlag: Boolean = true;

var pLoad: preloader_mc = new preloader_mc();

start_btn.tabIndex               = 1;
rewind_btn.tabIndex              = 2;
previous_btn.tabIndex            = 3;
currentIndex.tabIndex            = 4;
next_btn.tabIndex                = 5;
forwind_btn.tabIndex             = 6;
end_btn.tabIndex                 = 7;
caption_btn.tabIndex             = 8;

/* Initialize XML */
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
 
/* Add EventListeners for URLLoader */
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, noFile);

/* Initialize imageLoader */
var imageRequest:URLRequest = new URLRequest();
var imageLoader:Loader = new Loader();

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

imageLoader.contentLoaderInfo.addEventListener(Event.OPEN,openProgress);
imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressFunction);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadImage); 

/* Arrays to store image filenames and image captions */
var fileArray:Array = new Array();
var captionArray: Array = new Array();
var fileStr:String;

/* Indexes */
var fileArrayLength:uint = 0;
var currentImage: int = 0;
var i:int;

/* Caption text for whole image gallery */
var mainCaptionText:String;

/* Add eventlisteners for buttons */
next_btn.addEventListener(MouseEvent.CLICK, nextClickHandler);
previous_btn.addEventListener(MouseEvent.CLICK, previousClickHandler);
caption_btn.addEventListener(MouseEvent.CLICK, captionClickHandler);
start_btn.addEventListener(MouseEvent.CLICK, startClickHandler);
end_btn.addEventListener(MouseEvent.CLICK, endClickHandler);
rewind_btn.addEventListener(MouseEvent.CLICK, rewindClickHandler);
forwind_btn.addEventListener(MouseEvent.CLICK, forwindClickHandler);

/* EventListener for image index */
currentIndex.addEventListener(Event.CHANGE, textInputChangeHandler);

var transitionInt:uint = 1;

var xmlFileName:String = new String("gallery_images.xml");

/* Load filenames and image captions from file muotkatunturit-2003.xml */
xmlLoader.load(new URLRequest(xmlFileName));

function openProgress(e:Event):void {
		addChild(pLoad);
		pLoad.x = stage.stageWidth/2+75;
        pLoad.y = stage.stageHeight/2+175;
}

function progressFunction(e:ProgressEvent): void
{
	var perc:Number = e.bytesLoaded / e.bytesTotal;
   	pLoad.progressText.text = Math.ceil(perc*100).toString() + " %";
}
 
function LoadXML(e:Event):void {
	xmlData = new XML(e.target.data);
	ParseImages(xmlData);
}

function noFile(evt:IOErrorEvent):void {
	captionText.text = "XML file gallery_images.xml not found.";
}

function ParseImages(imageInput:XML):void {
	/* Get the gallery caption from imageg.xml */
	mainCaptionText = imageInput.gallerycaption[0].text();
	transitionInt   = int(imageInput.transitionint.text());
	
	/* Check how many filenames are stored in images.xml */
	fileStr   = imageInput.image.filename;
	fileArray = fileStr.split("\n");
	fileArrayLength = fileArray.length;
	
	/* Store the imagenames and caption text to arrays */
	fileArray = new Array();	
	for(i = 0;i<fileArrayLength;i++)
	{
		fileArray.push(imageInput.image.filename[i]);
		captionArray.push(imageInput.image.imagecaption[i]);
	}
	
 	imageRequest = new URLRequest(imageInput.image.filename[currentImage]);
	imageLoader.load(imageRequest);
	
	totalImages.text = String(fileArrayLength);
	currentIndex.text = String(currentImage+1);
	captionText.text = captionArray[currentImage];
	mainCaption.text = mainCaptionText;
}

function LoadImage(e:Event):void {
	removeChild(pLoad);
	
	imageSprite.addChild(imageLoader);
	imageFrame.addChild(imageSprite);
	
	imageSprite.width  = imageLoader.contentLoaderInfo.width;	
	imageSprite.height = imageLoader.contentLoaderInfo.height;
	imageSprite.x = 0;
	imageSprite.y = 0;
	
	if( imageFrame.width > imageSprite.width)
	{
		imageSprite.x =(imageFrame.width - imageSprite.width)*0.5;
	}
	if( imageFrame.height > imageSprite.height)
	{
		imageSprite.y = (imageFrame.height - imageSprite.height)*0.5;
	}	
	
	imageSprite.alpha  = 0.0;
	if(transitionInt == 1 ) {
		TweenLite.to(imageSprite, 3.5, {autoAlpha:1.0});
	}
	if(transitionInt == 2 ) {
		TweenLite.to(imageSprite, 3.5, {autoAlpha:1.0});
	}
	
}

function nextClickHandler(event:MouseEvent): void 
{
	if(currentImage < (fileArrayLength-1))
	{
		currentImage++;
	}
	else
	{
		currentImage = 0;
	}
	imageRequest = new URLRequest(xmlData.image.filename[currentImage]);
	imageLoader.load(imageRequest);
	
	currentIndex.text = String(currentImage+1);
	
	if(captionFlag == true)
	{
		captionText.text = captionArray[currentImage];
		
	}
}

function previousClickHandler(event:MouseEvent): void 
{
	if(currentImage > 0)
	{
		currentImage--;
	}
	else
	{
		currentImage = fileArrayLength - 1;
	}
	imageRequest = new URLRequest(xmlData.image.filename[currentImage]);
	imageLoader.load(imageRequest);
	
	currentIndex.text = String(currentImage+1);
	
	if(captionFlag == true)
	{
		captionText.text = captionArray[currentImage];
		
	}
}

function rewindClickHandler(event:MouseEvent): void 
{
	currentImage = currentImage - 5;
	
	if(currentImage < 0)
	{
		currentImage = 0;
	}

	imageRequest = new URLRequest(xmlData.image.filename[currentImage]);
	imageLoader.load(imageRequest);
	
	currentIndex.text = String(currentImage+1);
	
	if(captionFlag == true)
	{
		captionText.text = captionArray[currentImage];
		
	}
}

function forwindClickHandler(event:MouseEvent): void 
{
	currentImage = currentImage + 5;
	
	if(currentImage > (fileArrayLength-1))
	{
		currentImage = fileArrayLength-1;
	}

	imageRequest = new URLRequest(xmlData.image.filename[currentImage]);
	imageLoader.load(imageRequest);
	
	currentIndex.text = String(currentImage+1);
	
	if(captionFlag == true)
	{
		captionText.text = captionArray[currentImage];
		
	}
}

function captionClickHandler(event:MouseEvent): void 
{
	if(captionFlag == true)
	{
		captionFlag = false;
		captionText.text = "";
		mainCaption.text = "";
		captionBg.gotoAndStop(2);
		mainCaptionBg.gotoAndStop(2);
	}
	else
	{
		captionFlag = true;
		captionText.text = captionArray[currentImage];
		mainCaption.text = mainCaptionText;
		captionBg.gotoAndStop(1);
		mainCaptionBg.gotoAndStop(1);
	}
}

function startClickHandler(event:MouseEvent): void 
{
	currentImage = 0;
	imageRequest = new URLRequest(xmlData.image.filename[currentImage]);
	imageLoader.load(imageRequest);
	
	currentIndex.text = String(currentImage+1);
	
	if(captionFlag == true)
	{
		captionText.text = captionArray[currentImage];
	}
}

function endClickHandler(event:MouseEvent): void 
{
	currentImage = fileArrayLength - 1;
	imageRequest = new URLRequest(xmlData.image.filename[currentImage]);
	imageLoader.load(imageRequest);
	
	currentIndex.text = String(currentImage+1);
	
	if(captionFlag == true)
	{ 
		captionText.text = captionArray[currentImage];
	}
}

function textInputChangeHandler(event:Event):void {
	var inputInt:int = int(currentIndex.text);
   if( (1 <= inputInt) && (inputInt <= fileArrayLength) )
   {
   		currentImage = inputInt-1;
		
		imageRequest = new URLRequest(xmlData.image.filename[currentImage]);
		imageLoader.load(imageRequest);
	
		currentIndex.text = String(currentImage+1);
	
		if(captionFlag == true)
		{
			captionText.text = captionArray[currentImage];
		}
   }
   else
   {
	   currentImage = 0;
		
		imageRequest = new URLRequest(xmlData.image.filename[currentImage]);
		imageLoader.load(imageRequest);
		
		currentIndex.text = String(currentImage+1);
	
		if(captionFlag == true)
		{
			captionText.text = captionArray[currentImage];
   		}
   }
}

/* Add keyboard commands for buttons */
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler);

function keyDownHandler(e:KeyboardEvent):void 
{
	if( e.keyCode == Keyboard.LEFT) {
		previous_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.RIGHT) {
		next_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.UP) {
		forwind_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.DOWN) {
		rewind_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.HOME) {
		start_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
	else if( e.keyCode == Keyboard.END) {
		end_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
	}
}

Takaisin Flash-ohjelmoinnin etusivulle

Flash-kuvagalleria Muotkatunturit 2003

Opas Flash-kuvagallerian tekemiseen

Flash-kuvagalleria
Muotkatunturit 2003