Simplyprofound.com

Moving the Blog - Please Update Your Feed

dave.nospam@nospam.simplyprofound.com (dave) — Sat, 10 Jan 2009 15:39:00 -1200

I'm moving my blog to www.davidortinau.com. The new design is courtesy of Kerry Layton, and what is there now is really just the tip of the iceberg with regards to the vision I have for it. Those who know me know I'm all about results and hitting deadlines, so I'm not one to belabor the project. Today, I felt the site was in good enough shape to launch. And isn't it the beautiful thing about the web, that it's so organic and easily changed. Please take a look and I really covet your feedback.

I'm working to bring over all the articles I've written here, so this site will stay as is until that's complete. All new content is going to be on the new site.

And feel free also to follow me on twitter. I follow more than a few people that have no clue who I am, and I've been completely enriched by peeking into a small window of their day to day lives as purveyors of digital cuisine. Oh, and the trash talking, xbox nonsense, and bizarre stuff is welcome distraction that often leaves me in tears.

CASA Lib Now Available for Actionscript 3.0

dave.nospam@nospam.simplyprofound.com (dave) — Sun, 14 Dec 2008 17:59:00 -1200

Perhaps a lesser known framework for building Flash projects, CASA Lib (formerly CASA Framework) is a nice package of helpers and loose structure for constructing your actionscript world. CASA Lib is the ongoing work of Aaron Clinger and Mike Creighton, both previously working together at Odopod.

I've worked on a couple of projects with Mike and seen his use of CASA Lib first hand. Mike does really nice work, and on that merit alone I'm taking a long look at how CASA Lib can help me.

I've used Cairngorm in Flex and goofed around with EasyMVC and PureMVC. For Flex, Mate is another one out there that seems to be getting more and more buzz. There is a LOT of information about frameworks for Flex and Flash out there, but not a ton of consensus or guidance from what I've seen. Finding best practices for developing Flash/Flex is a real chore, not that it's ever easy in any technology given how opionated developers can be.

CASA Lib is really something completely different. I think with my current understanding I would characterize it more as a loose framework built with a bagful of the most frequently used helper methods for things such as loading xml data, destroying instances, event handling and other tasks.

Check it out and let me know what you think.

New AlivePDF Video on Adobe.tv for Creating PDFs From Flash and Flex

dave.nospam@nospam.simplyprofound.com (dave) — Sun, 14 Dec 2008 17:50:00 -1200

I've written previously about using AlivePDF to generate PDFs from Flash using just AS3. Statistically, that has been one of the most popular posts I've written.

This Adobe.tv episode is hosted by Thibault Imbert himself as he walks us through a high level intro to AlivePDF and then leads us through creating a PDF. Enjoy:

Flash PrintJob Produces Blank Pages: Player Version Woes

dave.nospam@nospam.simplyprofound.com (dave) — Wed, 10 Dec 2008 13:47:00 -1200

Highlights:
- PrintJob prints blank pages from player MAC 9,0,115,0, works fine in MAC 9,0,151,0
- Adobe Updater does NOT check for Flash Player updates
- Latest Flash CS3 Player package does not include the latest player builds
- Flash player updater updates browser players only, not Flash CS3 players
- Cannot locate the player being used to Test Movie
- Adobe expects you to update and manage player versions manually.

PrintJob Craziness
This week I found myself losing hair over PrintJob. Printing in Flash has never been a fool-proof proposition, but I know how to print from Flash. I've done it before and the code isn't complicated. Especially when introducing dynamic content with text and images, printing can be a trick, but this was ridiculous.

From Flash CS3 I got blank pages. The same code tested in Flash CS4 produced text, but no image. Yet, the same thing on Windows printed perfectly!

Why? Player versions.

It's the Player Version Dummy
Turns out, I have a whole MESS of Flash Player versions floating around on my machine as a result of installing Flash CS3, Flash CS4, Flex 3 and browser plugins.

But it gets more interesting. What I then realized in a "moment of duh" that my problem was not code, but bugs in player versions, I began rediscovering how Flash managed player versions. Actually, it's how Adobe expects me to manage player versions.

To see what version your browser is running, check out Aral Balkan's useful site http://www.playerversion.com. The page tells you what you're running and what the latest build versions are.

I wanted to know what was being used when I did a "Test Movie" in Flash CS3 and CS4. So, I built a little movie that just displays the player version. It's a single frame with a text box. Here's the code:

import flash.system.Capabilities;
var flashPlayerVersion:String = Capabilities.version;
output_txt.text = flashPlayerVersion; // where output_txt is a dynamic text field

I found that my Flash CS3 install was way behind the latest build version at 9,0,115,0.

Get the Latest Version
I ran the Adobe Updater to see if I would get anything newer. Nope. Adobe Updater does NOT update Flash Player versions for release or debug.

The latest versions can be found and downloaded here: http://www.adobe.com/support/flashplayer/downloads.html

Latest builds are:
10.0.12.36
9.0.151.0

Archived player versions can be found here: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14266&sliceId=2

I first downloaded and ran the updater for Intel-based Macs, but the 9.0.151.0 player was nowhere to be found on my machine. Instead it only updated my browser version to MAC 9,0,151,0 (Debug player).

I then downloaded a package of players for Flash CS3 Pro (http://www.adobe.com/support/flash/downloads.html#flashCS3). This includes player 9,0,124,0; also not the latest build which can only be downloaded as debug version 9,0,151,0 standalone player.

The CS3 player package includes a read me that informs us that the way Flash handles the current player being used by the Flash IDE is a manual process left up to the developer. It would be nice if this was a drop down in the properties or the IDE where we could select the target version; like selecting the framework in Visual Studio.NET.

The players are kept in the application sub-directory called "Players". Within "Players" there is a Flash Player app. This is the player used when playing local, standalone content and content in the IDE (Test Movie?).

I tried to Test Movie and this player is definitely not being used. I cannot locate that player anywhere, so I can only assume it's baked into the IDE(?). Anytime I Test Movie I get player 9,0,115,0 no matter how many reboots and copying of players to locations.

Then there are 2 subfolders called Debug and Release holding copies of those players. To have Flash use one or the other, copy it to the main Players folder. Again, I tried. That doesn't work for Test Movie, but does seem to work for Debug Movie.

On my machine I currently have:

Firefox MAC 10,0,2,54 (Debug player)
Flash CS4 MAC 10,0,2,54
Flash CS3 MAC 9,0,115,0
Standalone Flash Player MAC 10,0,12,36
Flex 3 MAC 9,0,124,0 -- Flex
Flex 3 MAC 10,0,12,36 - Flex

IE WIN 9,0,124,0
WIN 9,0,115,0 (note, this is the same build version that does NOT work on Mac)

What Else Am I Missing?
Now I'm wondering if there are updates to the core actionscript classes and/or compiler. If anyone knows of a way to easily switch between target player versions in the Flash IDE, let me know. Or where the Test Movie player is for real.

Flash CS4 Compile Errors with No Details

dave.nospam@nospam.simplyprofound.com (dave) — Wed, 03 Dec 2008 08:04:00 -1200

Flash CS4 has been fairly stable despite a few crashes, but this issue drove me nuts for a while.

When compiling (publishing or testing) a movie, Flash would tell me I have X number of compile errors, but the Compile Errors window was blank. Despite knowing with fair certainty that I didn't have an error, the compile errors would persist until I closed Flash CS4, re-opened and compiled the movie again, this time error free.

I finally realized what I was doing to cause this behavior and can thus reproduce it. Start publishing a movie with an error or twenty, then Stop the publish before it completes. Fix the error and re-publish to see the same number of compiler errors and no detail.

Restarting Flash CS4 is the only resolution I'm aware of at this time. Has anyone else experienced this?

Additional Tips to Optimize Flex SWF Filesize

dave.nospam@nospam.simplyprofound.com (dave) — Sat, 29 Nov 2008 08:08:00 -1200

I wrote previously about Flex 3 Optimization and SWF Filesize. Recently I have come across some new (to me) techniques to both reduce total swf filesize for Flex MXML applications, and improve the user experience. I thought it might prove useful to summarize those here.

1) Separate out the core Flex framework code

To do this, go to Project > Properties > Flex Build Path > Library Path. Change the "Framework linkage" from "Merged into code" to "Runtime Shared Library (RSL)". This will take that framework code and create 2 separate files, removing that weight from the application swf. In my case those files are:

framework_3.0.0.477.swf
framework_3.9.9.477.swz (this file is an Adobe signed version for greater authenticity/security)

The Flash Player will only load the framework if the local system doesn't already have the framework file loaded from a previous application.

Before Filesize: 753739 bytes
After Filesize: 288632 bytes

2) Separate out common code libraries

When using common code across modules of the application, you don't want that code redundantly compiled into each swf (assuming the application will have multiple swfs). So, just as in the previously example the framework was compiled separately as an RSL, we can do the same for our own libraries of code.

The first step is to copy that code to a new project and compile it as a SWC. A SWC is best described as a package or archive of files. Actually, you can rename a SWC file to a ZIP file and view the files.

1) Create a new Flex Library Project.
2) Copy your code into the src folder of the new project.
3) Open Project > Properties > Flex Library Build Path and select the folder to compile.
4) Build the project. If you have an dependencies, you'll need to add those to get this code to build without error.

Now you can add this Library Project in your application project. To do so, remove the folder of code now resident in the library. Then go to Project > Properties > Flex Build Path > Library Path and select Add Project. Choose the library project and you're done. Build to make sure your project still works.

At this point, that code is still being merged into your application swf. To get this code separated return to the Library Path dialog and expand the library to view the "Link Type". Click Edit and change the type to RSL. Now the library will be loaded only once when it is required, and subsequent swfs will not need to load it.

After Filesize: 187349 bytes

3) Lazy Loading Modules

Flex Modules, like Applications, are classes that can be compiled into separate swfs and then loaded when needed using the Flex ModuleLoader component. The ModuleLoader only loads the external swf once, and only loads the swf when called. So, the initial swf filesize can be drastically trimmed and the load spread across multiple swfs loaded as the user requires them or as the developer decides to buffer load them in. Clearly this most benefits larger applications.

Basic Steps to create a Module
1) Identify a section of your application that you can separate out.
2) Add a new module mxml by going to File > New > MXML Module.
3) Copy your code from the application to the module file.
4) Add a ModuleLoader component into the vacated space where the module goes in the application, the only required property is the url of the compiled module swf.
5) Refactor your code within the module as necessary.

That's it. The main swf size will shrink and you have effectively optimized.

Here are some useful Adobe documentation links regarding modules:
Creating Modular Applications: http://livedocs.adobe.com/flex/3/html/modular_1.html
Writing Modules: http://livedocs.adobe.com/flex/3/html/help.html?content=modular_3.html
Loading Modules: http://livedocs.adobe.com/flex/3/html/help.html?content=modular_5.html
Compiling Modules: http://livedocs.adobe.com/flex/3/html/help.html?content=modular_4.html

I've probably completely glossed over some foundation Flex information. I think the above URLs and related information provide decent guidance, and with the information above you can likely find some new terms to google that'll lead to other useful blogs and resources. That's how I learn anyway.

Installing ffmpeg and ffmpeg-php on CentOS 5.2

dave.nospam@nospam.simplyprofound.com (dave) — Wed, 08 Oct 2008 07:27:00 -1200

So, you want your website to upload videos, extract a thumbnail preview image, and then convert the video to FLV for later playback? And sure, there are some commercial packages available, and Adobe will soon be releasing their Flash Media Encoding Server. You want to do it with the open source ffmpeg and ffmpeg-php extension.

Bring the Pain
Go ahead and follow any of the number of installation guides you can find with a simple google. I'll help you, search for installing ffmpeg and ffmpeg-php.

That may work for you, it may not. After you're done frustrating yourself, or if you wish to avoid that, read on.

As of this writing the current version of ffmpeg is NOT compatible with the current version of ffmpeg-php.

There are a variety of guides promising successful installations, however the bottom line is that with these being open source projects you need to be aware that just because it worked 6 months ago, heck 1 week ago, doesn't mean it'll work today on your server.

I spent 2 days, partially due to refamiliarizing myself with linux, installing and uninstalling various combinations of each package trying to get them to be happy with one another. The issues causing the key problem appears to be pretty clearly a change ffmpeg made recently, which you can read about in the ffmpeg-php google group.

Basically, everything installs until you get to installing ffmpeg-php and during the make you get errors. Sadly, it takes quite a while to get to that point.

Take the Easy Way
Sherinman A, an open source developer, has put together a set of scripts called FfmpegInstall that does the installation for you.

I was hesitant to run scripts to install all the various components to this solution. I wanted to know what was being installed and I wanted to stay with RPM and yum, or at least source from the SVN repositories where possible. The ffmpeg and ffmpeg-php packages are distributed off his server which may cause some people concern, but it works. And after banging your head against the keyboard for a couple of days that is mighty fine news.

If it makes you feel any better, he has received a FOSS India Award award for his work on this project.

FfmpegInstall comes in 2 flavors, one for shared hosting and another for when you have your own server. There are also forums for you should you need some additional community support.

It's such a sweet feeling to finally get this stuff installed and working, load up your first video and see the beautiful thumbnail and converted FLV produced as desired.

Parse XML with jQuery

dave.nospam@nospam.simplyprofound.com (dave) — Fri, 03 Oct 2008 09:23:00 -1200

I had a client come to me this week with a quick request. His company distributes the same news to their website and their digital media network (they have plasma displays throughout their organization displaying a variety of content from Flash to video to images and text). So, he wants to use the same XML file for both.

Rather than using server side language to do this, which would have been a pain in this instance, I found that jQuery would do the job.

Here's the skinny: the XML is formatted RSS 2.0 and the page just reads and display title, source, and description. All I needed to do was add jQuery to the page, load up the XML file, retrieve the values, and append the content to a div on the page.

The jQuery code looks like this:

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script language="javascript">

    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "sample.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('item').each(function(){
                    var title = $(this).find('title').text();
                    var source = $(this).find('source').text();
                    var description = $(this).find('description').text();
                    $('<div class="news_title"></div>').html(title).appendTo('#news_wrap');
                    $('<div class="news_source"></div>').html(source).appendTo('#news_wrap');
                    $('<div class="news_description"></div>').html(description).appendTo('#news_wrap');
                });
            }
        });
    });
</script>

It's pretty straight forward, and I almost don't feel like much of a programmer this was so easy. First I make sure the document is ready, then make an ajax call to get the xml file. I assign a function to handle the success event.

The function then looks for a node matching the find, in the first case "item", and then loops on that.

$(xml).find('item').each(function(){ ... do something ... }

Within the loop I retrieve the data into local vars and then append that data with some html wrapping to the div#news_wrap which is the target div within the page.

It's that simple.

You can see a working example here: http://www.simplyprofound.com/samples/xml_jquery/

Using Scrolling Text Box jScrollpane

dave.nospam@nospam.simplyprofound.com (dave) — Wed, 24 Sep 2008 14:46:00 -1200

I've had a couple of situations recently that caled for a scrolling text box smack in the middle of my HTML layout. Because the sites were running off Expression Engine for the CMS, and SEO for both sites very of primary importance, I couldn't use Flash. And rather than using some nasty IFRAME (I've just never gotten used to that thing), I found jScrollPane, a jQuery based solution.

jScrollPane can easily be skinned with CSS to integrate nicely into any design and work across every browser. Here are some simple examples.

I've also found the browser support to be perfect. For me that means IE 6+, Firefox 2+, Safari.

I use this on Derek Vreeland's site as well as the Advent Conspiracy site. As I said, the fall back solution, and the solution I would have used previous to happening upon jScrollPane, would have been to do this in Flash. While Flash has gotten better at font rendering and recently has received some SEO help, it's still not as easy as this solution.

Using CSS Image Rollover Menus

dave.nospam@nospam.simplyprofound.com (dave) — Wed, 24 Sep 2008 14:31:00 -1200

Over the years I have shied away from using graphics in menus because I wanted to maximize SEO potential. In recent months I've stumbed upon a completely palatable CSS solution that allows me to have the text in the link, but replace it with a rollover image. This technique doesn't appear to be new, but it's new to me and I dig it.

I haven't found a browser yet that has any problem with this technique. I've even used this in a project where javascript was outlawed.

So, here's how it works. The entire menu runs off a single image that stacks the normal state on top of the rollover state. Each menu item negative offsets the image to the location of that image. Then the CSS will then shift the image vertically to the rollover position. Here's an example from derekvreeland.com:

And another example from Advent Conspiracy:

Here's what this might look like in the HTML (this is not a tutorial, so beware the details):

<ul id="menu">
   <li id="home_btn"><a href="/" title="my website name">home</a></li>
   <li id="book_btn"><a href="/book" title="about my book">the book</a></li>
   ...
</ul>

And then in the CSS:

#menu li a {
   display:block;
   width: 300px;
   height:20px;
   background: transparent url(/images/menu.gif) no-repeat scroll 0 0;
   text-indent:-9999px; // this moves the text outside the visible area
}

#home_btn a {
   background-position: 0 0;
   width: 100px
}

#home_btn a:hover {
   background-position: 0 -20px;
}

#book_btn a {
   background-position: -100px 0;
   width: 200px
}

#book_btn a:hover {
   background-position: -100 -20px;
}

The only odd behavior I've noticed is that since the text is moved way off to the left, when you click a menu item and the browser shoulds you the hyperlink border it will extend way off screen. Otherwise, I find this method to be super easy to implement and even update with changes. Updates usually involve generating a new image and recalculating my math for starting position and rollover shifts.

Full Derek Vreeland Case Study

Full Advent Conspiracy Case Study

Using Transparent PNG Images

dave.nospam@nospam.simplyprofound.com (dave) — Wed, 24 Sep 2008 14:23:00 -1200

Browser support for PNG is completely acceptable now in my opinion, and I use it quite a bit on some heavy graphics in the derekvreeland.com site that require it.

This looks great in every browser I tested with the exception of IE6. IE6 still displays the PNG, but without the transparency. While this isn't ideal, it's acceptable as it's not broken and I benefit from the nice effect everywhere else.

Help those poor people still using IE6 by giving them a reason to update already.

I use transparent PNGs on this site for the book cover photos, the photos of Derek, and the background tiles of the text boxes. Without the use of transparent PNGs here I would have likely needed to develop this site in Flash.

Read the Derek Vreeland case study here.

Case Study: Shape Shifters by Derek Vreeland

dave.nospam@nospam.simplyprofound.com (dave) — Wed, 24 Sep 2008 14:13:00 -1200

Client: Dr. Derek Vreeland, author
URL: www.derekvreeland.com
Design: Kerry Layton

Overview
The site promotes Derek's first book "Shape Shifters" which he is self-publishing and, of course, self marketing. The site introduces the book, provides a free chapter, showcases endorsements and speaking events, and sells. Search Engine Optimization was of primary importance, as it almost always is.

For the CMS of the site I once again used Expression Engine. This tool really is a huge time saver and has been able to handle every challenge I've thrown at it. I have to actually remind myself that I can code PHP with it if I really want to; I just haven't found many cases that warrant it.

What Expression Engine is doing:
- the home page features some news items which come from a custom weblog and is available via RSS or Atom
- the Speaking Engagements form is a Solspace Freeform form
- the Contact form is a straight forward EE email contact form
- templates are constructed in distinct template groups, and common elements are brought together via sub-templates using the {embed=template} tags

I haven't stressed too much about the templating strategy I've used so far, primarily relying on the use of the embed tag, but I still feel like I'm doing old school ASP include tags. I would much prefer a solution more akin to the master templates in ASP.NET. Like I said, this works so I haven't stressed to much about that.

Derek currently blogs via Blogger. In the future we may bring that in to Expression Engine also.

Paypal to Sell
Derek has one product. While the book is carried at Amazon, Derek stands to make a little more if he can sell the book directly. To that end we simply setup a Premier Account (which you may upgrade to from a personal account). This allows him to accept most any payment type. Within Paypal he generates a button for the book which goes on his product page. Paypal handles all the shopping cart and payment services as well as allowing Derek to easily generate shipping details for labels and tracking.

I've been doing quite a bit of e-commerce lately and I still love the simplicity of the Paypal model for this kind of thing.

Couple More Technical Bits
I took the opportunity to utilize a couple of new techniques that I have been finding to be very useful. I deal with each of those in subsequent, short postings.

Transparent PNGs
CSS Menu Image Rollover Menus
Scrolling Text Box

Boxing Clever Launches New Site

dave.nospam@nospam.simplyprofound.com (dave) — Fri, 19 Sep 2008 04:02:00 -1200

My good friends over at Boxing Clever have launched their new website at www.boxing-clever.com. Great job to Chris, Jim, Dave and all the gang.

Also, be sure to check out the Boxing Clever blog which is thoroughly enjoyable.

Case Study: Advent Conspiracy

dave.nospam@nospam.simplyprofound.com (dave) — Tue, 02 Sep 2008 14:46:00 -1200

Client: Boxing Clever (agency) and Advent Conspiracy
URL: www.adventconspiracy.org
Design: Boxing Clever

Overview

Advent Conspiracy is an organization that promotes a spirit of giving during the holiday season; specifically giving to Living Water International, a group that digs water wells in impoverished nations providing fresh, clean water where dirty, diseased water is the norm.

The core call of the site is the "Enter the Story". The site promotes stories from contributors who are directly involved with this effort around the world. Theses people, whether individuals, churches, or organizations register on the site and submit their story with accompanying photos. Those stories are then plotted on a world map for everyone to share and from which to gain inspiration.

Here's a quick rundown of the functionality:

- Content Management (CMS)
- News blurbs on home page
- Video feature on home page and Videos section
- Membership with special registration
- Story display via world map
- Story management form
- Blog w/ RSS & ATOM
- Opt-in subscription

There are also some workflow issues pertaining to the user registration and story submissions that are handled by the site administrators.

The Tools

We chose to leverage the flexibility and extensibility of Expression Engine for the site, and I'm very pleased with how this turned out. EE, along with very cool modules, extensions and plugins that were employed to make this site work, powers the site itself, the news, the blog, the video section (which is Flash FLVs and/or YouTube), the story data, the registration and membership, and the CMS needs.

For the map and story syndication we ended up going with a Trippermap + Flickr mashup. We researched a variety of mapping solutions and considered Google maps as well as building something ourselves. While the developer in me would have loved to tackle a Google mashup or developed a solution more from the ground up, we just didn't have the time and resources in this project to tackle that. Adding a Flickr account and admin to the mix is an added level of management, but it works well with the necessary workflow at the client to approve and manage the story entries and photos.

So, that's the high level pass at this site. Check it out. [AC] has some great content, especially the videos and brochures in the resources section.

In upcoming posts I'll dig deeper into how these features were implemented.

Volusion may be right for somebody - not for me

dave.nospam@nospam.simplyprofound.com (dave) — Sat, 30 Aug 2008 10:53:00 -1200

I had a lengthy, detailed article in progress on how I had expertly customized the Volusion shopping cart interface for a client. Volusion had been recommended to me as a great e-commerce solution by more than one source.

That article has been rendered mute because the statement on their site "Customize any text & graphics on your site" is simply not true. You cannot "customize any" element on the site. You can change the style, but not position of most text and graphics within reason. You may not swap text for an image.

As a result, the client and I decided to cancel the Volusion account and resurrect our search for another vendor.

We were originally very excited about using the Volusion system, which is a hosted application, after reviewing dozens of other free and commercial packages. They had all the features we needed, they had the right price, they made the merchant account and SSL easy, and they offered (we felt) the level of customization we needed. The lack of ability to customize elements of the product and checkout pages were the deal breaker.

In retrospect I'm not sure there were additional questions we could have asked that would have signaled us that this was going to be the case. When I discovered I couldn't reposition elements inside the page, I couldn't swap text for images, when my only default shipping options in the drop down were "UPS" or "more options...", when I didn't have source files on the FTP for the detail and cart pages (which were clearly shown in the screencast on their website), I addressed those concerns with the support team. I was informed, over the course of numerous exchanges with which I won't bore you, that I couldn't access those features and customize those elements via CSS, HTML or otherwise. All I could do was style some text and swap some images.

If you don't care much what your cart looks like, if you don't care that their UPS partnership takes priority over their clients and client's users, if you don't care that their customer support team's favorite words are "no" and they will be shocked by your requests, then Volusion is the vendor for you. Volusion is not the vendor for me.

p.s. We have chosen another vendor and are in the latter stages of customization and configuration. Once it's up and running I'll fill you in on those details. You can be sure that our questions were much more suspicious and direct during this round of selection.