Graffititools:Designing tips n tools, tutorials, tricks

Download source project t1059.zip (2 kb)

• Launch Flash Designer and set movie dimensions 500 x 500 (or any desired).
• Change frame delay to “Stop”.
• Add new frame, change “Frame 1″ to “Master Frame (1)”
• Go to “Frame 1″, select “Master Frame (1)” as the background:

Create a heart

• Go to “Frame 1″
• Choose “Insert” > “Shape or Line” and select “Heart”
• Fill it with radial gradient (center color orange, outer color red), resize it to 52×37 pixels
• Convert it to sprite (”Edit” > “Convert to Sprite”)
• Rename it to “heart” and check “ActionScript Target” under “Item” > “Placement Properties”
• Move the sprite outside visible area

Create background

• Go to “Master Frame (1)”
• Choose “Insert” > “Shape or Line” and select “Heart”
• Fill it with vertical gradient, top color light red, bottom color dark red
• Duplicate, enlarge and position both hearts to create the background

Add ActionScript:

Go to “Frame 1″, choose “Frame” > “ActionScript” and paste the code:

maxhearts = 100;

var hearts = new Array();

for(i=0;i<maxhearts;i++){hearts[i] = heart.duplicateMovieClip("heart"+i,100+i);

// put it in random placehearts[i]._x = Stage.width*Math.random();hearts[i]._y = Stage.height*Math.random();hearts[i]._xscale = 40+Math.random()*60;hearts[i]._yscale = hearts[i]._xscale;

hearts[i].yspeed = Math.random()*4+ 1;hearts[i].increment = -0.025+Math.random()*0.05;hearts[i].onEnterFrame = function() {this.radians = this.increment + this.radians;this._y = this._y - this.yspeed;this._x = Math.sin(this.radians) + this._x;if (this._y<-20) { this._y = Stage.height; this._x = 0-10+Math.random()*Stage.width;}}}

Hit F9 for preview.

INFO: to place an object in front of hearts, select it, choose “Item” > “Placement Properties” and change the layer to higher value, for example “Layer 3″:

 Give your comments if you like this tutorial.. and i hope you like this.  

A Flash tutorial to create a gallery with a jagged transition.
Step 1. First of all you’ll need to download the FLA containing some images images for you to work with and the gallery background. Once you’ve done that, open it up and go into the gallery MC, where you’ll see the background on it’s own layer and MC (Movieclip)

Step 2. I the library you’ll see the image and thumbnails in their own folder.

Step 3. To initiate the image transition, we’re going to use some thumbnails. Drag over the thumb-0 image from the library to a new layer called “thumbs”, and Convert it to an MC called thumb0.

Step 4.

Add the rest of the thumbnails and convert them to MC’s thumb1, thumb2 etc

Step 5. This is part 2 of the tutorial to create a gallery with a jagged transition effect. Next, click on the 1st thumbnail MC and, from the properties panel, give it the instance name thumb0. We’ll be using this instance name to refer to the thumbnail with Actionscript. Step 6. Drag the larger version of the image onto the stage, and convert it to an MC called image0, making sure to check the box “Export for Actionscript”. This will give the MC the identifier “thumb0″, which will be used later to reference the MC when the Actionscript is written. ONce you’ve done that delete the MC from the stage.

Step 7. Add each other large image, convert them to MCs and give them identifiers.

Step 8. This is part 3 of the tutorial, where we’ll be creating the jagged shaped masks. Next, create a rectangle the same size as the large images (320 x 230) Step 9. Convert the rectangle into an MC called mask0, with an identifier of the same name.

Step 10. Go into the MC. Step 11. Choose the Lasso Tool (image a) and, under the Tools options, choose “Polygon Mode” (image b). a) b) Step 12. We’re going to use the lasso tool to cut the red rectanle into 2 jagged shapes. Start by clicking from the top left, just outside of the rectangle, and then click again below the rectangle, to create a steep diagonal line. Click for the 3rd time at the top, above the rectangle, and continue to creating diagonal line across the rectangle. Step 13. ONce you get to the end to the right, join the last diagonal line with the 1st point that was clicked. This should create a selection, as shown below. Step 14. Convert the selection to an MC called “mask1″, giving it an identifier with the same name. Step 15. Delete the mask1 MC, leaving you with the bottom jagged shape in mask0.

Step 16.

In the gallery MC create a new layer called script, open up the Actions panel and enter the code shown below

Line 1 - 2: Create an array called order. When we attach the images, two masks & copies of each image will be attached. A 2D array (Arrays within an array) is used to hold the order of each image segment. The numbers have been rearranged so that none of the images will be alligned properly, when the gallery is first dispalyed.

Step 17.

Line 3: A for loop is created to create two groups of images, consisting of an empty MC and a mask (mask0 & mask1). The “j” in the loop will start off at 0 and increment by 1 (j++), while j is below 2 (i Line 4 : Variable “i” will temporarily hold the path of images. Line 5 : Variable “m” will temporarily hold the path of the masks. Line 6 : The mask’s X position and image target’s are set. Line 7 - 8 : The mask’s and image’s Y position are set. Line 9 : The mask (m) is set to mask the images (i)

Step 18.

Line 10: Another loop is used to attach a version of each image to each images MC (image0 -image2). Using “j” from the previous loop and “k” from this loop, the “order” array is looped through to attach the image number from the library. Line 11: We use the temp variable “i”, holding the path of the images0 - image2, to attach them images. We store the new path in the img variable. Line 12: Each image is placed on an X position, using the images width multiplied by the increment K number. Line 13: We use a temporary “thumb” variable to hold the name of each thumb associated with the image position. Line 14: The thumbnail is given propertes (2 in total) for each position images0 - images1 must move to in order to display an alligned image.

Step 19.

Line 19 - 24: 2 functions are created to increase and decrease the opacity of the thumbnails, as they are rolled over and rolled out.

Step 20.

Line 27 - 28: The targets are set to equal the positions to display image4, which is stored in thumb4.pos0 & thub4.pos1 Line 29 : A speed variable is set for how fast the images scroll.

Step 21.

Line 30: An onEnterFrame function is created which will execute any code inbetween the braces {} repeatedly, at the frame rate (30) of the movie. Line 31 - 33: This is the code used to move “images0″ & “images1″ MC to the “target” value minus the images current X position divided by the speed, whenever a thumb is pressed.

Step 22. Entire Code

And that’s all the Actionscript that needs to be written to create the jagged transition gallery. Download FLA (not preloaded) Download FLA (preloaded)

Use startDrag, stopDrag, _droptarget, onPress and onRelease functions to simulate virtual trash.

This tutorial is advanced, you have to understand basic commands of Flash Designer.

Download source project t1049.zip (86 kb)

1. Launch Flash Designer and set movie dimensions 300 x 300.
2. Create 4 blank frames with “Frame” > “New” so you have “Frame 1″ to “Frame 5″ in the frame list.

Frame 1

1. Download t1049.zip file and extract trash images.
2. Import image “pieceofpaper.gif” (File > Import Image) and move it outside visible area.
3. Convert it to sprite (Edit > Convert to Sprite), name it “Garbage” and check “ActionScript” target (Item > Placement Properties)
4. Import image “opentrash.gif” and move it to X:170, Y:118 (Edit > Move To) .
5. Draw an ellipse over the hole of the trash. Set fill color to black, 1% opacity, no line
6. Convert it to sprite, name it “Hole” and check “ActionScript” target
7. Add the text “Put all papers into trash”
8. Add Frame ActionScript (Frame > ActionScript):

   maxpapers=1;

Frame 2

1. Add the text “GET READY!”
2. Set background to “Frame 1″

Frame 3

1. Set frame delay to “Stop”
2. Set background to “Frame 1″
3. Import “laser.wav” sound and set the frame sound
4. Add Frame ActionScript:

   maxpapers = maxpapers * 2; // at each run increase the number of piecescollected = 0; // count collected items
   
   function checkifallcollected(){// check if all items are collected and go to congratulations frameif(collected==maxpapers) gotoAndPlay("Frame 4");}
   
   // this array will hold all piecesvar garbages = new Array();
   
   // create maxpapers piecesfor(i=0;i<maxpapers;i++){// create new instance of the papergarbage[i] = Garbage.duplicateMovieClip("garbage"+i,100+i);
   
   // put it in random place and random rotationgarbage[i]._x = 30+100*Math.random();garbage[i]._y = 30+200*Math.random();garbage[i]._rotation = 360*Math.random();
   
   // define mouse eventsgarbage[i].onPress=function() { this.startDrag();};garbage[i].onRelease=function(){// check if this piece hits the holeif(this._droptarget=="/Hole") {this.removeMovieClip();collected++;}
   
   stopDrag();checkifallcollected();};
   
   }

Frame 4

1. Import “elecshot.wav” sound and set the frame sound
2. Import image “closedtrash.gif” and move it to X:174, Y:163.

Frame 5

1. Set frame delay to 3 seconds
2. Set background to “Frame 4″
3. Set loop to frame 2 (”Frame” > “Loop” command)
4. Import “clap.wav” sound and set the frame sound

To create the text animation:

• Launch Flash Designer and choose “Blank document”.
• Choose “Frame” > “Frame Size” to set movie dimensions, for example 400 x 200.
• Choose “Text” tool and click on the frame. Type the text (for example “Text Animation”) and click OK.
• Choose “Edit” > “Align” > “Center on Page” to center the text on the frame.
• Choose “Animation” > “Intro Animation”, check “Enable Animation” and choose “Zoom” effect.
• Click “Text Animation”, check “Enable Glyph Animation” option and click OK twice.
• Press F9 to preview the animation. Hit “Alt+F4″ to close preview.
• Choose “Animation” > “Intro Animation”
• Check “Fade” option. Click OK.
• Press F9 to preview.

Way & Always Visible option

• Make sure the text is still selected.
• Choose “Animation” > “Intro Animation”
• Check “2 Way” and “Always Visible” option. Click OK.
• Press F9 to preview.

Here is a step by step tutorial shows you how to make 3D wall flash photo gallery using 3rd party flash software called Flash Gallery Factory and no complicated computer skills needed.

Here’s what you need:

1. Favorite Digital Photos

2. Wondershare Flash Gallery Factory

Step 1. Install and run in Slideshow mode

First of all, download Flash Gallery Factory and install it. And then double-click the icon on desktop or from the Start menu to launch the program. To create 3D flash photo gallery, please run in “Gallery Mode”.

Step 2. Add photos

The program will go to “Browse” tab by default. At first, browse photos in the File Explorer and simply drag & drag your favorite photos from the Photo Explorer to the Storyboard. Process the photos with the built-in editing tool, which include some basic functions like crop, rotate, filter, etc by double clicking the images on the Story Board. Add a bunch of song as background music if you like.

Step 3. Apply template

Go to “Template” tab to pick out a template for your photos so that all photos will share the similar style. To make 3D wall gallery, I select the “BarrelIn(36-pic)” from the 3D Theme Templates. Step 4. Select “Preloader”

Click “Set Preloader” on the “Template” Tab. Choose a gorgeous preloader for your own, here I choose “fish”. And then, set “Percent Color” and “Background Color”.

Step5. Publish the 3D flash photo Gallery

Before creating, click Publish Settings button to make output settings, such as Loop, Flash Quality and so on. Afterwards, click “Create SWF Movie” button to make the 3D flash photo gallery in SWF format.

Ok, that’s done! Download Flash Gallery Factory and follow the tutorial to make your own 3D wall flash photo gallery 5 simple steps.