In this week’s lecture Will went into some depth on AS3 for the first time, and we learnt how to create forms using flash components, which are premade, making the entire process much less complicated. Also we had to submit our splash screen animation this week, and then it suddenly dawned on me that this unit requires a submission every single week – while only worth a couple of marks here and there, it’s still like having a mini-assignment due every week. The template around each week seems to be, learn a new topic, trial the new concepts from the lecture in the labs, and then develop that concept into a part of your game.
Vector Art
It is pretty full-on, and a steep learning curve for those entirely new to flash, such as myself. I’m pretty rough around the edges when it comes to drawing stuff, or anything to do with art for that matter; especially so when it comes to vector art, and I was struggling to draw things in flash. However, during the tute, Reuben showed me the better alternative of using Illustrator to create your vector art, and then importing it into flash (kudos to Adobe for such good inter-program compatibility), and then he gave me a 10 minute crash course on Illustrator’s pen tool, and I finally got the hang of it – never did before, because I didn’t understand how it worked.
After getting all my drawings done, and then importing them, I found that when you want to time a movie clip that has been embedded in another movie clip or root, the animation of the embedded movie clip stays static, and this was a problem for me because I wanted to sort of rehearse timings and make the two sync.
Will showed me this neat little hack, where you change the symbol type of the embedded movie clip from movie clip to graphic, and then Flash does play the embedded graphic (originally a movie clip), as you move the playhead through the timeline. That allowed me to rehearse and sync the timings between the two symbols. The only drawback about this hack is that Flash doesn’t allow graphics to have instance names, so when you are finished with the sync-ing and change the symbol type back from graphic to movie clip, the instance name is lost; and if you forget to retype this, any AS referring to that instance of the movie clip will throw an error.
Event propagation
One interesting thing I learnt in the lab activity was the utility of the concept of event propagation. In a function that has been subscribed to by an addEventListener command, the function is always passed an event as its only parameter. By carefully grouping controls within a container movie clip, and adding the event listener to this container movie clip, instead of each of the individual controls, it is possible to manipulate logical groups of controls that require the same or only slightly varied functions with much less code repetition.
This functionality is prebuilt into the radio button component that comes with Flash, where the .group property effectively adds a pseudo container movie clip for all the radio buttons that have matching .group values. However, all the other components lack this, and in some instances, it makes sense to create this container yourself.
How event propagation works is something like this:
The listened event in the container object is triggered. The event is propagated to the object which the addEventListener was added to, such that event.currentTarget references this container object. The event is also propagated to the object within the container object such that event.target refers to this embedded object. In the case of multiple levels of embedding, the event is reiteratively propagated by drilling down all the way through to the lowest level in the embedding hierarchy.
The trick is that not all objects within the container object are referenced by event.target, just the relevant one. So for example, in a navigation bar (container object) which contains a back button (child object) and a forward button (another child object), and the following AS is used:
navBar.addEventListener(MouseEvent.CLICK, navCLick)
function navClick(evt:Event):void
{
var myButton:Object = evt.target;
var myContainer:Object = evt.currentTarget;
trace(“You pressed this (button): “ + myButton.name);
trace(“You pressed a something within this movie clip: “ + myContainer.name);
}
What happens here is that only the relevant button will be chosen by evt.target: either the back button or the forward button, depending on which was clicked on. The first trace will show this. The second trace will always show the navBar, because evt.currentTarget always references the object that the addEventListener was added to.
What happens if you click on a part of the nav bar that has neither button on it? Well, then both traces will show the nav bar, because both evt.target and evt.currentTarget reference the same object – just think of it in terms of drilling down.
Homework
And having just completed the splash animation, we now have to create the options screen of the game.
No comments:
Post a Comment