Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Loading External Assets in Flash with Transitions : Page 2

When using MovieClips, smooth transitions are often preferred over abrupt starts and stops. This article discusses how to load and unload external content with an accompanying alpha-fade transition.


advertisement
The Setup
To create the master file, I'll use a base movie as the main controller, and then I'll load all SWFs into two target MovieClips. This will allow me not only to fade a movie in and out when loading and unloading, but also to easily cross-fade between the two SWF files. If I were to load the next SWF into the same MovieClip, it would immediately replace the first. Further, if I want to add a continuous soundtrack, for example, I can do so in the main controller movie, and the loading/unloading process won't interrupt the audio playback.

The external SWF files I'll be loading are 380 x 500 pixels, so I'll size my main movie at 380 x 525 to allow room for the single other asset I'll need: a button to switch through the slides. I'll give the button an instance name of "nextButton".

The Code
To begin, I'll need content to work with, so I'll put the pathnames to the three external SWFs into an array for easy access.



swfArray = new Array("red_bird.swf", "chinatown_dragon.swf", "working_beast.swf");

Next, I'll need two MovieClips into which I'll load the SWFs. I can create them in the main timeline on the fly using createEmptyMovieClip, naming them "target1" and "target2," and loading them into levels 1 and 2, respectively.

this.createEmptyMovieClip("target1",1) this.createEmptyMovieClip("target2",2)

Next, I'll start with the first slide loaded into target 1, and set the alpha of target 2 to zero so it can fade in when the slide is changed. I also want to keep track of which target is active at each press of the button, and which position in the content array was last used. I'll initialize each of these variables using the first target and the first slide in the array, respectively.

target1.loadMovie(swfArray[0]); target2._alpha = 0; activeTarget = target1; currentIndex = 0

To control the fading, I want to add an enterFrame event handler to the main movie that will fade down a new object called "obj1" until it reaches an alpha of zero, and fade up a new object called "obj2" until it reaches an alpha of 100.

this.onEnterFrame = function() { if (obj1._alpha > 0) { obj1._alpha -= 10; } if (obj2._alpha < 100) { obj2._alpha += 10; } };

There are two handy things to notice about this function. First, by using new objects, we can define them by swapping the target MovieClips at each button press. This eliminates the need to write separate conditionals that determine what to do if clip1 is active and what to do if clip 2 is active. Second, by adding the conditionals, we eliminate alpha values that are either negative or above 100, making the fades much more responsive and accurate.

Finally, we need to add an onRelease event handler to the button. This does three things. First, it populates the object variables discussed above, as well as the relevant tracking variable, activeTarget, by switching between target1 and target2, depending on which was most recently active. Second, it increments the swfArray current index variable, sending it back to zero if the last index has just been used. Third, it loads the next SWF into the MovieClip currently referenced as obj2.

nextButton.onRelease = function() { if (activeTarget == target1) { obj1 = target1; obj2 = activeTarget = target2; } else { obj1 = target2; obj2 = activeTarget = target1; } if (currentIndex < swfArray.length-1) { currentIndex++ } else { currentIndex = 0 } obj2.loadMovie(swfArray[currentIndex]) }

Putting all of this together, the first slide will load automatically, and each time the button is pressed, the obj1 MovieClip will fade out and the obj2 MovieClip will load the next SWF and fade in.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap