You are viewing an archive page. Click here to go to the current Open Exhibits website.
Log-in is disabled for the archived site
Software

Software: Modules

Templates allow novices to create their own floor or Web based exhibits. Universal Modules allow more advanced developers to combine, branch, and write their own modules that can act as building blocks for new Exhibits.

Flickr Viewer

Flickr Viewer

First Posted: December 3, 2011
v1.1.1 Updated: January 31, 2012

Project Summary

FlickrViewer displays multitouch media content using the Flickr API.

 

The FlickrViewer is now GestureWorks 3 compatible!

ABOUT THIS CONTRIBUTOR

Profile picture for Matthew Valverde

Matthew Valverde

Lead ActionScript Developer
Open Exhibits Staff

Total Activity:  2K
Downloads:  63
Article Views:  1K
Shared:  0
Tweets:  1

Uploads:  20
Comments:  24
Favorites:  12
Likes:  1
Emails:  0

Profile picture for Mike Wirth
Mike Wirth commented
7 years ago
I've followed the tutorial to get this setup, but am encountering a Error 1010. Is there any special settings needed on the Flickr side?
Profile picture for Matthew Valverde
Open Exhibits Staff
7 years ago
Hi Mike, You will receive an Error #1010 for a few reasons. 1) Check your api key. 2) If you are accessing a "photoset", make sure that it corresponds to the photoset id given to you by Flickr. 3) If you are accessing a "group", make sure that it corresponds to the group id given to you by Flickr. 4) Make sure the data from Flickr is made public. Let me know if that helps. Thanks, Matthew


Summary

The FlickrViewer is a module designed to display media content using the Flickr API. Selected Bitmap data and short video files are downloaded from a defined Flickr user account along with associated meta data. User account settings, image and video preferences and basic formatting can be specified using the module XML file. Multiple touch object images and videos can be displayed on stage and each touch object can be manipulated using the TAP, DRAG, SCALE and ROTATE multitouch gestures. All multitouch gestures can be activated and deactivated using the module XML settings.

Features

Loads YouTube videos,

Contains information or metadata on Title, Description, Username and Publish (copyright).

Example Code

Using this

FlickrViewer.xml:

<?xml version="1.0" encoding="UTF-8"?>
<FlickrViewer>
	<GlobalSettings>
		<apiKey>69020127f78872fdbd72cf92cda3e7d3</apiKey>
		<type id="72157625206571362">photoset</type> 
		<video>true</video>
		<scale>1</scale>
		<globalScale>.7</globalScale>
	</GlobalSettings>
	
	<Gestures>
		<rotate>true</rotate>
		<scale>true</scale>
		<drag>true</drag>
		<doubleTap>true</doubleTap>
		<flick>false</flick>
	</Gestures>	
</FlickrViewer>

-----------------

FlickrViewer.as:

package id.module
{
    import flash.events.Event;
    import id.core.TouchComponent;
    import id.component.FlickrDisplay;
    import id.element.FlickrParser;

    public class FlickrViewer extends TouchComponent
    {
        private var flickrDisplay:FlickrDisplay;

        public function FlickrViewer()
        {
            super();
            FlickrParser.settingsPath="FlickrViewer.xml";
            FlickrParser.addEventListener(Event.COMPLETE,onParseComplete);
        }

        private function onParseComplete(event:Event):void
        {
            flickrDisplay=new FlickrDisplay();
            flickrDisplay.id=0;
            addChild(flickrDisplay);
        }
        
    }
}

Properties and Customization

Included XML tags and functions:

Name Description Notes
<AuthorText> Sets the font size and color for the image author.
<FlickrViewer> Contains all the module-specific XML settings for the application.
<Gestures> Contains the tags that specify which gestures can be used to manipulate objects within the application
<GlobalSettings> Contains the tags that control initial, maximum and minimum image scaling values, as well as the padding between the various information types in the info display for each image. The full size of the images is the size at which control buttons appear and that the image scales relative to, not the actual size of the image. The image's full size within the application is set using either the <objectScale> or <imagesNormalize> tag.
<PublishText> Sets the font size and color for the image copyright info.
<apiKey> Sets the flickr API key.
<doubleTap> Sets whether or not the double tap gesture can be used in the application. Double tap is used to automatically open objects to their full size without the scaling gesture.
<drag> Sets whether or not the drag gesture can be used in the application.
<fillColor1> Sets the background color for the property it is grouped under.
<flick> Sets whether or not the flick gesture can be used in the application.
<globalScale> Sets the size at which images appear on stage relative to their full size.
<imagesNormalize> Sets all images' full size as an absolute pixel width; height is adjusted accordingly. Either <objectScale> (which sets the full size of the images relative to their actual size) or <imagesNormalize> (which forces all images to an absolute pixel width) may be used, not both.
<infoPadding> Sets the padding around the description information when the info button is selected, and the spacing between the thumbnail, the main description box, and author info.
<maxScale> The maximum size the images can zoom to, set relative to their full size within the application (set by <scale> or <imagesNormalize>). Ex. Setting this value to 2.5 will allow the images to become 2.5 times their full size.
<minScale> The minimum size the images can zoom to, set relative to their full size within the application (set by <scale> or <imagesNormalize>). Ex. Setting this value to .5 will allow the images to be shrunk as small as half their full size.
<objectScale> Sets the image's full size relative to the actual size. Either <objectScale> (which sets the full size of the images relative to their actual size) or <imagesNormalize> (which forces all images to an absolute pixel width) may be used, not both.
<outlineColor> Sets the color of an object border.
<outlineStroke> Sets the width in pixels of an object border.
<qrCodeTag> Sets the tag for a QR code reader. Can be text or a URL.
<rotate> Sets whether or not the rotate gesture can be used in the application.
<scale> Sets whether or not the scale gesture can be used in the application.
<type> Sets the input type; either group or photoset. The flickr group or photoset ID is the long number at the end of the URL for a flickr group or photoset page. This id must be be set as a parameter within the type tag, like so <type id="yourID"></type>
<video> Sets whether or not flickr videos are allowed in the application.

Included AS3 Classes and customization:

Name Superclass Notes
FlickrViewer TouchComponent
Name Type Description Notes
COMPLETE String String utilized for a dispatch event when module has loaded. Public Static
displayObject Array The object holder for the FlickrViewer Class. Public
flickrDisplay FlickrDisplay The main display class for the FlickrViewer. Private
id int The identification number of an object within a module. Public
moduleName String The module name is the same as its class name. Public
Name Description Notes
FlickrViewer() The Constructor. Public
callNewObject(int):void Calls an new object to the stage and passes an int as its argument. Public
onParseComplete(event:Event) The function called after the module xml has been parsed. Private
updateUI():void Calls to the callNewObject() function. Protected
Name Description Notes
Event.COMPLETE On xml parse complete. Private

This material is based upon work supported by the National Science Foundation under Grant Number Division of Research on Learning in formal and informal settings #1010028. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the authors and do not necessarily reflect the views of the National Science Foundation.


Open Exhibits was developed by Ideum, makers of GestureWorks. Open Exhibits SDK is free for non-commercial use.

Connect
YouTube Twitter Flickr