Develop PHP Website for Learning Web Design Free Online
  Home   |   Forums   |   DevCMS
  Join   |   Log In
 
   

Flash and ActionScript 3 Tutorials - Learn Flash and ActionScript 3

Tutor at Develop PHP
XML Magic Menu Tutorial for ActionScript 3 Flash CS3 + CS4
By: Adam      Created: Dec 12, 2008      Views: 32224 Tweet This Page  Post page to Facebook  Post page to Facebook

Download Source Files


In this free Flash ActionScript 3 fla file download tutorial you can learn how to create a menu out of thin air using nothing but XML and ActionScript 3. Theres is nothing in the library, and nothing on stage. Everything you see is rendered out through code. The buttons get their roll_over, roll_out, and click states assigned through an XML for loop in Flash. There is a lack of information online or in books about XML content management for flash, and it could be a powerful tool set for Flash CMS developers if understood.




ActionScript 3.0 Code Reference Actionscript 3.0 Tutorial - Learn Actionscript 3.0

/* Imports needed for external scripts
// Imports for filters set here
import flash.filters.BevelFilter;
import flash.filters.GlowFilter;
// Imports for animation set here
import fl.transitions.Tween;
import fl.transitions.easing.*;
// Imports for gradient set here
import flash.display.Shape;
import flash.display.GradientType;
import flash.geom.Matrix;
// Imports for rollover changes set here
import flash.geom.Transform;
import flash.geom.ColorTransform;
// Import for the mouse events set here
import flash.events.MouseEvent;

*/
// Set the "y" location on stage where the first btn will live
var yPlacement:int = 10;
// Set the "x" location on stage where all btns will line up vertically
var xPlacement:int = 50;
// Set the distance each btn should be apart here
var distance:int = 32;
// Format the text appearance here
var format:TextFormat = new TextFormat();
format.color = 0x000000;
format.font = "Verdana";
format.size = 11;
//format.bold = true;
format.kerning = false;

// Initialize the XML, place the xml file name, initialize the URLRequest
// put URLRequest into a new URLLoader, and add event listener on
// myLoader listening for when the XML loading is complete
var myXML:XML = new XML();
var XML_URL:String = "http://www.developphp.com/Flash_tutorials/tutorial_files/XML_driven_menu1.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);

// Create the xmlLoaded function
function xmlLoaded(event:Event):void {

// Place the xml data into the myXML object
myXML = XML(myLoader.data);
// Initialize and give var name to the new external XMLDocument
var xmlDoc:XMLDocument = new XMLDocument();
// Ignore spacing around nodes
xmlDoc.ignoreWhite = true;
// Define a new name for the loaded XML that is the data in myLoader
var menuXML:XML = XML(myLoader.data);
// Parse the XML data into a readable format
xmlDoc.parseXML(menuXML.toXMLString());

// Set the index number of our loop, increments automatically
var i:Number = 0;
// Run the "for each" loop to iterate through all of the menu items listed in the external XML file
for each (var MenuItem:XML in myXML..MenuItem) {

// Access the value of the "itemLabel" node in our external XML file
var listLabel:String = MenuItem.itemLabel.toString();
// Access the value of the "urlstring" node in our external XML file
var listurl:String = MenuItem.urlstring.toString();

// Just some trace I used while testiing
//trace(listurl);

// This all pertains to the style of the button, alter values to your liking
var type:String = GradientType.LINEAR;
var colors:Array = [0xFFFFFF, 0xCCCCCC];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var spreadMethod:String = SpreadMethod.PAD;
var interp:String = InterpolationMethod.LINEAR_RGB;
var focalPtRatio:Number = 0;
var matrix:Matrix = new Matrix();
var boxWidth:Number = 100;
var boxHeight:Number = 20;
var boxRotation:Number = Math.PI/2; // 90вк
var tx:Number = 0;
var ty:Number = 0;
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);
var rect:Shape = new Shape;
rect.graphics.beginGradientFill(type, colors, alphas, ratios, matrix, spreadMethod, interp, focalPtRatio);
rect.graphics.lineStyle(1, 0x999999);
rect.graphics.drawRect(0, 0, 100, 20);

// This all pertains to the text fields that give our buttons their label, alter values to your liking
var myText:TextField = new TextField();
//myText.embedFonts = true;
myText.autoSize = TextFieldAutoSize.LEFT;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.defaultTextFormat = format;
myText.selectable = false;
myText.mouseEnabled = false;
myText.text = listLabel;
myText.x = 2;
myText.y = 2;
addChild(myText);

// Create MovieClip holder for each button graphic and text label
var clip_mc = new MovieClip();
// Add the rectangle graphic
clip_mc.addChild(rect);
// Add the text field
clip_mc.addChild(myText);
// Put the new movieClip on stage now
addChild(clip_mc);
// Make the mouse button mode true for the movieclip so user knows it is a button
clip_mc.buttonMode = true;

// Offset each one in the loop to make sure they don't just get put right on top of each other
yPlacement = yPlacement + 28;
// Now apply it in its offset Y position to the stage
clip_mc.y = yPlacement;
// X position it will be placed on stage
clip_mc.x = xPlacement;

// Access the URL value and ready it for setting up the Click listener, and function
clip_mc.clickToPage = listurl;
// Add the mouse event listener to the moviClip button
clip_mc.addEventListener (MouseEvent.CLICK, clipClick);
//Add event listeners (used for animating the buttons)
clip_mc.addEventListener (MouseEvent.MOUSE_OVER, onMouseOver);
clip_mc.addEventListener (MouseEvent.MOUSE_OUT, onMouseOut);

// Set the function for what happens when that button gets clicked
function clipClick(e:Event):void {
var targetURL:String = e.target.clickToPage;
var urlRequest:URLRequest = new URLRequest(targetURL);
navigateToURL(urlRequest);
}

// increment the loop index number for trace testing
i++;
//trace(i);


}



}

// Set the mouse over function for all movieclip buttons
function onMouseOver (e:Event):void {

// Create the filters and add them to an array
var bevel:BevelFilter = new BevelFilter();
bevel.distance = 1;
bevel.angle = 45;
bevel.shadowColor = 0x666666;
bevel.shadowAlpha = 0.5;
bevel.strength = 4;
bevel.quality = BitmapFilterQuality.MEDIUM;
bevel.type = BitmapFilterType.INNER;
bevel.knockout = false;
var glow:GlowFilter = new GlowFilter();
glow.color = 0x79B3E1;
glow.alpha = 1;
glow.quality = BitmapFilterQuality.MEDIUM;
// Pack the filter paramters into the array variable
var filtersArray:Array = new Array(bevel, glow);

// Assign the filters array to the display object to apply the filter
e.target.filters = filtersArray;

}

// Set the mouse out function for all movieclip buttons
function onMouseOut (e:Event):void {

// Remove the Filters on Mouse Out
e.target.filters = null;

}




Comment on XML Magic Menu Tutorial for ActionScript 3 Flash CS3 + CS4

Search Tags:
xml   ·  magic   ·  menu   ·  automate   ·  buuton   ·  menu   ·  design   ·  load   ·  script   ·  database   ·  download   ·  website   ·  free   ·  tutorial   ·  video   ·  flash   ·  as3   ·  learn   ·  how   ·  tutorial   ·  create   ·  make   ·  source   ·  edit   ·  free   ·  actionscript   ·  3.0   ·  cs3   ·  cs4   ·  custom   ·  online   ·  script   ·  code   ·  site   ·  build   ·  
 
 
Arbitrary Links and Archives
Home
Active Forums
Members
SIte News
Link To Us
Gear
2009 Forum Archive
Programming Courses
Learn HTML
Learn CSS
Learn PHP
Learn MySQL
Learn Javascript
Learn jQuery
Learn ActionScript 3.0
Learn Java
Learn XML
DevelopPHP Requires Flash Player
Get Adobe Flash player
___________________________________________

Terms of Use  •  Privacy  •  Admin Notes

©2010 developphp.com   |   Powered By FlashBuildingHolder