The SWFFix alpha is now available for download. I really thought that this project had been kicked to the curb because the site had been neglected since February 6th, the day it was introduced.
For those who don’t already know, “SWFFix is a project by Geoff Stearns [swfObject] and Bobby van der Sluis [UFO] with the goal to create the ultimate JavaScript library for embedding Flash content.”
READ MORE »
I found this link through the July/August 2007 Adobe Edge newsletter and I just couldn’t leave the page once I got there. Full browser FLV is impressive enough but the AXE commercial really makes you want to keep watching.
Even more intriguing is being presented with different path options. While it’s a simple implementation here (continue or not), the marketing possibilities and the visitor interaction really move to a new level. It’s all about keeping the visitor engaged and ads like this and Little Deviant, which promotes the Scion, really add an aspect of fun while getting their advertising message across. Flash has really come a long way and I truly believe the best is yet to come.
On another note, I’ve been Goog’d! Starting today rabidGadfly.com will be aggregated on FULLASAGOOG. Thanks, Geoff!
-rG
From time to time (usually when I’m setting up a new client), I scour the web for new hosting providers offering ColdFusion hosting at a reasonable price. This is usually a frustrating experience because so many providers offer other scripting solutions at well under $10 a month but once you add ColdFusion, the price skyrockets to $20 a month or more.
That isn’t to say that hosts like HostMySite aren’t worth the money. HostMySite is a fantastic option for clients who don’t mind spending a little more every month for a proven record of service, support, and uptime.
In my experience as a developer, however, I find that many clients can be…”frugal”. Some see hosting prices and want to know why their quote for hosting is so much higher than other prices they’ve seen online. Or they simply don’t need the level of service and performance provided by a HostMySite or CrystalTech. It’s those clients that I compiled this list for.
READ MORE »
UPDATE: This post demonstrates how to build a cross-fading slide show with embedded images. Since it was written I’ve posted another cross-fade sample that utilizes XML. If you’d rather see that one, click here.
Ever wonder how to get that way-cool cross fading effect in your slide shows? Me too! So I sat down the other day and started toying around with the Tween class and a short time later I arrived at the solution below.
tabIndex allows you to define a specific tab order of objects in a swf. This is especially helpful when designing forms with input fields. Upon reaching the final object in the tab order the cursor is supposed to go back to the first tabIndex. As you might imagine this works properly in Firefox. As you might also imagine, it does not work properly in IE.
Instead of wrapping back to the first object, IE takes the client out of the swf and into the address bar, or other objects on the page unrelated to the swf where your form fields reside. You can see an example here: http://www.rabidgadfly.com/swf/tabhack.html .
The good news is that there’s a relatively simple hack to prevent IE from wrestling tab control away from your swf. The trick is to create an empty movie clip and assign it the last tabIndex. Then attach an onSetFocus to it that hands focus back to the first object in your tab order. The code looks like this:
Written by
input1.tabIndex = 1;
input2.tabIndex = 2;
input3.tabIndex = 3;
restartTab_mc.tabIndex = 4;
restartTab_mc.onSetFocus = function() {
Selection.setFocus(input1);
};
You can try out the fix here: http://www.rabidgadfly.com/swf/tabhack2.html, or download the fla to take a look .
-rG
Web analytics can be a real pain in the ass sometimes, especially with Flash. If the object you’re coding is a link then you’re required to execute two getURLs and therefore two separate calls to the browser. One link being the actual URL you’re navigating to and the other being a javascript call to an analytics function.
As I mentioned in a previous post, while Firefox is able to handle this without an issue, many times Internet Explorer will only take one. This is because Internet Explorer calls getURL() asynchronously.
Until recently I hadn’t run into the problem myself but the time inevitably came where I was saddled with the issue. The solution my coworkers have been using is to string the calls together into one javascript getURL call but that can make for some hard to read and manage code. I decided instead to write a function that would queue up the calls and send them at a specified interval.
I start off by defining the variables I’m going to need:
var linkQ:Array = new Array();
var sendInterval:Number;
var waitTime:Number = 75;
linkQ will be a multi-dimensional array that will take the link and the target. sendInterval will simply hold the setInterval id, and wait time represent the number of milliseconds to wait between sending links.
We use Hitbox so my example will be using _hbLink which takes 6 parameters: ID, Link Position (on the page), _x,_y,_width,_height. ID and Position are both strings defined by your friendly neighborhood SEO manager. I wrote a function external to the Flash app so it can be used with any site or app we host:
function hblink(linkID:String,linkPOS:String,Position:String,linkurl:String,linkurlTarget:String) {
if (!linkQ.length) {
linkQ.push(["javascript:_hbLink('"+linkID+"','"+linkPOS+"','"+Position+"');",""]);
if(linkurl) {
if(linkurlTarget) {
linkQ.push([linkurl,linkurlTarget]);
} else {
linkQ.push([linkurl,"_self"]);
};
};
sendInterval = setInterval(_root.sendData,waitTime);
} else {
linkQ.push(["javascript:_hbLink('"+linkID+"','"+linkPOS+"','"+Position+"');",""]);
if(linkurl) {
if(linkurlTarget) {
linkQ.push([linkurl,linkurlTarget]);
} else {
linkQ.push([linkurl,"_self"]);
};
};
};
};
My function takes five parameters: linkID and linkPOS coincide with _hbLink’s ID and Link Position, Position is a string I pass containing the _x,_y,_width, and _height, linkurl is the functional navigation link, and linkurlTarget is the target page. So what I would pass looks something like this:
hblink("buttonHome","navbar",String(this._x+","+this._y+","+this._width+","+this._height),'http://www.google.com','_blank');
The function separates pushes the two links (the _hbLink call and the actual URL) into the linkQ array and, if no interval is currently set, defines the interval to call the sendData function that actually executes the getURLs one at a time, waitTime seconds apart. Here’s what that function looks like:
function sendData() {
var execCode:String = String(linkQ[0][0]);
var execTarget:String = String(linkQ[0][1]);
if (execTarget.length) {
getURL(execCode,execTarget);
} else {
getURL(execCode);
};
linkQ.splice(0,1);
if (!linkQ.length) {
clearInterval(sendInterval);
};
};
The sendData function only reads the first row in the array no matter how many are queued up. After it sends the getURL it removes that link from the array. This function will fire every waitTime seconds until the array is empty at which point it will clear the interval.
There’s not a lot of info out there on this topic and the few solutions I came across were overly complicated or just plain ugly. I hope this info helps somebody out.
-rG
I’ve been spending a lot of time lately learning Flex. So far I think it’s fantastic. I’m amazed at how easy it is to put together a nice looking dynamic application with so little code.
One stumbling block I had to get over was populating an accordion component with data from an XML document. I started off with a tab bar which was pretty easy, but I felt the accordion would be a better fit for my application so I started looking into the available samples.
Unfortunately, all of the samples I encountered either used static data or a data grid which I didn’t need. So I cracked my knuckles and set off to figure it out the old-fashioned way…without help from the web.
It was easy enough to populate the accordion sections with the XML, however, I was working with a list of videos and I wanted the video to begin playing when its title was clicked in the accordion. When I worked with the tab bar I just used separate states for each video type (commercials, demos, trailers) which allowed me to always use the same id name and data provider.
With the accordion I didn’t feel that states were necessary and I preferred to place it all in the same state if possible. I ended up assigning the appropriate node to each accordion and dynamically changing the video source when a different video type was selected. My accordion looks something like this (srv is an HTTPService reference to my video.xml file):
You can see that my dataProvider changes to a different node for each accordion section. I initially attempted to use the same id for each section but received an error stating that I couldn’t use the same id more than once. That meant that I had to come up with a way to dynamically change my video source based on the accordion section that was open.
I achieved the swap with a variable and a short function:
To complete the picture, my VideoDisplay looks like this:
As you can see I defined my VideoDisplay source as the value of my vidSource variable which gets updated by the chgVidSource function that is called when the accordion section changes. This is achieved by defining itemClick in each accordion section’s List tag to send the chgVidSource function the url of the selected video.
To further clarify the code, here is a sample of the xml format I used:
Hope that helps! If anyone has suggestions on how to do this differently please let me know. I’m pretty green with Flex and I’m always looking for a better way.
-rG
Here’s one that comes up frequently: “How do I make a scrolling movie clip wrap when it reaches the end of the screen?” Usually this is asked by someone creating a scrolling nav or a scrolling background for a game. The answer is the same for both. This post will take you through the steps needed to reproduce this swf:
It took only 45 lines of code including the hover functionality for the buttons to create the effect.
In a recent project of mine, users were allowed to choose from a list of phrases. The selected phrase then appeared in a text box. The problem was that if the text was too short it would sit there at the top of the box rather than being centered. Before I get into the code (which is pretty short), here’s a working example:
Download the source here
I’ve noticed postings in a few different places asking “How do I get a button to work inside a draggable movie clip?” The answer, of course, is that you can’t. Once you attach an event handler that listens for the mouse, the movie clip will receive mouse activity rather than any button contained within. But there is a way to achieve the desired effect, and it’s easily done.
The trick is that you don’t place the code on the movie clip itself. Instead, create a button the same size as the movie clip and place it inside the clip on a layer below your buttons. If you don’t want to see the button, make it invisible by populating only the hit frame. Attach your movie clip’s drag code to the button and then place any other buttons you want inside the movie clip on a layer above your drag button.
This way, the user will be able to drag your movie clip when they hold the mouse button down anywhere on the mc except for over the other buttons. Check out the sample below or download it here to see how easy it is.
This is all the code that it takes:
container_mc.drag_btn.onPress = function() {
startDrag(this._parent);
};
container_mc.drag_btn.onRelease = function() {
stopDrag();
};
container_mc.btn.onRelease = function() {
counter++;
this._parent._parent.text_txt.text="\rclick #"+counter;
};
-rG