Welcome to Phizzpop    Sign in to Windows Live ID | Create a Profile | Help
          
      
Wednesday, August 20, 2008    
Details
Building and Reading Mangas online with XAML

By Don Burnett

I have always loved comic books as a kid. It wasn't until I was an adult that I saw the Japanese versions of comics, as full graphics novels. Now they are making the transition to online as many publications have (including the New York Times Reader).  Now here's a neat way to read Mangas and even create them yourself.

 

The Manga Reader for WPF is really cool and offers a very customizable user experience..

Online Manga Explorer

The Online Manga Explorer allows you to browse online mangas available from community sites such as www.onemanga.com or www.mangavolume.com.

To  find a manga that you are interested in, use the search box in the upper right corner. The list of mangas displayed will be filtered as you type.

Cool UX Features in Manga Explorer:

  • Manual Page Flip

  • Interactive Zoom

  • Zoomed Panning

  • Display Mode (Double Page Mode and Single Page Mode)

  • Page Flip Direction (read right to left or left to right, like a real paper Manga!)

  • In Page Flow

  • Remember Manga (opens your last read manga on startup)

Manga Reader Features:

  • Landscape mode supported for viewing images (make sure a landscape picture is at an even page number. If not, a “filler” page is inserted to fix the page alignment)
  • Image preview of manga files (mga and wmga) in windows explorer for Windows Vista
  • New Panning mode for zoom: better for tablet pc users
  • Combobox button for next/previous page allowing to quickly jump to a specific pages, and for quickly opening the next/previous chapter
  • Also: quickly load next and previous manga(in directory layout).
  • Preloading of images when opening web mangas to inproves page flip performance
  • Fixed snapshot tool bug in single page mode
  • Better memory usage when managing manga images (reader and creator)
  • New special panel for displaying manga info (title, author, etc.), instead of having an entire page for that
  • Load mangas via: drag & drop from Windows explorer
  • Added MangaFox to the list of manga stores (known bug: The category “All” does not display all mangas available. Pick a different category to locate the manga you wish to read.)
  • Download/Load progress in Manga Creator and Manga Reader
  • The new MangaVolume site works with Manga Reader now
  • Handling of mature content warning for One Manga and Manga Fox
  • Ability to import images from one or multiple manga files (mga, wmga, cbz, cbt, cbr, zip, rar, tar) into Manga Creator workspace
  • Tip: Press H to hide the title bar. This feature will be properly supported in the next release.

Upcoming Features:

  • Bookmarks/favorites
  • Better caching of manga thumbs
  • Silverlight support
  • New “browser” like the Online Manga Explorer to quickly read weekly releases.
  • Auto update when new version available
  • Data virtualization (for mangas with a large number of pages) => better memory usage
  • Fix image quality problem when saving images with MC
  • Customizable shortcuts
  • Autohide title bar in fullscreen mode

 

Manga Creator

Wow you can now create your own Mangas! This is a very cool tool for creating pages chapters, assembling image assets all with drag and drop simplicity.

 

Creator Workspace

Manga Creator lets you create and edit MGA and WMGA documents using a graphical designer. You can reorder elements such as manga pages, chapters or volumes by dragging and dropping them to the desired locations.

Importing Web Images

To add a web image to you manga, press W or click the “New Page from Web” sidebar icon. Then, type or paste the designed image URL and select OK to add the image to the workspace.

Editing Manga Info

To change the manga title, author or artist, press I or click the “Edit Manga Info” sidebar icon to bring up a property window. This will also allow you to change the page, chapter or Volume ID based on the selected item.

About Manga Format

1. Supported Image Types-  The following image types are supported: JPEG, PNG, GIF, BMP, TIFF, WDP (HD Photo)

2. MGA (Manga Document Format)

Much like Microsoft Office 2007 documents, MGA manga documents are zip files that have been renamed to the .mga extension, and have the following file structure:

The Manga.xml document in the Content folder contains information about the structure of the manga.

Volume Attributes

Id – The Id attribute is typically the manga volume number, but can also be a volume title. If the value of this attribute is not a number, the prefix “Volume” will not be displayed on the top of manga pages along with this Id. If the value of this attribute is “0”, no volume information will be displayed on the top of manga pages. This attribute is required.
Order – The Order attribute is a number specifying the order in which the volume will be displayed in Manga Reader. This attribute is optional.
IsExpanded – The IsExpanded attribute is used by Manga Creator to save the “expanded” state of the specified volume.

Chapter Attributes

Id – The Id attribute is typically the manga chapter number, but can also be a chapter title. If the value of this attribute is not a number, the prefix “Chapter” will not be displayed on the top of manga pages along with this Id. If the value of this attribute is “0”, no chapter information will be displayed on the top of manga pages. This attribute is required.
Order – The Order attribute is a number specifying the order in which the chapter will be displayed in Manga Reader. This attribute is optional.
Name – The Name attribute specifies the name or title of the current chapter. This attribute is optional.
IsExpanded – The IsExpanded attribute is used by Manga Creator to save the “expanded” state of the specified volume.

Page Attributes

Id – The Id attribute is typically the manga page number, but can also be a page title. If the value of this attribute is not a number, the prefix “Page” will not be displayed on the top of manga pages along with this Id. This attribute is required.
Order – The Order attribute is a number specifying the order in which the page will be displayed in Manga Reader. This attribute is optional.

Page Value

The value of the Page element is the absolute http URL of the image resource for .wmga documents, or the relative URL of the image resource for .mga documents.

The [Content_Types.xml] file is optional, meaning that Manga Reader will be able to open the document if this file does not exist. Saving a Manga using Manga Creator will automatically create this file, for compatibility reasons. This file contains a listing of all resource types found in the manga document.

3. WMGA (Web Manga Document)

Similar to MGA documents, WMGA documents are also zip files. The difference is that there are no resources embedded in the document. Therefore, pages in the manga are based on http links that point to images.

See Volume Attributes, Chapter Attributes, Page Attributes sections above.

4. CBZ, CBR, CBT (Comic Book Archive)

These archives consist of a series of images archived respectively in ZIP, RAR or TAR file formats, with filenames renamed to the corresponding extension (CBZ, CBR and CBT).

Manga Reader and Manga Creator both support opening / importing comic book archives in these three formats.

Download it today and start making your own!

Manga Reader v1.5

Release date: 07/06/08

Click here to download.

Roll your Own Graphical Reader

Use the WPF and now the Silverlight Book Control to create your own graphical "reader" application.. You can find it available over at Mitsu's Blog and the actual project over on CodePlex.

Published Thursday, July 17, 2008 1:09 PM by Don Burnett

Comments

No Comments
Anonymous comments are disabled

About Don Burnett

Don Burnett is a technology evangelist, project manager, interactive designer, and nationally recognized technology blogger specializing in rich media application development for web and desktop. Don's past work for creating, designing, and deploying multimedia applications and products include Disney Interactive, SegaSoft, Universal Interactive, and MediaOne. http://Blog.DonBurnett.com

 

This Blog

Syndication

© 2008 Microsoft Corporation.