{"id":26,"date":"2008-06-09T16:28:16","date_gmt":"2008-06-09T21:28:16","guid":{"rendered":"http:\/\/billdwhite.com\/?p=26"},"modified":"2022-02-22T02:54:38","modified_gmt":"2022-02-22T02:54:38","slug":"my-own-tileui-part-1","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/","title":{"rendered":"My own TileUI &#8211; Part 1"},"content":{"rendered":"\n<p>Ever since <a title=\"Doug's Site\" href=\"http:\/\/dougmccune.com\/blog\/\" target=\"_blank\" rel=\"noopener\">Doug McCune<\/a> first showed what could be accomplished when you combine Flex with <a title=\"APE\" href=\"http:\/\/www.cove.org\/ape\/index.htm\" target=\"_blank\" rel=\"noopener\">physics<\/a> and <a title=\"PaperVision3d\" href=\"http:\/\/blog.papervision3d.org\/\" target=\"_blank\" rel=\"noopener\">3D<\/a> in his <a title=\"TileUI Video\" href=\"http:\/\/dougmccune.com\/blog\/2007\/07\/17\/tileui-demo-video\/\" target=\"_blank\" rel=\"noopener\">TileUI project<\/a>, I\u2019ve been curious in learning how he did it. He hasn\u2019t posted the source yet and rather than wait for him to give up the goods, I figured I\u2019d try to break down what he showed in his demo and replicate it.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"http:\/\/billdwhite.com\/wp-content\/uploads\/2008\/06\/tileui.mov\"><\/video><\/figure>\n\n\n\n<p><br><br>I fought my way through the ActionScript Physics Engine (APE) and PaperVision3D projects that he said he used. &nbsp;I went with the code in the PaperVision3d trunk repository which I think is the 1.5 version. &nbsp;(I would love to know the details of the differences between 1.5, 2.0\/great white, and the effects branch &#8211; all I really found were lots of demos of each but no real summary of where each of these versions is going).&nbsp;After messing with the code in my spare time last week, I\u2019ve come up with a demo. Make no mistake: McCune is Flex bad ass and my TileUI clone has fewer features than his. However, you can select, lasso, group, stack, spiral, drag, resize, unstack, remove and change the perscpective on the tiles below. And best of all, you can view the source. \ud83d\ude42<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><a href=\"http:\/\/billdwhite.com\/wp-content\/demos\/MyTileUIDemo\/srcview\/index.html\">View Source<\/a><\/p>\n\n\n<div id=\"afe-swf-1\" class=\"afe-flash\">Flash Player Required to view this demo.<\/div>\n\n\n\n<p>Keep in mind that I&#8217;ve only been using <a title=\"APE\" href=\"http:\/\/www.cove.org\/ape\/index.htm\" target=\"_blank\" rel=\"noopener\">APE<\/a> and <a title=\"PaperVision3d\" href=\"http:\/\/blog.papervision3d.org\/\" target=\"_blank\" rel=\"noopener\">PaperVision<\/a> for a week and I&#8217;m no expert at physics or 3D (yet). So the source has not been refactored or refined at all. It is a truly a quick and dirty version of <a title=\"Doug McCune\" href=\"http:\/\/dougmccune.com\/blog\/\">DMc<\/a>&#8216;s slick project. &nbsp;Maybe he&#8217;ll release his source and show me how to do this right someday. &nbsp; \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever since Doug McCune first showed what could be accomplished when you combine Flex with physics and 3D in his TileUI project, I\u2019ve been curious in learning how he did it. He hasn\u2019t posted the source yet and rather than wait for him to give up the goods, I figured I\u2019d try to break down\u2026 <span class=\"read-more\"><a href=\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[19,21,25,26,35,36,37],"class_list":["post-26","post","type-post","status-publish","format-standard","hentry","category-adobe-flex","tag-adobe-flex","tag-ape","tag-flash","tag-flex","tag-papervision3d","tag-ria","tag-rich-internet-applications"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>My own TileUI - Part 1 - Bill White<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"My own TileUI - Part 1 - Bill White\" \/>\n<meta property=\"og:description\" content=\"Ever since Doug McCune first showed what could be accomplished when you combine Flex with physics and 3D in his TileUI project, I\u2019ve been curious in learning how he did it. He hasn\u2019t posted the source yet and rather than wait for him to give up the goods, I figured I\u2019d try to break down\u2026 Read More &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Bill White\" \/>\n<meta property=\"article:published_time\" content=\"2008-06-09T21:28:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-22T02:54:38+00:00\" \/>\n<meta name=\"author\" content=\"Bill White\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:site\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bill White\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/\"},\"author\":{\"name\":\"Bill White\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"headline\":\"My own TileUI &#8211; Part 1\",\"datePublished\":\"2008-06-09T21:28:16+00:00\",\"dateModified\":\"2022-02-22T02:54:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/\"},\"wordCount\":300,\"commentCount\":19,\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"keywords\":[\"Adobe Flex\",\"APE\",\"Flash\",\"Flex\",\"PaperVision3d\",\"RIA\",\"Rich Internet Applications\"],\"articleSection\":[\"Adobe Flex\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/\",\"name\":\"My own TileUI - Part 1 - Bill White\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\"},\"datePublished\":\"2008-06-09T21:28:16+00:00\",\"dateModified\":\"2022-02-22T02:54:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/billdwhite.com\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"My own TileUI &#8211; Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/\",\"name\":\"Bill White's Blog\",\"description\":\"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc\",\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\",\"name\":\"Bill White\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"caption\":\"Bill White\"},\"logo\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.billdwhite.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"My own TileUI - Part 1 - Bill White","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/","og_locale":"en_US","og_type":"article","og_title":"My own TileUI - Part 1 - Bill White","og_description":"Ever since Doug McCune first showed what could be accomplished when you combine Flex with physics and 3D in his TileUI project, I\u2019ve been curious in learning how he did it. He hasn\u2019t posted the source yet and rather than wait for him to give up the goods, I figured I\u2019d try to break down\u2026 Read More &raquo;","og_url":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/","og_site_name":"Bill White","article_published_time":"2008-06-09T21:28:16+00:00","article_modified_time":"2022-02-22T02:54:38+00:00","author":"Bill White","twitter_card":"summary_large_image","twitter_creator":"@bill_d_white","twitter_site":"@bill_d_white","twitter_misc":{"Written by":"Bill White","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/#article","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/"},"author":{"name":"Bill White","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"headline":"My own TileUI &#8211; Part 1","datePublished":"2008-06-09T21:28:16+00:00","dateModified":"2022-02-22T02:54:38+00:00","mainEntityOfPage":{"@id":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/"},"wordCount":300,"commentCount":19,"publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"keywords":["Adobe Flex","APE","Flash","Flex","PaperVision3d","RIA","Rich Internet Applications"],"articleSection":["Adobe Flex"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/","url":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/","name":"My own TileUI - Part 1 - Bill White","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/#website"},"datePublished":"2008-06-09T21:28:16+00:00","dateModified":"2022-02-22T02:54:38+00:00","breadcrumb":{"@id":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/billdwhite.com\/wordpress\/2008\/06\/09\/my-own-tileui-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/billdwhite.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"My own TileUI &#8211; Part 1"}]},{"@type":"WebSite","@id":"https:\/\/billdwhite.com\/wordpress\/#website","url":"https:\/\/billdwhite.com\/wordpress\/","name":"Bill White's Blog","description":"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc","publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314","name":"Bill White","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","caption":"Bill White"},"logo":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.billdwhite.com"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":2,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":2086,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/26\/revisions\/2086"}],"wp:attachment":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}