In Photoshop its possible to easily create interactive photo albums or presentations; be it, Html tables to flash picture galleries for the web. A useful feature for creating online portfolios for personal websites or simple products showcase.

Step 1

First off, create a new folder for where all your images will be stored in and name it ‘Web Gallery.’ You could also use Adobe Bridge within Photoshop to source your images. But we’ll be sticking with the first method right now. Launch Photoshop and open a new document Ctrl+N.Go to File>Automate>Web Photo Gallery.

Step 2

In the Web Photo Gallery Dialog box, select the Gallery Styles as ‘Flash – Gallery 1.’ The thumbnail of every other Gallery appears on the right of the Dialog box.

Step 3

For your source files, under Source Images choose the folder you created earlier on when you click on Browse. Locate the folder, as in my case, the folder was stored in C://Documents and Settings>My Documents>Picture Gallery.

Step 4

For where the final output will be saved, click on Destination to locate your prefered folder or create a new folder by clicking on ‘Make New Folder’ and rename it as ‘Web Gallery’.

This is what the directories of where your folders are located would look like:

Step 5

Still within the Web Photo Gallery Dialog box, under Options choose General and the Extension as .html or .htm.

Step 6

Select Banner and type in the Site Name to whatever you want as your title. Fill in the other fields with information required.

Step 7

Choosing Large Images, you’ll be able able to set the size and picture quality of your images. The state of quality of your images determines their download time when they are live on your web server.Under Title Use you might want to check Title and Description or anything else. These options displays additional information on images when click on.

Step 8

For the Thumbnails (that would appear below the main images), set their Sizes to Large and resolution to100 pixels. Now click OK to generate the gallery.

Step 9

The web gallery launches automatically from your default web browser. If Internet Explorer is your default browser, you may encounter a problem.

Here, you’ll be confronted with a security warning restricting the use of Javascripts that the web gallery needs to run. Just click once on the security warning’s tab and on the pop-up that shows up, click on ‘Allow Blocked Content’ to get the flash web gallery running.

Below you have the flash gallery up and running. It also comes with a nice and smooth transition effect when navigating between images.

On the bottom right corner of the web browser window, are some simple controls . For instance, the button with the question mark when clicked on, reveals the metadata or information that you might have added or embedded in your image. Such information could include description, title and soon. These can be set under the Options: Security>Content: Custom Text. Here you’ll find basic text formatting options like font colour, size, type e.t.c.

You can also embed watermarks unto your images for copyright purposes by selecting Security under Options. (Note: the image below is not mine – its a free stock image from
www.sxc.hu. I’m using it for demonstration purposes alone for this post).

Other Customizations:

To add sound to your presentation or gallery, choose an mp3 file of choice and rename it ‘useraudio’ and have it copied. Head on to the directory where the Flash gallery style in use is (you may have to close Photoshop first). This should be inC://Program Files/Adobe/Photoshop CSx/Presets/Web Photo Gallery. Open the ‘Flash-Gallery 1′ folder and paste your mp3 file in there.

If you’re familiar with basic HTML coding, you further customize the outlook of gallery. Opening your ‘Web Gallery’ folder, select and right-click on the ‘Photos’ XML file and choose the Notepad or any text editing application you might have.

Everything editable in this open XML file. We are just going to edit the obvious – that is, the colour elements in the photo gallery.

For the gallery’s Background colour, change “#0F0F0F0″ TO “#FFFFFF” (white), the Banner’s colour to “#000000″ (black); here the gallery title, authors name,contact info and so on is turned to black. Save the file when you’re done.

The result below:

By David Ella Ella

Having a strong understanding of how Flash and ActionScript work is the best way to make outstanding web pages that will draw a lot of attention. Once the basics of each of these applications have been mastered, then the web designer is able to move onto some of the more expert ways to use Flash and ActionScript. Below, we are going to give you a list of 8 Websites To Help Gain The Understanding Of Flash/Actionscript.

flash-game-design.com

This is a tutorial that will walk the user through the creation of a basic flash website. There are a total of 42 steps and each one is finely detailed, with screen captures included as well.

Pixel2Life.com

There are thousands of tutorials available on this site, for everything from 3D effects to Third Party Apps. This site is set up in a simple style that allows for quick perusal through the latest Flash tutorials and the most popular ones as well. Pixel2Life is a great resource for tutorial indexing and searching. Their goal is to make it easy for people to find what they need, by way of tutorials.

ActionScript.org

Using ActionScript and Flash MX to design a simple website is what the purpose of this site is for. It walks through all the steps involved, by using words. There aren’t any steps broken down or screen captures to show the steps, but there are a few boxes with code listed in them. This is helpful in seeing what the screen should say while the site is being constructed.

adobe.com

This site is for learning how to use ActionScript for Macromedia Flash. The tutorial will teach a bit more than what was learned in the Using Flash tutorial and it will also show how to create interactive movies. It is also designed for people who are just beginning to use ActionScript and who want to become more advanced with it. The site states that the tutorial takes about an hour to finish and then has a series of links to the tasks the tutorial focuses on.

kirupa.com

Tutorials for both Flash and ActionScript are plentiful on this site. There is great information on animation, drawing and design, and common Flash tasks. As for ActionScript, all the basics are included on this site. An extensive collection of information dealing with special effects is a great tutorial resource on this site, as well as isometry and game development.

smartwebby.com

When it comes to learning Flash animation, this site is extremely helpful. There are also Flash ActionScript tutorials as well. The tutorials are very easy to follow and perfect for beginners who are just getting acquainted with either of these aspects of Flash. The tutorials include are on; Flash symbols, Flash animation basics, Flash text basics, advanced Flash buttons, Flash sound button, cool Flash effects, and many more.

cbtcafe.com

This is a computer based training site and has many tutorials for learning how to us Flash Load Movie, creating pop-up windows, being able to create a morphing cursor that changes when the mouse goes over it, and even using frames in Dreamweaver-Flash.

flashkit.com

For a list of ActionScript tutorials, this is the site to go to. The tutorials are divided up into two groups; basic and expert. In the basic group, there are tutorials for creating duplicates of objects, reading text files, understanding operators, and how to produce complex expressions in ActionScript. As for the expert group, tutorials can be found that teach how to make objects collide into one another, building an interactive menu, appearing and disappearing objects, and creating mouse trails.

These are only eight of the available resources for finding tutorials on Flash and ActionScript. There are so many more offered online and many more are popping up on the internet all the time. It will take time to learn some of the techniques involved with either of these applications, but creating fantastic web pages will be a breeze. There are plenty of tutorials that use both words and visuals to walk designers through the whole process being explained. Choosing which tutorial to view will mainly depend on how the designer absorbs information best; by reading or through hands-on visuals.

What do you think? Has Flash has ran its course and no longer necessary within web design?

As we do every week, we like to offer a question to our readers that has been previously asked on Answers, this weeks question is: Has Javascript Reached the Point Where Flash is Unnecessary in Web Design?.

You can leave a comment below or you can leave an answer on the original question on Answers.

Answer from Jon Spooner:

What do you think? You can leave a comment below, or leave an answer here: Has Javascript Reached the Point Where Flash is Unnecessary in Web Design?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

Web design is a fairly traditional art, very rarily do you discover a site thats breaks from the conventional and makes you think – WOW! It is the brave and creative designer who breaks away from convention, and truly does use there browser as a blank canvas and creates something original and beautiful.

In today’s news round-up we have collected resources that showcase original, fresh and unique methods of designing a web site. Everyone will take some inspiration from these sites.

50 Superb 3D Flash websites You Must See!!!

This showcase consists of 50 3D Flash websites, that really stand out from crowd. Don’t think of this as just another list – you’ll find endless inspiration from these websites.

50 Superb 3D Flash websites You Must See!!!

WordPress as a CMS: 30 amazing examples

This post is a showcase of 30 examples of WordPress as a CMS, inspiring stuff.

WordPress as a CMS: 30 amazing examples

11 Most Popular Blog Design Styles (With Examples)

They’ve rounded up eleven common design patterns seen throughout blog designs on the web. But, just because they’re commonly seen doesn’t mean they aren’t unique and filled with plenty of individuality and creativity.

11 Most Popular Blog Design Styles (With Examples)

40+ Examples of Horizontal Scrolling Websites

Usually, most sites share the same set-up… In terms of scrolling down, that is.. Most often, they are browsed through vertically. This article focuses on the other variety, hrizontall scrolling. Amazingly, the result is more creative and unique. As a reader, you may find it more entertaining than the usual browsing.

40+ Examples of Horizontal Scrolling Websites

The Beautiful Art of Japanese Web Design

Here is a collection of some beautiful examples of japanese websites for your daily inspiration.

The Beautiful Art of Japanese Web Design

By Paul Andrew (Speckyboy and speckyboy@twitter).

A couple of months ago, I wrote a tutorial on Getting Started with 3D in Flash. It demonstrated how easy it is to use Papervision3D to produce a real time 3D interface within the Flash player. But so much more can be done with Papervision3D and other 3D engines for Flash. Here is a showcase of sites that take the 3D interface and environment to the next level.

The Eco Zoo

Franck Sorbier

MCBD

White Void

Spectra Visual Newsreader

Play > Smart

Wirtualne Centrum Sztuki

Park.seasons

This one is more of an experiment, but I included it because it looks incredible.

Motorola Razr2 :: Gondry’s Dream

Coca-Cola Brasil

Audi RS 6

The Neighbourhood

XX3

Nitro

Karim Charlebois-Zariffa

In this tutorial, you will learn how to build an interactive stack of photos using Flash. This is a great technique to display numerous images in a limited amount of space, and the best part is that it is extremely easy to execute.

Check out the final result. Click on the photos.

Step 1

First, open up a new ActionScript 3 document in Flash, and create three layers: actions, photos, and background. In the properties panel, set the size of your stage. I used 500 x 338 for this example.

Step 2

Our photos need something to lay on, so import a texture to the “background” layer. I chose a nice wood texture.

Select the “photos” layer and import one of your photos to the stage(File > Import > Import to Stage). Before importing, make sure your photos have been resized to fit well on your stage. My photos are 173px x 260px. Select the photo and convert it to a MovieClip(Modify > Convert to Symbol). Make sure that registration point is in the middle and name it “photo1″.

Step 3

Once the image has been converted to a MovieClip, double click on it to view it’s time line. Create a new layer below the one that the photo is on. On this layer, we are going to create a border. Using the Rectangle Tool, create a box that is 20px taller and wider than the photo, and make sure that it is aligned with it’s center.

Step 4

Now lets lift our photo off the table a bit by adding a shadow. To do this, back out to the main time line and select your photo. Next to the properties panel, click on the “Filters” tab and add a Glow filter. Set the color to black and the blur to 10. Now position the photo on the left side of your stage, so there is enough room on the right for it to slide out. Make sure to give it an instance name of “photo1″.

Step 5

Repeat steps 2 – 4 for each of your photos, each time incrementing the number in the name (photo1, photo2, etc).

Step 6

Before we start adding any ActionScript, download the AS3 version of tweener, a class that makes it easy to move things with code. Then extract the “caurina” folder into your projects directory.

Step 7

On the main time line, select frame 1 on the “actions” layer. The first line of our code imports tweener, so we can have access the class. Then we need to define some variables that will make it easy to customize the photo stack later without having to alter the main code.

import caurina.transitions.*;

var photoOriginX:Number = photo1.x;
var photoDestX:Number = photoOriginX + 200;
var speed:Number = .5;
var rotationRange:Number = 10;
var photoCount:Number = 3;
var easeType:String = "easeoutquad";

Step 8

Now lets add two functions. The first is called when a photo is clicked. It moves the photo to the x position that we defined in step 7. It also rotates the photo to a random value.

The second function moves the photo back to it’s origin and changes the depth so that it is on the bottom of the stack. It is called when the first tween is complete.

function photoSlideOut(e:Event):void
{
	e.target.parent.setChildIndex(e.target, e.target.parent.numChildren - 1);
	Tweener.addTween(e.target, {x: photoDestX, time: speed, transition: easeType, onComplete:photoSlideIn, onCompleteParams:[e.target]});
	Tweener.addTween(e.target, {rotation: Math.floor(Math.random()*(rotationRange*2))-rotationRange, time: speed*2, transition: easeType});
}

function photoSlideIn(p:MovieClip)
{
	p.parent.setChildIndex(p, 1);
	Tweener.addTween(p, {x: photoOriginX, time: speed, transition: easeType});
}

Step 9

Initialize the photos by looping through each one and adding the mouse down event and setting an initial random rotation.

for(var i=1; i<=photoCount; i++)
{
	this["photo"+i].addEventListener(MouseEvent.MOUSE_DOWN, photoSlideOut);
	this["photo"+i].rotation =  Math.floor(Math.random()*(rotationRange*2))-rotationRange;
}

That's it. Feel free to experiment with the speed and rotation variables to achieve different types of motion.

Download Example

Some amazing things can be done with images in ActionScript 3. One of these is the ability to encode a display object as a jpeg, and thanks to the JPEG Encoder included in the AS3 Core Library, doing this is actually quite simple. In this article, I will show you how to create a flash file that encodes a movieclip as a jpeg and allows the user to download it to their own computer.

To give you an idea of how this can be used, try out the sketch pad below:

First Things First

Before we get started, make sure to grab the ActionScript 3 Core Library. The Core Library contains several classes and utilities that make it easy to do things such as MD5 hashing, date formatting, and image encoding to name a few. Once you have the library, just drop it into your classes folder and you are ready to go. Now we can import the JPGEncoder.

import com.adobe.images.JPGEncoder;

Encoding the MovieClip

In this example, we are going to assume that our MovieClip of interest is named sketch_mc. In order to make use of the JPEGEncoder, our MovieClip needs to become a bitmap. To do this, we are going to use the BitmapData class. The contructor for this class requires two arguments: width and height. Since we want our jpeg to be the same size as sketch_mc, we use it’s width and height properties. Then by using sketch_mc as an argument, the draw method draws our MovieClip on to the bitmap.

import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

Now that sketch_mc is in bitmap form, we can use the JPGEncoder. When creating a new instance of this class, you can set the level of compression by passing in a number from 1 – 100. Then to create our jpeg, we call the encode method and use our BitmapData instance as the argument. The encode method returns the jpeg in the form of a ByteArray, which is simply an AS3 class that makes working with binary data a little easier.

import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

From the Flash Player to the Hard Drive

ActionScript 3 has done all the work neccessary to turn our MovieClip into a jpeg, but it needs a little help in making it available to download. To make this happen, we will need to post our ByteArray to a server side script using the URLRequest class. Since we are posting binary data, we must set the content-type to “application/octet-stream”. It is also important to note that the file being downloaded will need a name, so we pass that to our server side script as a query string.

import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var jpgURLRequest:URLRequest = new URLRequest("jpg_encoder_download.php?name=sketch.jpg");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = jpgStream;
navigateToURL(jpgURLRequest, "_blank");

Below is the php script to where we are posting our jpeg. I chose to use php for this example, but any server side script will do.

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
	// get bytearray
	$jpg = $GLOBALS["HTTP_RAW_POST_DATA"];

	// add headers for download dialog-box
	header('Content-Type: image/jpeg');
	header("Content-Disposition: attachment; filename=".$_GET['name']);
	echo $jpg;
}

Note: I originally wrote this article for HenryJones.us. Since it was incredibly useful to a lot of people, I decided to make it available to all of the Design Reviver readers.

Download Sample Code

A few weeks ago I wrote a tutorial introducing you to Papervision 3D. The tutorial explains how to create the beginnings of a simple 3D Gallery. If you want a fully functional 3d Gallery, you could do one of two things: pick up where the tutorial leaves off and put in a few hundred hours of development, or simply let us give you one of three copies of Flashloaded’s 3D Wall.

About 3D Wall

3D Wall is a Flash CS3 component that allows you to create engaging and highly interactive 3D environments for images with no ActionScript skills needed. Some of the key features include mouse and keyboard interactivity, depth of field, and external XML file support. With over 60 customizable settings, this component allows you to create an unlimited number of truly unique interfaces.

How to Win

We are giving away three copies of this component. To be eligible to win, all you have to do is leave a comment about your thoughts on 3D Wall or why you deserve a free copy. On June 9, 2008, three random people will be selected from the pool of comments, and contacted by email.

Update: We are extending the giveaway one more week. The new drawing day will be June 16, 2008.