Flash Game Design  
 
     
Tutorials Articles
     
AddThis Social Bookmark Button  
 
Step 10.
This is part 3 of the Flash tutorial to create a square transition effect, where we'll start writing the Actionscript. On the main timeline, delete an MC's that are on the stage, and create a blank key frame (f7) on the first frame of the first layer. Enter the first line of code, as shown below.

Line 43 - A object, named image, is created which will hold the three properties: image width, image height and the total number of images.

 
Step 11.

Line 2: Whenever an image is attached with actionscript it needs a unique "level" assigned to it, which is similar to a layer. Each time an image is added the level is increased so that the next image will be given a unique level. This variable will hold the current "level".

Line 3: The number of columns of masks

Line 4: The number of rows of masks

Line 5: The amount of opacity of the mask to decrease

Line 6: The number of masks is calculated

Line 7 - 8: The mask's width and heigh are set

 
Step 12.

Line 9 - 10: Two boolean variables are created to pause certain functions

Line 11: An array is created to hold each segment of the image

Line 12: Each segment of the image is placed inside the fader array when we want it to start fading.

Line 13: A object called time is created, which will hold two propertes. Stamp will store the next time at which to insert a segment of the image. Delay will hold the amount of time inbetween inserting images.

Line 14: This variable will hold the frame number of the allImages MC. This number will change before a new image needs to fade in.

 
Step 13.

Line 15 - 16: Empty MC's are create to hold the 2 layers of images

Line 17: An instance of the allImages MC is created and named "image" and attached to "bottom" empty MC.

Line 18: The instance is then told to go to the frame number, held in the variable "bottomNum" (1 at the start)

 
Step 14.

Line 19: A function is created to split up the top image into small segments.

Line 20 - 21: Two FOR loops are used to create the rows and collumns of the segments

Line 22: With each iteration in the loop, an empty MC is attached to the "top" MC, and temporaily assigned to the variable "b". Each empty MC will hold a segment of the image.

Line 23: Each segment is given an image property, which is used to store an instance of the "allImages" MC.

Line 24: The instance of the allImages MC is told to go frame 3. You can alter this number to whatever image you want to start fading first, but make sure it's not the same as the one in the variable "bottomNum", which is the frame number for the bottom image.

Line 25: The segment is then given a propert called "mask", which is used to attach an instace of the "mask" MC.

Line 26: The "mask" MC is then set to mask the image

 
Step 15.

Line 27 - 28: The mask's width and height are set to the variable defined earlier

Line 29 - 30: The position of the mask is then set, using the incrementing i & j variables in the loop.

Line 31: The segment is given a last property called "faded", which will be set to true once it's opacity has reached 0.

Line 32: The segment is inserted into the container MC

Line 33: segmentCount is then increased by 1.

 
Step 16.
Here' is 2nd part of the code all at once:

Line 37: The createSegments function is used.

Line 38 - 39: Now that the segments have been created, the MC can be positioned where we want them.

Line 40: time.stamp is set to the current time.

 
Next go to Square Transition Flash Tutorial - Part 4 which is the final part of this Flash tutorial
Part: 1 | 2 | 3 | 4
 
   
 
   
 
Site Copyright © 2008 Nick DS. All rights reserved.