Flickr Badge and XHTML, Part 4 Thursday 2006-04-06
In my tutorial series “Building a Flickr Flash Display“, I have come to Part 3. Here we go through the code needed to make the images of the display zoom out smoothly, when the user mouses over one of the thumbnails. We’ll also make a version in which the zooming in and out of randomly selected images is done automatically. It is fairly simple to accomplish the smooth and professionally looking behaviors, using the versatile Actionscript Tween class and its easing helper classes.
Please join me to craft a dynamic Flickr display.
Flickr Badge and XHTML, Part 3 Sunday 2006-03-26
Some progress is done on the stand in for the Flickr Badge, as we move on in the Petit Labs. In the tutorial “Building a Flickr Flash Display, Part 2“, we add some interactive dynamics to the image display. The beholder who’s eyes stare at the tiny thumbnails of our Flickered images, will be able to zoom in on any of them, to get a doubly sized version, by just pointing the mouse at it. As before, clicking an image will take the user to the Flickr page for that image. Come on and have some fun!
Tween Your Images With ActionScript Saturday 2006-03-25
Using the ActionScript 2.0 in Flash, you can have a lot of fun with the Tween class and the easing package. If you have some knowledge of ActionScript, and want to ease your work with your image transformations, you can have a ball with the classes in the mx.transitions packages.
Using only one frame and an external ActionScript, you can do almost anything you want by applying one or more of the transformations, accessible to the artistic programmer. After some thought on my road to a new Flickery Flash image display, I decided to take the Tween class on a ride.
Using others wisdom, I boldly set out to tween the transparency and the size of a JPEG image, and at the end combine the tweenings. It turned out to be a fairly easy ride. What you do is load the image of your choice into a MovieClip, and create a new instance of the Tween class. It’s constructor takes as arguments, the object you want to apply the change to, the property you want to change, the start and end value of that property, the duration of the tween and an easing function or class, that knows how a special type of tweening is done.
That’s pretty much all you have to do. Nothing fancy to the code, but the result is impressive. If you like to know how to create image effects in a fun and lazy way, read my tutorial “Using the Tween Class“.
Flickr Badge and XHTML, Part 2
It’s all about including the Flickr Badge in an XHTML compliant way. As I have described in an earlier post, I thought I had succeeded. This proved very soon not to be true, and after a considerable amount of head scratching, I decided to craft my own badge.
If I could do that, I would gain two things. Firstly I would have full control of the behavior of the badge, such as the number and size of the images, the size of the grid and the timing of animations. Secondly, having direct access to the Flash Movie ( the “swiff” ) it would be much easier to look for embedding markup, that would validate as XHTML.
I have the Flash MX 2004 authoring tool or, if you are a programmer, the IDE on my computer, so making a Flash Movie from scratch is quite possible. I started to look for a suitable ActionScript Flickr library, to be able to communicate with the Flickr Service API. I found one at the Adobe/Macromedia web site, that looked promising, but I couldn’t find any documentation, so I dropped that. In my continued search, I found Kelvin Luck's flashr, version 0.4 Actionscript Flikr library, which contrary to Macromedia’s, is well documented. It is free for all to use, and comes with an introductory example, that runs right out of the box.
After some fiddling with the example, I realized that the example application only needed a few changes to look like the original Flickr Badge ( sans animation ). I decided to write a tutorial on “Building a Flickr Flash Display“. This is part 1, and further development will follow. Enjoy!
Flickr Badge and XHTML, Part 1 Saturday 2006-03-04
I thought I finally got the solution to a problem that has bothered med for the last couple of weeks. You cannot include the Flash based Flickr badge in an XHTML valid page. It contains such a lot of interspersed markup and styling, that it is impossible to untangle. I had a go at moving styles to the stylesheet and leaving the markup where markup is due. For different reasons this wasn’t possible, and I had to find a solution. The W3C validator service gave me a list of errors, long as a week.
I had succeded earlier to encapsulate the Google AdSense, by embedding an external html document, using the object tag.
I started hunting the web for solutions, and found Geoff Stearns’ FlashObject, a JavaScript Flash detection and embed script.
It is used by including the script normally in the XHTML header and calling it from another JavaScript in the body. The call takes the URL of the flash movie and some other parameters, such as height and width.
The FlashObject writes the flikr badge into a predefined div with the appropriate id=”flashcontent”. Swiffy!
This doesn’t help much though, if we don’t have access to the pure SFW file, the Flash movie. As it is inserted “on the fly”, it doesn’t show up in the View Source mode of the browser – you just see the ugly heap of code, you pasted in from flickr.
By looking at the page info you can extract the URL of the SWF, which means that you can pass it to the FlashObject.
The URL of the flickr badge has a lengthy query string, that tells the Flash move what to look for at flickr.com, including number of columns and rows, the secret word and other useful things.
The whole thing worked, and I got rid of all complaints from the validation service. This had made me nearly bold headed, so you can imagine, I took a good leap and a scream.
There’s something fishy about the solution, I’m sorry to say. It did work for a while, but died on me.
I’m back to square one or possibly one and a half – we’ll see.
I’ll get back to you if something hits me.
[Edit] I’m back. Sorry to say I haven’t yet the solution to the validation question, but I’m working on it.
In the meantime, I have discovered that flickr doesnt want the approach of extracting the SWF from the page info. It’s much better to extract and use the original request that you get from the badge maker. Contrary to the statement I made above, it is possible to deconstruct/reconstruct the badge maker mix of code, style and markup. That’s how it’s working just now.
All styles are in the CSS stylesheet, the markup is clean and the JavaScript logic is encapsulated in CDATA sections.
It still doesn’t validate as XHTML though, because of the iframe is still not dealt with.
[ Edit 2006-03-25] I’ve decided to make a “Flickr Badge” of my own, to get full control over the behavior and the embedding. A first version is ready, and I have even written a tutorial, presented in “Flickr Badge and XHTML, Part 2“.
Flickry Flash on WordPress, part 1 Tuesday 2006-02-14
Oh gee am I tired!
In my effort to redesign the Regulus theme I decided to have all sorts of syndication bunched together in the upper left corner of my site. In other words, I want my feeds, Technorati, del.icio.us and Flickr in my newly built left sidebar. To that end I was googling for a suitable icon to represent my Flickr stream.
For hours I scanned the lots of sites with tips and widgets for using Fickr, and search and behold – it’s everywhere. And it’s exciting!
I couldn’t sleep, so this day will be at least 36 hours long. My eyelids are taped to the bone and my eyes emits a faint glow, as I stumble on.
I’ll be back with some more details on my findings, as soon as I recover from this ordeal. For now I can only offer a demo page showing my hastily mocked up family show or banner.
It is composed by the ticker service at Slide from my Flickr stream, and presents a image set called “family”.
You can study the rather incomplete result on my demo page.
It’s breakfast or sleep now.
Catch you later!
Open Source Flash Creation Friday 2005-12-23
Flash is an interesting but proprietary format for animations, sound and video or multimedia in short. Macromedia ( aka Adobe 2005 ) charges a lot for very capable tools like Flash MX 2004. Not everyone can afford to use the MM tool set. However the structure of the Flash format (.swf ) was made public and anyone with enough skill and patience could write their own tools for generating Flash. The ubiquitous Flash player is free for download from Adobe.
This note contains some links to free software with the capacity to produce Flash without the MM price tag. It’s meant as a reminder to myself to have a look at this prospect.
Have a look at the Freshmeat tutorial “Video and Audio Streaming with Flash and Open Source Tools” for a discussion of various projects such as:
FFMPEG for creating content, MING a C library with a PHP module for creating Flash files and libflv for creating FLV files, the Flash file format for streaming video and sound.
ToDo
« newer posts
All Posts
del.icio.us
PetitOn Tellus