...

View Full Version : how the hell they did this ?



umen242
08-03-2010, 08:33 AM
hi
i need to build somekind of book editor when i was browsing the web
i found only one place that doing it here :
http://www.tikatok.com/starters/createYourOwnBook#

i don need to do it fancy as they did it but something like this ..
how the hell they did this ?

Rowsdower!
08-03-2010, 02:18 PM
Mostly, this is how they did this:

<script type="text/javascript">
var imageBase = '/images/';
var loadData = eval(({"width":8.5,"height":11,"pages":[{"type":1,"pos":1,"moveable":false,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0,"top":0,"width":1,"height":1,"lock":0,"content":"Click here to add the cover image"},{"type":"text_title","content":"Create Your Own Book","color":"rgb(0,0,0)","fontSize":0.037878787878788,"fontStyle":"normal","fontWeight":"normal","textAlign":"right","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.090909090909091,"lock":0},{"type":"text_author","content":"by You","color":"rgb(0,0,0)","fontSize":0.02020202020202,"fontStyle":"normal","fontWeight":"normal","textAlign":"right","left":0.11764705882353,"top":0.75,"width":0.76470588235294,"height":0.1,"lock":0}],"hint":"This is the front cover of your book. You can edit the title or click on the background to add an image.","lock":0},{"type":1,"pos":2,"moveable":false,"editable":false,"bg":"rgb(255,255,255)","elements":[],"hint":"This is the back side of the cover. It's always a white page.","lock":2},{"type":1,"pos":3,"moveable":false,"editable":false,"bg":"rgb(255,255,255)","elements":[{"left":0.11764705882353,"top":0.22727272727273,"width":0.76470588235294,"height":0.68181818181818,"type":"locked_text","content":"Create Your Own Book<br\/><br\/><div style=\"font-size:53%\">Your Name<\/div>","color":"rgb(0,0,0)","fontSize":0.056818181818182,"fontStyle":"normal","fontWeight":"bold","textAlign":"right","asIs":true}],"hint":"This is the title page and cannot be removed. Click the page to change the book title.","lock":0,"isTitle":true},{"type":1,"pos":4,"moveable":false,"editable":false,"bg":"rgb(255,255,255)","elements":[{"left":0.11764705882353,"top":0.63636363636364,"width":0.64705882352941,"height":0.22727272727273,"type":"locked_text","content":"Text and graphics created by author Copyright &copy; 2010 you. All rights reserved.\n\nLayout design, book template and other graphic elements Copyright &copy; Tikatok LLC. All rights reserved.","color":"rgb(0,0,0)","fontSize":0.015151515151515,"fontStyle":"normal","fontWeight":"normal","textAlign":"left"}],"hint":"This is the copyright page. Don't put anything here. The page is automatically added by Tikatok.","lock":2,"isCopyright":true},{"type":3,"pos":1,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"This book is dedicated to my friends and family","color":"rgb(0,0,0)","fontSize":0.04040404040404,"fontStyle":"normal","fontWeight":"normal","textAlign":"center","left":0.25,"top":0.25,"width":0.5,"height":0.4,"lock":0}],"hint":"The dedication page is where you can add a message to someone important to you, or someone you couldn't have written the book without.","lock":0},{"type":3,"pos":2,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"","color":"rgb(0,0,0)","fontSize":0.03030303030303,"fontStyle":"normal","fontWeight":"normal","textAlign":"left","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0}],"hint":"Use the beginning of the story to introduce the characters and setting. Who is the story about? Where and when does the story take place?","lock":0},{"type":3,"pos":3,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0,"content":"Click here to add an image"}],"hint":"The first image should pull the reader into the world of the story. You could draw the setting, the main character, or both.","lock":0},{"type":3,"pos":4,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"","color":"rgb(0,0,0)","fontSize":0.03030303030303,"fontStyle":"normal","fontWeight":"normal","textAlign":"left","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0}],"hint":"Now you really get the story started by introducing a problem: a task that the main character must finish, or a thing he or she wants but can't have, or maybe a villain who the hero must stop.","lock":0},{"type":3,"pos":5,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0,"content":"Click here to add an image"}],"hint":"With this image, try to show how difficult the main character's task is. Make it look almost impossible!","lock":0},{"type":3,"pos":6,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"","color":"rgb(0,0,0)","fontSize":0.03030303030303,"fontStyle":"normal","fontWeight":"normal","textAlign":"left","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0}],"hint":"Now we are in the middle of the story. Is the character any closer to the goal? What new things are blocking the way, and how will the hero overcome them? Maybe another character can offer help?","lock":0},{"type":3,"pos":7,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0,"content":"Click here to add an image"}],"hint":"Are there any new characters or new places in your story? You can draw them here. If not, draw whatever you think is most important.","lock":0},{"type":3,"pos":8,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"text","content":"","color":"rgb(0,0,0)","fontSize":0.03030303030303,"fontStyle":"normal","fontWeight":"normal","textAlign":"left","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0}],"hint":"We're getting close to the end of the story! Will your character win? How will he or she do it? It's all up to you!","lock":0},{"type":3,"pos":9,"moveable":true,"editable":true,"bg":"rgb(255,255,255)","elements":[{"type":"place_image","left":0.11764705882353,"top":0.25,"width":0.76470588235294,"height":0.5,"lock":0,"content":"Click here to add an image"}],"hint":"Draw what happens next.","lock":0},{"type":9999,"pos":11,"moveable":false,"editable":false,"bg":"rgb(255,255,255)","elements":[{"left":0.1,"top":0.3,"width":0.8,"height":0.4,"type":"locked_text","content":"The back cover is reserved for your “About the Author” information. Parents and adults will be given the chance to add an author bio and photo when the book is purchased.","fontSize":0.04,"color":"rgb(98, 98, 108)","fontWeight":"normal","fontStyle":"normal","textAlign":"center"}],"hint":"","lock":0}],"book":"create-your-own-book","title":"Create Your Own Book","starter":58,"description":"Create a book using the hints provided at the bottom of the page.","sizeId":1,"ssid":-1,"tags":"","others":"","perm_lock":false,"perm_visibility":6,"perm_comment":6,"perm_print":6,"age_group":0}));
var saveURL = '/book/saveRemote';
var uploadURL = 'http://www.tikatok.com/cgi-bin/upload.pl';
var uploadErrorURL = 'http://www.tikatok.com/studio/getUploadError/sid/';
var uploaderURL = '/flash/uploader.swf';
var tokenURL = 'http://www.tikatok.com/studio/getUploadToken';
var remoteLoginURL = 'http://www.tikatok.com/user/loginRemote';
var sparkGalleryId = false;
var libUpdateURL = '/studio/libraryRemote';
var previewURL = '/book/printPreview';
var returnURL = '/create';
var friendsURL = '/friends/friendsRemote';
var searchURL = 'http://www.tikatok.com/studio/searchCommunityRemote';
var publishURL = '/buy/book';
var shareURL = '/book/alertParent';

</script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/error.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
<script type="text/javascript" src="/js/pageedit2.js"></script>


Then they have some CGI file(s) handle the results from this editor. Copy these files and the base page's HTML and you can get a local copy running in no time (for the front end, that is).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum