Bluefire Blog

The new Text Layout Framework for Flash Player 10 is very powerful and feature rich, but there’s a bit of a learning curve because of that (as we discovered while building the World Class Text Tour for the TLF site on Labs).  Here’s a list of some resources for learning more about it.  Or, if you’d rather hire someone to do it for you, just give us a ring at (206) 781-1411.  We plan to post a few tutorials ourselves in the near future.

Resources:

Text Layout Framework on Adobe Labs (Note that each section of the “World Class Text Tour” demo on that page has downloadable FLA files with source code - download button is in upper right.)

Text Layout Framework Team Blog

MAX 2008 TLF session videos

Adobe Evangelist Mihai Corlan’s blog post:  ”How to use Text Layout Framework in Flex 3.2 or AIR 1.5″

Flex 3.2 Language Reference for Flash Text Engine

Richard Dermer’s Pagingation example for Flex builder

If you come across any additional resources, please submit a comment with a URL.

The Text Layout Framework (TLF) is new tech that dramatically improves typography and foreign language support in Flash player 10. Adobe recently tapped Bluefire to build a TLF demo for Labs that showcased what it could do, and while working on it we became rather impressed with the capabilities. In fact, it is a game changer in the RIA space. If you are a Flash developer or work in the digital publishing arena I highly recommend checking out the World Class Text Tour we did as a quick primer. Here’s a few screenshots:

(more…)

The EPUB file format has taken another significant step forward with the announcement that the Cleveland Public Library has begun offering eBook downloads in the format (via).  This is only the beginning of what will clearly be a massive shift toward the proliferation of EPUB  in public libraries.  Why?
(more…)

Congratulations to our good friends at Adobe for releasing Digital Editions 1.5. (Bluefire provided UX design and Flex development support for both the 1.0 and 1.5 efforts). Digital Editions is a lightweight, rich internet application for reading, acquiring and organizing digital books and other publications. This update adds content portability to protected items in both EPUB and PDF formats. Meaning you can now buy copy protected items online and, well… copy them - to other computers and devices. This portability is enabled by a new feature for authorizing a machine with an Adobe ID.
(more…)

All AMG galleries have an about screen, and they are often under-used. Perhaps in part because most people don’t know that you can put all kinds of content in there by simply editing the group.xml file. It supports basic html formatting too. For a basic example of this, check out the “about” screen on our portfolio gallery at http://www.bluefire.tv/onlinePortfolio.html

To see how we did this, look at the group xml file here: http://www.bluefire.tv/resources/groups/featuredProjects.xmll

Look at the groupDescription node

After we released the 1.2.0 version of Adobe Media Gallery to SourceForge, we received many question about how to install the new gallery in Bridge CS3, Lightroom and Photoshop Elements. Well, we heard you! and are planning to write some posts, as time permits, about just how to do that.

Since by the far the greatest number of request were for Bridge on Windows that is where we will start. And although the specific steps below are for that product/platform they should help anyone trying to get AMG 1.2.0 running with menu commands.

(more…)

Bluefire will be presenting at the 360Flex Conference this Tuesday, August 14, at 1:00 pm at The Red Lion Hotel in Downtown Seattle. The presentation will cover topics of experience design, RIA development and Flex coding relating to our experiences working on the Adobe Digital Editions team.

The presentation and its support files, including Flex source code, can be downloaded here: 360 Presentation Files.

In addition to presenting on Tuesday, Bluefire is helping to sponsor the Northwest Charity Flex Code Jam, a 3-dayFlex-coding event aimed at creating a Virtual Food Drive application for Seattle’s own Northwest Harvest. This event was put together by the Seattle Flex User Group in conjunction with Adobe’s Flex Champions Program and is set to kick-off Sunday, August 12th. Conference goers will have the opportunity to donate their time to this coding endeavor and Bluefire will be on hand as project mentors for this awesome cause.

Drop us a line if you will be at the conference. Hope to see you there.

The new version of the Adobe Media Gallery was just uploaded to SourceForge.net –in version 1.2.0 we made the following improvements to the AMG code base:

* the ability to add menu commands to the gallery
* the ability to list multiple photo groups in the menus
* the ability to change styles via the menu commands
* easier project compilation (no extra steps, just Test Movie or Publish)
* better use of the external flashvars xml file
* various bug fixes

A zipped archive of the source, including sample galleries that make use of the new menu features, can be downloaded from the Downloads section of the
AMG open source site at SourceForge.net

A sample gallery illustrating these features can be seen here:
sample 1.2.0 gallery

Stay tuned to this blog for more posts concerning how to use these new features in the next couple of days.

We’ve received lots of questions about how to add links to LR/AMG Flash Galleries. Here’s a couple tips on that:

The easiest way to add a link is to put one on the right side of the menu bar by simply typing your URL, ie http://www.bluefire.tv into the “Web or Mail Link” field in the “Site Info” panel in LR’s Web Tab. This will cause the text you put into the “Contact Info” field (in that same panel) to be a link to that URL. If you are already using that field for your email address and are looking for an additional way to add links there are many options:

1. Put links in the caption area: The only way to add other links from within LR is to add a link in either the “caption” or “title” text fields (appears just below the images) To do that, you’d go to the “Image Info” panel, and choose the “custom text” option in the drop down menu in either the “Title” or “Caption” area. Then type (more likely paste) your link tag in the custom text input field eg:
<a href=”http://www.bluefire.tv”>Bluefire</a>

2. Put links in the HTML page: Open the html page of your gallery in a text editor and add links above or below the gallery movie – If you don’t already know how to do that, refer to my blog post here which describes the most basic way to insert an image above the gallery movie for reference, but instead of inserting an image tag, you simply insert a link tag eg:
<a href=”http://www.bluefire.tv”>Bluefire</a> you can do the same thing on the bottom, just before the closing tag.

3. Make your Site Title or Collection Title a link: (This is the text that shows up in the header of the gallery) you can’t add the link from within LR, but it is really easy to do in a text editor. Simply open the group.xml file of an exported gallery in notepad or some other simple text editor and put a link tag in either place and save it. eg:
<a href=”http://blog.bluefire.tv”>bluefire blog</a>
<a href=”http://www.bluefire.tv”>bluefire</a>

4. Add menus/menu items that have links (more on that coming very soon)

Did you know that you can modify the menus and menu items in the Flash galleries generated by Adobe Photoshop Lightroom and Bridge CS3? Well, you can, and soon you can do even cooler things with those menus. You can add whole new menus that change styles on the fly (changing things like colors and layouts), menus that load a whole different set of images into the gallery, or menus with links to other html pages. You can even create menu items that do multiple things at once (e.g. load a new set of images AND change the style). To see what I’m talking about, check out this sample gallery.

(more…)

Today Adobe Systems announced the release of Adobe® Digital Editions 1.0, a new desktop application for “acquiring, managing and reading eBooks, digital newspapers, and other digital publications”. There’s so much that is cool about this app that it is hard to know where to start. But before diving into that, I should mention that Bluefire provided experience design and Flex development services to Adobe for the 1.0 version effort, so I’m not exactly “impartial”.

A good top level overview of the app can be found in Adobe’s press release, so I won’t regurgitate that in detail, rather I’ll give you a couple excerpted highlights of it, and then dive into my own personal (slightly more geeky) perspective.

(more…)

Many of you have been asking question about our recent posts concerning embedding the Adobe Media Flash Gallery in web pages. And there is some understandable confusion surrounding just how to accomplish this.

The reason for this confusion is twofold: first, the html that we wrote for the gallery was (necessarily) complicated and therefore hard to understand; second, the tips we wrote about html embedding were meant to demonstrate the default file pathing that is hard-coded into the gallery.

Unfortunately this led many of you to get the infamous ‘swirling circle of endless loading’. BUT, there is a better way to point the gallery at the right resources.

read on…

We’ve had several requests for an easier way to add background music to the Flash galleries without having to know how to author Flash. This could have been done in such a way that an “add music” option appeared in the application UI’s, but that would take more time than I have at the moment (as I’d need to do three variations on that for the different app’s gallerymaker implementations). So I’ve put together a quick and dirty solution (albeit requires you to edit the XML -but that is easy!).

Basically it is a flash movie (bgmusic.swf) that you can insert into your exported gallery as a “background image” (though there is nothing “visible” in this movie) and which plays any mp3 file that you want.

Here’s how to do that in four easy steps:
1. right click on this link and choose “save link as” to save the bgmusic.swf to your hard drive in the “resources” folder of your Lightroom Flash gallery.

2. open the “style.xml” file found inside the “styles” folder there in that same resources folder with your favorite text editor

3. find the line of text that looks like this: <backgroundbgimg alpha=”100.00″ src=”"/> - about 2/3 of the way down (line 73 in the Lightroom version) and add the path to the bgmusic.swf into that tag. It should then look like this: <backgroundbgimg alpha=”0.00″ src=”resources\bgmusic.swf”/>
(Elements 5 users should be aware that the relative paths in their galleries are “hard coded” (via the baseref flashvar) to look in the “resources” folder, so it will not work if you include that folder name in the path. So your tweak to the style file would look like this: <backgroundBgImg alpha=”0″ src=”bgmusic.swf” /> )

4. take your background music clip (must be in mp3 format) and copy it into the resources folder as well, and rename it “bgmusic.mp3″

that’s it! Here’s a sample gallery that uses this approach.

Sound that automatically plays in websites is appropriate in some circumstances, and terribly annoying in others. This can be particularly true when you don’t offer volume controls or a mute button (which this movie does not have). So please be thoughtful about where and when to use this. When I have more time, I’ll make one with at least a mute button and post it.

Have fun!

If you’ve been following this blog, you know that Bluefire designed and developed the AMG Flash Gallery found in the web gallery export features of Lightroom 1.0 and Elements 5.0. Well, now it is in Bridge CS3 too! To be more precise, A beta version of the AMG engine (which adds AMG based HTML or Flash gallery export featuers to Bridge CS3) is available for download on Adobe Labs. This is good news for Flash developers, because you can make your own gallery templates and distribute them to users of Bridge, Elements or Lightroom (or all three). Keep in mind that the AMG system allows the gallery template to be ‘paired” with an XML file that causes customization controls to appear in the “host” application. So not only can you as a Flash developer create a gallery template, you can provide your end users with UI controls to customize the template in a wide variety of ways (colors, fonts, layout options, etc). For more info, check out this post on John Nack’s blog.

For more developer oriented info on AMG, read some of the prior articles on this blog, or check out this Adobe Devnet article. and Jeff Tranberry is posting some helpful info as well.

Today Adobe released the the source code for the swf (designed and developed by Bluefire) that powers the Flash web galleries exported from Photoshop Lightroom 1.0. To download the source code, visit the Adobe Media Gallery on opensource.adobe.com at http://opensource.adobe.com/amg/ and click on the “download” link in the left nav bar. The LR version is AMG 1.0.1

AMG source code was originally open-sourced back on Nov ‘06, but it was the version used in Photoshop Elements 5.0 which shipped several months before Lightroom 1.0. There are a couple of nice changes that were made in the LR version. The biggest feature change was the addition of the “image size rendition auto-swap” behavior. The biggest visual change was in the treatments of scroll bars (which also got their own style customization params). There were several other “under the hood” improvements made to the loading management routines, both in Live Preview mode and when published on the web that make large galleries load more intelligently. Also, LivePreview mode was beefed up considerably to allow for a real-time preview of more customization options.

Here are links to a couple sample AMG 1.0.1 galleries: The first is the sample gallery that is included in the download package. This other one is the “featured projects” page of our website - note that we only used two image size renditions for that. Both of these galleries use the “scrolling left” layout. I’m trying to find good examples of galleries using the “bottom scrolling” layout opttion and the “paged thumbnails” option. If you know of any, please add a comment.

For more info about AMG, check out this article in the Adobe Developer Center, and stay tuned to this Blog for more info coming soon.