Website designed and implemented for American Program Bureau. Integartes flash content and video with html, all styled with css. Mock-up designed and approved with photoshop; built and implemented with dreamweaver (html/css) and flash. Visit the live site at American Program Bureau.
APB are the guys who organize public speakers, whoever you saw speaking at the last graduation or other ceremony was probably done through the American Program Bureau. They have connections! Many many people, from movie stars, to famous writers, to nobel peace prize winers! So for your next party, give them a try. They had a really old website from about 1999 or so. I was involved with rebuilding it! I did most of the html/css design and flash/actionscript. They just launched the site this week, so I’m just celebrating with this post!
The original site was hard to navigate and horrible to look at…
These are the mock ups, all html/css and the we pushed it into drupal for content management.
APB had the final say on the finishing touches. It came together, although I was suprised that they opted to put so much movement on the page. We set it all up so all speakers have images and videos on their page all in the custom player we built for them… but then they go and embed a youtube video on their homepage… go figure. It came a long way though. Go Web 2.0! Visit American Program Bureau.
Social Bookmarking master site built for StomerNet SMARTS (Social Marketing Traffic Secrets) members for easy social bookmarking. Minimalist design for clear presentation of organized sortable data. Implemented javascript (jquery) libraries for sorting and paging tables, javascript used to control visibility of elements on the page. Very simple and organized design, but still contain loads of information.
In flash you can have text areas that are rendered as html. You can also apply formatting styles to this html. This will show a simple example on how to apply css to html text in flash. I’ll do a simple anchor tag style to show you the ropes. We’ll style a link to be underlined and then when you hover or mouse over it, we’ll change the color. It’s a design style that is widely used online in html, but flash doesn’t natively do it. As a matter of fact, flash doesn’t even natively underline links.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import TextField.StyleSheet; myHTMLText = " <h1>HTML Text (sample header)</h1> Here is some <em>sample</em> <strong>html text</strong> "+ "filling a text box <a href="http://blog.circlecube.com">this link to circlecube</a> and example headers"+ "<h1>Header h1</h1><h2>Header h2</h2>"; //create and initialize css var myCSS:StyleSheet = new StyleSheet(); myCSS.setStyle("body", {fontSize:'15',color:'#000066'}); myCSS.setStyle("h1", {fontSize:'25',color:'#000000'}); myCSS.setStyle("h2", {fontSize:'19',color:'#000000'}); myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'}); myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'}); myCSS.setStyle("b", {fontWeight:'bold'}); myCSS.setStyle("em", {fontWeight:'bold'}); //ensure html support and apply css to it myHTML.html = true; myHTML.styleSheet = myCSS; myHTML.htmlText = myHTMLText; //resize the textbox to exact fit the text in it //myHTML.autoSize = "left"; |
open source flashhtmlcss.zip
Add this to the list of things I should have already known!
I’ve got an html enabled text box and was trying to devise a way that I could have a hyperlink anchor tag not link to a webpage but actually do something flash. It didn’t seem possible, and I looked through all the different html css combinations I could think of. I finally resorted to trying to use some component like Deng or FlashML. FlashML had a smaller footprint and seemed to do more what I wanted, so I started investigating it. To my dismay, the support for it was few and far between. I found an older version that came with an example file and then a newer one with some documentation but no example and I found no examples any where else. So Lee, if you ever read this, some new examples could be nice. In the documentation I was reading about a functino called AddASFunction and the example html line was very interesting:
1 | <a href="asfunction:doSomething, startFrame">link</a> |
I started looking through the rest of the documentation to find this asfunction use. But all it had was:
The href attribute can include the asfunction string which allows the link provided by the anchor to call a function in Flash. More of this can be found within the addASFunction definition in this help document.
I knew I was on to something, asfunction. So a quick google search and I found the official doc! I was shocked that I had the tool to do this the whole time! Well, shocked and feeling like an idiot for never having heard of it before. I knew it could be done somehow, but had no idea that it was already a feature of htmlText in flash! So now that you know my embarrassing story, I’ll let you in on the secret.
In flash, you can allow html text within a text area. You either set the text html property as true with actionscript (my_txt.html = true;) or click the ‘Render text as HTML’ button in the properties window of the text area. You cannot enable html text on static text areas however. You can have links and various html elements (but not full html). Usually links have a url in the href attribut of the anchor tag, but flash will read a special value of ‘asfunction’ which specifies that an actionscript function is to be called rather than a url. The correct syntax is asfunction followed by a colon and then the name of the actionscript function to be called, optionally followed by a comma and a possible single argument to be passed to the specified function (href=”asfunction:functionName,argument”).
In this example I’ve got an html enabled text box with 4 links. The first is a standard link (I hope you know what that does). The next link calls an actionscript function with asfunction. The third link sends a single argument to another function. And the last link sends multiple arguments to yet another function. Wait! Multiple arguments? I thought I said only one was supported, well this example shows how to send multiple arguments disguised as a single param and parse them. It’s pretty simple actually.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | import TextField.StyleSheet; myHTMLText = "Sample text in an html enabled text box. "+ "Here's a normal link to <a href='http://blog.circlecube.com' target='_blank'>circlecube</a>! "+ "And some more links that don't go anywhere, they call functions in actionscript. "+ "<a href='asfunction:clickLink'>Click this one</a>, "+ "to see the actionscript function called from the html text box. "+ "<a href='asfunction:clickWithArg,Click this too'>Click this too</a>, "+ "and see that the actionscript function you're calling can have an argument passed to it. And "+ "<a href='asfunction:clickWithMultipleArgs, one,two,three args'>click me three and four</a> "+ "to see a way to send multiple arguments from your htmlText. "+ "Also, one last example of what not to do "+ "<a href='asfunction: clickWithArg, arg with preceding space'>Click for nothing</a>"; //create and initialize css var myCSS:StyleSheet = new StyleSheet(); myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'}); myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'}); myHTML.html = true; myHTML.htmlText = myHTMLText; myHTML.styleSheet = myCSS; //function to be called from html text function clickLink() { giveFeedback("Hyperlink clicked!"); } //another function to be called from html text, recieves one argument function clickWithArg(arg) { giveFeedback("Hyperlink clicked! Argument: "+arg); } //a simple trick to allow passing of multiple arguments function clickWithMultipleArgs(args) { giveFeedback("Hyperlink clicked! Multiple arguments passed: "+args); argArray = new Array(); argArray = args.split(','); for (i = 0; i < argArray.length; i++) { giveFeedback("arg "+i+": "+argArray[i]); } } function giveFeedback(str) { trace(str); feedback.text += str +"\n"; feedback.scroll = feedback.maxscroll; } |
1 2 3 4 5 6 7 8 9 10 11 | Sample text in an html enabled text box. Here's a normal link to <a href='http://blog.circlecube.com' target='_blank'>circlecube</a>! And some more links that don't go anywhere, they call functions in actionscript. <a href='asfunction:clickLink'>Click this one</a>, to see the actionscript function called from the html text box. <a href='asfunction:clickWithArg,Click this too'>Click this too</a>, and see that the actionscript function you're calling can have an argument passed to it. And <a href='asfunction:clickWithMultipleArgs, one,two,three args'>click me three and four</a> to see a way to send multiple arguments from your htmlText. Also, one last example of what not to do <a href='asfunction: clickWithArg, arg with preceding space'>Click for nothing</a> |
My interactive design tutorials, critiques, techniques,
technologies, rambling and especially playground.
from Twitter shared from reader from delicious from last.fm
