Introduction

This tutorial uses the Flash Framer Banner Rotator Complete file. The Banner Rotator Complete is an ActionScript 3.0 file for Adobe Flash that makes it easy to create a banner rotator in a few easy steps. Our developers have done the hard work so you don’t have too.

Step 1

Once you have downloaded the Banner Rotator Complete. Unzip the BannerRotatorComplete.zip file.

You’ll notice you have a Flash file named BannerRotatorComplete.fla. This file contains all the source code. You will only need to edit the Flash(.fla) file if you want a different size banner rotator.

You’ll also notices an IMAGES folder that contains all the images used in the banner rotator.

Finally you’ll notice a XML folder that contains the config.xml file. This is the file you will use to define your images and parameters.

Step 2

The easiest way to add your images to the Banner Rotator Complete is to save your images in the IMAGES folder and save over the provided images giving your images the same names as the provides ones.

You can also deleted the provided images and add your images to the IMAGES folder with any name you want. We will later define your images in the XML file.

Step 3

Open the provided config.xml file with Adobe Dreamweaver or a simple text editor of your choice.

At the top of the XML file you’ll notice all the parameters between the <parameters></parameters> tags. You can modify the parameters to your liking. Every thing can be modified in the XML file except the embedded fonts and the stage size.

You can read how to change the default fonts in the provided Banner Rotator Complete user manual. You can download the Banner Rotator Completer user manual here.

To resize the stage open the provided BannerRotatorComplete.fla file with Adobe Flash CS3 or CS4. Change the stage size to the size you want and then publish the file. You’ll then want to set the imageWidth and imageHeight parameters in the XML file to match the stage size.

To add images modify the the provided XML file with your information. To add more images copy everything from the opening <image> tag to the closing </image>. Paste this text before the closing </images> tag. Edit the tags with the appropriate information. Repeat this step for all additional images.

Completed Gallery

Below is the completed Banner Rotator Complete.

Conclusion

For more detail read through the full documentation. The Banner Rotator Complete comes with all source code so if you have ActionScript 3.0 knowledge you can edit and modify the code to your liking.

We would love to see your work and showcase it on our site.
Just email us at support@flashframer.com with a link to your Banner Rotator Complete gallery.

This tutorial will explore how you can create new events.

You can use if, then or, else statement to achieve the same results, but this tutorial will show the professional way to code with listeners. It also makes the code more readable and less complex.

Click here to view the tutorial

Papervision 3D Programming Tutorial – Quadtree Renderer
Papervision 3D Programming Tutorial – Mesh Splitting
Papervision 3D Programming Tutorial – Mouse Selection
Papervision 3D Programming Tutorial – Texture Smoothing
Papervision Programming Tutorial – Animations
Papervision Programming Tutorial – SkyBox
Papervision 3D Programming Tutorial – Environment Mapping
Papervision programming tutorial – 3D Text
Papervision 3D Programming Tutorial – BitmapViewport

Introduction

This tutorial uses the Flash Framer rotaryGallery component. The rotaryGallery component is an ActionScript 3.0 plug-in for Adobe Flash that makes it easy to create a photo gallery in a few easy steps. Our developers have done the hard work so you don’t have too.

Click here for information and to get the rotaryGallery component.

Step 1

Once you have downloaded and installed the rotaryGallery component, Launch Flash and open a new ActionScript 3.0 document. Save the document with any name you like.

You can read how to install the component in the rotaryGallery documentation click here to download.

Step 2

Open the components panel. Window > Components
You will now see a component set called FlashFramer.
Open up that set and you will find the rotaryGallery component.

Drag and drop the component onto the stage and align it.
I’m using the stage size of 700×500 pixels. I will also size the component to 700×500 to fit the stage.

Set the frames per second (fps) to 20 fps for smoother animation.

Step 3

Now lets load some images. I’m using ten images and one .swf file.
Put your images in the same directory as your Flash file in a folder named IMAGES.

Step 4

Jump back over to Flash.
Click on the rotaryGallery component to select it and open the Components Inspector panel.
Window > Component Inspector
Double click on the Image List value field.

A Dialog box will popup.
Click on the plus button to add the image url, link url, title, id, and description.
Repeat this until you have all your images entered.

You can also use XML file to control every parameter of the rotaryGallery component.
See the documentation that came packaged with the component or download it here.

Preview you file. File > Publish Preview > Flash

You now have a fully working rotaryGallery.

Step 5

You can either use the rotaryGallery component out of the box or modify and skin it to your liking.

rotaryGallery comes built with tons of parameters to customize your gallery. Such as: xml, layout, camera position, scrollbar, border, reflection, link type, back flip, and much more.
These setting are found in the Component Inspector in Flash.

Play around with these setting until you get the look you want.

Step 6

You can also skin the component elements to your liking. The rotaryGallery allows you to customize the glass effect movie clip and the information box with the title, description and link button.
Skinning the rotaryGallery component is easy. Just double click on the component in Flash. It will open all the skinnable elements. Double click on the element you want to modify and begin customizing. Once you done just click on scene 1 to return to the main timeline and preview your work.
File > Publish Preview > Flash

Completed Gallery

Below the completed rotaryGallery. I’ve added next, back, and shuffle buttons using the rotaryGallery API.

Conclusion

This is just a few ways to customize the rotaryGallery component. Read through the full documentation by clicking here. The component also has an ActionScript 3.0 API for advanced customization.
Click here to view the rotaryGallery API

We would love to see your work and showcase it on our site.
Just email us at support@flashframer.com with a link to your rotaryGallery gallery.

Introduction

This tutorial uses the Flash Framer coverFlip3D component. The coverFlip3D component is an ActionScript 3.0 plug-in for Adobe Flash that makes it easy to create a photo gallery in a few easy steps. Our developers have done the hard work so you don’t have too.

Click here for information and to get the coverFlip3D component.

Step 1

Once you have downloaded and installed the coverFlip3D component, Launch Flash and open a new ActionScript 3.0 document. Save the document with any name you like.

Step 2

Open the components panel. Window > Components
You will now see a component set called FlashFramer.
Open up that set and you will find the coverFlip3D component.

Drag and drop the component onto the stage and align it.
I’m using the stage size of 700×500 pixels. I will also size the component to 700×500 to fit the stage.

Set the frames per second (fps) to 20 fps for smoother animation.

Step 3

Now lets load some images. I’m using nine images.
Put your images in the same directory as your Flash file in a folder named IMAGES.

Step 4

Jump back over to Flash.
Click on the coverFlip3D component to select it and open the Components Inspector panel.
Window > Component Inspector
Double click on the Image List value field.

A Dialog box will popup.
Click on the plus button to add the image url, link url, title, id, and description.
Repeat this until you have all your images entered.

You can also use XML file to control every parameter of the coverFlip3D component.
See the documentation that came packaged with the component or download it here.

Preview you file. File > Publish Preview > Flash

You now have a fully working dynamic photo gallery.

Step 5

You can either use the coverFlip3D component out of the box or modify and skin it to your liking.

coverFlip3D comes built with tons of parameters to customize your gallery. Such as: xml, layout, camera position, scrollbar, border, reflection, link type, back flip, and much more.
These setting are found in the Component Inspector in Flash.

Play around with these setting until you get the look you want.

Step 6

You can also skin the component elements to your liking.
Skinning the coverFlip3D component is easy. Just double click on the component in Flash. It will open all the skinnable elements. Double click on the element you want to modify and begin customizing. Once you done just click on scene 1 to return to the main timeline and preview your work.
File > Publish Preview > Flash

Final Customized Gallery

Conclusion

This is just a few ways to customize the coverFlip3D component. Read through the full documentation by clicking here. The component also has an ActionScript 3.0 API for advanced customization.
Click here to view the space3D API

We would love to see your work and showcase it on our site.
Just email us at contact@flashframer.com with a link to your coverFlip3D gallery.

Introduction

This tutorial uses the Flash Framer space3D component. The space3D component is an ActionScript 3.0 plug-in for Adobe Flash that makes it easy to create a random photo gallery in a few easy steps. Our developers have done the hard work so you don’t have too.

Click here for information and to get the space3D component.

Step 1

Once you have downloaded and installed the space3D component, Launch Flash and open a new ActionScript 3.0 document. Save the document with any name you like.

Step 2

Open the components panel. Window > Components
You will now see a component set called FlashFramer.
Open up that set and you will find the space3D component.

Drag and drop the component onto the stage and align it.
I’m using the stage size of 700×510 pixels. I will also size the component to 700×510 to fit the stage.

Set the frames per second (fps) to 20 fps for smoother animation.

Step 3

Now lets load some images. I’m using twenty five images of space scenes.
Put your photos in the same directory as your Flash file in a folder named images.

Step 4

Jump back over to Flash.
Click on the space3D component to select it and open the Components Inspector panel.
Window > Component Inspector
Double click on the Image List value field.

A Dialog box will popup.
Click on the plus button to add an image with a title and description.
Repeat this until you have all your images entered.

You can also use XML file to control every parameter of the space3D component.
See the documentation that came packaged with the component or download it here.

Preview you file. File > Publish Preview > Flash

You now have a fully working dynamic photo gallery.

Step 5

You can either use the space3D component out of the box or modify and skin it to your liking.

space3D comes built with tons of parameters to customize your gallery. Such as: xml, spacing, margin, border size and color, reflection, transition, show arrows, back flip, and camera movement.
These setting are found in the Component Inspector in Flash.

Play around with these setting until you get the look you want.

Step 6

You can also skin the component elements to your liking.
Skinning the space3D component is so easy. Just double click on the component in Flash. It will open all the skinnable elements. Double click on the element you want to modify and begin customizing. Once you done just click on scene 1 to return to the main timeline and preview your work.
File > Publish Preview > Flash

Final Customized Gallery

Conclusion

This is just a few ways to customize the space3D component. Read through the full documentation by clicking here. The component also has an ActionScript 3.0 API for advanced customization.
Click here to view the space3D API

We would love to see your work and showcase it on our site.
Just email us at contact@flashframer.com with a link to your space3D gallery.

For step-by-step instructions read the commented lines in the code below.

//Flash Framer Actionscript Menu
//www.flashframer.com

//Set an Array to store the button names
var namesArray:Array = new Array();
//Push the button names into namesArray
namesArray.push("HOME", "ABOUT", "LICENSE", "SUBMIT", "CONTACT");

//Set an Array to store the button urls
var urlArray:Array = new Array();
//Push the button urls into urlArray
urlArray.push("http://www.flashframer.com",
			  "http://flashframer.com/about/",
			  "http://flashframer.com/license/",
			  "http://flashframer.com/submit/",
			  "http://flashframer.com/contact/");

//Set a for loop to loop 5 times. 5 referse to the number of buttons
for(i=0;i<5;i++){
//Create a movie clip named i on the next highest level.
this.createEmptyMovieClip("button"+i, this.getNextHighestDepth());
//Create a movie clip named buttonBkg inside the button movie clip on the next highest level.
this["button"+i].createEmptyMovieClip("buttonBkg", this["button"+i].getNextHighestDepth());
//Set the lineStyle for buttonBkg
this["button"+i].buttonBkg.lineStyle(0, 0x000000, 100, true, "none", "square", "round");
//Begin the buttonBkg fill
this["button"+i].buttonBkg.beginFill(0x999999);
//The lineTo parameters define the shape of the buttonBkg
this["button"+i].buttonBkg.lineTo(99, 0);
this["button"+i].buttonBkg.lineTo(99, 24);
this["button"+i].buttonBkg.lineTo(0, 24);
this["button"+i].buttonBkg.lineTo(0, 0);
//End the fill
this["button"+i].buttonBkg.endFill();

//Set the text formate
var myFormat:TextFormat = new TextFormat();
//Set myFormat parameters
myFormat.align = "center";
myFormat.font = "Tahoma";
myFormat.size = 13;
myFormat.color = 0xFFFFFF;
this["button"+i].textBox.embedFonts = false;
this["button"+i].textBox.selectable = false;
this["button"+i].textBox.antiAliasType = "advanced";
//Create a new text field inside the button movie clip on the next highest level and define the x, y, width, and length.
this["button"+i].createTextField("textBox", this["button"+i].getNextHighestDepth(), 0, 2, this["button"+i]._width, this["button"+i]._height);
//Place the name of the button into the textBox from the namesArray defined on line 7
this["button"+i].textBox.text = namesArray[i];
//Set the text formate to the textBox
this["button"+i].textBox.setTextFormat(myFormat);
//Set the X position of the button equal to the last button plus the width of this button plus 5 (5 is the space between each button).
//This move the button over so all the buttons don't lay on top of each other.
this["button"+i]._x = this["button"+(i-1)]._x + this["button"+i]._width + 5;
//Set the onRelease function to the buttonRelease function
this["button"+i].onRelease = buttonRelease;
}

//Set the buttonRelease function
function buttonRelease(){
	//Set a varible named buttonName equal to the instance name of the current button being clicked on
	var buttonName:String = this._name;
	//Set a varible named buttonIndex equal to the 6th character of the buttons instance name.
	//This will return a number between 0 and 5. We will use this to pull the correct url from the urlArray
	var buttonIndex = buttonName.substr(6,1);
	//get the url from the urlArray of the current button being clicked on. and target a blank window
	getURL(urlArray[buttonIndex],"_blank");
}

Preview Final Product

Step 1.

Open a new flash file
Save it and name it Navigation Menu
Set the Stage to 120pixels by 250 pixels

Step 2.

Create a new movie clip symbol name it btnWhite
On Layer 1 create a background for the button that is 120pixels by 25 pixels as shown in figure 1

figure 1

Step 3.

Create a new movie clip symbol name it btnRed
On Layer 1 create a highlight for the button that is 120pixels by 25 pixels as shown in figure 2

figure 2

Step 4.

Create a new movie clip symbol name it whiteTxt
On layer 1 create a Dynamic Text box. Give it an instance name of Txt.
Width: 110
Height: 20
Font: Verdana
Font Color: white
Font Size: 12
Justification: Left
Embed the font
See figure 3

figure 3

Step 5.

Create a new movie clip symbol name it blackTxt
On layer 1 create a Dynamic Text box. Give it an instance name of Txt.
Width: 110
Height: 20
Font: Verdana
Font Color: black
Font Size: 12
Justification: Left
Embed the font
See figure 4

figure 4

Step 6.

Create a new movie clip symbol name it mask.
One layer 1 create something similar to figure 5

figure 5

Step 7.

Create a new movie clip symbol name is button.
Next take all the movie clip symbols and place them on there own layer inside the button symbol. See figure 6

figure 6

Step 8.

Convert the mask layer to a mask.
Place the whiteTxt movie clip symbol under the mask.
On the mask layer place a keyframe at frame 15 and move the mask movie clip symbol to the left until the mask cover the whole button.
Copy the Keyframe from frame 1 of the mask layer and paste is at frame 30 of the same layer.
Between frame 1 and 15 of the mask layer create motion tween and also between frame 15 and 30 of the same layer.
On frame 30 of the whiteTxt, btnRed, blackTxt, btnWhite layers insert a frame so that all symbols are visible throughout all 30 frames.
Create a new layer at the top of the rest of the layers and name it actions.
On frame 1 of the actions layer place the Actionscript stop();
Copy the Keyframe on the first frame of the Actionscript layer and paste it at frame 15 and 30.
See figure 7

figure 7

Step 9.

Make sure you’re on the main timeline (Scene1). Name Layer 1 to actions.
Click on the first frame on the actions layer, and open the actions panel and paste in the Actionscript below.
See figure 8

figure 8

//Store Button Position
var yPosition:Number = 0;

//Declare New XML Object
var myXML:XML = new XML();
//Set Flash to ignore the XML file's white space
myXML.ignoreWhite = true;
//Declare new Array to store the links from the XML file
var links:Array = new Array();
//Declare new Array to store the names from the XML file
var names:Array = new Array();

//Set XML onLoad function
myXML.onLoad = function(){
	//Set varible to store the XML childNodes
	//This allows you to get the number of buttons in the XML file.
	//You'll use this tell flash how many times to loop the for loop.
	var linkname:Array = this.firstChild.childNodes;
	//Set a for loop
	for(i=0;i

Step 10.
Open Dreamweaver or a simple text editor such at text edit, or note pad.

Save the file as, links.xml in the same directory as the Navigation Menu flash file.

Paste in this xml code into your file.



   
   
   
   
   
   
   
   
   
   

To change the name of a button edit the text after NAME= and between the single quotes.

To change the URL edit the URL after the LINK= and between the single quotes.

To delete a button just delete the line between the open tag and close tag and the flash file will update automatically.

See figure 9.


figure 9

Conclusion
Once you have the shell of the flash file finished you only have to update the XML file and the flash file will updated dynamically.
]]>
			http://www.flashframer.com/how-to-create-a-dynamic-xml-navigation-menu/feed/
		33
		
		
		
		http://www.flashframer.com/how-to-create-a-dynamic-photo-gallery-in-a-random-layout-using-the-photoshuffle-component/
		http://www.flashframer.com/how-to-create-a-dynamic-photo-gallery-in-a-random-layout-using-the-photoshuffle-component/#comments
		Wed, 11 Jun 2008 05:17:11 +0000
		admin
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://www.flashframer.com/?p=56
		
			In this tutorial we will create a dynamic photo gallery arranged in a random layout. Photos can be rearranged by clicking and dragging. When a photo is clicked on it will enlarge and show the title and description for that image. In just a few easy steps we will have an eye catching photo gallery.


Introduction
This tutorial uses the Flash Framer photoShuffle component. The photoShuffle component is an ActionScript 3.0 plug-in for Adobe Flash that makes it easy to create a random photo gallery in a few easy steps. Our developers have done the hard work so you don’t have too.
Click here for information and to get the photoShuffle component.
Step 1
Once you have downloaded and installed the photoShuffle component, Launch Flash and open a new ActionScript 3.0 document. Save the document with any name you like.
Step 2
Open the components panel. Window > Components

You will now see a component set called FlashFramer.

Open up that set and you will find the photoShuffle component.

Drag and drop the component onto the stage and align it.

I’m using the default stage size of 500×400 pixels.

Set the frames per second (fps) to 20 fps for smoother animation.

Step 3
Now lets load some photos. I’m using nine photos of flowers shot in Africa.

Put your photos in the same directory as your Flash file in a folder named photos.

Step 4
Jump back over to Flash.

Click on the photoShuffle component to select it and open the Components Inspector panel.

 Window > Component Inspector

Double click on the Photo List value field.

A Dialog box will popup.

Click on the plus button to add a photo with a title and description.

Repeat this until you have all your photos entered.

You can also use XML file to control every parameter of the photoShuffle component.

See the documentation that came packaged with the component or download it here.
Preview you file. File > Publish Preview > Flash
You now have a fully working dynamic photo gallery.

Step 5
You can either use the photoShuffle component out of the box or modify and skin it to your liking.
photoShuffle comes build with dons of parameters to customize your gallery. Such as: xml, sizing, shuffle, transitions, shadow, info box placement, and show arrows.

These setting are found in the Component Inspector in Flash.
Play around with these setting until you get the look you want.

Step 6
You can also skin the component elements to your liking.

Skinning the photoShuffle component is so easy. Just double click on the component in Flash. It will open all the skinnable elements. Double click on the element you want to modify and begin customizing. Once you done just click on scene 1 to return to the main timeline and preview your work.

 File > Publish Preview > Flash

Final Customized Gallery



Conclusion
This is just a few ways to customize the photoShuffle component. Read through the full documentation by clicking here. The component also has an ActionScript 3.0 API for advanced customization.

Click here to view the photoShuffle API
We would love to see your work and showcase it on our site.

Just email us at contact@flashframer.com with a link to your photoShuffle gallery.
]]>
			http://www.flashframer.com/how-to-create-a-dynamic-photo-gallery-in-a-random-layout-using-the-photoshuffle-component/feed/
		5