Friday, October 17, 2008

Flash Photo Thumbnail Gallery Tutorial

This tutorial shows you how to create a photo gallery, with a shrinking square transition, using advanced actionscript.

This tutorial is divided into the following parts.

1) How the Gallery Will be Created
2) Creating a Mask

3) Adding the Gallery Images
4) Defining the Actionscript Variables
5) Adding & Animating the Masks
6) Adding the Images

Create Flash Photo Gallery With just 3 simple steps(import photos, select a template and then publish SWF file) by Flash Slideshow Gallery.Click here to See Tutorial and Sample.

Creating the Thumbnails With Actionscript

Part 6) Adding the Image & Creating the Thumbnails With Actionscript

Step 16.
In the previous part the box masks were created with Actionscript. In the final part we'll be writing the rest of the actionscript to add the images and create functional thumbnails. So, here is rest of the code explained:

Line 59: The add images function is created
Line 60: A for loop is created which loops while k is below the image total
Line 61 - 62: Each main image in the library is attached to the 'top' empty MC, and assigned to the temporary variable 'm'. The depth variable is increased by 1.
Line 63 - 64: Another instance of each image is then attached to the 'bottom' empty MC, and assigned to the temporary variable 'b'. The depth variable is increased by 1.
Line 65 - 66: Both m and b's position ares then set, so that they're aligned horizontally, in order of number.

Step 17.
Line 67 - 68: Each thumbnail image is then attached and assigned to the variable t. The depth is then increased
Line 69 - 70: It's position is set.
Line 71: Each thumbnails is assigned the position (pos) , that it's corresponding main image should be placeded, when it's pressed.
Line 72: The thumbnail is given an onPress function
Line 73 - 74: newPos is checked to see if it doesn't equal the thumbnails pos attribute, and 'shrink' is checked to see if it's false.
Line 75: If these conditions are met, the bottom MC needs to be moved, so that the currently showing mc can transition out (shrink with squares)
Line 76: Shrink is set to true.

Step 18.

Line 82 - 83: The boxes and images are added
Line 84 - 85: this.onEnterFrame = function(){ } "is a function which will repeatedly run any code we put in between the braces {}, at the frame rate of the SWF file. It's used to check if to shrink the boxes, maskign the top MC.

create flash photo gallery






Step 13.

Line 24: An addBox function is created which will contain all the code involved in adding the individual box MCs to the empty boxes MC, which will be used to mask the top image.
Line 25 - 26: To position the box masks, two FOR loops are needed. One loop is need to position the rows the another is needed to position the columns.
Line 27: With each iteration of the two loops an instance of the box MC is attached to the boxes empty MC we created at the start. Each instance is given the name box plus whatever value depth is. Remember each time an MC is attached we'll be increasing the value of depth by 1. The instance of box is temporaily assigned to a variabled called 'b'. This is so that we can reference is more easily.
Line 28 - 29: Using the temporary variable b, the instance of the box MC has it's dimensions set to the values that were defined earlier.
Line 30 - 31: The box is then is then positioned.
Line 32: The depth is increased for the next MC to be attached on a new level.

Step 14.
Line 36: A reset boxes function is created which will be called once the boxes have finished shrinking.
Line 37: Each box mc is looped thorugh
Line 38 - 39: and resized to equal the original box height and width.

Step 15.

Line 42: Next the shrink boxes function is created.
Line 43: The shrink variable is checked to see if it's true.
Line 44: If it is a loop is created
Line 45: And the boxes are assigned to 'b'
Line 46: Each box is checked to see if their width is higher then 0.
Line 47 - 48: If it is then it's height and width is reduced by the boxSpeed variable.
Line 50 - 51: The width of the box is also checked to see if it is below 1, in which case we'll no longer need to shrink it, so 'shrink' is set back to false.
Line 52: The boxes are reset
Line 53: The top MC's X position is set to equal newPos, whihc is in turn set when each thumbnail is pressed
Line 54: A break is used to stop the for loop.

Create Flash Photo Gallery With just 3 simple steps(import photos, select a template and then publish SWF file) by Flash Slideshow Gallery.Click here to See Tutorial and Sample.

flash gallery for website




3) Adding the Gallery Images


Step 4.
Now it's time to add some images, which I've made 360x280 in size. I'll be adding 5 in total for this tutorial. Drag one of the images anywhere onto the stage.


Step 5.
Convert the first image into an MC called image_0, giving it the same Identifier. Each image will be given a number, so that we can easily reference it with Actionscript later on.


Step 6.
Delete the image_ MC from the stage, add another image and conver it to an MC called image_1, also giving it the same Identifier as it's name. As you can see, from the image below of the library, I've added 4 images and converted them to MC's, and then placed them in a folder called 'images' . You'll need a minimum of 2 images for this tutorial.


Step 7.
Next, add a thumbnail image for each larger image. As you can see I've made the thumbnail have a width of 72, so that 5 thumbnails will line up, and equal the width (360) of the main image


Step 8.
Convert the thumbnail to a symbol called 'thumb_0', giving it the same Identifier.



Step 9.
As you can see again, Ive added 5 thumbnails and converted them to MC's. Delete all the MC's that are on the stage, becuase they'll all be added dymically within Actionscript in the next part.


Step 10.
Next we're going to start writing the actionscript to actually create the gallery. First of all we're going to define some variables. This is done at the top so that they can be changed easily, without having to look through the entire code to change something.


Line 1 - 2: The main images height and width are stored in these two variables.
Line 3: This variable will hold how many rows (and columns) of mask there will be.
Line 4 - 5: The rectangular masks will be referred to as box, so with these two variables the box's width and height are defined by dividing them with the rows.

Step 11

Line 6: A variable to hold the total number of main images that'll be in the gallery
Line 7 - 8: The thumbnail image's height and width are held in these two variables.
Line 9: This variable will be used to hold a spacing value. One use of it will be when we want each main image wo have a 20 pixel gap from the thumbnails.
Line 10: Each MC (movieclip symbol) we attach to the stage needs to be placed on it's own level, so this value will be incremented each time a new MC is attached, so that the next one will be placed on a comepletely new level.
Line 11: This variable we hold the position of the next image to be shown, when a thumbnail is pressed.
Line 12: The box masks will need a speed at which to shrink.

Step 12.
Line 13: An empty MC is created and named boxes which, as the name suggests, will holds all the box masks.
Line 14: Another empty MC is created which will hold the top layer of images
Line 15: The boxes MC is then set to mask the top MC
Line 16: Another instance of the box MC is created, and named as mask. Since we're going to be lining up all the images horizontally, they need to be masked so that only 1 is showing at a time. So this mask will be used to mask the bottom layer of images.
Line 17 - 18: The mask is set to have the same width and height as each image.
Line 19 - 20: The X & Y position of the mask is set so that it is covering the space where we want the image to appear.
Line 21: Another empty MC is created to hold the bottom layer of images
Line 22: The large mask MC is set to mask the bottom MC
Line 22: A boolean variable will stored whether or not to shrink the box MCs


Create Flash Photo Gallery With just 3 simple steps(import photos, select a template and then publish SWF file) by Flash Slideshow Gallery.Click here to See Tutorial and Sample.

Turn photos to flash gallery

Part 2) Creating a Mask

Step 1.
Now that we know how the images are going to be handled, it's time to open up flash and start.







Step 2.
First of all a rectangle needs to be made which will be added dynamically multiple times, and used to mask the image. Use the rectangle tool to create the rectangle of any size and color.







Step 3.
Convert the rectangle into an MC (movieclip symbol) called box, making sure to check 'Eport for Actionscript'. As you can see the identifier will be made to 'box' also. This will allow the adding of the MC dynamically with Actionscript, by refering to it as 'box', which we'll be doing later on. Checking 'Export for Actionscript' will automatically check 'Export in first frame'.


Create Photo Gallery using Adobe Flash

Part 1) How the Gallery Will be Created

Before we open Flash, the way that the images are going to be handled will be explained. First of all 5 large images and thumbnail images will be imported to the library. They will then be attached to an empty MC (movie clip symbol), and positioned sequentially on the stage, as shown in the diagram below.



A mask, the size of each large image, will then be placed on a level above the images. This will allow us to display which ever image we want by moving the empty MC horizontally.

A 2nd sequence of images will then be attached to an empty MC above the mask and bottom layer of images. These images will be used for the shrinking effect.

To create the shrinking effect, a 4th mask layer needs to be attached above the top layer of images. This layer will contain a number of smaller boxes, which we will shrink., when a new image needs to be displayed.

a) below shows the position of each image layer while image '2' is being displayed. b) When thumbnail '4' is pressed, the mask over the top layer of images will shrink and the bottom layer of images will move to display image '4'. C) once the top layer of images has shrunk, It will then move to display image '4', so that it's ready to shrink for the next image.



Create Flash Photo Gallery With just 3 simple steps(import photos, select a template and then publish SWF file).


Related Tutorials:
XML Slideshow
Free Flash Banner Tutorial
Html Photo Gallery
Flash Image Scroller
Flash Slideshow Tutorial
Flash 3D Carousel
Flash Image Rotator

Wednesday, October 08, 2008

Turn Photo to DVD and Share on TV via DVD players

Today in a digital world, lots of people tend to shoot videos with DV Camcorder or cellphone on any occasion and make home movie DVD for keep and share.


As a video enthusiast, I like making home movie and editing videos on my computer. You may think that video editing is just a case of cutting out the footage you don’t want and changing the order. But if done properly, editing can actual enhance your footage and even make it far more enjoyable to watch.


At first, I use Windows Movie Maker which is Microsoft's basic editing program that comes free with all versions of Windows XP. It is a relatively simple free video editing application but offers no tools for burning movie to CD or DVD.


If you need to burn CD/DVDs or prefer a more advanced editing program, check out Wondershare Movie Story on its official website Ourpix.com. I highly recommend it after experiences. What it attract me is its plenty 2D/3D transitions and Ken-Burns effects.

Now, go ahead and download a copy to turn your own DV video to life memories treasure and share with friends and family on TV!

Link to Movie Story Official Website
DVD presents for Christmas
Homemade Christmas Video

Tuesday, October 07, 2008

make slideshow for youtube tutorial

Just have pictures but want to broadcast yourself on YouTube? Sure you can do that by making photo slideshow story movie. This guide helps you to turn your pictures to slideshow with music and share on YouTube step by step and no complicated computer skills needed.

What you need:
1. Digital photos
2. DVD Slideshow Software
3. YouTube ID (Free to register)
4. Favorite music (Optional, as background music for movie)



Step 1. Photoset :
Browse photos and simply drag & drop your favorites to the Story Board and Click “Add Audio” to add background music, also you can add sounds or your own record.


Step 2. Styles :
Preview animated styles first and then double click or drag & drop your selected styles to the Story Board. With 200+ build-in animated movie styles, you can make your photo movie to impress everyone. Also, various theme styles for different occasions such as wedding, kids and movie can meet your special demands.Here I "Add Random Styles" for all slides.



Step 3. Decoration:
To make your photo movie slideshow more funny and lively, adding some adorable elements is absolutely necessary. Here you can add your customized text caption with different text effects, stunning scene effect, animated clipart and sound in flexible timeline.


Gorgeous Intro/Credit animation effects can give people profound first impression. Click ”Intro/Credit” to add it. This software offers different excellent Intro/Credit effects to choose from, just preview and pick your favorite. You can also add your movie information, such as title, director, cast, etc, and set the text effects like movie style.


Step 4. Create :
After you preview the whole photo slideshow and feel satisfied with the effect, select "Create" tab and click "Create MP4". Also video format like "AVI”, “WMV" or "MPEG-2" are supported on YouTube.
Tips: YouTube Upload Tips (Videos saved with the following settings convert the best):
Video Format: MPEG4-4 Movie
Resolution: 320x240
Video Frame Rate: 30fps
Sample Rate: 44100


Step 5. Upload video to YouTube
After you creating the MP4 file, login your YouTube ID, choose “Account" and click "Upload” button, and then select "Upload a video", write down your video title and description. It's better to enter tag for easily searched by others.



Step 6. Finish
Now your YouTube video is ready to share with the world! Show your creativity and happiness right now. Here I share my Tibet travel photo slideshow on YouTube. Comments welcome.


Monday, October 06, 2008

make picture video for myspace tutorial

Want to broadcast youself on Myspace Video but just have pictutes, try to turn your pictures into stunning video slideshow with music and upload for share.

Here is a guide on Ourpix.com about how to do it step by step.

How to make Myspace picture video with music

Have a try!