michaeljamesgannon.com

leave a comment

A personal project that I have been been working on for a little while, thought it deserved a post. This site is on online memorial for my father who passed away in 2007. After a few false starts, I finally got the site running early this year. The project serves a number of purposes:

  • It creates an convenient place for family and friends to view photos in a customized setting.
  • It gives me a place to work on my PHP skills as I attempt to get them to a comparable level as my Actionscript skills.
  • A place to revive the design skills I haven’t used a lot the past few years.

Flickr seemed a good choice for hosting my photos, due in part to the fact that it saves me the trouble of writing a CMS for now. As I mentioned in my previous post, this site makes use of a few useful open source libraries, namely PhpFlickr to access my Flickr photo sets, and Shadowbox.js to display them. The site is very much a work in progress, but I think the basic structure is in place. As time permits I will be making additions and adjustments.

http://michaeljamesgannon.com

Written by geoff

February 20th, 2010 at 11:08 am

Posted in Development

Tagged with ,

Simple Gallery with phpFlickr and Shadowbox

leave a comment

On a recent personal project, I had the need to display some photos from Flickr on a separate site as a gallery with thumbnails. This was a good opportunity to use one of the many existing ports of the Flickr API. I chose phpFlickr to access my photo sets, and Shadowbox to display the results. These both proved to be good decisions, as it was quite easy to get up and running. I’ve taken a moment to write a simple example that uses these two open source libraries.

See the example here.
phpFlickr site
Shadowbox.js site

In this code I first import the shadowbox.js file and its style sheet. Next is a short script to instantiate Shadowbox with a few params.

I create an instance of the phpFlickr class, then use the custom key provided by Flickr to access their API. From there it a quick call to the photosets_getPhotos method to retrieve the desired photo set.

I loop the results and use the buildPhotoURL method to build a link to our medium size image that will go in the Shadowbox, and use the same method again to build the thumbnail image. Add a little logic and some break tags to format and we are done.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Gallery example using phpflickr and shadowbox</title>
	<link rel="stylesheet" type="text/css" href="js/shadowbox-build-3.0rc1/shadowbox.css">
	<script type="text/javascript" src="js/shadowbox-build-3.0rc1/shadowbox.js"></script>
	<script type="text/javascript">
	Shadowbox.init({
	    language: 'en',
	    players:  ['img'],
		overlayColor: '#333333'
	});
	</script>
	<style>
		html,body
		{
		text-align:center;
		background:#666666;
		}
		.thumbs
		{
		border: 3px solid #ffffff;
		}
		.thumbs:hover
		{
		border: 3px solid #333333;
		}
	</style>
</head>
<body>
<?php
	require_once("../libs/phpFlickr/phpFlickr.php");

	$f = new phpFlickr("yourKeyHere");

	$setId = '72157617329815254';
	$photos = $f->photosets_getPhotos($setId,NULL,NULL,9,17);
	$i=0;
	$maxCol=3;
	foreach ($photos['photoset']['photo'] as $photo){
		echo '<a rel="shadowbox" href="'. $f->buildPhotoURL($photo, 'medium').'">
		<img class="thumbs" src="'.$f->buildPhotoURL($photo, 'square').'">
		</a>';
		$i++;
		if($i==$maxCol){
			$i=0;
			echo "<br>";
		}
	}
	?>
</body>
</html>

Written by geoff

January 16th, 2010 at 10:52 am

Posted in Development

Tagged with , ,

Adobe BrowserLab

leave a comment

Yet another quick post to share something I found useful. Few things in life are as frustrating as testing your code in every browsers to make sure your page is rendering properly. BrowserLab is Flash based utility site that allows you to view how your page layout will appear in various browsers on multiple platforms. While this sort of thing has been around for a while, BrowserLabs adds a few additional features, such as built in zoom.

With all the talk these days about the future of Flash, it’s nice to see Actionscript being used for something like this. Online tools are probably the most appropriate use of the technology, along with immerse marketing related sites looking to create a certain mood.

For more info on BrowserLab visit the Adobe Labs site.

Written by geoff

January 13th, 2010 at 12:14 pm

Posted in Development

Tagged with

Snippets in Flash Builder 4

leave a comment

A quick post today, wanted to share something that I found useful. Lee Brimelow at The Flash Blog posted an in-progress panel for adding code snippets in Flash Builder 4. It may not work on all machines as is (works perfect for me on Mac OS X 10.6.) As we all know, a solid implementation of this feature has been lacking in Flex up to this point, so this is a very welcome addition.

Snippet panel for Flash Builder 4

Written by geoff

December 7th, 2009 at 10:35 am

Compiling your FlashBuilder project with AsDocs using ANT

leave a comment

I’ve been using Ant more and more lately, I feel like it’s been a huge help to my process. Waiting for FlashBuilder to clean projects and compile was eating up so much time, Ant has sped things way up.

Up to this point, I’d been using it only to move files/directories around, and compile the .swf using mxmlc. Today I thought I’d take a crack at building ASDocs for my current project (a labyrinthine beast of a site left half finished by another developer. ) Got it working ok after some trial and error, so thought it warranted a post.

Below is a slightly modified version of my build.xml. It has targets for compiling the project (main,) targets for moving the non-Actionscript assets to the proper location (copy_static_assets, copy_source_assets, assets,) and targets for deleting old AsDocs and creating new ones (clearDocs, docs.) Replace any generic names I’ve added with your specific files names and location, and you should be set. I’m using a symbolic link to point to my Flex SDK root, the spaces in the path caused it to bust otherwise. A nice post on symbolic links here.

<?xml version="1.0" encoding="ISO-8859-1"?>
<project name="MyProject" basedir="../../" default="main">
	<!-- /usr/local/flex3 is a symbolic link to my flex sdk root folder. The spaces in the path name on my mac were causing some problems  -->
	<property name="flex.dir" value="/usr/local/flex3" />

	<target name="main" depends="assets">
		<exec executable="${flex.dir}/bin/mxmlc">
			<arg line="-target-player=10.0.0" />
			<arg line="-default-frame-rate=30" />
			<arg line="-default-background-color=0xffffff" />
			<!-- generic names for .swc's and other files. replace with your actual file names -->
			<arg line="-library-path+=${basedir}/source/libs/my_project_assets.swc" />
			<arg line="-library-path+=${basedir}/source/libs/my_project_fonts.swc" />
			<arg line="${basedir}/source/src/MyProject.as" />
			<arg line="-o=${basedir}/site/www/MyProject.swf" />
		</exec>
	</target>

	<target name="assets">
		<antcall target="copy_source_assets" />
	</target>

	<target name="copy_source_assets" depends="copy_static_assets">
		<copy todir="${basedir}/site/www/xml/">
			<fileset dir="${basedir}/source/src/xml/">
				<include name="*.*" />
			</fileset>
		</copy>
	</target>

	<target name="copy_static_assets">
		<copy todir="${basedir}/site/www/">
			<fileset dir="${basedir}/site/static-content/">
				<include name="**/*.*" />
			</fileset>
		</copy>
	</target>

	<target name="docs" depends="clearDocs">
		<exec executable="${flex.dir}/bin/asdoc" failOnError="true">
			<arg line="-doc-sources ${basedir}/source/src" />
			<arg line="-source-path ${basedir}/source/src" />
			<arg line="-library-path=${flex.dir}/frameworks/libs/framework.swc" />
			<arg line="-library-path+=${flex.dir}/frameworks/libs/flex.swc" />
			<!-- generic names for .swc's and other files. replace with your actual file names -->
			<arg line="-library-path+=${basedir}/source/libs/my_project_assets.swc" />
			<arg line="-library-path+=${basedir}/source/libs/my_project_fonts.swc" />
			<arg line="-left-frameset-width 310"/>
			<arg line="-main-title 'myproject.com'"/>
			<arg line="-window-title 'myproject.com'"/>
			<arg line="-output ${basedir}/docs"/>
		</exec>
	</target>

	<target name="clearDocs">
		<delete includeemptydirs="true">
			<fileset dir="${basedir}/docs" includes="**/*" />
		</delete>
	</target>

</project>

Thanks to both Chris Colinsky and the Flex 3 Cookbook for pointing me in the right direction.

Written by geoff

November 15th, 2009 at 4:17 pm

Posted in Development

Tagged with , ,

Learning PureMVC

leave a comment

Been keeping busy lately learning the PureMVC framework for a project I’m on. I’m about 2 weeks along, so far I am really enjoying it. The ideas proposed by the framework have been around for some time, but the way the author (Cliff Hall) has implemented them is quite clever. For those new to the MVC pattern, a little background info here. A particularly nice feature of this framework is that it has been ported from Actionscript 3 to several other languages.

A link to the PureMVC site.

I plan to post a small PureMVC demo site and it’s source in the coming weeks.

Written by geoff

November 11th, 2009 at 10:01 am

Posted in Development

Tagged with ,

A couple great Actionscript utilities.

leave a comment

There are a number of external logging utilities available for Actionscript developers. The ability to view your output no matter where your app is located is key to diagnosing issues.

The DeMonsterDebugger is one of the better open source Actionscript utilities out there these days. It has been available for a little while now, but wanted to write something nonetheless. The real time property Inspector/ Editor is priceless. The custom coloring for text is handy as well, been using constants in my app to store colors for model, view, control, and error output. Now I can easily see where things are at a glance. Get it here: DeMonsterDebugger

I have been using the Mr Doob/hiRes Stats class as a simple memory usage tracker (it works great too, get it here: Stats.) Since a basic memory monitor is also part of the DeMonsterDebugger, I might not use this as much moving forward, at least not on the same projects with the debugger.

Written by geoff

October 21st, 2009 at 4:38 pm

Posted in Development

Tagged with

Process/Workflow

leave a comment

There are a number of ways that you can go about building an Actionscript based website. Gone for most are the days of doing it all in the Flash IDE. Found a couple good articles on the subject that I thought I’d share.

How Odopod Uses Flash Builder
Just Another Flash IDE – Flex/Flash Builder Workflow

As for myself, my normal process goes something like this:
- Get graphics from Photoshop and into Flash IDE.
- Set up linkage in Flash for the assets I create and export the file as a .swc.
- Create a virtual host to view the site locally with built in Apache install on Mac.
- Make new Actionscript project in Flash Builder. Add external libraries and .swc(s) for assets.
- Compile from Flash Builder using Ant and mxmlc.

For version control I prefer Versions. I find I use TextMate a lot as well, it’s great for almost every language.

Written by geoff

October 1st, 2009 at 11:22 am

Posted in Development

Tagged with ,

A few thoughts on Augmented Reality in Actionscript

leave a comment

I’ve had a chance to work on a bit of Augmented Reality lately, very interesting stuff. You’ve no doubt seen the many mind boggling things people have come up with this past year.  Thought I’d share a few things I  discovered.

After working with both the FLARToolkit alone and FLARManager, I prefer FLARManager. Not only is it quicker for setting up a basic AR application, the matrix smoothing on the positioning makes a big difference in the quality of the overall experience . Eric Socolofsky is actively working on the project, and every release so far has been another leap forward.

Download FLARManager here.
A good article on FLARManager by it’s author.

Another thing I noticed was that there is a definite relationship between the resolution of the marker you use and the performance of your application. That is to say, my app ran at a much higher frame rate with a 8×8 marker than it did with a 32×32 marker. This makes perfect sense after you crack open one of the .pat files that are used for marker detection. Less numbers to crunch per iteration equals faster performance.

This creates a potential dilemma. If you are building your AR app for a client, they are most likely going to want something branded for their marker, as opposed to simple black squares that work the best for detection. The solution seems to be to design a marker image that makes use of the large solid color areas that the FLARToolkit likes , but still has some nice details that will make the client happy. Then you can set the resolution 16 or 8, and let the detection ignore the details in the marker. I found it helps to design the marker on a grid that’s the same resolution you are using for detection.

A good example of this is the Disney Fantasmic Marker.

UPDATE: Another very good article, this one on custom marker creation.

Written by geoff

July 28th, 2009 at 9:16 pm

Queue dramatic theme music…….

one comment

I’ve decided to act upon the good advice of a few friends and start keeping a blog on my site. It will contain predominantly Actionscript 3 based content, but I’m not above posting reviews of  restaurants / movies / video games I enjoyed. We’ll just have to see what this evolves into.

Written by geoff

June 2nd, 2008 at 12:56 pm

Posted in Uncategorized