Template Categories

templates categories Automobiles
templates categories Business
templates categories CSS Templates
templates categories E-Commerce
templates categories Education
templates categories Fashion
templates categories Greeting Cards
templates categories Hotels
templates categories Jewelry
templates categories kids
templates categories Models
templates categories Music - Films
templates categories Night Club
templates categories Real Estate
templates categories Restaurant
templates categories Software
templates categories Sports
templates categories Travel
templates categories Web-design
templates categories Wedding

Tutorial Categories

tutorial categories AJAX
tutorial categories CSS
tutorial categories Dreamweaver
tutorial categories Flash
tutorial categories FTP - File Transfer
tutorial categories HTML Emails
tutorial categories Javascript
tutorial categories Microsoft Excel
tutorial categories Microsoft Windows
tutorial categories Microsoft Word
tutorial categories MySql
tutorial categories Photoshop
tutorial categories Php
tutorial categories Windows Movie Maker
tutorial categories Xhtml / Html

Flash - image navigation

BELOW ( on the left ) IS THE EXAMPLE OF WHAT WE ARE GOING TO CREATE.
Shown at the side is one variation of a picture slider. There are tens of ways to create picture navigation in flash. This method is just one of them.
 

1. Create a new flash document , keep the dimensions to 100px x 100px with 21fps.

2. Insert two more layers above the default layer and name them images, mask and actions.

3. Create the images ( 6 numbers ) of 90px by 60px in photoshop and save them in a folder.
Open your Library panel (F11) and drag the first of your pictures onto the stage.

4. Select the picture and convert it into a movieclip. Name the movieclip img01 and make sure you set the registration point to the top-left.

5. Drag the second image on the stage and repeat the process. Name this movieclip as img02. Convert all the six images and name them accordingly.

6. Now place all the images in three by two rows as shown below.

flash picture navigation
7. select six of them and convert them into one single movieclip. Name it blockMC and make sure that the registration point is in the top-left.

8. Select the new blockMC movieclip and right click, choose Edit In Place from the menu. You will now be inside the blockMC. Name each of the movieclips with an instance name, like i1, i2 and so on ....

9. Click back to the main stage.

10. Select the blockMC and give it an instance name of block. Go to the mask layer and using the Rectanmgle tool (R) draw a rectangle 93x61. Convert this rectangle into a movieclip and name it hideMC.

11. Give this new movieclip an instance name of hide. Now go to the script layer and click into the empty frame. Press (F9) to open the actions panel and add the following code. Your image should look as shown below.

flash picture navigatio
speed = 4;
MovieClip.prototype.slideTo = function(x, y, speed, callbackObj, callbackFunc) {
if (this.slideControl) {
var mc_control = this.slideControl;
} else {
var mc_control = this.createEmptyMovieClip("slideControl", this.depth++);
}
mc_control.targetX = x;
mc_control.targetY = y;
mc_control.speed = speed;
mc_control.callBackObj = callBackObj;
mc_control.callBackFunc = callBackFunc;
mc_control.onEnterFrame = function() {
this._parent._x += (this.targetX-this._parent._x)/this.speed;
this._parent._y += (this.targetY-this._parent._y)/this.speed;
if (Math.abs(this.targetX-this._parent._x)<0.8 && Math.abs(this.targetY-this._parent._y)<0.8) {
this._parent._x = this.targetX;
this._parent._y = this.targetY;
this.callBackObj[this.callBackFunc](this._parent);
this.removeMovieClip();
}
};
};
holder.setMask(hide);
for (var i = 1; i<=6; i++) {
var mc_control = _root.attachMovie("trigger", "trigger"+i, i);
mc_control._x = 90+i*6; //X position for the dynamic buttons
mc_control._y = 78; //Y position for the dynamic buttons
mc_control.mc = this.holder["c"+i];
mc_control.trig.text = i;
mc_control.onPress = function() {
this._parent.holder.slideTo(this._parent.hide._x-this.mc._x, this._parent.hide._y-this.mc._y, this._parent.speed, this._parent, "slideDone");
};
}


12. We need to create buttons for the images.
Press (Ctrl+F8) and Create New Movielcip and name it trigger. Double click to go inside this movieclip. Using the Text tool (T), draw a Dymanic text box that will hold a single letter. In the properties panel at the bottom of your screen, give the dynamic text box an instance name of trig.

13. Click back to the main stage.

14. Open your Library panel (F11) and right click on the trigger movieclip.
Select Linkage from the manu that appears.

15. Click the Export For Actionscript tickbox and make sure the Identifier name is trigger. Click OK.

Hope you enjoyed this tutorial on how to create image navigation.
travel to india - kerala travel to india - Goa forums gatewa2internet ... myspace & home page gatewa2internet ... myspace & home page