• Part 1: Use ActionScript to read an XML file
• Part 2: Build a Photo Detail View and Slide Show
• Part 3: Build a Scrollable MovieClip

Demo of the SimplePhotoBox Gallery

The Scrollable MovieClip contains 2 main parts:

1. ThumbBase Class - Container for the ThumbScroll (scrollable thumbnail photo buttons), and the ScrollPrevious, ScrollNext buttons. ThumbBase controls the visible portion of the ThumbScroll object.
2. ThumbScroll Class holds the individual thumbnails. It extends beyond the borders of the visible area.

Here’s how FlashPhotoGallery creates ThumbBase and ThumbScroll.

thumbBase = new ThumbBase();
thumbBase.x = thumbBaseX;
thumbBase.y = thumbBaseY;
addChild(thumbBase);
 
thumbScroll = new ThumbScroll();
thumbScroll.x = thumbScroll.y = 0;
thumbScroll.scrollRect = new Rectangle(0, 0, canvasW, canvasH);
var maxWidth:Number = 0;
maxWidth = createThumbs();
selectedItem = thumbs[0];
 
thumbBase.addChild(thumbScroll);
thumbBase.setScroll(thumbScroll);

THUMBSCROLL CLASS
ThumbScroll provides a container to place the thumbnails. Since the thumbnails may go beyond the viewable screen space, ThumbScroll handles positioning of visible thumbnails. The scrollRect property of the movieclip defines this section of the ThumbScroll area that is visible.

The ThumbScroll Class is defined as a movie clip within the library. Here’s how to define the ThumbScroll Movie Clip:

• Right-mouse click on the ThumbScroll movie clip in the library and select Properties.
• Class: ThumbScroll
• Base Class: fpg.ThumbScroll

This links the ThumbScroll with the fpg package.

When the mouse is over the scroll buttons, the ThumbScroll time line starts at frame 1 and continues looping until the scrollingNext and scrollingPrevious.

Here’s how to setup the timeline for scrolling:

• Select Frame 1, and bring up the action window.
• Here’s the code to add into the action window:
  

  if (scrollingNext || scrollingPrevious)
     play();
  else
     stop();

• Select Frame 10 and add this code: gotoAndPlay(1);

Each time a frame is entered, the event handler onEnterFrame is called and the ThumbScroll window changes vertical position. Here’s the code:

private function onEnterFrame(e:Event):void
{
	var rect:Rectangle = scrollRect;
 
	if (scrollingNext && !isScrollAtBottom(rect.y + dy))
		rect.y += dy;
	else if (scrollingPrevious && rect.y > dy)
		rect.y -= dy;
 
	scrollRect = rect;				
}

• Part 1: Use ActionScript to read an XML file
• Part 2: Build a Photo Detail View and Slide Show
• Part 3: Build a Scrollable MovieClip

1. The PhotoDetail Class: displays an enlarged view of the photo when a thumbnail is selected.
2. Slide Show Functionality within the PhotoDetail Class. One photo gradually dissolves into the next.
3. Slide Show Intervals: Allow for automatic operation of the slideshow with a timer interval of 5 seconds.

Demo of the SimplePhotoBox Gallery

1. PHOTODETAIL CLASS
   PhotoDetail provides an enlarged view of the photo. The sideshow is active when the PhotoDetail object is created. Function displayPicture gets everything started: Takes the photo file name from the thumbnail array, loads the image file from the server and calls imgLoaded when complete.
   

   The PhotoDetail Class is defined as a movie clip within the library. Here’s how to define the PhotoDetail Movie Clip:

   • Right-mouse click on the PhotoDetail movie clip in the library and select Properties.
   • Class: PhotoDetail
   • Base Class: fpg.PhotoDetail

   This links the PhotoDetail movie clip within the library with the PhotoDetail Class in the fpg package.

   imgLoaded
   Each photo can have a different set of dimensions. Landscape photos are maximized for width and portrait photos are maximized for height. the currentChild object holds the photo. drawBg uses graphics routines to create a white border around the picture.

   GoToAndPlay(2) runs a timeline that gradually fades the old photo and displays the new photo.

    
   /******************************
   * PhotoDetail class:   Extends MovieClip to act to display the selected photo. */
   public class PhotoDetail extends MovieClip 
   {
   //***************************
   // Properties:
   public var data				:Object;
   public var leftMargin			:Number;
   public var topMargin			:Number;	
   protected var pictLdr			:Loader;
   protected var pictURL			:String;
   protected var bgColor			:uint = 0x000000;
   protected var frameColor		             :uint = 0xffffff;				
   protected var currentChild		             :*;
   protected var canvasW			:Number = 925;
   protected var canvasH			:Number = 510;
   protected var wait				:Wait;
   protected var flashPhotoGallery	             :FlashPhotoGallery;
    
   //***************************
   // Public methods:
   public function displayPicture(o:Object):void
   {
   	wait.visible = true;
    
   	// Save values
   	data = o;
    
   	pictLdr = new Loader();
   	pictURL= data.@img;
   	pictLdr.load(new URLRequest(pictURL));
   	pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);	
   }
    
   //***************************
   // Event handlers:
   protected function imgLoaded(event:Event):void
   {	
   	alpha = 0;
   	graphics.clear();
    
   	if (currentChild != undefined)
   		removeChild(currentChild);
    
   	currentChild = pictLdr.content;
    
   	// Scale
   	var pictWidth: uint = currentChild.width;
   	var pictHeight: uint = currentChild.height;
   	var pictScale: Number = 1;
    
   	pictScale = (canvasH+leftMargin)/pictHeight;
    
   	currentChild.scaleX = currentChild.scaleY = pictScale;
   	var newLeftMargin: Number = ((canvasW-leftMargin) -(pictWidth * pictScale)) / 2;
   	x = newLeftMargin > 0 ? (newLeftMargin + leftMargin) : leftMargin;			
   	y = topMargin;
    
   	// Add a Clipping Region
   	var square:Sprite = new Sprite();
   	square.graphics.beginFill(0x000000, 0);
   	square.graphics.drawRect(0, 0, canvasW-25, canvasH+leftMargin);
   	addChild(square);
   	currentChild.mask = square;
   	// End of Clipping Region
    
   	wait.visible = false;
   	addChild(pictLdr.content);
    
   	drawBg(pictLdr.content.height, pictLdr.content.width);
   	gotoAndPlay(2);
   }

2. SLIDE SHOW
   The sideshow is active when the PhotoDetail object is created. There are 2 main parts to the slideshow functionality: the dissolve transition and the interval timing.

   PhotoDetail Class is a movie clip defined within the Flash library. Each time a new picture is displayed, the old movie clip is removed and a new movie clip is displayed by gradually increasing the alpha. A timeline within the movie clip starts with the call gotoAndPlay(2). Starting at frame 2 in the timeline, the movie clip plays until it encounters stop().

   Here’s how to add actions to the timeline. Bring up the PhotoDetail movie Clip on the stage. Click in frame 1. Bring up the actions window (Window -> Actions).

   Frame 1 Action:
        alpha = 1;
        stop();
   Frame 40 Action:
        gotoAndPlay(1);

   So far, I haven’t described where the alpha changes. The alpha changes each time a new frame is entered. The PhotoDetail constructor calls: addEventListener(Event.ENTER_FRAME,onEnterFrame). onEnterFrame changes the alpha by +.025. Across 40 frames this makes the alpha = 1.

   public function PhotoDetail()
   {
                // Construct!
   	buttonMode = true;			
    
   	// Event Handlers
   	addEventListener(Event.ENTER_FRAME,onEnterFrame);
   	addEventListener(MouseEvent.CLICK, detailClickHandler);
   }
    
   private function onEnterFrame(e:Event):void
   {
   	if (currentFrame != 1){
   		if (currentFrame == 2)
   			this.alpha = 0;
   		this.alpha += .025;
   	}
   }

3. SLIDE SHOW INTERVALS

   SimplePhotoBox Class, the top most movie clip holds all of the other movie clips, symbols and buttons. SimplePhotoClass controls the slide show interval. intervalDuration is defined as 5000 miliseconds. Each photo should be visible for 5 seconds. Every 5 seconds slideShowNext is called to bring up the next photo in the list.

   public function nextSlide():void
   {
   	var currentPhoto: Number = selectedItem.index + 1;		
   	clearInterval(intervalId);
   	intervalId = setInterval(slideShowNext, intervalDuration);
   	if (currentPhoto >= thumbs.length)
   		currentPhoto = 0;
   	displayPicture(thumbs[currentPhoto]);
   }

This is a 1 part series of articles:

• Part 1: Use ActionScript to read an XML file
• Part 2: Build a Photo Detail View and Slide Show
• Part 3: Build a Scrollable MovieClip

This tutorial describes how to use ActionScript to read an XML file and create thumbnails. SimplePhotoBox is a Flash application that reads XML and image files exported from Picasa and displays a professional looking Photo Gallery and Slide Show.

Demo of the SimplePhotoBox Gallery

SimplePhotoBox parses the photos.xml file: each image tag contains the location of an image file and a 250×250 thumbnail file. The Flash movieclip parses photos.xml, then reads each thumbnail and displays the thumbnail on screen.

SimplePhotoBox consists of 4 basic parts:

1. FlashPhotoGallery – the movie clip that is a wrapper for the application
2. ThumbBase and ThumbScroll – the scrollable thumbnail display area
3. PhotoThumb1…n – individual, clickable thumbnail images of each photo.
4. PhotoDetail – shows a single photo covering the display area.

All of the photos reside in an images directory and are organized in the file photos.xml. Here’s what the photos.xml file looks like:

<?xml version="1.0" encoding="UTF-8" ?>
<album>
<layout flag="0"></layout>
<albumCaption title="Big Sur"></albumCaption> <image title="big_sur_144.jpg / Point Lobos, Andrew Molera, Julia Pfeiffer" img="images/big_sur_144.jpg" thmb="thumbnails/big_sur_144.jpg" downloadimg="images/big_sur_144.jpg" size="not available..." type="JPG"  dt="April 2010"  thumbw="80" thumbh="80" tags="">
<description>big_sur_144.jpg</description>
</image>    
<image title="big_sur_138.jpg / Point Lobos, Andrew Molera, Julia Pfeiffer" img="images/big_sur_138.jpg" thmb="thumbnails/big_sur_138.jpg" downloadimg="images/big_sur_138.jpg" size="not available..." type="JPG"  dt="April 2010"  thumbw="80" thumbh="80" tags="">
<description> big_sur_138.jpg</description>
</image>    
<image title="big_sur_141.jpg / Point Lobos, Andrew Molera, Julia Pfeiffer" img="images/big_sur_141.jpg" thmb="thumbnails/big_sur_141.jpg" downloadimg="images/big_sur_141.jpg" size="not available..." type="JPG"  dt="April 2010"  thumbw="80" thumbh="80" tags="">
<description>big_sur_141.jpg</description>
</image>    
<image title="big_sur_182.jpg / Point Lobos, Andrew Molera, Julia Pfeiffer" img="images/big_sur_182.jpg" thmb="thumbnails/big_sur_182.jpg" downloadimg="images/big_sur_182.jpg" size="not available..." type="JPG"  dt="April 2010"  thumbw="80" thumbh="80" tags="">
<description> big_sur_182.jpg</description>
</image>    
</album>

1. Open the xml file:

URLLoader loads the XML file into this container class . Actionscript restriction: load files must be from the same domain as the flash application (SWF). The event handler onDataHandler is set to trigger when loading is complete.

public class FlashPhotoGallery extends MovieClip 
{ 
//***************************
// HTTP: 
protected var loaderURLLoader; 
protected var photosXML :XML; 
protected var photosPath :String = "photos.xml"; 
protected var thumbBase :ThumbBase; 
protected var thumbScroll :ThumbScroll; 
protected var thumbs :Array = new Array(); 
protected var photoDetail : PhotoDetail; 
public function FlashPhotoGallery() 
{ 
   // Load data! 
   loader = new URLLoader(); 
   loader.load(new URLRequest(photosPath)); 
   loader.addEventListener(Event.COMPLETE, onDataHandler); 
}

2. Create the Thumbnails:

The function onDataHandler() is triggered when photos.xml has been loaded. Next step is to create a new XML object to hold the data and create thumbnails.

protected function onDataHandler(event:Event):void 
{ 
   photosXML = new XML(loader.data); 
   thumbsTotal = photosXML.image.length(); 
   galleryTitle.text = photosXML.albumCaption.@title; 
   createThumbs(); 
} 
protected function createThumbs() 
{ 
   // THUMBNAILS (Layout the photo thumbnails) 
   var maxWidth:Number = 0; 
   var maxHeight:Number = 0; 
   var i:uint = 0; 
   for each(var thisImage:XML in photosXML.image ) 
   { 
      var deltaX:Number = i - Math.floor(i / thumbsPerRow) * thumbsPerRow; 
      var deltaY:Number = Math.floor(i / thumbsPerRow); 
      var data:XML = thisImage; 
      thumbs[i] = new PhotoThumbnail(); 
      thumbs[i].setData(i, data);  
      var thumbw:Number = data.@thumbw; 
      var thumbh:Number = data.@thumbh; 
      thumbs[i].x = deltaX *(thumbw + thumbXSpacing);
      thumbs[i].y = deltaY *(thumbh + thumbYSpacing); 
      maxWidth = thumbs[i].x + thumbw+ thumbXSpacing; 
      maxHeight = thumbs[i].y + thumbh+ thumbYSpacing; 
      thumbs[i].addEventListener(MouseEvent.CLICK, thumbClickHandler); 
      thumbScroll.addChild(thumbs[i]); 
      i++; 
   } 
   thumbScroll.maxHeight = maxHeight; 
}

The for each statement loops each image tag using the variable: photosXML.image.. data.@thumbw refers to the image attribute thumbw. The PhotoThumbnail object controls the image display and mouse click event.

Clicking on a thumbnail, expands the photo. Here’s how this is done. Define the event handler for each thumbnail using the call addEventListener (see the createThumbs function above). Next, define the event handler that takes action when the mouse click occurs. Here’s an example of an event handler:

protected function thumbClickHandler(event:MouseEvent):void
{   			
      startSlideshow();
      displayPicture(event.currentTarget);		
}

View Step 2: Detail View and Slide Show

PHP provides a nice solution for inserting RSS feeds into an HTML document. Unlike previous XML implementations, SimpleXML uses the XML tag names as variables. If you need a refresher on the RSS 2.0 specification take a look at this site.

Here is the PHP code:

<?php
if (isset($_GET['category']))
  $rssfeed_category = (get_magic_quotes_gpc()) ? $_GET['category'] : addslashes($_GET['category']);
else
  $rssfeed_category = 'http://rss.news.yahoo.com/rss/topstories';
  libxml_use_internal_errors(true);
 
  if ($rssfeed = simplexml_load_file($rssfeed_category)) {
     foreach ($rssfeed->channel as $channel) {
        echo '<h2><a href="' . $channel->link . '">' .
				$channel->title . '</a></h2>';
        echo '<p>' . $channel->description . '</p>';
 
        foreach ($channel->item as $item) {
           echo '<div class="rssItem">';
           echo '<ul>';
           echo '<li><a href="' . $item->link . '" class="rssLink">';
           echo $item->title . '</a><br />';
           echo $item->description . '</li>';
           echo '</ul>';
           echo '</div>';
        }
   }
}
else echo 'RSS feed could not be read. ' . $rssfeed_category . '<br />';
?>

Tips to making this work:

• Reserved HTML characters such as ampersand (&) and greater than(>) can cause problems if they appear as ordinary text in an XML document. The browser will mistake these reserved characters for markup. Use the php function htmlentities to convert characters such as & to & if this becomes a problem.
• Many RSS feeds contain HTML markup for formatting purposes. In this case, htmlentities is NOT recommened. Here’s an example of using htmlentities with description text containing HTML markup.
• Character encoding can also lead to display problems. To ensure proper display of special characters, pay attention to the character encoding. UTF-8 is the default character encoding for XML. ISO-8859-1 is more commonly used in HMTL. If you use UTF-8 encoding in the HTML document’s head section, the special characters should print correctly.

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

• A file access warning from simplexml_load_file() may indicate a server warning. Check the php.ini configuration option allow_url_fopen = On. This will give the simplexml_load_file() function the ability to open the remote rss file. However it will not be good for website security because it leads to PHP Remote File Include Hacks.

RELATED POSTS:

• PHP htmlentities
• RSS 2.0 Specification
]]> http://www.myxmlproject.com/customize-rss-feeds-with-php/feed/ 0 http://www.myxmlproject.com/xml-transformation-using-sarissa/ http://www.myxmlproject.com/xml-transformation-using-sarissa/#comments Thu, 12 Nov 2009 16:24:20 +0000 admin http://www.myxmlproject.com/?p=4 Sarissa was developed to allow cross-browser support for manipulating XML files.  This is important for web pages accessing XML with JavaScript.  Firefox, IE and Safari implementations of JavaScript each handle XML files differently. Sarissa is a set of downloadable JavaScript files that standardize XML manipulation.

PHOTO GALLERY USING XML

Several popular web based photo applications (Picasa and JAlbum) have export options that can generate XML files along with photo images to create a photo album in a web page. I have created a simple implementation that uses a similar approach. Sarissa methods parse the file: sherrypicsmenu.xml for image files and thumbnail files. HTML code is inserted into the web page to display a thumbnail bar, and detail photo images.

Here’s the XML file:

<?xml version="1.0" encoding="iso-8859-1"?>
<photogallery>
	<photo target="buttonarmsxdcat.jpg" image="armsxdcat.jpg"/>
	<photo target="buttoncatbasket.jpg" image="catbasket.jpg" />
	<photo target="buttondogsniff.jpg" image="dogsniff.jpg" />
	<photo target="buttonyawndog.jpg" image="yawndog.jpg" />
	<photo target="buttondbeagle.jpg" image="dbeagle.jpg"/>
</photogallery>

When the HTML page is loading, sherrypicsmenu.xml loads and is parsed. Each photo tag from the xml file becomes a thumbnail with a link to the full sized image.

Here’s the JavaScript:

<script type="text/javascript">
function initMenu(xmlFile) {
	var xml = Sarissa.getDomDocument();
	xml.async = false;
	xml.load(xmlFile);
 
	var nodes = xml.documentElement.childNodes;
	var output = '';
 
	for (var i = 0; i <= nodes.length - 1; i++) {
		if (nodes.item(i).nodeType != Node.ELEMENT_NODE) continue;
 
		output += '<div id="photobutton">';
		output += '<a onclick="showpicture(\'../images/' + nodes.item(i).getAttribute('image') + '\')">' +
			'<img src="../images/' + nodes.item(i).getAttribute('target') + '" />' + '</a><br />';
		output += '</div>';
 
	}
	document.getElementById('photomenu').innerHTML = output;
    showpicture("../images/catbasket.jpg");
}
 
window.onload = function() {
	initMenu('sherrypicsmenu.xml');
};
</script>





RELATED POSTS:

• Download Sarissa
• Export a Picasa Photo Album
]]> http://www.myxmlproject.com/xml-transformation-using-sarissa/feed/ 0