help with image carousel

I had this script for a controlled xml image carousel. It works really well, I just need to tweak it a bit so he could work as I want.

I want to place the carousel in a certain area of the film. Is the only setting I see control where ' var floor: Number = 20; "but this only controls the vertical position. I need to check the horizontal position, now that he's just focused. See "xpos3D", I don't know what to do.

I also want to keep to appear outside the frames I want it to appear. Now when I put the script in the film he appears in each image. How do I get it appear in some images of the film?  When I put "stop();" at the end of the keyframe it still shows in the frames after him.

The last thing I need is to position the animation above the other layers.  At the moment, it appears below all other layers in the film.

I don't know what parts to change this then of course I don't know what parts of post, it is why I write all this (hope I post code correctly, my first post).


Tips on how to accomplish one of these very appreciated!

//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 = 400;
 
//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 = 20;
 
//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 = "3D-carousel-settings.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;
 
//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
     loadImages();
}
 
//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
          imageHolder.addChild(imageLoader);
 
          //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
          imageHolders.push(imageHolder);
 
          //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
     numberOfLoadedImages++;
 
     //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
          initializeCarousel();
     }
}

//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 for the imageHolder
          imageHolder.alpha = 0.3;
 
          //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
          addChild(imageHolder);
     }
 
     //Add an ENTER_FRAME for the rotation
     addEventListener(Event.ENTER_FRAME, rotateCarousel);
}

function rotateCarousel(e:Event):void {
 
     //Calculate the angleSpeed according to mouse position
     angleSpeed = (mouseX - vanishingPointX) / 4096;
 
     //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
          imageHolder.xpos3D=radius*Math.cos(imageHolder.currentAngle);
          imageHolder.zpos3D=radius*Math.sin(imageHolder.currentAngle);
 
          //Calculate a scale ratio
          var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
          //Scale the imageHolder according to the scale ratio
          imageHolder.scaleX=imageHolder.scaleY=scaleRatio;
 
          //Update the imageHolder's coordinates
          imageHolder.x=vanishingPointX+imageHolder.xpos3D*scaleRatio;
          imageHolder.y=vanishingPointY+imageHolder.ypos3D*scaleRatio;
     }
 
     //Call the function that sorts the images so they overlap each others correctly
     sortZ();
}
 
//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);
     }
}
 
//This function is called when the mouse is over an imageHolder
function mouseOverImage(e:Event):void {
 
     //Set alpha to 1
     e.target.alpha=1;
}
 
//This function is called when the mouse is out of an imageHolder
function mouseOutImage(e:Event):void {
 
     //Set alpha to 0.3
     e.target.alpha=0.3;
}
 
//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));
}


When you load dynamically the content in a bar planning, this content is not a frame to call home in the chronology of the tht unless load you it into an object that is bound to an image.  Then you can try to wrap this code in a movieclip who lives in a specific image.  You may need to adjust the code for this scenario well.  If it works, you can control the location of the carousel by changing the location of the movieclip.

Tags: Adobe Animate

Similar Questions

  • Need help with image fusion

    Hello

    Before I get to my question, I want to give you a glimpse of the project I'm working on and the aspects that I need help. For a school project, a customer, 94Fifty asked us to create an advertisement that depicts their basketball and could be used in advertising online and in magazines. The 94Fifty of basketball is the world's first "smart ball." It can count how many times you dribbling, the arc of your shot, release time it takes for you shoot, etc. To use the ball, you need an Apple product that can download the application 94Fifty on the App Store, so that this project is done as a collaboration with the company 94Fifty and Apple.

    For my ad, to really capture the idea of being the first smart ball, 94Fifty ball I wanted to mix an image of the texture of the ball of 94Fifty, with the shape and details of a brain, with the slogan being, "A ball that is as smart as you." I have my design buried on, but I'm not sure how to combine the image of the brain with ball should I use layers? How can I remove the pink color of the brain and replace it with the ball while keeping the shape of the brain and the lines creased the brain? Any help and technical that you can give would be greatly appreciated.

    Here are two pictures that I'm trying to mix.

    8376271918_cf0b1b5c4f_o.jpg94fifty ball.png

    I would also try and keep the logo of 94Fifty which is on the ball in the mixed picture.

    Please do not confuse this for to ask me someone to do it for me, it's the exact opposite of what I want, I just need help with what to do.

    Here is a fairly simple method:

    First of all, level of basketball for the type to be horizontal. (Also correct the values of white light - burn at the top left and bottom top right.)

    Mask on white background of the brain and turn the image to 0% of saturation.

    Put the brain on basketball on its own layer. Make the overlay blend mode.

    Using free transform, reshape the brain is greater (rounder), like the basketball, with a visible margin around the edge of the ball.

    -Now, you have a brain in a basketball, but the brain is a bit too subtle.

    Duplicate the layer of brain as many times as you need to get the good contrast (I've duped the layer of brain three times, for a total of four layers of brain).

    You will probably find that you need to use the levels adjustment layers or curves on each layer of the brain, for finer value adjustments. Make sure that each adjustment layer affects only the layer directly below.

  • Help with Images of maps,

    Hello

    I have a HTML page where an IMG is loaded:

    "< img src="images/renders/Main_Image.jpeg "alt ="Background Image"name ="Main_IMG"width ="800"height ="600"border = '0' well ="#Main_MAP"id ="Main_IMG"/ >

    Then I have 4 images laid cards on top of the image:

    < name of the card = "Main_MAP" id = "Main_MAP" >

    < area shape = "poly" coords = "- some numbers -" href = "Area1.html" target = "_parent" alt = "The euro1 area button" / > "

    < area shape = "poly" coords = "- some numbers -" href = "Area2.html" target = "_parent" alt = "Button Area2" / > "

    < area shape = "poly" coords = "- some numbers -" href = "Area3.html" target = "_parent" alt = "Button area3" / > "

    "< area shape ="poly"coords =" "-some numbers" href = "Area4.html" target = "_parent" alt = "Button Area4" / >

    < / map >

    See the example:

    Image Map Help.jpg

    Each area is basically an invisible button. I want to make sure when the mouse is over the areas, I want the background image to display something different. On mouse out of the box, I want the picture to go back. When the box is clicked, the user is moved to another part of the site.

    Zone 1 should switch from Main_Image.jpeg to Main_Image1.jpeg

    Zone 2 needs to move from Main_Image.jpeg to Main_Image2.jpeg

    etc.

    I thought I could do it with Images of maps, but I can't figure out how. Is there an easier way? I have Dreamweaver CS4.

    Thank you in advance!

    Not possible with a single image and mapping.

    If you "cut" image and place the slices in the DIVs, then you can either add a mouseover javascript or use the slices as background images and add a CSS "hover" effect to change the background image on mouseover.

  • Help with image files, drop box and save the changes?

    My husband put all our photos of drop box.  They are still on our computer, but we can now also access elsewhere.  But it has somewhat modified files.

    I'm putting together, cultures and (in general) to save the changes made to some images.  But I get an error.

    Example: The image I want to change is on the side.  I right-click on the file icon and select "Rotate clockwise" in the menu dropdown. Immediately, I raise the sound "bonk" and an error message appears: "you cannot rotate this image.  The file can be used or open in another program or maybe the file is read only.  It wasn't a problem before doing things to the drop box.
    So, I wait to make sure that everything is ok.  The image is not open anywhere else.  I clicked the properties option to see if it is in read-only mode.  He said that it is not.
    When I open the image and try to use the rotation on the bottom, it will turn.  But when I close the window, I get a different error message that says "Windows Photo Viewer cannot save changes to this picture because there is a problem with the properties of the image file."   There is a link at the bottom of the message box for "Why can't save this picture?  I clicked it.  He said "the subject you are looking for is not available in this version of Windows. For additional assistance, see multiple support options. "The more support options?  Get a tech savvy friend who could help me. Nice.
    Anyone know what I need to do to make this work?
    I don't know what version of windows we have.  I'm sure that's not Vista.  It's the one after that.

    Hello

    Thank you asking in the Microsoft Community.

    1. open Microsoft paint.

    2. navigate to the image through Microsoft Paint.

    3 try to rotate and save the image.

    4 let me know if you are able to.

    Post back with the result.

  • help with images of full browser size

    Hello

    I would like to have a page with only a picture and constant (or no borders) around him like these pages:

    Banksy

    Banksy

    As you can see, if you resize the browser window, the size of the image follows (get smaller or larger).

    If I use a rectangle of width and then fill them with an image, the images grow when the size of browser window is expand but when browser window is smaller, reduce the picture inside, scrollbar appear which I want to avoid. Do you know how?

    Of course, I could start with a small image (such as 300 pixels wide), but then it would look ugly on a mac with the retina display. In the case of Banksy, the image is 1000 pixels wide, but always get resized to small when the window is reduced.

    Also is there a way to make the entire browser window is filled only with the image (without any boundaries, or sides, even when the browser windows are resized)?

    I tried with the background fill, but somehow, it works no better than with rectangles.

    Thanks a lot for your help

    You can go with these options:

    http://musewidgets.com/collections/all/products/responsive-image

    http://musewidgets.com/collections/all/products/responsive-images

    Thank you

    Sanjit

  • Need help with image slideshow quality full-screen

    I'm looking to display pictures with slide show full-screen. The images I add are very large, more than 5000 wide. When I write the site images maintain their quality while others lose it look like shit. Why would this be and how can I solve this problem. I tried to resize the 2560 x 1707 muse done and then add them. This does not change the final result of poor quality.

    Go to the components Panel and locate the image you want to use in the original format. Right-click on the image and chose 'largest import size. "

    See if that helps to maintain the quality of this image, as Muse does not resize/interpolate this image for you.

    See you soon,.

    Vikas

  • Need help with Images associated with berries

    `

    I'm not sure if this is possible, as I am not a common programmer, but I have a question.

    I have a table that generates a random word in a text box, then a second table that generates another word at random in a different text box. What I want is for when a certain word off number one table is generated, a certain image is displayed with it. Here is the code:

    var FirstChoice:Array = ['this', 'Do'];

    var SecondOption:Array = ["during this operation', 'while doing this'];

    generate_btn.addEventListener (MouseEvent.CLICK, getTask);

    function getTask(event:MouseEvent):void {}

    var randomChoice:Number = Math.floor (Math.random () * firstChoice.length);

    var randomTask:Number = Math.floor (Math.random () * secondOption.length);

    First_Thing.text = exerciseChoice [randomChoice];

    Second_Thing.text = homeTask [randomTask];

    }

    For example, when I click the button and the first table generates "Do this", I want a chart specific to appear with him. Similarly, if 'this' generates, I want a different graphic to appear specifically associated with this variable.


    I hope that this is possible :/ I'm puzzled! I asked for help on StackOverflow; However, their advice did not work. Of course, I only got a response, so I hope that people here can help me out!

    var FirstChoice:Array = ['this', 'Do'];

    var SecondOption:Array = ["during this operation', 'while doing this'];

    var imageA:Array = (mc1, mc2);

    var currentImage:MovieClip

    function getTask(event:MouseEvent):void {}

    var randomChoice:Number = Math.floor (Math.random () * firstChoice.length);

    var randomTask:Number = Math.floor (Math.random () * secondOption.length);

    First_Thing.text = exerciseChoice [randomChoice];

    Second_Thing.text = homeTask [randomTask];

    {if (currentImage)}

    currentImage.visible = false;

    }

    currentImage = UIImage [randomChoice];

    currentImage.visible = true;

    }

  • Need help with Image Processor

    Hello

    I have a lot of pictures, that I need to resize to a Web site. These images are all different sizes, 250 x 400 (h) to 200 x 800 (h). I need it to fit in a Web of 246 x 327, in their original proportions, regardless of white space.

    Does anyone know if this is possible? So far all my results have failed and image processor seems to just resize proportionally up to a maximum of 246 x 327, so nothing is that the EXACT size, but all the images will be adapted now integrate 246 x 327. I don't know what to do now.

    Any help is greatly appreciated.

    -Tim

    You can do this with a script.

    Save the code in the settings presets/scripts as filename.jsx, then you can include the script in action. Use "Insert Menu Item' in the menu drop-down action palette and select file - Scripts - select the script.

    function main(){
    if(!documents.length) return;
    var doc = activeDocument;
    var White = new SolidColor();
    White.rgb.hexValue = 'ffffff';
    // target size =  246x327
    FitImage(240, 321 ); //width - height change to suit
    app.backgroundColor = White;
    doc.resizeCanvas(new UnitValue(246,"px"), new UnitValue(327,"px"), AnchorPosition.MIDDLECENTER);
    }
    main();
    function FitImage( inWidth, inHeight ) {
     var desc = new ActionDescriptor();
     var unitPixels = charIDToTypeID( '#Pxl' );
     desc.putUnitDouble( charIDToTypeID( 'Wdth' ), unitPixels, inWidth );
     desc.putUnitDouble( charIDToTypeID( 'Hght' ), unitPixels, inHeight );
     var runtimeEventID = stringIDToTypeID( "3caa3434-cb67-11d1-bc43-0060b0a13dc4" );
     executeAction( runtimeEventID, desc, DialogModes.NO );
    };
    

    Edit: -.

    You need not even the script! as the size is not dependent on the direction, so after the Image ride you can use Image - size canvas in your action.

  • need help with image download and preview screen

    Hi guys,.

    I am trying to download image and then view Preview, but when the download form submits to the placeholder image page itself is not updated his source and shows the same image as before.

    4.jpg image already exists.

    I download with nameConflict = "overwrite".

    Download form on the same page, so the page charging points

    In IE image placeholder does not appear the new image, but shows the old one until I have updated the page with F5 and return information, however if checked, image in the file is already different.

    In Firefox, sometimes it works and the image refreshes, sometimes not.

    any help would be greatly appreciated!

    see you soon,

    Simon

    Hi Simon,.

    In this case, you can follow this tutorial

    http://www.communitymx.com/content/article.cfm?cid=71EDA

    HTH

  • Need help with Image map

    Hey everyone I hope that someone can help me here. What I'm trying to do is create a card flipping immage, if possible. Essentially, I have a card with different routes Charter on it, and I would like to be able to move the mouse on a single track, highlight it in red and then be able to click it and a link to another page. How is this achieved? There are several roads, and they are not distributed between sectors that I could crop and use as individual images. If it doesn't, maybe if someone could explain to me how having a side buttons together to highlight the road and allow me to click and a link to another page. I understand how to work the images hover and such, but multiple transfers on a single image is confusing to me. If someone could answer this, I would be EXTREMELY grateful. Thanks in advance and ask if you need any clarification with my problem to help solve it.

    Genii

    Sorry... He answered myself

  • Help with images png in staircase

    I have an image control that I am wiring a pixmap png to and get an image in staircase. If I open the image in any number of viewers it looks fine, but when I look in labview with the picture control looks jagged. Example is attached look green tap, the edges are wavy everything. Thank you.

    Hi ice machine,

    have you tried to use the png 8-bit instead?

  • Help with images

    Hi all

    Is there a way we can start an image as hidden and change it to visible by using a cutting-edge action?

    I have an image of a process flow and am branching out to watch short videos on every step, but I would like to visually show the progress on the slide with the process flow and I was wondering if I could make a check mark appears next to a stage once they have seen the video and returned to the slide.

    I'm trying to have a single slide of base to turn the videos rather than multiple slides.

    Hope that makes sense :-)

    Leanne

    Take a look at the videos on this page:

    Create a dynamic Menu slide in Adobe Captivate. Infosemantics Pty Ltd

  • Help with &lt; image slider &gt; flash

    Hi all

    I need help here.

    I want to make a flash page, which is something similar to this:

    http://www.Lavazza.com/corporate/en/products/

    Am I using cursor for this image? If so, no sample tutorials/fla for me to reference.

    If it does not image slider, please indicate how should I produce this kind of flash pages?

    I thank you and hope to hear a reply soon!

    The effect you're after is interpolation two mcs based on the mouse position.

    look in:

    http://blog.greensock.com/tweenliteas3/

    and

    http://help.Adobe.com/en_US/AS3LCR/Flash_10.0/Flash/display/DisplayObject.html#MouseX

  • Help with images does not

    My Flash page is supposed to load the images from Photobucket. However, the images are not loading. I checked the two things to see if they have an effect:

    (1) the question if Photobucket has a policy file (crossdomain.xml) to enable external access. He does.
    (2) change the setting allowScriptAccess to "always."

    Here is the HTML page where the Flash file is used:

    http://www.geocities.com/mikehorvath.geo/legopanotour.htm

    The page works fine on my hard drive. I'd appreciate any help.

    -Mike

    [edit]
    Duh! I did not understand the purpose of policy files. The domain of the server of my own site should appear in the policy file for Photobucket. Please ignore this message.

    My Flash page is supposed to load the images from Photobucket. However, the images are not loading. I checked the two things to see if they have an effect:

    (1) the question if Photobucket has a policy file (crossdomain.xml) to enable external access. He does.
    (2) change the setting allowScriptAccess to "always."

    Here is the HTML page where the Flash file is used:

    http://www.geocities.com/mikehorvath.geo/legopanotour.htm

    The page works fine on my hard drive. I'd appreciate any help.

    -Mike

    [edit]
    Duh! I did not understand the purpose of policy files. The domain of the server of my own site should appear in the policy file for Photobucket. Please ignore this message.

  • Need help with image resizing

    Hi all

    I downloaded an image from a URL and I want to display on my BB screen.  I want to get the image resized before displaying on the screen. I wrote the code, but it is cropped horizontally and vertically.  How can I get the image resized by preserving its quality? I want the new width of my image also as (screen width - 20) / 3 and height as something like original image height / 3  I post my code here

    public static Bitmap resizeImage(Bitmap originalImage, int newWidth, int newHeight) {
            Bitmap newImage = new Bitmap(newWidth, newHeight);
            originalImage.scaleInto(newImage, Bitmap.FILTER_BILINEAR, Bitmap.SCALE_TO_FILL);
            return newImage;
        }
    

    Thank you and best regards.

    Replace Bitmap.SCALE_TO_FILL by Bitmap.SCALE_STRETCH solved the problem.

    Thank you.

Maybe you are looking for