Archive for August, 2009
A Few Ways of Getting Data From PHP Into Flash
by Charles on Aug.28, 2009, under Software
An Example of a Flash image viewer inside html
I have recently been working on a web project that requires getting data from a database and loading it into a flash application that is embedded within a php-based web-page. My weapon of choice for this project has been including the data in a flashvar inside the embed code. There are two other methods that I wanted to highlight in this article as well. So to summarize I will be highlighting the following methods of getting data into a web-embedded flash application.
- Use the server-side language to place your data inside a flashvar in the embed code
- Have flash do a URLRequest to a server-side script that returns straight xml/plaintext..etc
- Have flash do a URL Request straight to a html page and parse the html!
Using the server-side language to place your data inside a flashvar
Because a server-side languages like ASP or PHP runs before any of the client side scripts of a web-page are loaded, you can use it throughout a page to insert data wherever you want; even in the <head> section of the html. So what I am doing in the latest web project I am working on is using a php function to print a large chunk of database extracted text directly into the embed code. Let’s take a look at the embed code. I am using the popular swfobject script too.
<script type="text/javascript">
var flashvars = {};
flashvars.photoDataInput = "<?php echo( $TrailController -> Get_XML_For_Flash() );?>";
var params = {};
var attributes = {};
swfobject.embedSWF("FlashImageViewer.swf", "myAlternativeContent", "800", "560", "9.0.0", false, flashvars, params, attributes);
</script>
The magic part is down in the script that includes the “FlashImageViewer.swf”. See the line that is “flashvars.photoDataInput=”<?php echo( $TrailController -> Get_XML_For_Flash() );?>”;” This function inside of my php script will actually print out a HUGE string of xml that I read into my flash application then cast to xml. Lets view the source of the page so you can see what I mean:
In the source I have highlighted the xml that php is printing. An excerpt is: “<VRTrail><config><photos><singlePhoto><path>http://localhost/g2OCTAAug2009/g2data/albums/Wyoming/Independence_Rock/Media/Location/Ind_rocktouristsIMG_7260.jpg</path><caption>Vi”.
So how do we get this inside of the flash application? Inside of the main class of the flash image viewer I have a function that loads the flashvars variable:
private function loadFlashVars():void {
var tmpObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
if( tmpObj["photoDataInput"] != undefined) {
PhotoXML = XML(tmpObj["photoDataInput"]);
}
}
See how I am casting it to XML? I can then use the great xml parsing in Actionscript 3 to take care of loading the photos!
Have Flash do a URL Request to a server-side script that outputs straight xml
This is a fundamental principal of how Asynchronous JavaScript programming (AJAX) works on the web. You can also use flash to do it as well. However, if you do it this way, search engines wont have an opportunity to index your content.
Have Flash do a URL Request Straight to a html page and parse the html
Based on my previous work in SEO, and from what I have read, it really seems like this is the best way to load data into flash on the web; although it can be a bit annoying at times. Let me give you an example too. On the In Pursuit of a Dream Movie site, the “Now Showing” page actually uses this technique to load the show times! Take a look at the flash site:
In Pursuit of a Dream Now Showing Site
You’re going to need to disable meta redirection to look at this. Now, take a look at this URL: http://www.octa-trails.org/In-Pursuit-of-a-Dream/Now-Showing.html If you happen to stumble on this page through a search engine, you’ll be auto-redirected to the index where the flash application is. Now, how do we parse the html in Flash?
The secret is to actually transform the html into XML! You can do this by removing everything above and below the body tags. This is the Actionscript 3 function that I use to parse the html on the now showing page AFTER I have extracted everything between the html <body> tags.
/*
* DATE: 7/13/2009
* AUTHOR: Charles Palen
* NAME: parseForNowShowing
* DESCRIPTION: Call this to parse for the Now-Showing.html page. Inserts all the parsed items into the array
* Now showing page has the following html format
* <h2>March 12-14, 2010
Great Western Film Fest</h2>
<h3>Wrangler Hall
23 Fordham Street
Somewhere, Ohio 01772</h3>
<a href=”http://www.bostonproductions.com”>Visit website for more info</a>
*
*
* <h2>October 25, 2009
7:30PM
WGBH – American Experience</h2>
<a href=”http://www.fileplanet.com”>Visit website for more info</a>
*
* May or may not contain a h3, h2, AND link
*/
private function parseForNowShowing(_InputString:String):void {
var convertedXML:XML = new XML(_InputString);
// These get used over and over as we parse
var MainHeadline:String;
var OptionalSubHeading:String;
var OptionalLink:String;
var OptionalLinkURL:String;
for each(var container:XML in convertedXML.div) {
// Blank everything for each round
MainHeadline = “”;
OptionalSubHeading = “”;
OptionalLink = “”;
OptionalLinkURL = “”;
for each(var heading:XML in container.h2) {
MainHeadline = heading.text()[0].split(”\r\n”).join(”\n”);
}
for each(var subHeading:XML in container.h3) {
OptionalSubHeading = subHeading.text()[0].split(”\r\n”).join(”\n”);
}
for each(var link:XML in container.a) {
OptionalLink = link.text()[0].split(”\r\n”).join(”\n”);
if (link.attribute(”href”) != “”) {
OptionalLinkURL = link.attribute(”href”);
}
}
var TmpTextField:TextField = new TextField();
TmpTextField.selectable = false;
TmpTextField.embedFonts = true;
TmpTextField.antiAliasType = AntiAliasType.ADVANCED;
var HeadlineFormat:TextFormat = new TextFormat();
HeadlineFormat.size = 12;
HeadlineFormat.bold = true;
HeadlineFormat.font = HeadingFont.fontName;
HeadlineFormat.color = 0xFFFFFF;
var SubHeadlineFormat:TextFormat = new TextFormat();
SubHeadlineFormat.size = 9;
SubHeadlineFormat.color = 0xFFFFFF;
SubHeadlineFormat.font = SubHeadingFont.fontName;
var OptionalLinkFormat:TextFormat = new TextFormat();
OptionalLinkFormat.size = 9;
OptionalLinkFormat.color = 0xFFFFFF;
OptionalLinkFormat.font = SubHeadingFont.fontName;
var currentSize:int = 0;
// Append and format the main headline
if(MainHeadline != “”) {
TmpTextField.appendText(MainHeadline);
TmpTextField.setTextFormat(HeadlineFormat, 0, TmpTextField.length);
}
// Append and format the Optiona SubHeading
if (OptionalSubHeading != “”) {
currentSize = TmpTextField.length;
TmpTextField.appendText(”\n” + OptionalSubHeading);
TmpTextField.setTextFormat(SubHeadlineFormat, currentSize, TmpTextField.length);
}
//Append and format the OptionalLink
if (OptionalLink != “”) {
currentSize = TmpTextField.length;
TmpTextField.appendText(”\n\n” + OptionalLink);
TmpTextField.setTextFormat(OptionalLinkFormat, currentSize, TmpTextField.length);
}
HoldingArray[0].push(TmpTextField);
HoldingArray[1].push(OptionalLinkURL);
// If the element had a link make it clickable
if (OptionalLinkURL != “”) {
addLinkClickListenerToItem();
}
/*
trace(”—– ROUND ————”);
trace(”Main HL:” + MainHeadline);
trace(”Optional HL:” + OptionalSubHeading);
trace(”Optional Link:” + OptionalLink);
trace(”Optional Link URL:” + OptionalLinkURL);
*/
}
// Parsing finished notify people data is ready
notifyDataIsReady();
}
Flash UIScrollBar Doesn’t Scroll Text
by Charles on Aug.06, 2009, under Software
I have had the pleasure of spending the last few weeks working on the Official Movie Site of In Pursuit of a Dream(IPD). IPD is a documentary that Boston Productions is working on that will be released later this year concerning the preservation of the California and Oregon trails. There is a section of the site called the “Trail Journal” that has photos, video, and a lot of text. I had to be able to scroll text that was being dynamically loaded. I decided to use the Flash CS4 UIScrollBar component, but quickly became frustrated with it, because it seemed like no matter how much text I had, the scroll bar would never link to the text field.
A Test program Using the UI Scroll Bar
I started another project and just tried to get a text box to scroll. In the image, the UIScrollBar is “mySb”. It is being linked to a textfield named “tb” inside a movieclip “mcHolder”.
Well that worked.
After a lot of fooling around, I discovered that the trick is to insert/update the dynamic text, then set the scrollTarget every time only AFTER you update the text. The UIScrollBar knows how much text is in your text field and it simply won’t scroll if it doesn’t think it needs to. That’s why you need to set the scrollTarget every time you update the contents in the textfield.
A Skinned UI Scroll Bar is on the right next to all the text
