Description: Accurate XML based image gallery which is easy to configure.

Technologies and tools: Flash 9, Action Script 3.0, XML, CSS, Subversion

Position: Flash developer

Responsibilities: Architecture development and design, usability engineering, writing code, bug fixing, refactoring, estimation for outer and inner tasks, creation graphic elements.

Detailed information regarding features:

  • Dynamic XML based Image Gallery.
  • Gallery supports unlimited images.
  • HTML and CSS support.
  • Used FlashVars to set paths for text.xml, settings.xml and styles.css files.
  • Via settings.xml file you can customize: stage width and height, TileList component properties (base view of image gallery), properties to view gallery items, paging’s properties.
  • Via styles.css file you can set styles for text in text.xml file.
  • Easy to use and configure.
  • Easy to resize.
  • Centralized coding.
  • Code is fully commented.

default_assets_files.zip (Please do not forget to remove .doc extension after downloading, should be just changed_assets_files.zip)

After starting up you can see the list of all image galleries with previews. All image previews are defined in text.xml file.

XML image gallery
Img. 1 – XML image gallery base view after starting up

If there are a lot of images then scroll is added to make possible to see all of them. According to the number of columns and rows which are predefined in settings.xml file scroll can be vertical or horizontal.

Supports unlimited images (scroll is added)
Img. 2 – Supports unlimited images (scroll is added)

To view gallery items you can click on its preview

Preview example

After this detailed view of image gallery should be displayed.

Detailed view of image gallery
Img. 3 – Example of detailed view of the gallery element (XML image gallery #4)

Detailed view consists of image section, paging section and text area with ‘Back’ button.

Image section presents image according to activated button in paging. The number of paging buttons is set in settings.xml file, currently it equals 10.

Paging
Paging example

XML IMAGE GALLERY #4 has 11 images in the list that’s why ‘Next’ button is in active state in the paging. All images and text in text area are predefined in text.xml file.

‘Back’ button allows you to return to base image gallery view.

One more example of detailed gallery view (img. 4). In this case paging does not have ‘Previous’ and ‘Next’ buttons because the number of images in the list is lesser than number of allowed visible paging buttons in settings.xml file.

Img. 4 – Example of detailed view of the gallery element (XML image gallery #7)

Customization examples

Image 5, image 6 and image 7 are examples of customization properties of TileList component via settings.xml file.

Image 5 – changed properties in settings.xml file:

settings.tilelist.columncount

<columncount>5</columncount>

settings.tilelist.rowcount

<rowcount>3</rowcount>

settings.tilelist.textoverlayalpha

<textoverlayalpha>0.9</textoverlayalpha>

settings.tilelist.labeltextpadding

<labeltextpadding>10</labeltextpadding>

settings.tilelist.labelvisiblecharslength

<labelvisiblecharslength>100</labelvisiblecharslength>

Example of customization TileList component via XML file
Img. 5 – Example of customization TileList component via XML file

Image 6 – changed properties in settings.xml file:

settings.tilelist.columncount

<columncount>2</columncount>

settings.tilelist.rowcount

<rowcount>4</rowcount>

Img. 6 – Example of customization TileList component via XML file

Image 7 – changed properties in settings.xml file:

settings.tilelist.columncount

<columncount>4</columncount>

settings.tilelist.rowcount

<rowcount>5</rowcount>

Img. 7 – Example of customization TileList component via XML file

Image 8 is an example of customization properties to view gallery items, paging’s properties and styles for text.

Changed properties changed properties in settings.xml file:

settings.itemview.backbtnwidth

<backbtnwidth>80</backbtnwidth>

settings.pagingcontainer.scrollbuttonspadding

<scrollbuttonspadding>13</scrollbuttonspadding>

settings.pagingcontainer.visiblebuttonsnumber

<visiblebuttonsnumber>3</visiblebuttonsnumber>

Changed style in styles.css file:

.h1{
color: #00A9FF;

Img. 8 – Example of customization view of gallery elements and paging

Handling loading errors

If a preview image could not be loaded then error will be presented instead of it (img. 9)

Img. 9 – Preview loading error example

If an image in detailed view could not be loaded then also error will be presented instead of it (img. 10)

Img. 10 – Loading image error in detailed image gallery view

Images which are used in the gallery were taken from:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s