Digital Photo Album

Applicable to eZediaQTI or eZediaMX

For full-color illustrations of these techniques and more, explore the sampler pages that have been posted: http://www.jmadden.info/eZedia-Sampler.htm

There is another type of digital photo album at this site. That project can be found through clicking on this link.

Preliminary suggestion: Any time you use an object of any type in a frame, you should put a copy in a well. To open a well, click on File > New > New Object Well. Hold down the CTRL key and click, hold, and drag the object into the well. When the well gets a gold line in the interior, let go of your mouse. Don’t forget to save your well.

Overview:
The following instructions apply to a class project where students were asked to create a digital photo album. (This the first draft of those instructions. Watch for changes after a couple of uses.) The project contained the photos they had taken earlier. The project also serves as a vehicle to pick up some techniques in eZediaQTI. The following instructions could be used in either eZediaMX or eZediaQTI.  Students were provided with a basic template but were at liberty to create their own. A project well of resources was also provided and those same resources are available for download on this page. Creating additional graphic items in Adobe Photoshop Elements is simple. Just get in the habit of making the background transparent and saving them as PNGs (a graphic file format).

Purpose: The Digital Photo Album project has you take the digital photos you have taken, resized, and manipulated and pull them together in a single project that can be played on any computer or uploaded to the Internet. You’ll learn to: (1) create frames; (2) add navigation; (3) use layers; (4) import graphics; (5) create text objects; (6) create buttons; (7) create GoTo objects; and, (8) add objects to the background.

Instructions:
Before doing anything, go to My Documents and create a folder for this project. Save all of your items into that folder. Stay organized.

1. Have QTI open (that means the program is up and running).
2. Click on File > Open > then navigate to the cd or wherever you are currently saving the Digital Photo Album project. (The 3 frame starter project is provided at this site.)
3. When you see the project loaded, go back and get the Well that goes with this project. (Also available for download on this page.) Click on File > Open and then navigate to wherever the folder is now saved (just in case you copied the whole folder to My Documents). Click on the file and then click on Open. QTI will load the well.
4. The project starts out with 3 frames.

Figure 1 shows the first frame of the photo album project.


5. Frame 1:
a. Click inside the text object at the bottom of the frame and type your name and the date. Delete the instructions in the text object.
b. Drag in the Enter graphic from the well and position it at the bottom in the center of the frame. You then have to add an invisible Button on top of this graphic so that when people click on it, they will be carried to the next frame.
c. Creating a Button Object:
    i. Click on the Button Object in the toolbar. A Button Object will appear in the middle of your frame.
    ii. Double-click on the Button Object. In Title, type in Enter. In Type, click on the more choices arrow and choose GoTo Button. Type in the number for your Table of Contents frame. It should be number two. Just type 2. Leave This Frame Only checked. Uncheck Visible.  Click OK when you have made those changes.
    iii. Stretch the object so that it is big enough to cover all of the Enter graphic. Place the Button Object on top of the Enter graphic.
Problem - Button Object won’t go on top: If you created these in the wrong order, the Button Object might be on the bottom. To change that, select the Button Object by clicking on it and then go to Objects > Layers > Bring to Front.
Movie Available: QuickTime Movie showing process of selecting graphic and then moving it to the back. 1 MB file.
6. Use the navigation buttons at the very bottom of the QTI window on the left to go to the next frame. Next is the 5th button from the left.

Figure 2: The Table of Contents Frame Partially Completed


7. Frame 2 is the Table of Contents
With all of the icons visible on this frame, it can be difficult to see what is underneath. To shut off the icons, click on Objects > Hide Icons. To turn them back on again, click on Objects > Show Icons.
On this frame you have to:
a. Type in the name of each of your pictures.
b. You have to create additional text objects as you will have more photos than is currently indicated on that frame. Refer to your instructions on creating transparent Text Objects (#3 - see the link at the top of this page) or else just select an existing text object and duplicate it.
c. Buttons (the purple, round graphics) have been created for a single column of titles. You will need to create more or drag them in from the well.
Duplication: To duplicate anything on the frame, click on the object, and then press CTRL and the letter D (for duplicate).
Note: If you need a little help aligning objects, use the Align feature in eZedia. Here's a short video clip with audio to explain how it works.
Flash movie showing how to align objects.
d. Once all of your pictures have been placed in the project, you will need to return to this frame and add Button Objects set as GoTo’s that will allow the end-user to click on the button next to each picture and it will take them to that frame. See #5c for instructions on creating the Button Object.
Suggestion: Do the navigation on this frame at the end because people always change their mind on the order of the photos as they go along and then have to come back and make changes. Just keep notes on a piece of paper as to which photo is on which frame and then doing this part will only take a minute.
e. Previous and Next buttons also have to be added to this frame. They are to be placed in the bottom, right-hand corner. Pairs have been included in the well that you can drag into the frame. You are also free to create transparent text objects if you prefer or use something else. We will be creating GoTo Objects at the end of our project to give these graphics “power.” 
Remember: Navigation must be consistent across frames. If you are creating new items, make the objects, position them on the frame and then add them to the well. You will need them on other frames. Also, once you are satisfied with the next and previous objects and their position on the frame, select them and add them to the background.
Adding things to the Background: Click on the object or select a group of objects and then click on Objects > Add to Background.
8. Frame 3 onward  - Adding in the photos
Frame 3 is the start of the master frames for your photo album project. You will be duplicating this frame.
    i. Bring in whatever you are using for Next and Previous. Position them as you did in Step 7. Add them to the background. This is the last time you will have to do that because you will be duplicating this frame and they will be in the background for all other frames already.
    ii. Bring in one of the T of C graphics from the well or create your own object to represent the Table of Contents. This will also be on every photo frame. Giving the user a button to take them to the T of C allows them to use non-linear navigation. They can explore your collection as they like! I suggest positioning the T of C graphic in the lower, left-hand side of your frame - not far from the “stitching.” Add it to the background once you are satisfied with its position.
    iii. The “Stitching” - this is just a simple graphic that you see on Frame 1 and 2. I have not added it to the background. I have left it optional for you to use it or remove it. If you are going to use it on each frame, then add it to the background now so that it will be in the same position on all frames that you will be duplicating.
    iv. With the T of C and Next and Previous and Stitching added to the background, click on Frames > Duplicate Frame. You have just made a copy of this frame and you are now on that new frame. Move back to the previous frame where you will begin to add your pictures. To do so, click on Frames > Previous or move to the little navigation buttons at the bottom on the left and click on the 3rd button from the left.
    v. You can just duplicate all of your frames now to get the number you need or you can do them one at a time. Do not forget to add a frame at the end where you will have links to your NETS and curriculum standards.
9. Adding your pictures
a. Click on the Graphic icon in the toolbar. Navigate to where your picture is located. Click on the file name and then click on Open.
b. Move the photo, resize using the handles, so that it is positioned nicely on the frame. Center the photo so that the frame looks balanced.
c. Type in your title.
d. Add a decoration to your picture if you want. In the well, there are “photo frames” that can be dragged in and placed on top of your photos. They are transparent in the center so they won’t obscure your photo. There are also “shadows”. You can place these UNDER your photos in various ways. They can look like drop shadows or they could be shadows that frame your photos on all sides from underneath. There’s even a clear version of one that is made to look like a glass coating. You can also use the transparency wells in the eZedia Resources folder to add additional interest.

Figure 3 shows one variation of adding graphic accents to the photo frames


SAVE YOUR PROJECT AS YOU GO ALONG! DO NOT WAIT UNTIL THE VERY END! Also, do not try and save this project on a 3 ½ inch disk. You won’t have enough space. The photos will add a great deal of “bulk” to the project. You’ll run into error messages if you try and save it where it can’t fit! The program will feel like you’re trying to choke it.

Figure 4 shows another variation of adding graphic accents to the photo frames


10. Adding navigation power
Everything is now completed in your project except the NETS and Standards. You just have to add in the navigation power. All of your frames from the T of C frame onward have next and previous. We are going to create GoTo Objects (not buttons) to do give these graphic items power.
a. Move to the T of C frame (Frame #2).
b. Click on the GoTo object in the toolbar. A GoTo object will appear in the middle of your frame. Drag it to the bottom, near your next and previous section.
c. Double-click on the GoTo object to open up the object properties.
Title - type in Previous.
Activate - Leave as Mouse Down.
GoTo - Leave as Current eZedia File.
Frame - Change to Previous.
Uncheck This Frame Only. (Because we want this on all frames.)
Uncheck Visible. (Because we don’t want to see this when the project plays.)
Click on OK.
d. Position this GoTo Object over the Previous graphic. Do not have it touching the Next graphic.
e. Make a second GoTo Object - this time for the Next graphic. You can do this by duplicating the one you just made or by repeating the steps you just went through.
f. For this second GoTo Object, change the title to Next, leave everything else the same except for the option under Frame. Change that to Next. Click OK when you’re finished and position it on the frame.

11. Making the Table of Contents (T of C) Interactive
In Step #7, you added graphic icons next to each photo name. We will now make them interactive by adding GoTo objects over top of them. First, grab your list of picture titles and frame numbers that you created earlier.
a. Click on the GoTo object in the toolbar. A GoTo object will appear in the middle of your frame. Drag it to the bottom, near your graphic.
c. Double-click on the GoTo object to open up the object properties.
Title - type in the # of the frame it is to go to or some phrase that will tell you which picture it is going to.
Activate - Leave as Mouse Down.
GoTo - Leave as Current eZedia File.
Frame - Leave it as Specified.
Frame Number - Change that to whatever number is appropriate for the picture you’re doing because that is the frame associated with it.
Make sure This Frame Only has a check.
Uncheck Visible.
Click on OK.
d. Position this GoTo Object over the graphic users will click on to go to the picture they want.
e. Duplicate this GoTo Object and change the title and frame references for each picture or create a new one for each picture reference. The choice is yours.

12. Giving the T of C graphic power
a. Move to the start of your photo frames - Frame 3 - where your T of C graphic
b. Click on the GoTo object in the toolbar. A GoTo object will appear in the middle of your frame. Drag it to the bottom, near your T of C graphic.
c. Double-click on the GoTo object to open up the object properties.
Title - type in T of C
Activate - Leave as Mouse Down.
GoTo - Leave as Current eZedia File.
Frame - Leave it as Specified.
Frame Number - Change that to 2 because that is the frame associated with the table of contents.
Uncheck This Frame Only.
Uncheck Visible.
Click on OK.
d. Position this GoTo Object over the T of C  graphic.

13. Adding in your NETS and Standards
You are going to link the NETS and curriculum standards as webpages. Repeat the same steps that you did for the Hot Potatoes project. The only thing different this time is that you’re going to have to create the Text Object first and then add a GoTo Object - which are actions I did for you previously.

Save your project. Export as a QuickTime movie the same way you did for the Hot Potatoes project. Make sure you are saving everything in the same folder. Otherwise, the links to your webpages for the NETS and Standards won’t be found!

For the Adventurous:
On this project, you used photos. You could also just have easily used video clips or vr’s or sound files. Bring video, vr’s, and sound files in through the 1st icon on the toolbar - the one that looks like a movie clip.

Instead of clicking on the graphic icon to bring in a picture, bring up the folder where your photos are stored using either My Computer or My Document. Click on the middle button that allows you to maximize your window. Resize it so that it only fits along about 1/3 of your monitor (desktop). Simply click, hold, and drag photos from My Documents right into your frame. 

Adding Music - Yes, you can add music so that it plays across a single frame or all frames. Keep in mind that your taste in music might not be that of your viewer. If you add a sound file, also add a control object that allows them to shut it off or turn it down.

Both of the following downloads are around 1 MB each. The project well that was first posted has been changed. It includes all of the bits and pieces, but they have been resized for those people with small displays. The graphics can easily be made larger by dragging on the handles when the graphic is in the QTI frame.

There are 2 frame sizes for the QTI files. As people transition from very small monitors to more spacious displays, the larger frame size is probably preferable. However, as my students have pointed out, some of them are working on small monitors with low resolution. For people in that situation, download the 640x480 QTI file.
Download the QTI file - large

Download the QTI file - 640x480 - small

If you download the 640 x 480 project file, then download this well. Otherwise things dragged in from the larger well won't appear on your smaller frame. They'll be "under the carpet" so to speak and only visible if you expand your frame to get to them.

Download the project well with all of the bits and pieces
Note: In the well, you will not find the "background" for the project. I simply chose a color for the frame and then dragged in the texture graphic from the well and added it to the background. That's what gives this plain frame its textured effect.

Complete video instructions have been done for the students in Flash and QuickTime. You would have to contact me to access those as the files are huge and are not suitable for posting at this time because of how much of our remaining server space it would eat up and the amount of bandwidth that it would consume in the download process. first appears as a navigation item.