Actionscript
Highlights
- Website design
- CSS
- SEO
Loading HTML into Adobe Flex using XML
Lately I’ve been working quite a bit with XML and Adobe Flex. Typically these projects load simple text that’s formatted at run-time, but occasionally the loaded data is HTML that’s styled with CSS (how to apply CSS to loaded HTML in Flex we’ll cover in another post). So how do you load HTML into Flex using XML? With a handy section called CDATA.
CDATA is a special type of XML section that allows us to include data in an XML file that we don’t wish to be parsed. In some situations that could be programming code such as JavaScript, but in Flex projects this information could just as easily be HTML.
In this example, we have HTML meant to display a bold “Hello, World” paragraph.
<node>
<![CDATA[<p align="left "><b>Hello, World</b></p>]]>
</node>
All our HTML resides within what I refer to as CDATA “bookends”: “<![CDATA[" and "]]>”. Anything you wish to NOT be parsed by Flex should be placed here. CDATA sections are placed within elements just as you would regular text and basically can include anything you like.
A few further notes on loading and using HTML from XML in Flex:
- If you wish to display HTML in a TextArea, make sure you push the HTML using “htmlText” not “text”
- Flex supports a limited number of HTML tags.
- CSS can be applied to HTML in Flex, but CSS to the extent that most developers would hope for or expect.
Hopefully this clarifies for most people how to include HTML in an XML file you’re loading with Flex. More to come!
Related Posts:
0Highlights
- PDF to SWF viewer
- Flash search and highlight
- Printing SWFs
- Document viewer
Flash PDF Viewer w/Search and Print
The project was to create a tool that could load PDF files that were converted to SWFs and be able to navigate and search through the text. By no means was this an easy task, especially given that it needed to be done in ActionScript 2 (which I hadn’t used in a while).
Printing was a challenge, to say the least. Search was no tea party either, but in the end the blood and sweat were worth the effort. The extra time spent on UX also made things feel much more polished in the end.
Note: Trying to figure out why the yellow highlight doesn’t work with this particular document. Annoying, but c’est la vie.
Related Posts:
0Highlights
- Conversion formulas
- Scientific calculator view
- ActionScript 3
Flex/AS3 Scientific and Conversion Calculator
[Update] Since I don’t have a copy of Flex, I’m not currently supporting this project and am giving away the source code. I’ve not worked on this in a number of years so admitted, I probably won’t remember much about it. Thanks!
A calculator scenario gave me a chance to work with many of the math options in ActionScript 3. Not much more to say!
Related Posts:
2Flash + ASP
Visit
DJ Ekin
Worked on the DJ Ekin website back around 2003 or so and I’m still happy with how well the Flash treatment conveyed Ekin’s outgoing personality. Also the most orange I’ve ever used in a website and all things considered, I think it works. From what I can tell, Ekin is still just as “most connected” as ever.
Roles: Design: web. Flash (AS2), CSS, HTML, ASP (built custom CMS).
Related Posts:
0Marketing Collateral/PDF Customization Tool in Flex (Alpha)
The label on this app is misleading. It neither is in beta nor is for KMG. It is also not for Geeks on Call. This was an alpha version of a product we never quite released called 3cPrintShoppe. It produced PDFs of marketing materials that could be customized online.
This app was intended to be more or less MS Publisher in a browser, but we had a ways to go before things were ready for prime time.
I did all the coding for this and there are many (buggy) features:
- Templates (XML). Predesigned templates could be loaded on demand. All text and images are referenced in the XML, parsed by Flex, and saved again as XML.
- Font uploader. Companies can use any fonts they like. Set in the template and loaded at run-time.
- Rich text editing. Colors, bullets, etc.
- Size/placement/text modes. You can resize the boxes, move them, or just work with the text.
- Zoom. In and out, naturally.
- PDF generation. This requires server side code.
Roles: Design: web, UI. Flex Builder 2, Actionscript 3.
Related Posts:
0Flash/XML site
Visit
Amura Japanese Restaurant
The Amura Japanese Restaurant chain site was a combination of Flash animation, big photos, and XML. All images, text, and much of the structure are created on the fly from XML generated by a content management system and rendered by ActionScript 3. Still satisfied with how robust the outcome was but – and this is how I usually feel – the design could be much more professional, but I was more responsible for the coding in this than the design. But aren’t all projects time capsules anyway?
Roles: Design: web. Flash (AS3), XML, CSS, HTML. Sales and marketing.
Related Posts:
0Highlights
- XML driven Flash map
- Highlights countries with links
- 200+ countries
Flash World Map
Built an XML driven world map a few years back in Flash so a travel website could feature and highlight countries they were running specials in. Links would point to different areas of their site.
Took a few cues from Google maps (as one often does) for the controls. The XML was generated by a content management system and passed country codes and links to the Flash app. Took more time to get the countries matched with the map than anything.
Related Posts:
0Highlights
- ActionScript 2
- Cat invasion
- Collision detection
Maynard vs. The Cats (Flash Game)
The Maynard game came from a request one of my students made a few years back about creating a Flash game around a janitor at his high school. Why not? All the artwork was created my Scott (student) and during our Flash lessons, together we worked out the code. I probably ought to spend some time updating and improving it as it was a lot of fun.
- Make sure your mouse is directly over the movie or the controls won’t work
- Left/right arrows or mouse for movement
- Spacebar to shoot (you can also hold)
- Arrow up to drop a water bomb
Related Posts:
1promotional tool
Highlights
- Play and create connect the dots
- ActionScript 2
- Promotion
Connect The Dots Game and Creation Tool (Flash)
This was originally created as a promotional tool but was never used. On completion, a background image would appear, but those have since been lost and I’ve not yet created replacements.
Each connect-the-dots “page” is created via XML and so could be generated externally. However this version also lets the user create their own pages; saving option is currently disabled since it requires server side code that isn’t available.
Click “New” at the bottom of the game to enter Create mode and follow the on screen guide for controls.