Flash Platform Workshop cancelled; Q&A posted at Adobe
Unforeseen events have unfortunately forced the cancellation of the Flash Platform Workshop that was scheduled for Monday, December 3. Apologies for the inconvenience; if the workshop ends up being rescheduled I’ll post any information as soon as it’s available.
In other news, Adobe has recently posted a short Q&A between myself and Steve Anderson, associate editor of Vectors and director of the Ph.D. program in Media Arts and Practice at USC’s School of Cinematic Arts. Check it out when you get a chance!
Upcoming Events: ‘Designing for Convergence’ Panel and Flash Platform Workshop
Announcements, Events, Flash, Flex, Interactive Design
11/15/07
Wanted to bring a few upcoming events to your attention. First up: on this coming Monday, November 19 at 10:00 am PST, I’ll be joining Dmitri Siegel, designer, writer and art director for Urban Outfitters, and Peter Lunenfeld, media theorist and professor at Art Center College of Design, as part of a panel on ‘Designing for Convergence,’ sponsored by Adobe and the new interdivisional program in Media Arts and Practice at the USC School of Cinematic Arts. This panel will be simulcast as an interactive online forum via Adobe Connect and you are welcome to join us! If you would like to attend, you will need to register first.
Two weeks later, on Monday, December 3 from 1:00 pm - 5:00 pm PST, I’ll be teaching a Flash Platform workshop focusing on programming in ActionScript 3.0 and MXML and at the basics of working in Adobe Flash and Flex (and how you decide when to use either one). This workshop will also be simulcast via Adobe Connect; I don’t have the registration link as yet but will post it when it becomes available. UPDATE: The Flash Platform workshop has been cancelled until further notice.
You can get more details about both events.
Also, I’d like to thank Scott Fisher for inviting me to speak at the USC Interactive Media Division’s weekly forum last night. ‘Seeking Eloquence in Interactive Space’ was the topic I tackled, and we ended up having some good discussion afterwards; got to chat with a few former students of mine as well. A pleasure.
A non-linear index for fiction and non-fiction RIAs, made possible with SpringGraph
Digital Humanities, Flex, Interactive Design
10/24/07
The interactive index from Nation on the Move.
One of the things I’m most excited about with this latest issue of Vectors is the inclusion of a new “interactive index” feature which gives users non-linear, bookmarkable access to the databases for the projects Blue Velvet and Nation on the Move. My hope is that this feature, which allows you to visually browse each database’s contents through a common ThinkMap-style interface which is completely independent of the ‘designed’ front end of each project, will bring some transparency to our authoring and design practice at Vectors. I can easily see such an index becoming a standard feature for future interactive works, both fiction and non-fiction.
Well-deserved kudos for the technology behind the index go to Mark Shepherd, a Senior Computer Scientist at Adobe who developed the open-source SpringGraph Flex component that made it all possible. Thanks to his terrific implementation, I got the first version of the index up and running in just a few hours. It’s quite easy to use and really stunning (and fun) once you get some data hopping around in there.
The indexes included in the current issue of Vectors are still rather rudimentary, and any feedback or suggestions you have are most welcome. For future projects, I plan to integrate each index directly into the work itself, so it will truly start to function like the index in a printed book. I see this as just one component of an emerging set of user experience standards that will characterize fiction and non-fiction RIAs in the immediate future.
Cardinal splines in ActionScript (Updated)
Algorithms, Flex, Source Code
8/20/07
Here’s the code driving the cardinal spline function I mentioned in the post last week on visual prototyping with Flex. ActionScript already has a bezier drawing method called “curveTo,” but it obliges you to specify a control point for every anchor point you add to the curve. This is great for precision, but sometimes you just want to run a smooth curve through a bunch of points without having to figure out where all the control points should be.
That’s what’s great about the cardinal spline—the next and previous points on the curve function as the control points. (This means you need to add an extra point to the beginning and end of the curve, as you can see in the diagram accompanying the Wikipedia entry for c-splines.) You also get a “tension” parameter which allows you to set how taut the curve is between points.
I’ve included my current incarnation of this routine below. Here’s how to use it:
- Start with an array of values you want to run the curve through: 3, 7, 2, 6
- Duplicate the start and end values: 3, 3, 7, 2, 6, 6
- Iterate through each pair of the original values, each of which represents a segment of the curve: 3-7, 7-2, 2-6
- For each of these iterations, proceed along the curve n number of steps (more steps = a smoother curve)
- Call this function at each step to get the value of the curve at that step
If you’re using the function to set the location of a sprite, then you’ll need to maintain two lists of values (one for x position, one for y position) and call the function once for each list as you’re iterating through each segment of the curve.
Update: Here’s an .fla example that uses the function to draw a curved line through twenty random points.
Here’s the source for the function itself:
/**
* Returns a value at the given step on the cardinal spline between two other values.
*
* @param prevVal The point just prior the curve segment we are evaluating.
* @param startVal The starting point of the curve segment we are evaluating.
* @param endVal The ending point of the curve segment we are evaluating.
* @param nextVal The point just after the curve segment we are evaluating.
* @param numSteps Number of steps in the curve segment.
* @param curStep The current step in the curve segment.
* @param easing Type of interpolation to be applied to the curve segment.
* @param tension How taut the curve is (0 = straight, 1 = curvy)
*/
function getCardinalSplinePoint(prevVal:Number, startVal:Number, endVal:Number, nextVal:Number, numSteps:Number, curStep:Number, easing:String, tension:Number):Number {
var t1:Number;
var t2:Number;
switch (easing) {
case “easeinout”:
t1 = endVal - prevVal;
t2 = nextVal - startVal;
break;
case “noease”:
t1 = 0;
t2 = 0;
break;
case “easein”:
t1 = 0;
t2 = nextVal - startVal;
break;
case “easeout”:
t1 = endVal - prevVal;
t2 = 0;
break;
}
t1 *= tension;
t2 *= tension;
var s:Number = curStep / numSteps;
var h1:Number = (2 * Math.pow(s,3)) - (3 * Math.pow(s,2)) + 1;
var h2:Number = -(2 * Math.pow(s,3)) + (3 * Math.pow(s,2));
var h3:Number = Math.pow(s,3) - (2 * Math.pow(s,2)) + s;
var h4:Number = Math.pow(s,3) - Math.pow(s,2);
var value:Number = (h1 * startVal) + (h2 * endVal) + (h3 * t1) + (h4 * t2);
return value;
}
Flex for visual prototyping
Digital Humanities, Experiments, Flash, Flex, Interactive Design
8/17/07
This is one reason why I’m really digging Flex right now. I’m in the design phase with Sharon Daniel on a follow-up project to Public Secrets and we’re talking about dynamically generating a large number of curved forms as part of the design. All well and good, but how do I mock up the curves without drawing a million squiggly lines by hand? Easy—build a little Flex app that lets me set the parameters of the curve and generate as many as I want, then take screenshots and bring them into Photoshop. This is my first app using this many controls, and it only took a couple hours to put together. There’s a lot of ways in which Flex makes building this kind of thing feel as easy as it really should.
The curve is drawn using a cardinal spline algorithm (Update: c-spline source code) I first ported to Lingo back when I was working on Chroma, and then to ActionScript a couple years ago for Mobile Figures. I like it because it’ll run a smooth curve through any number of values without you needing to specify separate control points.
Check out the app: Curve Designer
