« Mobile Web! | Main | Google Talk sysreqs »
March 14, 2007
Markup to blood'n'guts
Markup to blood'n'guts: If you can read XML, and haven't really figured out Flex yet, then check out the short chunk of markup in the extended entry here. You can see the header, the styles, some simple button scripts and layout information, and then an assignment for six PNG files. Got it? Straightforward, right? Great. Now go check out the top link, for Ely Greenfield's Anatomy Book. That simple XML file is what creates the 3D book. You can edit the XML, compile it to SWF with the free Flex 2 SDK, and make your own, easy-peasy. The hard work is packaged up in Ely's "Flexbook" component -- all your XML has to do is invoke it -- browse the gallery to see different ways to use it. If you've only got five minutes, then watch this video where Ely shows it off to Mike Chambers. This is phenomenal stuff -- high-end multimedia effects packaged up as components and available to anyone who's comfy with markup. Even better, this work is already instantly viewable by the majority of consumers today, whatever their browser, whether they're on Mac Win or Linux. If you haven't "gotten" Flex yet, then please do look at that little bit of XML, and compare it to the final presentation -- this exactly shows why so many people are so excited about Flex 2.0!
(I trimmed the license info and replaced angle-brackets with square-brackets. --jd)
[?xml version="1.0" encoding="utf-8"?]
[Application xmlns="http://www.adobe.com/2006/mxml" xmlns:l="*" layout="absolute"
xmlns:controls="qs.controls.*"
creationComplete="initTimer();" xmlns:containers="qs.containers.*"
]
[Style]
FlexBook {
color: #000000;
textRollOverColor: #000000;
border-thickness: 1;
border-style: solid;
border-color: #222222;
page-slope: .3;
active-grab-area: page;
page-shadow-strength: 3;
curve-shadow-strength: 5;
auto-turn-duration: 1500;
transparency-depth: 999;
}
Application {
color: #F1F1CC;
textRollOverColor: #FFFFFF;
backgroundGradientColors: #000000, #282828;
backgroundColor: #282828;
}
SuperImage {
border-thickness: 0;
border-style: none;
}
[/Style]
[Script]
[![CDATA[
import mx.core.UIComponent;
private function next():void
{
if(book.currentPageIndex+2 [ book.pageCount)
book.turnToPage(book.currentPageIndex + 2);
}
private function previous():void
{
if(book.currentPageIndex ] 1)
book.turnToPage(book.currentPageIndex - 2);
}
private function initTimer():void
{
}
]]]
[/Script]
[Button label="Prev" click="previous()" fillColors="[#f47a00, #ff0000]" fillAlphas="[1.0, 1.0]" color="#ffffff" fontWeight="bold" fontSize="14" horizontalCenter="-266" bottom="10" /]
[Button label="Next" click="next()" fillColors="[#f47a00, #ff0000]" fillAlphas="[1.0, 1.0]" color="#ffffff" fontWeight="bold" fontSize="14" horizontalCenter="265" bottom="10" /]
[controls:FlexBook id="book" y="47" width="748" top="40" height="600" horizontalCenter="0"
animateCurrentPageIndex="true"
showCornerTease="true"
edgeAndCornerSize="150"
itemRenderer="qs.controls.SuperImage"
itemSize="halfPage"
]
[controls:cover]
[Image source="@Embed('assets/bookCover.PNG')" width="374" height="600" /]
[/controls:cover]
[Image source="@Embed('assets/book1.PNG')" width="374" height="600" /]
[Image source="@Embed('assets/book2.PNG')" width="374" height="600" /]
[Image source="@Embed('assets/book3.PNG')" width="374" height="600" /]
[Image source="@Embed('assets/book4.PNG')" width="374" height="600" /]
[Image source="@Embed('assets/book5.PNG')" width="374" height="600" /]
[Image source="@Embed('assets/book6.PNG')" width="374" height="600" /]
[/controls:FlexBook]
[/Application]
Posted by JohnDowdell at March 14, 2007 02:16 PM
Trackback Pings
TrackBack URL for this entry:
http://weblogs.macromedia.com/mtadmin/mt-tb.cgi/8480