Archive for the ‘Adobe Flex’ Category

No Longer Maintaining D&D Character Builder

Monday, April 26th, 2010

I haven’t made any updates to it in a while and I don’t intend to, so I thought it right to make a note about my plans with my D&D Character Builder.

I’m done maintaining it, at least for now.  It is too large a project for me to work on in my spare time.

That being said, the source is available here, released under the GPL version 3.  Feel free to contact me if you have any questions.  I might eventually come back to this project, but since at the moment it’s just sitting there, I thought it proper to make the source officially available.

Facebook Photo Browser: SlickPhoto

Saturday, March 6th, 2010

Ok, so the Facebook folks have cleared up the problems I was having publishing an app I wrote, and I thought I’d do a quick writeup to announce it.  It’s a relatively simple app for viewing your friends’ albums.  I had one main goal:

View all your friends’ photos without having to load multiple webpages 

Facebook is particularly frustrating for me in that every photo is on its own web page.  It’s good because they can load new ads for you, but awful for a person who want to take a quick look through an album.  So I put together an app I named SlickPhoto:

I wrote this app in Flex, which means it’s a Flash app.  Now, it started with a single goal, but I ended up with some features that are worth noting:

  1. Download any Facebook album as a zip file – Good for Facebook stalkers ;)
  2. Slideshows – View any album as a slideshow
  3. Full Screen Mode – Both browsing and slideshows can be viewed in full screen mode.
  4. Link to albums – You can create a link that will load directly into an album you want to view in SlickPhoto.  You can email this link to your friends so they can go directly into SlickPhoto to look at your album.
It’s a relatively simple interface, so you can jump right in by going directly to SlickPhoto, or you can view the application profile before you start using it (although there isn’t much there at the moment).  Note that SlickPhoto, like all my other Flash-based apps, has a form for submitting bugs so if you run into any problems feel free to contact me that way.
Now, if I could just figure out how to add search tags so people can find it easier through the Facebook search interface….

Facebook App Directory, Possible Frustrations

Sunday, February 7th, 2010

So I recently wrote a Facebook app for browsing photos.  You can try it here if you’d like.  It was mostly an experiment to learn about what it’s like to go through the whole process of getting an app into the Facebook app directory.  Well, my app has been “approved”, but I haven’t made a post about it on my blog yet because it still hasn’t actually shown up in the Facebook app directory.  It’s been approved for oh, I dunno, two months now?

I browsed the Facebook dev forums and came across a couple threads about this problem.  This has been going on for a while.  There are posts from the Facebook admins about it being fixed, and replies saying “no, it isn’t”.  This has been going on for quite a while (over a year based on one of the threads).

I find it very interesting that such a popular thing has been broken for so long.  I’m lucky since I don’t have any monetary interest in getting my app on the directory, but I can imagine this being a serious problem for people who make a living on Facebook apps.  Perhaps the higher profile apps get better service and haven’t run into this problem.  I dunno.

At any rate, I thought I’d make a post about this to pass the time while I wait for my app to show up in the directory.  Once it’s up there, I’ll go over the features and make it official.

MM Ticker Browser 0.2

Wednesday, January 27th, 2010

A while back, I posted a tool for researching stock tickers. Well, after that post I went back into the code and added some functionality for saving preferences. Also around that time, my daily stock watching drifted into just checking the indexes, and that code was forgotten… until today!

I got a request for the source code to MM Ticker Browser, and since my subversion repository no longer has the old code, I figured I’d make an official post about it. I never got around to testing or using the preferences code much, so it may have a couple bugs. That’s why there’s a bug reporting interface in it :D.

So here’s what I’ve posted:

Remember, this in an Adobe Air app, so you’ll need to get Adobe Air.

… and just in case you have problems with this version, you can always use MM Ticker Browser 0.1.

Facebook API: Going Full Screen with Adobe Flex

Monday, September 28th, 2009

I’ve recently been checking out the Facebook API and doing some experiments with the Facebook ActionScript API. It’s relatively straightforward to use, but as I’ve found with other Adobe products, is a little lacking in documentation. Using full screen mode is one of those things. If you do a Google search for it, a lot of results talk about how it isn’t possible, but I’ve sorted it out, and here’s what I did to get it working.

First off, you’ll notice on the Adobe documentation that full screen mode is supported only if you’re using Iframe content and not FBML. This is the only place I found where it is indicated that it IS in fact supported. I couldn’t find any example code on the subject.
Secondly, I went through the Adobe tutorials for Creating a Facebook app and then Deploying your Facebook app. Jeanette’s coding style makes me crazy, but the examples are easy to work through.
After the tutorials, you’re 95% of the way there. We have to make two changes, the first is to add support to your Flex app to switch to full screen mode, and the second is to change your canvas page to enable full screen mode.
Changes to your Flex App
You’ll need to add the ability to switch into full screen mode. This is very simple, and is documented pretty well here. What I did was add a button with a handler that set the stage display state:
ActionScript code
private function toggleFullScreen():void
switch (this.stage.displayState)
case StageDisplayState.FULL_SCREEN:
this.stage.displayState = StageDisplayState.NORMAL;
this.stage.displayState = StageDisplayState.FULL_SCREEN;
catch (err:SecurityError)
// ignore

mxml code

<mx:LinkButton x=”534″ y=”4″ label=”FullScreen” click=”toggleFullScreen()”/>

Changes to index.htm
This was the part I found a little tricky. My HTML/JavaScript skills are a little lacking, so I had to do a bit of reading to sort this out.
The index.htm you end up with at the end of the Adobe tutorial allows you to debug your app AND deploy it to Facebook using the same html. This is useful compared to the default html Flex Builder generates, which always opens a second web page to allow the user to log in. This is all good, except the index.htm you end up with uses swfobject.embedSWF instead of the Adobe generated <object> and <embed> and tags people are probably used to. Enabling full screen mode in the Adobe default html template is documented here.
To enable it using swfobject.embedSWF, you have to pass it as an argument to the javascript function. It seems obvious at first, the you’d just set flashVars.enableFullScreen to “true” and be done, but that doesn’t work. The enableFullScreen flag is set in the params argument, not the flashvars argument. So what you started with:

swfobject.embedSWF(“helloUser.swf“, “flashContent“, “100%”, “100%”, “9.0.0″, “expressInstall.swf“, flashVars);
Ends up being:
var params = {};
params.allowfullscreen = “true”;
swfobject.embedSWF(“helloUser.swf”, “flashContent”, “100%”, “100%”, “9.0.0″, “expressInstall.swf”, flashVars, params, false);

That’s the key really. I fought with the parameters a bit before figuring out that I was setting enableFullScreen in the wrong place. I makes sense after looking through the swfobject documentation and comparing it to the index.template.html, but it’s not obvious to folk like me who sometimes struggle a bit with HTML and JavaScript.
Now when you run your app in debug mode or on Facebook, it should switch into full screen mode when you toggle it, rather than doing nothing (as I was having it to for quite a while).

Character Builder 1.3 known issues

Sunday, September 27th, 2009

I’ve gotten a few emails through my issue submission from in the Character Builder, and I thought I’d jot down the current list to keep track of things. I’m not sure when I’ll get to fixing things, but I’ll be sure to post when I do (and the builder will be updated as well). What I’ve got so far are the following problems:

  • Druids begin with three at-will attack powers, but this is not reflected in the builder. For now, you’ll have to put them on your Character Sheet manually.
  • Armor Proficiency (Plate) is missing.
  • Potent Challenge is missing.
  • When manually entering ability scores, you are not given the ability to add stat points if you level up. I may leave this as is, since manual entry was originally intended to be 100% manual.
  • Stats on the final character sheet (PDF) may be incorrect. Make sure you double-check them.
  • On the PDF, it appears that only the 1/2 lvl value is factored into ATT BONUS in the Attack Workspace.
Feel free to post additional issues in the comments section here.

D&D Character Builder Update (1.3)

Friday, August 14th, 2009

Work has been busy these last couple month, but I managed to get my D&D Character Builder updated with the Player’s Handbook 2 races and classes. It might be a little rougher around the edges than previous versions, so I’ve also added a button titled “Got and Issue?” where you can drop me an anonymous email detailing any problems you encounter. Other changes include:

Major Changes
- PHB2 classes and races.
- Submit an issue button. If you find something that ain’t quite right, let me know about it!
- I reworked the skills, feats, and powers page. Make choices on the left, see what you’ve chosen on the right.
- A “to-do” list is available (click the “To-do list” button) that tracks choices you still have to make. If you select on of the listed choices, it will give you more information. If a choice can be made immediately (like for languages), it will give you a little selection box. If not, then you can double-click the choice to have the UI highlight the section you need to make a choice in.

Other Changes
- The code behind the scenes is much more aware of the bonuses you’ve chosen. I spent some time adding code to fill out the character sheet a bit more based on these bonuses. You’ll see modifiers properly applied to your skills based on feats you choose, for example.
- Languages you choose are filled in on the character sheet.
- Changed the name to “builder” instead of “Generator”.
- Powers, feats, and classes are sorted alphabetically now.
- Half-elfs can now choose human feats.
- Added a “license” agreement. This thing is free, but I may as well put it in writing.
- There’s a donate button in the About box now. If you like what you see, your support is appreciated.
- I’ve also added lots more new bugs. Pats on the back to those who find them first.
- If you’d like to use older versions, a link is provided in the Change Log for the version of interest (you can get to the change log from the About box). Previous versions have a “Use this version” link to allow you to go to an older version.

That’s about it. I’d like to sort out a better way to create a character sheet in PDF form, so if anyone has suggestions, drop me a line. XFDF doesn’t seem to be well-supported by Adobe.

Access the new Character Builder (1.3) here.

Web Browser Experiment / Ticker Symbol Power Browser

Monday, June 15th, 2009
I’ve recently been doing a lot of research on stocks. MACD, Bollinger Bands, volume, trend analysis, moving averages, the list goes on. As I’ve been browsing around, I’ve gotten used to one site for one statistic, another for something else, and I’ve ended up with a bunch of sites that TOGETHER give me what I feel is enough information to make a decision about a stock. It’s pretty interesting stuff, but it’s just such a doggone pain to have to open 4 different browser windows just to be able to tell if I’m interested in a stock or not. It takes too long to keep up with, for example, a live chat where people are pointing out ticker symbols to look at.
So I was frustrated with this situation last Wednesday and I decided I’d do something about it. What I came up with is this:

It’s a Multi-Tab, Multi-PAGE Ticker Browser. And since I’m not feeling a snazzy name, MM Ticker Browser for shorter, and MMTB for short. It’s more of a tool for myself than anything, but all the people I’ve shown it to think it’s pretty neat, so I thought I’d package it up in the case anyone wanted to use it. Here’s the rundown:
The General Feature List:
  • It is designed to show you multiple web pages in a SINGLE TAB.
  • It shows you multiple tabs in a single window, like we’ve all grown accustomed to.
  • All window positions, sizes, and scroll positions are saved automatically so it all comes back if you need to restart.
  • SCALABLE windows! If that’s chart is too big, scale it down a bit!
  • All windows are resizable and movable. Web pages can hide their scroll bars to save space once you’ve got your scroll position locked in.
  • You can add multiple notes to each page (really useful if you’re trying to sift through a bunch of tickers).
    Now here’s where it gets tricky,
  • A pseudo-templated window layout. Each ticker symbol you enter will get its own tab, in which it will contain all the same websites for the chosen ticker. This is probably better understood in an example. I’ll show you below.
You’ll need:
What to do:
  1. When you first start it up you get a window like this:

  2. This is the config page, where you specify the URLs for the web pages that show you your ticker information. Incidentally, you also specify ticker symbols here. This page is also used as place you can load up web pages that give an overview of the market, and you can even log some notes for yourself to help remember things.

    If you want to remove something from one of these windows, click it with the mouse and press delete. Any tabs or windows associated with it will be deleted.

    • Local Windows: This is where you enter urls for web pages you want shown on the config page. Paste “” into the text box and press enter. It will add a new window to the config page that loads the google finance main page. You can move it, resize it, and scroll around in it as you need. It’s position, size and scroll position will be saved. try zeroing in on the DOW/S&P/NASDAQ chart in this window. Now click the checkbox in the upper right hand corner. This will remove those pesky scroll bars.
    • Ticker Symbols: This is where you enter the ticker symbols you’re interested in. Each ticker symbols will get its own page of information. Enter “GOOG” in the text box and press enter. Notice the tab that shows up? If you click it now, it won’t have anything on it. That where the Ticker URLs come in.
    • Ticker URLs: This is where you enter the URLs of the websites you use for research. In order for it to work, though, you have to let it know where the ticker symbol should be inserted into the url. For example, I can look at the GOOG ticker at ““, but this URL will be used for every ticker symbol you enter. So you have to replace every occurrence of the ticker symbol in the URL with “{ticker}”. Enter “{ticker}” in the textbox and press enter. Now click the GOOG tab. A window has been added with the google finance webpage for GOOG!

      If you enter another ticker, say MSFT, into the Ticker Symbols list, it will be given its own tab, and it will load up the google finance ticker page for MSFT.

    • You should have something like this now:

  3. Here’s the cool part. On the GOOG tab, resize the google finance window. Now go to the MSFT tab. Your changes are replicated here, and on any other ticker tabs you might have. You’re essentially live-editing a window layout that is applied to each ticker tab.
  4. Charting web sites are just as easy. On the config page, add “{ticker}” (note my usage of “{ticker}”)to the Ticker URLs list. A window for this URL is added to both the GOOG and MSFT tab. You can adjust it, move it around, and lock down the location of the chart.

    But suppose you also like the information at CNBC, “{ticker}“? You’re starting to run out of real estate now. You could go get a bigger monitor, OR you could just scale some of the windows down by right clicking the window header, turning this mess:

  5. using a scaling factor:
    into THIS:

  6. And lastly, should you want to jot something down to help yourself remember a chart trend or date or whatever, you can right click in the background of any tab and click “Add Note Window”. This will plop a note window under your mouse where you can write some text for later. Note windows are note replicated across tabs, so you can add specific notes for each ticker. Add some notes to your config tab, too. I like to track a list of ticker symbols I’ve look at and decided I don’t like.

That the general usage. You’ll also notice some other options on right click menu where you found the scale option
  • Refresh - Just in case you need to do a hard refresh.
  • Reset Position – This move the window back to its original position. If you accidently drag the header off of the page, you can right click the border of a window to show the right click menu, choose this option, and recover your window.
  • Open in Browser – Loads the URL being displayed into a REAL browser. For those time when you just want to go back to a normal web page.
And there are some button in the top right of the main window.
  • Reset Window Positions – If you’ve really lost track of your windows, this will move them all back to the original position. Don’t click this unless you want to have to reposition everything.
  • Clear Everything – Deletes ALL your preferences. Ticker symbols, URLs, notes, all of it. gone forever. Good if you just want a fresh start.
  • Comments or Questions? – Drop me a line through this dialog. Bugs, comments, questions, anything. When you click submit, it will send an email to my special MM Ticker Browser email. I’ll do my best to reply promptly.
  • About – My general about box. There’s also a change log in here, but it’s mostly empty. I’ve used this dialog in another app, and with flash, I can link back to previous versions if you need them. Look for those here if I make and update you hate.
And finally, a few caveats:
  • This is thought experiment turned tool turned thought experiment (yes, I meant to say that) on my part. There is most likely a bit of instability on account of that fact.
  • I suggest not logging into any extra personal websites with this tool (definitely not your online trading account). I don’t know much about security, but my guess is that the browser windows it shows are less safe than normal internet browsers.
  • Since this is written using Adobe Air (flash), its bound to turn into a memory hog if you give it the chance. I don’t usually have more than about 8 or 10 tickers loaded at any one time. Note that each tab only loads when you click on it, so adding a bunch of ticker symbols on the config page won’t do anything until you start clicking on the tabs.
  • And if you see a crash, don’t panic! It automatically saves your preferences every 15 seconds, so you shouldn’t have lost any work.
And once more, for those who scrolled straight to the bottom:
You’ll need:

XML schemas, Excel, and getting what you want

Saturday, October 4th, 2008

In my character generator, there is a lot of data.  There’s races, classes, skill, feats, and powers.  On top of that, they’re not static lists.  Wizards of the Coast (and other people) are always adding and expanding on everything.  With that in mind, I knew I needed to have all that data extensible in my character generator.  XML is the obvious choice, especially since Flex is so good at parsing it.

But how was I to get the data in the PHB into XML in the easiest way possible?  Microsoft Excel and XML Schemas is the answer.  The basic idea is that you enter all your data into Microsoft Excel as a big list.  Then you tell Excel to export it as XML.  That XML is then fed into the Flex app.  
XML schemas tell Excel how to format the XML you export.  With an XML schema, you’re defining the basic format of your XML (in XML, ironically).  There’s an article here that gives a good way to create a simple Xml Schema Definition (XSD) using Excel (see step 6, specifically).  That will give you the schema, and then you can attach that to your Excel spreadsheet and have Excel export XML for you.
But there’s a HUGE caveat.  Excel cannot handle (that is, export, import, deal with at all) XML with a list of lists.  This looks something like this:
  <feat name=”a”>
      <prerequisite name=”x”/>
      <prerequisite name=”y”/>
  <feat name=”b”>
      <prerequisite name=”p”/>
      <prerequisite name=”q”/>
We’ve got a list of feats, each containing a list of prerequisites.  The issue, specifically, is that we have many elements.  Now, if you think about this, it makes sense.  Excel allows you to easily edit a two dimensional array of data.  More than that and it gets complicated.
The solution I went with to get around this (because I require being able to add and remove from various lists of data, and it makes the XML easier to read) is to make use of the really good XML functionality in Flex.  My solution works like this:
1.  enter you data in Excel.  any time you have a list of things, enter them as a single cell and separate each “thing” with a comma.
2.  export to a simple xml format.
3.  feed the xml into a Flex app that takes the XML and converts any comma separated lists to a proper XML list.
A sample of this is here.  My flex app takes a list of feats I exported from Excel (shown on the left side), and then prints the proper XML for me to save to a file (shown on the right side).  There’s now an extra step if I update my Excel spreadsheet, but it’s better than having to edit XML all day long.
Unfortunately, I don’t know of a way to get Flex to do magic things with XML schemas, so the dream app of being able to give one XML format and export another is still off my radar.  Also, you are effectively writing your XML schema in Flex code, so if you need to make a schema change, it’s instead a Flex code change.  This is not necessarily bad.  I feel more comfortable making changes in code instead of in fancy XML schema editors.
Now, I’ve heard that Altova makes a really nice application that can handle lists of lists, but I haven’t tried it (and the price is outside my budget).  Something for next time, I suppose.  For now, I’ve got a “good enough” solution for tricky XML, and it will be easy to update in the future if I need to.

Character Generator update

Sunday, September 21st, 2008

I’ve updated the Character Builder. I added a changelog that tracks the changes I’ve made. It’s accessible from the About box (click the top right button in the app).

I made a fix for the healing surges not showing up, and I fixed a bug that was keeping humans from getting their bonus skill, feat, and power.