Flat :"filmstrip" view to mouse over event and click control

I need a few mouse events. A) A filmstrip view first and activated by

Page 1 of 1

0 Replies - 2638 Views - Last Post: 05 November 2009 - 09:40 AM

#1 r0x0rcist   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 15-May 09

Flat :"filmstrip" view to mouse over event and click control

Posted 05 November 2009 - 09:40 AM

So far, I've got this:
//JMS2 - slows down at mouse over event
//We use 70x70 sized images (change this if different for your images)
const IMAGE_WIDTH:uint = 70;
const IMAGE_HEIGHT:uint = 70;
//Set the focal length
var focalLength:Number = 500;
//Set the vanishing point
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;
//The 3D floor for the images
var floor:Number = 40;
//We calculate the angleSpeed in the ENTER_FRAME listener
var angleSpeed:Number = 0;
//Radius of the circle
var radius:Number = 200;
//Specify the path to the XML file.
//You can use my path or your own.
var xmlFilePath:String = "3Dcarouselsettings1.xml";
//We save the loaded XML to a variable
var xml:XML;
//This array will contain all the imageHolders
var imageHolders:Array = new Array();
//We want to know how many images have been loaded
var numberOfLoadedImages:uint = 0;
//The total number of images according to XML file
var numberOfImages:uint = 0;

var direction:Number = 1;
var distToTravel:Number;
//Load the XML file.
var loader = new URLLoader();
loader.load(new URLRequest(xmlFilePath));
//We call the function xmlLoaded() when the loading is complete.
loader.addEventListener(Event.COMPLETE, xmlLoaded);
//This function is called when the XML file is loaded
function xmlLoaded(e:Event):void {
	//Create a new XML object from the loaded XML data
	xml = new XML(loader.data);
	xml.ignoreWhitespace = true;
	//Call the function that loads the images
//This function loads and creates holders for the images specified in the 3D-carousel-settings.xml
function loadImages():void {
	//Get the total number of images from the XML file
	numberOfImages = xml.number_of_images;
	//Loop through the images found in the XML file
	for each (var image:XML in xml.images.image) {
		//Create a new image holder for an image
		var imageHolder:MovieClip = new MovieClip();
		//Create a loader that will load an image
		var imageLoader = new Loader();
		//Add the imageLoader to the imageHolder
		//We don't want to catch any mouse events from the loader
		imageHolder.mouseChildren = false;
		//Position the imageLoader so that the registration point of the holder is centered
		imageLoader.x = - (IMAGE_WIDTH / 2);
		imageLoader.y = - (IMAGE_HEIGHT / 2);
		//Save where the imageHolder should link to
		imageHolder.linkTo = image.link_to;
		//Add the imageHolder to the imageHolders array
		//Load the image
		imageLoader.load(new URLRequest(image.url));
		//Listen when the image is loaded
		imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
//This function is called when an image is loaded
function imageLoaded(e:Event):void {
	//Update the number of loaded images
	//Set the bitmap smoothing to true for the image (we know that the loader's content is a bitmap).
	e.target.content.smoothing = true;
	//Check to see if this is the last image loaded
	if (numberOfLoadedImages == numberOfImages) {
		//Set up the carousel
//This function is called when all the images have been loaded.
//Now we are ready to create the 3D carousel.
function initializeCarousel():void {
	//Calculate the angle difference between the images (in radians)
	var angleDifference:Number = Math.PI * (360 / numberOfImages) / 180;
	//Loop through the images
	for (var i:uint = 0; i < imageHolders.length; i++) {
		//Assign the imageHolder to a local variable
		var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
		//Get the angle for the image (we space the images evenly)
		var startingAngle:Number = angleDifference * i;
		//Position the imageHolder
		imageHolder.xpos3D = radius * Math.cos(startingAngle);
		imageHolder.zpos3D = radius * Math.sin(startingAngle);
		imageHolder.ypos3D = floor;
		//Set a "currentAngle" attribute for the imageHolder
		imageHolder.currentAngle = startingAngle;
		//Calculate the scale ratio for the imageHolder (the further the image -> the smaller the scale)
		var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
		//Scale the imageHolder according to the scale ratio
		imageHolder.scaleX = imageHolder.scaleY = scaleRatio;
		//Set the alpha (opacity) for the imageHolder
		imageHolder.alpha = 0.8;
		//We want to know when the mouse is over and out of the imageHolder
		imageHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
		imageHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
		//We also want to listen for the clicks
		imageHolder.addEventListener(MouseEvent.CLICK, imageClicked);
		//Position the imageHolder to the stage (from 3D to 2D coordinates)
		imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
		imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;
		//Add the imageHolder to the stage
	//Add an ENTER_FRAME for the rotation
	addEventListener(Event.ENTER_FRAME, rotateCarousel);
function rotateCarousel(e:Event):void {
	//Calculate the angleSpeed according to mouse position
	//Hint -The higher the number divided by makes the effect
	//show as slower. If you have less images it looks out of control
	//to have a lower number. They'll spin too fast...
	angleSpeed = (mouseX) / 9000;
	if(mouseX >= 0) {
		//Loop through the images
		for (var i:uint = 0; i < imageHolders.length; i++) {
			//Assign the imageHolder to a local variable
			var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
			//Update the imageHolder's current angle
			imageHolder.currentAngle -= angleSpeed;
			//Set a new 3D position for the imageHolder
			//Calculate a scale ratio
			var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
			//Scale the imageHolder according to the scale ratio
			//Update the imageHolder's coordinates
		//Call the function that sorts the images so they overlap each other correctly
//This function sorts the images so they overlap each others correctly
function sortZ():void {
	//Sort the array so that the image which has the highest
	//z position (= furthest away) is first in the array
	imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
	//Set new child indexes for the images
	for (var i:uint = 0; i < imageHolders.length; i++) {
		setChildIndex(imageHolders[i], i);
		if(imageHolders[i].zpos3D > 0) {
			//remove listeners
			imageHolders[i].removeEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
			imageHolders[i].removeEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
			imageHolders[i].removeEventListener(MouseEvent.CLICK, imageClicked);
		} else {
			//add listeners
			imageHolders[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
			imageHolders[i].addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
			imageHolders[i].addEventListener(MouseEvent.CLICK, imageClicked);

//This function is called when the mouse is over an imageHolder
function mouseOverImage(e:Event):void {
	//Set alpha to 1
//This function is called when the mouse is out of an imageHolder
function mouseOutImage(e:Event):void {
	//Set alpha to 0.8
//This function is called when an imageHolder is clicked
function imageClicked(e:Event):void {
	//Navigate to the URL that is in the "linkTo" variable
	navigateToURL(new URLRequest(e.target.linkTo));

And what I need is a carousel that starts only after you mouse into the window (where the stage will be put on my site). It needs to start as a flat "filmstrip" look, like the filmstrip preview used to view pictures in a folder. Then the mouse in event activates the carousel.

I have the XML file to hold the images that are called in this. I also have the "link to" for the image-click-event to pop up a text file. -I was wondering how to get it to pop up a menu, like even a jpg of text to describe the image that's being clicked. I don't know how to get the menus/images of text to show up on the stage exactly. If I call another text file, or even an image, how do I place it next the the image being clicked? -like to the right of it.

Thanks in advance,


This post has been edited by r0x0rcist: 05 November 2009 - 09:42 AM

Is This A Good Question/Topic? 0
  • +

Page 1 of 1