GrannySmith

A couple of days ago, having just installed a new version of the Flash player in Internet Explorer, I tested recent updates to an ongoing Flash project. Imagine my amazement when, instead of an interactive Flash exhibition, I got a notice that my Flash version was not up to date. Thinking that maybe something went wrong with the recent installation, I went to the Adobe website and reinstalled. Still, no luck.
ObjectSwap has a nifty param line for version checking, and in this project it looks like this:

<param name="flashVersion" value="8" />

The current flash version in my browser is: 9,0,115,0, and up until now, the version checking code worked in such a way that if the version declared in the param is lower than or equal to the installed version, the Flash content will be displayed, and otherwise you get the alternate content - in this case, a request to download the latest player. After playing around with it, I saw that either I had to change the version to 9 in the param, or remove it altogether. In other words, all of a sudden, IE requires the exact flash version of the player, rather than the version of the movie. Madness…
Read the rest of this entry »

Share This

I love my Tooltip, I really do. There isn’t a project where I haven’t used, abused and made it do unspeakable deeds. In fact, I’m surprised it hasn’t filed a lawsuit against me, for unpaid overtime. But I’ll be the first to admit that the original version was just a little bit flawed.

Ok, maybe not the first to admit it - quite a few of you noticed the strange wrapping bug when used with short strings, and I recieved many requests to have it move with the mouse, fade-in and out, and even support custom shapes.

Well, now it does all that, and more…
View Demo
Read the rest of this entry »

Share This

Seeing as the Neo-Archaic logo is a tree, I just couldn’t resist adding a JavaScript tree component to the GrannySmith blog.

The need for a tree-view arose when I was adding a FAQ page to the Pediatric Center website. I didn’t want a long scrolling page, and it appeared to be a tedious affair to create all those internal links and anchors. A treeview structure seemed ideal for a FAQ, but then I couldn’t find anything usable on google (At this point you might say that my google skills could do with some polishing, and come up with a list of wonderful scripts that I completely overlooked…), and besides, good clean dynamic xhtml is still not that easy to come by.

The result is a Definition List Tree component - That is, a bit of JavaScript code that you can add to your page to create a treeview component out of a humble DL.
Read the rest of this entry »

Share This

I just spent a very frustrating day wrangling with cached images. Both JavaScript and Flash have trouble updating dymanic images, when these are cached by the browser. This can be a problem if, for example, your website has sets of images, such as catalogues, that could be updated at any time. Or if the website needs to constantly reload a single image with the same filename, such as a self-updating webcam image.

In my case, it was both. After delving into numerous Internet sources, with some trial and even more error, I finally distilled a solution that, with slight adjustments, works for both JavaScript and Flash.
Read the rest of this entry »

Share This

The Problem:
If you are a web designer who tries to combine high standard graphic design with top-notch web-standards xhtml, you can’t escape a certain degree of conflict of interests. This can be especially acute when it comes to designing a menu. You want it to have a strong graphic look, elegant and glossy, and yet you’d rather use a semantic xhtml list with text links.

Your life might get somewhat easier when it comes to headings, with various CSS Image Replacement techniques. But they’re not perfect either, and for menus you need be able to hyperlink the image.

Available Solutions

So what can you do?
1. Use CSS to format your textual menu to it’s best abilities, using the same old fonts and maybe a background image to make it look nicer. Don’t even think about using an interesting font like Arcitectura, or adding some layer effects in PhotoShop, because then you’ll have to use images.
2. Employ images, which is not very semantic and requires you to add lots of additional markup, such as img and alt tags, and then you’ll need to add JavaScript calls for rollovers, and change the image of the current menu item on each page. What’s next? Design with tables…?
3. Design a Flash navigation bar, which is again not very semantic, SO friendly, or accessible. I’ve nothing against Flash, in fact, I I’m a huge fan. It can be used to great effect to add an extra dimension to the website with animation and interactivity. But just like salt and pepper, you need to know when to stop adding it. Graphics or drop down menus are not a good enough reason for a Flash menu - these can always be accomplished by dhtml. A Flash navigation needs to be exceptional (or at least quite interesting) to justify itself, and even then you’ll need to add textual navigation somewhere on the page, at least for the search engines.

Most of my xhtml websites up to date have been achieved with the first method. Take a look at my own website, for example - it uses CSS and background images for formatting, and the font defaults to a generic serif. Even then, it took a lot of work and a bit of extra markup to achieve the look.

NavSwap:
My latest website project (not yet published as this goes to “print”, but soon to come) is for a glossy fashion wholesaler, and that meant top-notch graphics, even for the menu. For this I came up with option #4 - NavSwap, which happens to be the object of this article. It took some code wrangling to write, but is quite easy to implement.
You can download the script and examples here…

NavSwap serves two functions:

1. Swaps semantic xhtml into images, using unobtrusive JavaScript. That is, if JavaScript is unsupported, you get an xhtml text menu, otherwise you get images, complete with alt tags generated on the fly.
2. Automatically swaps images on rollovers and swaps the current menu item with an active state item on each page.

Read the rest of this entry »

Share This

Hi everyone,

Since the ObjectSwap article appeared on this blog in April, the code has changed a number of times. To reflect those changes, and give you a bit more insight on how to use it, I bundled up a few ObjectSwap Examples together with the script:

In addition to that, I sent an updated version of the article to SitePoint, and I’m happy to announce that it’s been recently published: ObjectSwap: Bypassing the ActiveX Activation Issue in IE.

I hope this script has been as useful to you as it has been to me. Thank you for your great feedback and for your patience with all the changes and bugfixes. I hope that no more will be necessary, but if there are, please let me know.

Karina

Share This

This article explains some of the uses, properties, and customisation of the Rich Text Tooltip for Flash (versions 7 and higher). A tooltip can be very helpful for the user interface of applications, development tools, websites, multimedia, interactive maps, and games. It’s a great way to keep your interface free of clutter, and still supply information at a glance about any one of the elements. The demo flash movie shows how the tooltip can be used as it’s own tutorial – just roll over any of the items in the demo to see what the tooltip can do:

View Demo

The tooltip comes in the form of static class methods and does not require any assets on the stage or in the library, as it is created and destroyed on the fly. It needs to reside in your global or local classpath, in a folder structure corresponding to the package com.neoarchaic.ui. After the package has been imported, you create the tooltip simply by calling the static show() method:

import com.neoarchaic.ui.Tooltip;
Tooltip.show(“Hi, I'm the tooltip, see what I can do!”);
  

And destroy it by calling the static hide() method:

Tooltip.hide(); 

Read the rest of this entry »

Share This

The Problem:

Microsoft’s decision to change the way ActiveX objects are handled in Internet Explorer, following the patent law suit by EOLAS, has left the developer community in uproar. Soon all the ActiveX controls in Internet Explorer, among them Flash and Shockwave, will need to be activated by a click or a tab and an enter key before they can interact with the control. This is bound to impair the user experience of any website that embeds Flash – and there are many such sites out there – and make a good deal of trouble for the Flash developers, who are left to clean up the mess.

Available Solutions:

You can bypass the activation requirement by using an externally linked script, such as JavaScript, to embed the ActiveX content. There are currently available solutions for Flash, such as SWFObject and UFO. These work well for embedding new Flash content using JavaScript. But what about existing <object> tags, which will need to be rewritten, or browsers with disabled JavaScript? These would require an alternative solution.

ObjectSwap:

Neo-Archaic’s ObjectSwap solution (downloadable from www.neo-archaic.net/scripts/objectSwap.js) takes all these issues into account. It captures all existing <object> tags and replaces them with… themselves. This forces an automatic activation in Internet Explorer, while leaving other browsers alone. Similar solutions have been developed in parallel, but this article will only concern itself with ObjectSwap. Although this solution was developed primarily with Flash in mind, it should also work with other ActiveX controls, such as Shockwave. The script affects all the <object> tags in the page, but the user can exclude specific objects by setting their class name to “noswap”.

Read the rest of this entry »

Share This