I recently created a basic flash site which was never to be used, so I decided to release the source for it here. The site is perhaps not entirely complete, and it doesn’t have many design elements, but anyone is welcome to adapt it as they like, or rip apart the source code to discover the inner workings.

The site supports two menu levels, runs from XML and external HTML content files, and is easy to update.

See site demo here
Download Source

After we released the photoblinds flash header module, I have had a few requests on how we get it to load a random image on every page. We have therefore released a small PHP code snippet which gets a random image from a specific folder. See the examples below:

example_1.php - Loads a random image into a HTML page.
example_2_photoblinds.php - Loads a random image into the photoblinds flash module.

Download: randomimage.zip
Optionally, you can download the photoblinds source where the random image files are included.

Update: Now added optional randomimage script
I have made a flash graphics header effects module which I have called “photoblinds”. It can be used as the header for any website, or as an inline module for displaying some cool effects on an image. Photoblinds loads any external image, and may be integrated into html at any dimensions. It also comes with a handful of settings to control the ‘blinds’ effects. The script is for free and you don’t need to be an expert to use it. Go ahead and and Download photoblinds.zip, or view an example below:

Another example here

Variables:
Variables are forwarded into the flash from the flashvars parameter in html. View the source code in the link above for examples. Below I have listed the default values which come into effect if no custom values are set:

imageamount = 3;
image = “photo.jpg”
mininterval = 1000;
maxinterval = 4000;
minspeed = .2;
maxspeed = 1;
minwidth = 30;
maxwidth = 80;
maxamount = 6;
blur1 = 10;
blur2 = 20;
brightness1 = 0;
brightness2 = 8;
link = false;
window = “_blank”;

Filesize: 1.5 kb
Flash player version: 8
Flash source code version: CS3 (Flash not required to use photoblinds)

Slider is a simple flash photo slideshow that may be embeded into any HTML page at any size. Photos are loaded from a list which is either supplied in a textfile or directly in the html document (flashvars).

The following parameters are used:
photos = Buffalo.jpg,Reindeer.jpg,Gazelle.jpg,Elephant.jpg,Zebra.jpg
interval = 5,5,5,5,5
folder = photos/
defaultinterval = 5
alphadelay = 5
loop = true

The parameters explained: photos = [Sets an array of filenames to be loaded]
interval = [Sets interval in seconds for each photo]
folder = [Default folder for where to load the photos]
defaultinterval = [Default interval in seconds for each photo if not specified in the interval parameter]
alphadelay = [Relative slowness in crossfade transition effect]
loop = [Sets the slideshow to loop if set to true]


In the following example, Slider is using flashvars to pass parameters:
Example 1

In the next example, Slider is using a textfile to pass parameters:
Example 2
textfile

Download: slider.zip (387 kb including examples and source files)

Filesize: 3kb
Flash player version: 6
Flash source code version: CS3
(Flash is not required to use the Slider slideshow)

Thumbnails are reduced-size versions of pictures, used to make it easier to scan and recognize them. There are many ways to create thumbnails, usually by resizing and possibly cropping. This article covers all the options available when resizing a picture to a thumbnail. These procedures are followed by Imagevue (version 2), and mostly all other gallery applications. Also provided are a handful of example parameters to showcase the flexibility of the function parameters, and to speculate on the advantages and disadvantages of each method.

Resize function parameters:

resizetype [resizetobox, croptobox]
keepaspect [true, false]
allowscaleup [true, false]
compression [80] (0-100)
boxwidth [Number]
boxheight [Number]

Resize examples

Below are a few examples which cover most usage of thumbnail resizing or general batch image resizing. In all our examples, we display example results for both landscape- and portrait photos. Recommended methods are in bold:
Resize long size
Resize to width
Resize to height
Resize without keeping aspect
landscape crop
Square symmetric crop
Symmetric wide crop
Symmetric tall crop

Resize function parameters

resizetype

This setting decides what method to use for resizing the image in regards to the boxwidth and boxheight parameters. While resizetobox is focused on keeping the whole image intact and resizing the image inside the specified box area, croptobox is focused towards creating a specified size no matter what aspect the image is in. This is however achived by a combination of resize and crop.

resizetobox

The general idea of resizetobox, is to create an outer boundary limit that the image should fit inside of without loosing aspect or cropping any parts of the images.

croptobox

The main focus of croptobox, is to resize an image so that one dimension fits the box, while the overflow of the other dimension is cut off. The advantage of using this general method, is that all files will get the same dimensions, making them easier to align for a smother layout.

keepaspect

This setting locks the aspect ratio when resizing an image. There are very few cases where one would recommend not keeping the image aspect ratio, but to its defence, its the only way to resize a batch of images to the exact same size without cropping.

allowscaleup

This setting prevents images from scaling upwards. Generally it is recommeneded to keep this setting to false, to avoid images scaling upwards, which will cause nothing else than hugely degraded image quality. An exception may be if it is paramount that all images scale to same size, even if it means that they must scale up.

compression

Set the JPG compression ratio for a resized image. Threshold goes from 0-100, and the higher the value, the higher the quality of the image, but at the price of a bigger filesize also. We generally recommend reltive high quality settings between 75-85.

boxwidth

Sets the bounding box width for the resizing of the image.

boxheight

Sets the bounding box height for the resizing of the image.

Resize Examples

Resize long side

This approach is the most functional and balanced both for thumbnails and batch resizing large images. It creates a balanced ratio between portrait- and landscape images, and filesizes in same range. This method is the same as how most of the standard photo-applications by default batch-resize large photos. The main disadvantage with this approach when using it for thumbnails, is that a mix of landscape- and portrait images will not align smoothly since they most often neither share the same width or height.

Settings:

resizetype = resizetobox
keepaspect = true
boxwidth = 120
boxheight = 120

Methology:

By setting an identical value to both boxwidth and boxheight, the script will find the longest side (horisontal or vertical) and resize this side to the value set in boxwidth or boxheight, while keeping the smaller size in correct aspect ratio.

Examples:

Resize to width

This method creates identical width for all images, keeping aspect by regulating the height. This may cause symmetry for images that are displayed vertically(as above), but will likely result in huge size variations between landscape- and portrait aspects. As in the example above, the portrait-aspect image is much larger than the landscape-style image.

Settings:

resizetype = resizetobox
keepaspect = true
boxwidth = 100
boxheight =

Methology:

By setting boxwidth and leaving the boxheight blank, the script will resize the width of the image to match boxwidth, while resizing the height in proportion to keep the aspect.

Examples:

Resize to height

This method creates identical height for all images, keeping aspect by regulating the width. This may cause symmetry for images that are displayed horisontally(as above), but will likely result in huge size variations between landscape- and portrait aspects. As in the example above, the landscape-oriented image is much larger than the portrait-oriented image.

Settings:

resizetype = resizetobox
keepaspect = true
boxwidth =
boxheight = 100

Methology:

By setting boxheight and leaving the boxwidth blank, the script will resize the height of the image to match boxheight, while resizing the width in proportion to keep the aspect.

Examples:

Resize without keeping aspect

In this method, images are resized out of aspect to a specified boxwidth and boxheight. Generally speaking, there is nothing nice about loosing the aspect ratio of an image, so we dont recommend it. The only advantage of this approach, is that its the only way to resize all images to a specifed size without having to crop.

Settings:

resizetype = resizetobox
keepaspect = false
boxwidth = 100
boxheight = 100

Methology:

Set keepaspect to false, and simply set the required width and height through the boxwidth and boxheight parameters.

Examples:

Landscape crop

This method is perhaps the most subtle and best choice for galleries which mainly consist of landscape-oriented images. It creates all images at indentical size, which will result in smooth and aligned layout. The disadvantage is that it cuts pretty much from portrait-oriented images, but thats why its most suitable for galleries which fully or mostly consist of landscape-oriented images.

Settings:

resizetype = croptobox
keepaspect = true
boxwidth = 120
boxheight = 90

Methology:

By setting boxwidth and boxheight to reflect the general aspect ratio of your images, landscape-oriented images will scale to boxwidth and boxheight with little- or no cropping. Portrait-oriented images, will also resize to specified boxsize, but they will also be cropped to a larger degree.

Examples:

Square symmetric crop

This method is quite stylish and results in a very clean layout. Also it creates a good balance between landscape- and portrait-oriented images. In both cases, images are cropped to a certain degree as to fit in the specified box area. This may be considered a disadvantage to some, but requiring identical size for all thumbnails/images, comes at a cost.

Settings:

resizetype = croptobox
keepaspect = true
boxwidth = 100
boxheight = 100

Methology:

By setting boxwidth and boxheight to identical values, the images will resize and crop to fit inside the box area.

Examples:

Symmetric wide crop

Just to show the versatility of the function, here is an example for creating very wide image/thumbnail-resizes. This approach would surely be used to display images in a more artistic fashion. All images will resize and crop to specified size, which will result in smooth layout. This approach however will result in extreme cropping of portrait images.

Settings:

resizetype = croptobox
keepaspect = true
boxwidth = 150
boxheight = 75

Methology:

By setting a boxwidth much larger than boxheight, you will create a very wide aspect ratio. Images will resize and crop to fit inside the box area.

Examples:

Symmetric tall crop

Another example to show the versatility of the function -Here is an example for creating very tall image/thumbnail-resizes. This approach would be used to display images in a more artistic fashion. All images will resize and crop to specified size, which will result in smooth layout. This approach however will result in extreme cropping of landscape images.

Settings:

resizetype = croptobox
keepaspect = true
boxwidth = 75
boxheight = 150

Methology:

By setting a boxheight much larger than boxwidth, you will create a very tall aspect ratio. Images will resize and crop to fit inside the box area.

Examples:

If you are looking for an application that can create thumbnails from a batch of images, you can try irfanview (www.irfanview.com). Imagevue and many other gallery applications create thumbnails automatically.

The last few days I have been toying around with Flash, Flickr and Flashr, creating a toy-application called Fusr. Sounds like a rowdy bunch, don’t it? In fact, the creative possibilities of combining Flash and the Flickr API are very inspiring. Thanks to Kelvin Luck for creating the Flashr Actionscript wrapper for the Flickr API, simplyfying the procedure.

Fusr is a basic lookup widget to find core details on a Flickr user. I created it because I simply wanted to get the ID and other information from a specific Flickr user in an uncluttered interface. I also used the occasion to explore the Flickr API. Fusr accepts Flickr username, ID(nsid) or e-mail. It also accepts URL parameters. Ex.:
www.xflickr.com/fusr/?data=-gadgetgirl-

Further development of this module is feasible if anyone finds it useful or interesting in any way. I am certainly looking forward to dwell into other flickr toys.

Just a test to check out the “Blog this photo” function from flickr. Its sweet.