Jerome Turner has done
lots of interesting things in
his lifetime, such as studying
Media Arts at Plymouth
University, working on film
and TV productions, tinkering
with Flash MX, knocking out
illustrations and now, moving to
Birmingham. He's also worked on
several friends of ED books and is
a regular contributor to Computer
Arts magazine.
His site www.jerometurner.co.uk
will tell you everything else you
need to know.'
TV simulator
Jerome Turner
In the last few years, we’ve all seen a lot of Flash work on the Web... and let's face it, a lot of that work has been rubbish.
However powerful and lovely Flash might be, it doesn’t offer a Midas touch to every animation, site or navigation system
that’s knocked out with it. For every great site like www.presstube.com, there's another one whose sickeningly slow
loading sequence offers little more than twirling images, or forces you to crowbar your way into the site proper – not that
this has ever got to me at all, oh no!
However, as irritating as Flash on the web can be, I soon realized there were some applications of the tool I would always
find impressive. Here are a couple of my favorites:
www.sodaplay.com has been a favorite amongst the web community for some time. It's a fantastic, time-wasting
site that allows you to create all kinds of weird monsters and wriggling objects and then apply muscles, gravity, and
speeds, so they wander around the screen.
www.seraph.nl is the portfolio site of a friend of mine, basically a home for all his Flash experiments. His work
varies greatly but always seems to impress me with something new.
Explore these sites a little, and maybe you’ll appreciate why I find them so entertaining. Okay, so they’re not particularly
useful but you couldn’t say they weren’t engaging. In fact, I think you’ll find it surprisingly easy to let the hours go by while
you fiddle around, exploring and trying to figure out how the interactions work.
I don’t make any claims to actually understanding much of that kind of math-based work, but I think I know why I like it.
At the end of the day, however complicated or code-heavy these pieces of work are, they all have something in common:
they simulate behaviors or interactions that come from real life.
I guess for many of us, real life mainly consists of sitting behind a computer, 24/7, so let me elaborate on what I mean.
First take another look at sodaplay. While the
wireframe characters are jiggling all over the
screen take a moment to look at what they do
and how they work. Forget Flash or anything
you know about ActionScripting for a
moment. Look at them on a basic level and
relate the movement to that of a real animal.
The ‘legs’ move around as we’d expect and in
addition to this there is a sense of gravity,
speed, frequency of movement, all of which
are under your control.
In fact, if you knew something about bone and muscle structures on animals, you could probably create some pretty
realistic copies of our zoo favorites.
2
Jerome Turner TV simulator
To me, this is the appeal of a lot of the work
on Simon's site too. Projects like his gravity
ball also emulate a real-life scenario: you ‘pick
up’ the ball by dragging, and the ‘throwing’
action is intuitive too, coming naturally from
our own experiences of throwing balls. You
move it in a direction, and then let go. Gravity
makes the ball drop to the ground, and it
bounces realistically around the box.
So okay, it turns out I’m not really discovering
anything new in my love of this kind of work –
it’s been around since people started getting
into the ActionScripting end of Flash. But what
if you applied the same idea to something like
video?
Well, I’ve been playing around with video for some time now. I was using it in Flash before MX came out, mostly creating
animations from sequences of video images – check out www.jerometurner.co.uk/tea.swf if you want to see an example.
But what's the video equivalent of the throwable bouncing ball?
Think about television as a medium, forgetting about the content of the program. The reality is that TV viewing is an
experience. You walk into a room, sit down, reach for the remote and only then realize someone’s turned it off on the set
(instead of onto standby).
So, you have to get up to turn it on again; but the last person who was watching was also apparently stone deaf, because
it’s turned right up, so you leap for the remote to turn it down before your ear drums are blasted right through. You sit
down, get comfy and then see that the TV guide is sitting on top of the television, so you have to get up...
In short, try not to think about what you watch when you have the TV on, but how you’re watching it.
In my twenty-five years on this planet I’ve watched a lot of television. I’m not ashamed to admit it; indeed, much of this
time spent in front of the box has been enjoyable, and it warms my heart to think back to bygone days of different sets
throughout my life.
3
This is the current behemoth that sits in the corner of our living room:
It’s large, very old and finished with a lovely wood-effect vinyl. Despite its lack of aesthetic beauty, it's actually very well
behaved – which is more than can be said for the others I’ve come across.
One of my first TVs handed down from my sister many years ago was a tiny plastic set. The
image would often cut out altogether or need re-tuning for no reason – a process made
harder by the noisy crackle that started as soon as you reached for the knobs.
I once found an alarm clock, radio and tape player, which also featured a tiny TV screen
built into it, discarded in the streets of Amsterdam. After taking it home and finding a lead
for it I realized why the owner might have ditched it. The channel control was a single
tuning dial, but you could only ever receive either the image (in a sepia-toned version of
black and white) or sound. The quality of both was actually quite impressive, but since you
couldn’t combine the two it was basically useless. I kept it anyway.
Whilst at university I pitched in with my housemates to buy an ex-rental television. It
certainly looked very impressive – a large, sleek, modern hunk of black plastic – but the
problems started when it was turned on. I can’t even remember the full extent of the
problems we had with it, but suffice to say it was gutted in our front room by various repair
men before the shop replaced it.
And finally, in this age of flat-screen digital hi-tech wizardry, I recently knew a television
with an identity crisis, flicking randomly between a letterbox wide picture and one that
covered the entire screen. I think this had something to do with the settings not being
properly configured; but I ask you, what use is a TV if you have to spend hours fiddling with
the controls? Surely the whole point is to vegetate?
4
Jerome Turner TV simulator
Despite my experiences with faulty equipment, it hasn’t put me off watching TV – it’s merely the nature of the beast, I
suppose. But if we're to create a true TV simulator in Flash, how can we afford to miss out all the wonderful human, organic
quirks that make television viewing ‘real’?
Decorating my front room and building a television
I started out by making a ‘stage’ for all this action to take place, a realistic environment for the television.
Note that I’ve drawn everything on one layer, called background.
Then, on a new layer called TV, I drew a television.
On another new layer called video mask, I inserted the shape of
the screen (copied and pasted from the TV), keeping the video
layer underneath.
5
Placing the video clip
The QuickTime clip that I’m using for this project is pretty standard fare, just a few birds of the feathered variety that I
filmed at the boating lake down the road. I’ve also kept it short, at around twenty seconds long.
It's generally a good idea to do this while you’re experimenting, as it'll help to avoid putting too much strain on Flash while
you’re repeatedly exporting and testing the results.
I imported the QuickTime clip into my FLA, making sure the
settings were basically unaltered on their way through Sorensen
Spark. The only slight adjustment you might need to take into
account when doing this sort of work is in the Scale, to make
sure that the video clip will be just larger than the size of your
screen – don’t make it too big though as that will also increase
the file size of your SWF.
Once it was imported, I placed the video clip in a movie clip
symbol called videoholder, with the registration point at the
top left of the video to make the movie clip easier to
manipulate later on.
I dropped this in the masked layer video and gave it an instance name of vidHolder
before I forget (it’s a common mistake to be referring to instances in ActionScript
that haven’t yet been named on the stage!). On testing, the video clip appeared to
be playing on the TV – fantastic! This file is called tvsim.fla, and you can find it
on the CD.
Well, that’s all pretty basic stuff done – but it certainly got me in the mood to see how much further I could take the idea.
Let's take a look at some variations on the basic TV simulator.
6
Jerome Turner TV simulator
Manipulating the TV footage
Before getting into this little exercise, open tvsim01_line.fla so you can see the finished result.
The first effect I want to tackle is a pretty simple one, something I first saw on a TV many years ago. The picture would
randomly snap to showing as a horizontal line in the middle of the screen – it still worked as normal but it was as if the
image had been squished right down to an extreme letterbox shape.
In Flash terms, we can describe this as:
If (a random event occurs){
Shrink the height dimension of the video clip
}
This is made simpler by the fact that our QuickTime video clip is contained within the movie clip called videoholder. Its
properties can be changed in exactly the same way as if it contained text, an animation or some sort of graphic. So let’s
take a look at how the ActionScript is applied to create the effect.
To start with, create a new actions layer, where our script is going to reside.
Now enter the following ActionScript:
vidHolder.onEnterFrame = function() {
rand = Math.random();
if (rand>0.99) {
this.onEnterFrame = function() {
this._yscale += 1.4*(3-this._yscale);
};
}
};
This is a function that will continuously loop, which uses Math.random to give us a random number between 0 and 1 each
time the frame is repeated.
An if statement then reads this to see if it’s larger than 0.99. This won’t happen too often, but when it does, the rest of
the code is played.
The second this.onEnterFrame creates a loop within our first loop. If we were just changing the height of vidholder
once, say from 100 straight down to 1, there wouldn’t be any need to use this second loop, but we want our effect to be
a bit more realistic than that. If you play the effect back from the completed FLA, you’ll see that the video dimension
‘bounces’ down to its letterbox size.
You may well have come across this kind of math in using ActionScript to animate objects before – it's the crux behind
many of the effects simulating real life motion behaviors used in sites such as the two we looked at earlier. There are two
basic variations:
Easing Out is achieved by finding the distance between an object and its target position, in this case…
3-this._yscale
…and adding a fraction of this distance to the last value of the object.
this._yscale += (3-this._yscale)/4;
7
This means the object is always approaching but will never quite reach the target.
Bouncing In is very similar, but instead of adding a value smaller than the distance (dividing by 4 in the above example),
we multiply by a value just larger, so it always swings past the target, then back again and so on.
this._yscale += 1.4*(3-this._yscale);
Imagine letting go of one of those swingball ‘tennis-ball-on-a-rope’ games and you’ll get the idea.
Note that in our code I've made sure that the multiplier is larger than one but smaller than two. Try the code with anything
above two and you’ll see vidholder also starts getting larger, so it’s no longer gravitating towards the target.
As you'll see if you test it now, the movie clip shrinks around the registration point, at the top left – so our letterbox shape
is right at the top of the screen. To make this effect a little more like I remember, change videoholder so that the
registration point is at the center.
Now, if you test, we get our video shrinking towards the middle of the screen.
As this effect is complete and nothing more is expected of the video or code, we can leave it as it stands, even though the
inertia script will continue to run without us seeing the effects. In future experiments, where it will be necessary to keep
the video playing smoothly without superfluous code running, we’ll look at how to stop these loops.
That’s the first of the simulations then, just as I remembered it on that faulty TV. Later on, we’ll look at how to fix the TV
and roll the elements together but I want to see how many other effects I can try out first.
Rolling screen
Another familiar fault with many TVs is that old chestnut, the ‘rolling’ image. The picture seems to slip vertically in its
position and reappear at the bottom of the screen, often to the point that it’s actually rolling (or scrolling, even).
We start off with tvsim.fla again, with the videoholder clip as it was left
before our last experiment: just containing the QuickTime clip and masked
by the screen shape on the main timeline. This effect involves having the
picture scroll up the screen and reappear at the bottom; if half of the
videoholder clip is off the screen, we’ll need to show another instance
scrolling on from below, like so:
8
Jerome Turner TV simulator
Both instances will need to start playing the video at the same time, so that
when they scroll up, it will look as if they’re showing two parts of the same
footage.
Now we need to apply some sort of ActionScript to the video clips. They'll
both be doing the same thing stacked in a column, so it makes sense to
attach another instance of the QuickTime clip under the first one in
videoHolder – then we can control them both with the same code.
Now for the animating ActionScript. Start off by initializing a couple of constant variables for use in the animation:
startPos = vidHolder._y;
topRange = startPos-vidHolder._height/2;
startPos is the position of vidHolder before any movement has taken place, and topRange controls the position at
which vidHolder should return to startPos. The height of vidHolder is divided by two because we only want the image
to reset its position when one screen has scrolled through – this may be clearer once you’ve seen the rest of the code and
tested it.
In fact, the rest of the code is pretty straightforward anyway:
vidHolder.onEnterFrame = function() {
this._y -= 5;
if (this._y<topRange) {
this._y = startPos;
}
};
The top line sets up the kind of looping action that we should be familiar with by now. The five-pixel scroll then takes place
and finally there is a check to see how far vidHolder has got. If it is at (or past) the topRange, one of the two screens in
vidHolder has rolled through, so vidHolder is reset to its original position.
On testing now, we can see that the rolling effect is complete. I've saved this file on the CD as tvsim02_scroll.fla.
While we’re here though, let’s think about how to make this react slightly differently. Sometimes a TV will start rolling but
hang up, almost as if it’s just jumped out of position and is trying to correct itself.
Alter the code a little:
startPos = vidHolder._y-10;
vidHolder.onEnterFrame = function() {
this._y = startPos-Math.random()*10;
};
9
Now, instead of moving the vidHolder up by five frames, we make it select a new position on each loop, which wobbles
around due to the use of Math.random.
There’s no longer any need for topRange, as vidHolder isn’t moving up the screen – it always remains around StartPos10. Given this, we can also alter the value of startPos to clean things up a little. This file is saved as
tvsim02a_scroll.fla.
Mummy, come and look, it’s snowing!
This is a pretty familiar one. We've all seen TV snow at one time or another, so it would be a shame to miss it out. Now,
there’s no simple way I can think of to create that effect of thousands of squiggly maggots crawling all over your screen
(sorry, that might be just me) so we turn to Photoshop. Here we can make up a few images that will loop in Flash as TV
noise.
Open a new file at 72dpi and the same dimensions as the
QuickTime movie in your Flash file.
Then, with just a couple of clicks, select Filter > Noise >
Add Noise to create a static image of lovely TV noise. I've
set the controls with Amount turned up to full. There’s also
the option to make monochromatic squall, but I'd rather
keep it in glorious technicolor. Thinking about it, TV snow is
usually black and white, but hey – I’m allowed to use artistic
license, right?
There we have it then – instant TV noise! The great thing
here is that the noise filter is applied randomly – if you
create four images in the same way, they'll all be different.
Once we've saved these images as nice small JPEGs, we can
import them into Flash.
Again, with a dodgy connection on a TV, snow is one of
those annoying little niggles that can start and stop
randomly. So, we want the four noise images to start playing
in succession after a random time, then stop again after
another random period. To start with, we need a new movie
clip symbol called noisemovie. It's made up of two frames
(for 'snow off' and 'snow on' modes) and three layers (one
each for the ActionScript, the images, and a sound
element).
10
Jerome Turner TV simulator
You’ll notice that it starts on frame 1; we want to make sure
it pauses there to start with, so attach a stop action. Then,
in frame 2, place another new movie clip symbol (called
noiseimages) that contains each of the four noise graphics
in its own frame.
Back in the noisemovie symbol, drop an imported audio
file of noise into frame 2 of the sound layer. This can be
simply made up in something like Sound Edit and then
exported for use in Flash as an AIFF or WAV file. Note that
it's set to loop 100 times.
This means that we now have a movie clip, noisemovie, which will pause at frame 1, where nothing's happening. If a
random event occurs, it will go to frame 2 where we have our looping noise images and sound.
Place an instance of noisemovie (called noise) in a new noise layer under the mask, and (since there's nothing in frame
1 of noisemovie) use the registration point to position it on the stage. This isn’t ideal, but since it needs to go directly on
top of vidHolder, it should snap easily onto that movie clip's registration point.
Now we just need to add some ActionScript in frame 1 of the root timeline. The whole thing looks like this:
noise.onEnterFrame = function() {
if (Math.random()>0.9) {
if (this._currentframe == 1) {
this.gotoAndStop(2);
this._alpha = 50+Math.random()*50;
}
} else {
this.gotoAndStop(1);
stopAllSounds();
}
};
11
We start with an onEnterFrame to set the loop, applied to noise. The if statement creates a random number and checks
to see if it’s larger than 0.9. If it is, the next part of the ActionScript is played through, where the frame position (or status)
of noise is checked.
If it’s currently in frame 1 (noise is stopped so the video appears to be playing normally), then noise is sent to frame 2
(where the images loop and the fuzzy noise plays). In addition to this, the _alpha value for noise is also set randomly
between 50 and 100 so that it's sometimes still possible to make out the video playing underneath.
The else part of the code governs what happens when the number generated by Math.random is greater than 0.9 and
the interference section is already playing. If noise is at frame 2, then it is sent to frame 1 and the video appears to play
normally. The sound is also stopped.
This file is on the CD, saved as tvsim03_noise.fla.
Dodgy color
What I liked about the last effect was the way it turned on and off after random intervals. Surely it couldn’t be too hard
to slot something else into the loop, some color faults for example?
We can use the setTransform method to change the color parameters of the video from within the ActionScript. Here's
a table of the parameters available to us:
Parameter
ra
rb
ga
gb
ba
bb
aa
ab
12
Value
Percentage of red (-100 to 100)
Offset of red (-255 to 255)
Percentage of green (-100 to 100)
Offset of green (-255 to 255)
Percentage of blue (-100 to 100)
Offset of blue (-255 to 255)
Percentage of alpha transparency (-100 to 100)
Offset of alpha transparency (-255 to 255)
You may have come across them before, as they can also be set via the
Advanced Effect dialog (accessed via the Properties inspector):
Jerome Turner TV simulator
The normal setting for the Offset values is 0 but they can be altered to
add or reduce the amount of that particular color in the image. The
Percentage values start at 100% but can be reduced to draw a particular
color out of the image.
You might also find the following ideas useful in mixing your own coloring for movie clips. I've shown them being made
up in the Advanced Effect panel, but this could just as easily be done using setTransform.
Drawing out red makes cyan.
Drawing out green makes magenta.
Drawing out blue makes yellow.
13
Drawing out all three percentages and setting offsets to full will invert the full set of colors.
Now that we understand the color parameters of the setTransform method, let's look at how we can use them in our
code to give the impression of color faults on the TV.
We start with the TV as usual and attach this code to frame 1 of the actions layer:
vidColor = new Color(vidHolder);
colorTransform = new Object();
statusColor = true;
First we set up a variable called vidColor to hold our new color. Since we'll be using the setTransform command, we
also need to create a new object: colorTransform holds the various values for red, green and blue. The variable
statusColor will tell the code when to run the code that actually changes the color.
The rest of the code looks like this:
_root.onEnterFrame = function() {
if (Math.random()>0.9) {
if (statusColor == true) {
Coloring = 240-Math.random()*480;
statusColor = false;
} else {
Coloring = 0;
statusColor = true;
}
colorTransform.rb = colorTransform.gb = colorTransform.bb = Coloring;
vidColor.setTransform(colorTransform);
}
};
Once again, we use Math.random to generate random numbers so that the effect will happen in an unpredictable way.
When the number generated is greater than 0.9, and statusColor is set to true, the code will go on to set a random
color number and the statusColor flag will be reset to false. The following loops will return the value of coloring to
normal once a number greater than 0.9 is returned.
The last bit of code is where we actually set the color offsets for the object colorTransform to equal Coloring, and use
setTransform to change the color of the video. You may have noticed that I've given all the offsets the same value
Coloring, which will be somewhere between -240 and 240 – this makes the image brighter or darker.
14
Jerome Turner TV simulator
Try altering the code so the rb, gb and bb are replaced by ra, ga and ba and
set Coloring initially to the usual 100. The value randomly created in
Coloring may be out since it can range up to 240% – these high settings
produce a more ‘contrasted’ image. So you could effectively create
brightness and contrast controls by modifying the Offset and Percentage
values respectively.
15
I see dead people
Okay, so maybe this isn’t your everyday television fault, but it’s something I’ve occasionally seen. You’re sitting there happily
watching a show and these weird ghost images start interrupting the picture, sometimes from a different channel, but more
often just a delay of the current program.
In terms of this being applied to Flash, it means our vidHolder clip will need to be copied on top as an alpha (a partly
transparent layer) that runs a few frames behind. The easiest way to do this is probably with duplicateMovieClip. Let’s
take a further look at what we’re doing though before rushing into it, as there’s one issue that could make this tricky.
Since vidHolder is in a masked layer, we rely on the mask to clip out the shape of the TV screen. In using
duplicateMovieClip though, we have to set a new level for the video to be duplicated to – this level is independent of
all the other layers currently in the FLA, including the mask. If you try duplicating vidHolder into level 1 with a 50% alpha
to create the ‘ghost’, it will appear on top of the original video (as expected) but will be unmasked as there are no other
layers in level 1 to mask it.
My solution is to turn vidHolder and its associated mask into a movie clip symbol on the root, and duplicate that instead.
This means that the video and mask are duplicated together, so the masking is never lost.
Start by selecting frame 1 in the video mask and video layers, so that the
stage content is highlighted.
Then hit F8 to make them into a movie symbol called maskedvid. Inside
this new symbol, set up the masking as before.
Then back in the root give maskedvid symbol the instance name ghostVid
and we can finally apply the ActionScript.
counter = 0;
ghostVid.onEnterFrame = function() {
counter++;
if (counter == 5) {
ghost = this.duplicateMovieClip( 1);
ghost._alpha = 50;
delete this.onEnterFrame;
}
};
16
You may have seen duplicateMovieClip create copies of a symbol with a new name appearing in the brackets. However,
here I pass the new name on by saying ghost=this.duplicateMoveClip(1), where the '1' refers to the level into which
it'll be loaded.
Then I can alter the variables of ghost, namely the _alpha, so that the original video can still be seen through the copy.
Once the ghost version of the video has been created, counter will keep on increasing unnecessarily so I add a delete
to stop the loop. You probably won’t see the effect of this in the final SWF but it’s a good habit to get into for when your
projects get more complicated and many actions are running at once – if you think an onEnterFrame doesn’t need to run
any more, simply use the delete command to stop it. The final file is saved as tvsim05_ghost.fla.
Jerome Turner TV simulator
This starts us off with a counter at 0. Then counter++ loops five times, acting as a short pause before the ghost image
appears, to make it run just a few frames behind the original video.
A very faulty television
So, we’ve looked at various ideas so far... how about combining them into something a little more coherent?
In the following exercise, I want to start wrapping up by applying some of the effects into one TV. As always, it’s a good
idea to think about this in basic terms first. It would be pretty messy to try lumping all the effects in with each other at
once, so I’ll just use the first three and make them play in a random order:
Shrinking screen
Rolling screen
Snowy interference.
I know that if my TV started doing all of the above I’d give it a good bashing to get it working again (maybe that’s why I
never got that job as an electrician), so I’d like to incorporate that into the project. The most logical way to do this is as
shown here:
17
TV randomly starts displaying one of the three faults.
Hit TV to get it working again.
TV randomly picks another fault and plays it.
Hit TV to get it working again.
This could end up with the television blowing up after hitting it a certain number of times, but for now I just want to get
this working. As vidHolder looks slightly different depending on the effect, we'll need to make up a new movie symbol
called combinedMC, which can be referred to on the root timeline to create the three effects.
Start by creating a new symbol with frames 1, 6 and 11
labeled line, roll and snow.
We know that combinedMC must contain the video, so we
drop in an instance of videoholder covering all three areas.
(Note that we need to use a central registration point with
videoholder for all our effects to work.)
To create the effect where the height shrinks to a few pixels,
the combinedMC can stay as it is in the line frame.
However, to ‘roll’ the screen, we need another instance of
videoholder, so we add this in a new layer called video2.
18
Jerome Turner TV simulator
The snow effect needs an instance of the noiseimages loop given the
instance name snow and layered over the videoholder.
So now this combination of all three effects has been prepared, how does
it work in the root timeline? Well, to start with, we place it as usual in the
masked video layer, with the instance name comVid.
We then add in another symbol. The idea is that the user can click to reset
the TV each time an effect starts occurring. In a new layer, draw a leg and
shoe dangling into the stage from the left – make this into a movie clip
with the instance name foot. Make sure the registration point is at the
top of the leg to allow for a large swing when the clip is rotated.
Now we need to design some code to ensure that whenever someone
clicks on the leg, it will swing up and give the TV a kick. (Not that I
recommend this as a way of fixing dodgy electrical appliances, but this is
virtual reality wish fulfillment here – come on, you know you'd want to
kick your TV if it was playing up that badly!)
19
Now onto actions.
So far, we’ve been using functions directly in the form:
this.onLoad=function(){
}
This is because they've never been set up with the intention of calling them later on. Here though, we want to do just that.
The most logical way to run the overall project is:
Initialize normal playing of the video.
Pick a random number.
Choose an effect to play if the random number matches that of an effect.
Play the effect whilst pausing everything else.
At any point during the effect, allow a kick of the TV to restart the whole process by calling the first main function
again.
To start with then, the main function sets a continuous loop and initializes normal playing of the comVid movie clip
instance:
function main() {
_root.onEnterFrame = function() {
startPos = 153;
comVid._y = startPos;
comVid.vidHolder._yscale = 100;
comVid.gotoAndStop("line");
Later on, startPos will be the reset value used to make sure comVid doesn’t scroll out of view, so it makes sense that
this will also be used to initialize the video here.
The following lines...
comVid._y = startPos;
comVid.vidHolder._yscale = 100;
...set the placement and scale of the videoholder clip. We need to specify the scale as it needs to return to normal after
the line effect has finished messing around with it.
Then...
comVid.gotoAndStop("line");
...makes sure we’re stopped at the frame label line so comVid doesn’t run through and show the snow effect.
The next step is to create the random number using Math.round to make sure it is a whole number between 0 and 20:
rand = Math.round(Math.random()*20);
20
if (rand == 1) {
delete _root.onEnterFrame;
comVid.gotoAndStop("snow");
comVid.snow._alpha = 50+Math.random()*50;
comVid.onEnterFrame = function() {
boot();
};
The line...
Jerome Turner TV simulator
Following this, we set the first of our effects, which runs when rand is 1:
delete _root.onEnterFrame;
...stops all the ActionScript outside the if statement. Otherwise, it would keep initializing itself and choosing random
numbers unnecessarily. We then send comVid to the snow frame and set the alpha of the snow symbol randomly. Finally,
a loop is set up to wait for the boot function to be played.
"Hold on!" I hear you cry, "What’s this about about a boot function?" Well, obviously, we will need some ActionScript to
move our foot symbol and fix our TV – we'll look at it a little later on in the code.
The next bit of code effectively says "okay, if rand isn’t 1 but is actually 2, play this next effect":
} else if (rand == 2) {
delete _root.onEnterFrame;
comVid.gotoAndStop("line");
comVid.onEnterFrame = function() {
this.vidHolder._yscale +=
➥
(3-this.vidHolder._yscale)/6;
};
boot();
Again, the main actions are stopped and comVid sent to its line frame.
If you remember how this effect worked, the height becomes repeatedly smaller until it reaches the target, so we need to
make sure the effect loops as comVid is adjusted towards a target height of three pixels. We covered the math used here
earlier, so you might like to flick back a few pages.
21
Again, the boot function is called up to reset from the start.
The last effect slots in as shown:
} else if (rand == 3) {
delete _root.onEnterFrame;
//roll
comVid.gotoAndStop("roll");
comVid.onEnterFrame = function() {
if (this._y>startPos-(this._height/2)) {
this._y -= 5;
} else {
this._y = startPos;
}
};
boot();
}
};
}
This is the rolling picture, so comVid is set to play the frame containing two instances of videoholder. A loop then starts
which should be familiar from the earlier work – it also makes use of the constant startPos variable set up earlier. As
long as comVid hasn’t reached the top of its scroll, it moves up five pixels; otherwise it's reset to startPos. And then once
again, the boot function is called.
So there’s quite a bit of code there already, but we just need to do two final things: define the boot function, and call up
the main function in order to get it all running.
function boot() {
foot.onPress = function() {
main();
this._rotation = -45;
};
}
When this function is called (once each effect has been put into action), foot becomes a button that can be used to restart
the TV. On pressing foot, the main function is called and everything starts all over again. This is the reason for making
main a callable function in the first place, so that our movie can be rebooted (ha-ha!) in this way.
To show that foot is kicking, the rotation of the clip is also changed. While we’re here, I also remember that foot will
need to be repositioned ready to be kicked again, so add this into in the initializing steps:
startPos = 153;
comVid._y = startPos;
comVid.vidHolder._yscale = 100;
comVid.gotoAndStop("line");
foot._rotation=-30;
The very last line is simply:
main();
22
A variation on our faulty TV movie
Now we could easily leave the project there, but here’s me thinking that this might end up on the Web as some kind of
game, or time-wasting device at least. As far as narrative goes it’s all pretty circular, what with this repetitive kicking of a
faulty TV for hours on end – it doesn’t really promote love to all things electrical either.
Maybe it would be nice if the TV reacted to all the hammering you gave it – something to teach that a kick can help in
the short term but at the end of the day it will probably destroy the set for good.
Jerome Turner TV simulator
This calls the function for the very first time to get the ball rolling. Until now, we've just been creating the actions that will
play when main is called. And with that, the project is finished as a continuously looping, very faulty TV. As there’s quite a
bit of code there, you might like to compare your code to that found in tvsimfinal.fla on the CD.
Start off by turning the TV image in the TV layer into a movie clip symbol, TVset, and give it an instance name of tv.
In frame 2 of the TVset symbol, create another symbol containing a
looping sequence of fire images, much like the noise images used for the
snow effect.
Actually, maybe they're not quite as impressive as the noise images, but hey, you know what I'm getting at, yeah?
Now for the ActionScript. Add the following lines to the beginning of the code:
tv.gotoAndStop(1);
hits = 0;
As the TV symbol should be paused at frame 1, unless otherwise instructed, this is first line. I also add a new variable, hits,
as a counter for the number of kicks the TV has been given, which starts at zero (since the TV hasn’t been kicked yet).
23
Then we update the boot function accordingly:
function boot() {
foot.onPress = function() {
main();
this._rotation = -45;
if (hits<=10) {
hits++;
} else {
tv.gotoAndStop(2);
delete this.onEnterFrame;
comVid.stop();
comVid._visible = false;
}
};
If the TV has taken fewer than ten kicks, main is called to reset our movie, and hits is incremented. If this is the tenth
kick, we assume the TV is totally kaput, and the TVset movie clip is sent to its fiery grave at frame 2. Along with this, the
current looping actions are stopped, and comVid is turned off. Surely a TV blazing away like that would never still be
playing, right?
And that, my friends, is it. This file can be found on the CD saved as tvsimfinal_fire.fla. From those hazy initial ideas,
I’ve created a simulator of sorts, but hopefully not one you’d expect to find if someone told you they were going to
recreate a TV viewing experience!
Look back at the other ‘organic’ Flash experiments I namechecked at the start of this chapter, and you'll see that it
essentially draws on the same idea: looking around and making use of our everyday experiences to make work that aims
to touch on human emotions. It also displays several good methods of using ActionScript to control the playback and
appearance of the video you use.
Hopefully, you can close the book after this chapter and at least see how some of your own experiences apply to design
work. Inspiration could come from anywhere, something someone said to you years ago, a cereal packet you noticed this
morning, or even the view from your window at this very moment. It’s all those things that make one person’s take on a
brief or concept so different to another’s, so it’s just up to you now to take that into Flash MX, and see what video can do
for you.
24