version 10; cleaned up image fit

| 0 Comments

I finally had the time to use the images that I retouched and extended to fit in a single sheet, to replace the images in the animation that were truer to the original photos. The result is a cleaner looking flapbook with believable folds and edges.

Again, as with the other versions, a larger version will fill your screen and is available for examination. The text is readable in the full sized version, though JPEG compression is set fairly high.

single sheet layout

| 0 Comments
All pages laid on a single sheet.

I was curious about how a flapbook would have been commercially produced. One possible method would be to lay all the pages on a single sheet in such a way that by trimming and folding, a complete, functional flapbook could be made from one pass through the press. That doesn't appear to be the way our sample was constructed, but it was an interesting challenge.

The small image above is the final result. What the challenge gave me was an opportunity to open the original skewed photos again, this time giving a bit more importance to cleaning, repairing, and matching edges. The final is also available as a small downloadable pdf that can be printed onto 11" x 17" tabloid stock, trimmed and folded so that a functional flapbook can be made- if only the size of a business card. Though completely unrelated to the original investigation into a method to animate the pages, these new, cleaner images could be used in the animation to replace the images with rough edges.

Another code issue fixed

| 0 Comments

As with the last version, a larger version will fill your screen and is available for examination. The text is readable in the full sized version, though JPEG compression is set fairly high.

With minimal testing, this version seems to behave. The stacking order on the stage is established at run time, and turning a page brings that page to the top. Please try- see if there are issues that need to be addressed and leave a comment.

Flap issue resolved

| 0 Comments

This is being scaled to fit the space. The larger version will fill your screen and is available for examination.

I managed to repair this so that the flaps will continue to work on the right hand page. It was a simple timeline issue- I was removing a movieclip and returning it when I could have left it in place and adjusted the alpha so the code stays intact. What remains to be done is resolving the stack order issue when the user goes to a previous page before going completely through the book.

On a side note, a colleague pointed out a photo on Penn State Live that shows the high quality document camera used by the Digitization and Preservation Department of the Pattee and Paterno Libraries. I wonder what the flapbooks would look like if prepared with images from this device? How much resolution is needed to demonstrate the media engagement? Would two versions make sense- one for the interaction and one to allow close inspection?

Code progress

| 0 Comments

Apologies for another large file.

This Flash animation of Jacqueline Reid-Walsh's photos of the flapbook in Penn State's Rare Books and Manuscripts Room utilizes all of the images of this volume. The code is functional, but still extremely bug ridden. I think the page navigation controls derived from the Kindle are successful, and placing them for access from either side seems genuinely useful. All the flaps are functional, at least during the first pass.

If a user clicks "Next Page" and tries all of the flaps, everything will work. Advancing to the next spread, all flaps will again be functional. The user can advance to the rear cover then return through the book using the "Prev Page" button. One problem is that after one pass, flaps on the right hand pages stop working. Also, pages start turning out of sequence and the best solution is to reload the page and start over.

I think this is solvable.

Video

| 0 Comments

During a recent meeting, a colleague asked if using Quicktime as a presentation mode would be possible. We had originally thought that video would work, but it would provide only a linear path for the user to follow with one point of control—scrubbing the timeline.

As an experiment, I did a screen capture of the Flash file being manipulated and saved it as video for the web. You can play the version above, sized for the blog, and get a sense of the control that would be possible with Quicktime. If you have the Quicktime plug-in, you can also access the larger, 1meg Quicktime file. Actual video of the flapbooks, with actors turning pages, could be shot, but I don't think resolution would be as clear as with digitized assets that are animated. That animation could take the form of frame by frame video, but I think the end result at best would still be a linear progression with little opportunity for interaction.

Image questions

| 0 Comments

In the images above, the first version on the left is taken from an online PDF of an 1818 edition of Metamorphosis; or a Transformation of Pictures, with Poetical Explanations for the Amusement of Young Persons . The middle image is Jacqueline Reid-Walsh's photograph of the same page in the 1814 edition in the Penn State Pattee Library Rare Books Room. Since changing or scaling images between editions would involve considerable expense, changes appear most notably only in the type setting and filigree. The third image above is the same photo after squaring and minor repair. I wonder what sorts of adjustments would be ethical in a project like this?

The PDF version offers researchers online access to what appears to be a crude photostat of legible text and a very poor, 2 bit version of the artfully crafted prints within (compare the PDF and Penn State versions on the left). With the PDF, too, there's no indication of how the pieces fit or worked together.

The 1814 version in Penn State Library's Rare Book Room is complete, and even contains a flap that obviously existed but was not included in the online PDF. Visitors to the Rare Books Room can not only view, but actually interact with the almost 200 year old paper booklet. Jacqueline Reid-Walsh's photograph of the page with Adam can be compared to the same PDF image. It shows some wear, and this raises some questions for me.

As I manipulated Jacqui's photos to square edges so they align without distortion in the Flash animation, it's obvious to me that I could easily remove damaged edges, repair torn pages, lift stains, and even replace text that's known by scholars to have existed. Since the original remains untouched, would it be ethical, or desirable, to repair the folder as the online, animated versions are created? Standard practice with the conservation of paintings is to do nothing that can't be undone. Filled in areas are filled in with neutral tones. How much of an online interactive copy can ethically be repaired? Replaced?

Update: Navigation model

| 0 Comments

As I build the interface to the Penn State Library's nineteenth century flapbook I need to be conscious of established GUI models. Ideally, this thing would sit behind a touch screen that senses which way I flick the pieces. Using a mouse and cursor isn't the same. When the flapbook is open, the individual flipable quadrants "flap" when clicked. Where do you click to turn the page? If I add arrows on the sides (vertical space is limited), do the arrows point to the way the pages turn or the direction traveled through the book? Clicking the left arrow could mean the page turns to the left or it could mean I want to go back. Going back seems to conflict with the idea of clicking to flip the quadrants.

I've been creating and re-creating different models but in the end I have to rely on established patterns. Adobe's Edge uses a bent corner, B&A Mag uses two arrows at the bottom, Preview uses Previous and Next arrows at the top. I'm thinking the Kindle may hold the key; it looks intuitive and will likely be what people expect.

This version is very coarse and exhibits lots of bugs. What does work is the Prev and Next tabs actually turn the pages, the sections still flip, and there's the beginnings of a third spread. The way things work together is a problem: the second spread opens under the first. When the user returns to the first spread, the flaps are no longer clickable. But it shows potential, and that has me excited.

Navigate several pages in this version.
This is a very bug ridden, but promising update.

smaller export

| 0 Comments

This animation is from Jacqueline Reid-Walsh's photographs of a resource owned by Penn State's Pattee Library. The original flapbook can be viewed in the Rare Books and Manuscripts Room in the Special Collections Library.

After some attention to file size and resolution, I exported this version. It still utilizes adjusted images from Jacqui Reid-Walsh's initial photos. The text in the images is as small as I think it should appear- approximately 9 points on screen. The JPEG export if higher than I usually set it- at 60 for this. Sharper photos may allow for better compression, possibly even smaller text.

With file size a concern, and the fact that files embedded in this spot will need to be scaled down to a width of 550 px, I'll provide a link to the file rather than embedding it. It still responds to a click in each quadrant, but the action is a bit faster:

First spread, placed at full size
This is placed in an html document that maintains the files size at it's full 768px X 1024px.
First spread, scalable SWF
This is the same file, but links directly to the SWF, which alows the image to fill the browser screen as the browser window is scaled up or down. Conceivably, a higher resolution monitor would get a larger, though not necessarily clearer, image.

initial observations

| 0 Comments
Photo of the original flapbook.

This represents my initial attempt to layout a full spread in the Flash environment. The interactive Flash file is clickable in each of the four book quadrants, so flaps open and close. This is the desired action for this sort of flapbook. The image is quite large- full size is 800px x 1200. File size is large as well- about 650K. Originally, the Flash file was scaled and embedded on this page, but was so slow to load that I replaced it with an image that links to the SWF.

  • The photos are from faculty snapshots, cropped, skewed, and scaled in Photoshop. Final images will need to be shot or scanned with attention to focus, squareness, and consistent scale.
  • Resolution and the effect on file size is very important. I used images at 200 ppi to allow for clear zooming. Zooming into a badly degraded JPEG would be useless for most purposes.
  • It may help to determine the market: how accurate to what aspects of the files do we need to be? If the final files are to serve archival purposes, it may be important to be able to read font clues from the images as well any thing that may reveal printing and manufacturing techniques. How were the pages cut and attached? How were the images produced- as single images that were cut, or as two images? What reproduction technique was used?
  • Will users need to zoom? How much of the book will need to remain in full view?
  • I tried controlling brightness and shadow through the page flip- it caused the file to play in a jerky fashion. Is the final, smoother result close enough to simulate for users the flipping of real pages? Assume better scanning will allow for clearer registration of sections.
  • These photos were cropped scaled and skewed over imperfect scans. Finished work will need to fit together like an actual pamphlet, and with accurate registration.

Search This Blog

Full Text  Tag

Recent Assets

  • spread01.jpg
  • flapHead.png