I really wanted to start this post with “well…” – but I thought that would be a little to predictable. But that’s what things feel like. 1 year has passed since I blogged anything of note – and my how time goes by! Last time I shouted into the interweb void I was busy trying to learn AS3, attempting to document my poster collection, building coffee tables, and reflecting on my interactions with the world. So what happened? Why the long absence? Well, nothing really – I haven’t been absent per se, more occupied.
Continue reading
Actionscript posts
A year in the doing
Posted in Postacrds
A few days on PaperVision3D
So last week I had the opportunity to get my hands dirty with PaperVision3D. As mentioned previously, the company I work for has been responsible for implementing the 2008 Earth Hour website.
Well, as part of that, I had a crack at visualising the global support being given to the Earth Hour movement. Using AS3, I first load in a zipped text file containing lat/longs of each user sign up, and of those users broken down by country, which I uncompress and iterate over to create textures. I then use PaperVision3D to generate a set of spheres which I wrap the textures around, and add some simple mouse interactions.
I settled with an early release of the engine – but am keen to have a go at the 2.0 branch and see if it speeds things up.
Flash 9 player is required to view this content. It can be downloaded from Adobe.com
Posted in Design, Interaction
Tags vs Text
Over at my work blog, we have just uploaded a post about how we created a Flash Text Cloud for one of our recent clients.
Bottom line, if you are in need of a faux tag cloud made in Flash, there is both a download and example for you to enjoy. And if you’re interested in tossing up how to go about creating your own tag (or text) cloud, we’ve also outlined the reasons we used Flash and not CSS.
Posted in Development, Interaction
A week on ActionScript 3.0
So I’ve spent about a week now hacking away at the latest incarnation of Flash ActionScript. It’s been an interesting journey, and one that is getting more and more rewarding, the longer I spend time with it. AS3 has been around for a while now, but the nature of the work that I do on a daily basis has meant that I’ve not had a. the need, and b. the opportunity to actually spend any time learning it up until now.
Late last year I spent a day looking at some tutorials, and following on with them – but the only real way I know to really learn something is to actually do it. As a self-taught slash web-taught coder, it raises interesting challenges – as you rely on other’s sharing and structure to begin the process.
As part of the learning process, I set up labs.shiftperception.com/ – which I intend to fill with useful examples (for my own future reference as much as others). As is often the case though, at the moment it belies the amount of learning i’ve undergone in just a short week. However, the process of making the labs itself gave me a great start to feeling confident approaching development using this new codebase. Some reflections:
There are some really smart people out there, ready to help.
It can be daunting at first, to realise that there are soo many really good Flash developers out there that are doing amazingly cool stuff… but as you dig deepeer, you realise that these same developers are the first to offer help, examples and understanding that quite frankly put the Adobe help files to shame. I’m quite sure some of these same people either worked closely with Adobe to develop AS3, or helped test it, and if they didn’t, they should. A few links to help the weary searcher (ive posted many of these before, but well worth doing again! bear in mind it’s non-exhaustive) :
- Kirupa AS3 tip of the day – the first stop
- Senocular – the author of the tips above
- Betaruce
- Flash Guru
- ByteArray
- Andre Michelle
Flash is moving away from designers, and towards developers.
I know, it’s a bold statement, but it feels true. What I mean is that, yes – for all intense and purpose, Flash CS3 still functions the same as Flash 8 and MX2004. As a designer I can still go in and add MovieClips, manipulate the timeline, and do all my usual tricks using reasonably simple AS2 code. But as soon as I want to do anything specific to AS3, simple things become a lot more difficult to understand – memory management, adding and removing event listeners, and that’s not even approaching Classes and that can of worms. These are the realms of the developer. Someone versed in the language of zero’s and one’s. Not your average Designer. Not even (for the most part) your very good designer.
This is a very interesting point, because it seems that Flash, as it becomes ubiquitous on multiple devices, and as the language matures, it is invariably becoming a true development environment, aimed less at the original target market, and more and more at the developer. And it’s a very difficult juggling act to make. I wonder how long until a completely developer-oriented version is made?
I’ve been lucky enough to have access to a mate of mine, OJ, who – while not a Flash developer, is an extremely good programmer in pretty much everything else… and the great thing (at least for me) is that, while knowing next to nothing about AS3, he’s now able to help me with my coding woes. Sure there are some Flash-specifics that he needs me to enlighten him about, and he could certainly help me with theory in older versions of AS, but because AS3 now more than ever closely resembles other standard programming languages, people with skills like his can now give advice and help to us lowly slashes.
Migrating from AS2 to AS3 is not as simple as you think.
Unless you came clean into ActionScript at version 2.0, and embraced the developer’s approach to writing code, and even if you did – some fundamental things have changed between AS2 and AS3. Like dynamically attaching a MovieClip. Like references to _root, _parent and _global. Like keyboard events. If you have a project in AS2 that uses any of these, and want to port it to AS3, depending on your competencies as a programmer, this might not be a worthwhile task.
And for the designer, the inability to have code backwards compatible might not make sense. IE, in AS2 there was code from AS1 that you could still use, ie the fundamental way you went about doing things remained the same. Not so when making a project for AS3.
Give it a week, AS3 will grow on you!
If you are a reasonably competent coder/hack, you will really enjoy the move to AS3. It will be painful at first, but there is so much opportunity in the latest incarnation that it will be worth it in the long run.
In the near future, hopefully you will be able to see the fruits of my toils, but in the mean time, ill try and gather snippets together into useful downloads and post them in the lab. It may take a few weeks, but I think they will still be of use 
Posted in Interaction
ByteArray, AS3 experiments
These guys are cool : ByteArray.org. Check out their implementation of JPEGEncoder, and their new experiment in GIF exporting (oh, and drool at the mouse gesture example!!). Makes my simple “hello world” look… well, ah, simple!
Posted in Interaction
Hello World!
So, slowly getting there with the labs.shiftperception.com/… at the moment it’s trying to find the time to get a format im happy with. I’m nearly there, and if all things are working correctly, you should be able to see the first item i the lab by hitting this link : Hello World. Likewsie, on the labs page, you should be able to get back to this blog entry to discuss…
Fingers crossed!
Posted in Interaction
Excel PMT function in Actionscript
Just thought id share this as it will come in useful for someone in the future. Ever wanted to use the PMT function from Excel in Flash? Well, after some digging, and after some modifications, here is it.
PMT = function(r,np,pv,fv,t) {
/*
r = the percentage rate of the loan. (decimal: 8% = 0.08)
np = number of monthly payments (integer)
pv = present value or principal of the loan (decimal)
fv = future value of the loan (after payments) (decimal)
t = paid before or after (0/1)
*/
var vPow = Math.pow( ( 1 + r ), np );
var vT = (t == 0) ? r : ( r /( 1 + r ) );
return ( (vPow * pv) - fv ) / (vPow - 1) * vT;
}
Don’t say I never give you anything! (Thanks OJ for your hint on consolidating the last 2 lines into 1)
Posted in Postacrds
3D in Flash
Paper Vision 3D is a (relatively) new AS3 Flash 3D engine… using the greatly improved rendering power of Flash 9, this almost makes responsive 3D environments in Flash a possibility. Exciting!
Be sure to check out this demo. It’s nothing you can’t do with Quicktime, but boy it feels good on my computer
Posted in Interaction
Animating Masked Dynamic Text
Last week I had the need to animate a mask over a dynamic text field. Having loaded the content successfully, and setting the dynamic text field to the value of the XML, I then initiated a mask transition that affected the display of the dynamic text. (Ive mocked up a set of simple examples to demonstrate).
A. Not working
[kml_flashembed movie="/blog/swf/notworking.swf" width="400" height="160" fversion="7" /]
Now, Ive used Flash for a very long time, and have never had this problem, so I was (and still am to be honest) baffled as to why, after the transition was complete, my dynamic text field lost its content, because it seemed like such a simple thing to do.
Let me point out a few things.
- The dynamic text field was inside a Movie Clip
- There was NO keyframes in the movie clip. IE, there was only one instance of it on the stage
- The font was embedded
- The mask was a keyframed shape animation and NOT set at runtime
I did some research to see if others had the problem, and found out that masking dynamic text has been a battle ground between designers and Adobe for many a year. I’m posting my solution to the problem here for you to use, or comment on, or improve. Is it a bug? Is it known behavior? Im not sure, but here’s how to reproduce both the problem, AND 2 solutions :
1. Reproduce the problem
After finding a solution, I set out to reproduce the problem in a simple movie… but initially I couldn’t. This made me question whether there was, in fact, a problem after all.
B. Working, but not solving the problem
[kml_flashembed movie="/blog/swf/working_nomc.swf" width="400" height="160" fversion="7" /]
Turns out, in the example above, the reason it works is because the mask was applied DIRECTLY to the dynamic text field – whereas in my project at work I had applied the mask to a Moive Clip that inside it had a dynamic text field. So, there’s a solution right there… however this DOES NOT answer the question, and is a very limiting solution -imagine you wanted to fade the dynamic text out or move it’s location… it would need to be INSIDE a Movie Clip.
2. Understand the problem
So, in step 1 I was able to narrow in on what the issue actually was – which turns out to be specific to masking a dynamic text field that is in a movie clip. The next thing I did was to try and find out why it was going wrong. To do this, I tried a few things :
- change the location of where I set the dynamic text
- change the way I mask the movie clip
- try remaking the text field
- try viewing in a browser as opposed to the IDE
- searching the web for answers
Of the above, the only thing that began to work was changing where I set the dynamic text. This sounds crazy, but it appeared that Flash was equating a keyframe in the mask animation to a new instance of the movie clip!! Which meant that each time there was a keyframe, I had to reset the dynamic text – because in this “new instance” no properties had been set. I know (at least I hope) this isn’t what’s actually happening, but anyway, it got me closer.
3. The solution
Where did that leave me? Well, initally, quite annoyed. Because my animation was quite involved, it would mean that i’d have to have actionscript on each keyframe setting the value of the dynamic text… which is a COMPLETE WASTE OF TIME and space.
So, trying one last thing, I decided that I would set the value of the text field in an onEnterFrame handler instead.
onEnterFrame = function(){
textMC._data = "Lorem Ipsum Dolor Sit Amet";
}
This I know is a messy solution, but it was the cleanest I could come up with, and more importantly… it works! See for yourself :
C. Working!!
[kml_flashembed movie="/blog/swf/working.swf" width="400" height="160" fversion="7" /]
4. Gotchas
Now this is wierd… if the onEnterFrame handler occurs OUTSIDE the scope of the mask and Movie Clip, when you delete it (the onEnterFrame that is), the dynamic text will disappear. The below example is the same as the working example, the only difference is that the onEnterFrame belongs to the _root timeline.
D. Not working again, because of scoping problem
[kml_flashembed movie="/blog/swf/notworking_scope.swf" width="400" height="160" fversion="7" /]
I told you it was wierd!!!
5. Links
If you have any suggested improvements id love to hear them. Below is a list of the FLAs used in this post ( Flash 8 ).
Posted in Development, Interaction