Digital Scrapbook - Computer Science Implementation Projects | CSC 411, Study Guides, Projects, Research of Computer Science

Download Digital Scrapbook - Computer Science Implementation Projects | CSC 411 and more Study Guides, Projects, Research Computer Science in PDF only on Docsity!

Digital Scrapbook Ronda Edwards Computer Science 411 Dr. Boris Djokic Dr. Geoff Sutcliffe 2007

Table of Contents

• Proposal
• Design
• Research
• Adapting the Source for the Project
• Providing an Interactive Table of Contents..
• Creating the Automatic Book.
• Creating the Game..
• Testing.
• Feedback.
• The Presentation..
• Instructions for Creating a New Book..
• Conclusion..
• Acknowledgements.

Design Pages  1224 x 792 pixels per two page spread  Each page is 612 x 792 pixels  Center photo or title on most spreads  Smaller surrounding photos  Background to fit either theme of event or visually appealing with photos  Title for event  Decorative items on some pages  Photo editing to enhance photos Book  Instructions page  Table of contents  Two page spread for each event  Each page 300 x 400 pixels  Each spread 600 x 400 pixels  Extra pages for special events such as Christmas party, Def Talent Jam, and Island Styles  Flipping animation for turning to previous and next pages when appropriate corner is clicked or if the user can click and drag the page over manually  Comments appear when user’s mouse hovers over a picture  Photo is enlarged when user clicks on an image  More information about the event when title is clicked

 Captions will show on the edges of the book instead of on the actual pages of the book for better visibility.  Link to Table of Contents on each Page Research After creating a few pages for my digital scrapbook, the next step was research. I searched the internet for examples of what I wanted my book to look like. I wanted to create a book where the user could turn the pages like a real book. I also wanted comments about the photos to appear when the user hovered over the image and for an enlarged version of the picture to pop up when the user clicked the image. Some of the websites I visited are:  http://www.page-flip.com/  http://76design.com/shiftcontrol/index.php/2006/08/22/dynamic-page-flip-v2/  http://www.cartoonsmart.com/page_flip_gallery.html  http://www.oreillynet.com/pub/a/javascript/2004/09/03/flashhacks.html  http://www.flashkit.com/tutorials/Actionscripting/Page_Fli-Vivian-1361/index.php  http://www.erain.com/support/Tutorials/v4/PageTurn/?erain=Mar  http://www.arqangel.com/episodes.html Eventually I found an open source program for exactly what I wanted for the page turning effect. It was created by Macc from Ipari Grafika. The source file can be found at http:// www.iparigrafika.hu/pageflip/. I downloaded the source file and looked over the Action Script code and how everything worked. Once I looked everything over, I began playing around with it in order to customize it for the club. I created a test book with pictures that I have drawn over

The file that I was working from provided two different ways of automatically navigating to pages. One was to go through each page until you reach the target page. The other way was to skip directly to that page. I chose the second method because I felt that it would be more user- friendly. With a lot of pages, having to go through all of the pages to get to a page near the end would be tiring. I saw some books online with the other method, and I did not like waiting as the book cycled through all of the other pages. Also, when a person goes through a real book and locates a page from the table of contents, they do not generally go page by page to get there. They approximate where the page would be and go from there. I figured that if a user wants to go to a certain page, they would want to get there quickly and without interruption. Creating the Automatic Book After reaching a point in the project where the book creation was solely a matter of creating and adding new pages, I began to think of ways to make the project better and more useful. With help from my advisor, Geoff Sutcliffe, I decided to make a book that could flip through the pages automatically. The book has a method that allows the user to skip to a page specified by the parameters. I began by trying to create a button on the existing book that enabled the automatic flipping of pages, but when the page turned, the code for the button was no longer accessible. I then thought about the animation aspect of Flash and the use of frames to display an image for a certain amount of time before changing the image. I made a copy of the book. The next step was to figure out how to make the new book work, what to show, and how to show it. I decided that I wanted to have the book, once opened, show the Table of Contents page for two seconds and progress to the first scrapbook page. I originally had everything show

for three seconds, but switched to two when I felt that it was taking too long. After showing the full page for two seconds, it would show each picture for three seconds. After the last picture was shown, I wanted to go to the next page and continue. I first had to figure out the frame rate. This is the number of frames that are shown per second. For the animation of the page flip, the frame rate was set to twelve frames per second. Therefore I had to place each image on every 24 frames for two seconds and 36 frames for three. I also had to make sure that the image shows on each frame between its original frame and the first frame for the following image so that it will show consistently and so that it will not flash or disappear. On the last frame of the last picture for each page, the command to skip to the next page is made so that it continues showing everything until the end. In this book, the pages can still be turned by the user, but the buttons for the pictures are disabled. Creating the Game Another addition I made to this project is a game. The game consists of two types of questions. There are photo questions and there are trivia questions. The photo questions correspond to the scrapbook. They ask the player to either match the event titles to the correct photo or to select which photo does not belong. This part of the game used the drag and drop capabilities of Flash. I found a tutorial at http://www.video-animation.com/flash_07.shtml and adapted it for my project. I placed four photos on the page and created draggable buttons with the names of the events in the photos. I also created a dynamic text box to display whether the answer is correct or wrong. When all the answers are correct, the game progresses to the next question.

Testing Flash Player Internet Explorer Safari Firefox (Windows) Firefox (Macintosh) Firefox (UNIX) Page Transition

Pages Appear

Smooth Animation

Table of Contents (menu)

Table of Contents (pages)

Comments ^ ^ ^ ^ ^  Expand Photo

Sound ^ ^ ^ ^ ^  Speed ^ ^ ^ ^ ^  Auto Play ^ ^ ^ ^ ^  Game ^ ^ ^ ^ ^ 

Feedback CSC Program Feedback The following feedback was received from four different members of the Filipino Student Association after the general body meeting on March 2, 2007. I asked them to write down what they liked and did not like as well as what they thought should be added, removed or changed. One member wrote:  Very enjoyable!  Some of the pictures should be brightened.  User-friendly Three members viewed the project and commented together. They gave the following suggestions for changes to the design:  Skip pages quicker (select page)  Bigger scrapbook (full screen)  Sound of page turning (have a different one)  More visible caption (different font) I have taken into account these suggestions and have used many of them to improve the scrapbook.

• Physical
  • Easy to take for events promotion
  • Can incorporate memorabilia
• Digital
  • Can be enjoyed by all members at any time
  • Can be seen by people outside the club
  • Automatic mode for easy viewing Demonstration Brief demo of the functions of the book Technology
• Digital Camera
• any camera can work
• PhotoImpact Pro
• any other photo editing software works too
• Macromedia Flash
• Open Source by Macc Automatic Mode
• Goes through the pages and photos automatically like a slide show
• Pages can still be turned manually
• Buttons on photos disabled
• Brief demonstration of the automatically flipping book Game
• Goes along with the scrapbook

• Two types of questions
  • Photo questions
  • Culture questions
• Brief demonstration of the game Conclusion
• Other Applications
• Photo Albums
• Art Portfolios
• Comic Books
• Catalogs
• Electronic Books Instructions for Creating a New Book Flash Basics Stage —the area where you do all designing. Like a sheet of paper. Timeline —allows for animation and the progression of the Flash movie Frames —different images can be placed on different frames to create a movie. They can be linked by buttons or by playing. When playing, the frame rate determines how fast it will play through the frames. Layers —like clothing. Images on higher layers block those underneath them on lower layers. Allows for adding and removing objects without messing up the rest of the rest of the work. Scenes —used to divide a big movie for organization.

• Position the image on the + mark on the stage Export your new page (Library/linkage), and uncheck the box next to "Export in first frame" , You must then copy an instance of the page to the exported items. In scene 1 (the main timeline), go to frame 4 of the layer named exported. You will see a stack of pages from the book. Open the library and click on the page you just added. Drag it onto the stack of images. Add a new line to the main code. This is the only time you will need to edit this code. This will be found on frame 5 in the actions layer of scene 1. Adding pages starts at about line 26. You need to add one of the following lines after the line for its previous page and before the page that follows it: -addPage("PageExportName"); -or- -addPage("PageExportName", true); This is used if you want to allow the user to tear out that page. This capability is not used in this project. In the actions bar for the page (it should say Actions-Frame at the top of the bar. Make sure nothing is selected) click Actions  Movie Control  stop This will stop the page from cycling through the expanded pictures when they are added in the next section. If you do not do this, they will flash when the movie is played instead of popping up when they are clicked.

Always insert pages in pairs (back and front of page). If you do not, one side will be transparent. Hover and Click Effects for Pictures For these effects, I used buttons. All buttons must be placed on page on an even numbered page. This is the page that shows up on the left of the spread. To create a button from an image:

• Select the square tool
• Create a square the size of the picture
• If the edges of the square are set to a different color, they are made separate objects. Either make sure that the outline color is the same as the fill color or click the black arrow tool and click each edge of the square to delete it. (This step is optional. If it is not done, there may be a border around the picture.
• Right click the square and click Convert to Symbol. Name the button and click Button for behavior.
• Double click the button to edit it.
• Change the color to transparent. In the box for color options it should be the second one on the bottom. There are three options for transparency. Two of them are not completely transparent. They make the image lighter and duller. (The color can be changed when you draw the square to avoid this step.) To create the button effects:
• Double click the button

• For actions place the following code: on(release) { _root.gotoPage( page number , true); } page number is the page number of the page that the button will link to true allows for the direct skip to the page
• Copy the Table of Contents image to a page
• Convert it to a button and place the previous code in the actions panel with 3 as the page number
• Copy and paste this button to all pages of the book Variables and Functions:  removedPages is an array that holds the page numbers of pages that have been torn off by the user. This is not used in this project.  page holds the current left page's number. You can start the book on any page by changing this page variable.  canflip controls a page’s ability to flip. Setting its value to false disables flipping  gotoPage (destinationPageNo , skip ) allows for a quick jump to the page number specified by destination. The last parameter, skip, is not necessary unless you want to skip directly to the specified page. In this case, type true for skip. Possible values for destinationPageNo are 0-maxpages. If you want the book to flip through all of the pages between the current page and the specified page you can either set skip to false or you can type the function as gotoPage( destination) and not specify skip.

Making the Book Turn Automatically

• When you first create the book, save the original book to a new file
• On the 24th^ frame of the Table of Contents page add the following code _root.gotoPage(4, true);
• To update the book with new pages after initial creation, open both libraries and drag the pages of the original book into the library for the automatic book and follow the steps for exporting pages and adding them to the code. (skip this step when first creating the book)
• On each page, delete the stop command from the actions panel
• For each page place the first photo to display on the 24th^ frame
• Make sure that all images show on each frame before the next image is to appear
• Place the other photos 36 frames apart
• On the 36th^ frame of the last photo add the previous code to the actions panel, and substitute 4 with the next even number to skip to the next page. Conclusion My role as the historian of the Filipino Student Association inspired me to create a digital scrapbook for the club. Traditionally, the historian creates a physical book; however, this can only be viewed by a few people at a time and only at certain times. There is also an issue of storing the books and lugging the heavy books to promotion events. With a digital book, all members can view the book at any time. The automatic mode can be run like a slideshow at events. Nonmembers can also view the book and learn about the club and our activities. This is