Dynamic resizing of a sprite (image hotspot)

Hello

I have a question about scale dynamically a sprite. I have an application that displays a picture on the screen, and on top of that image, I draw dynamically semi-transparent sprite who act as hot spots for the image under.

I can't understand how to evolve hotspots in proportion to the part of the image that the scales located below. Hotspots extend UIComponent (so I can communicate with them) and they contain a sprite that is the Visual hotspot on the screen (which is good).

The image below is a simple Image. When I resize the image (resizing the window), I would like for the hotspots to stay where they are related to the image.

I tried to create another component, which extends the class Image that attracts all the hot spots and then tried to put it on the top of the image (understand I could put the content of true as the image scale), but had the same results (hot spots were fired, but did not react to the resizing whatsoever).

Should I use the Bitmap class to draw hotspots instead? I have no idea at this point. I'm puzzled. Any guidance would be appreciated. May I approach the evil of all this, I don't know at this point. I hope I explained the problem well enough to get some kind of feedback.

Thank you very much for your time.

Hi Amy,

I thought about it. I kept pounding on your idea of using a canvas on the scale the UIComponents as a group, but it did not work because I have been scaling the canvas based on the properties of the image (the under Layer) that were not resolved (I tried to recover after Event.ADDED_TO_STAGE).

The solution was to wait for the Event.RENDER shot and then get the dimensions of the image loaded, to understand what is the percentage of the size that the resized image of the original image and then just scale the canvas above this one session to match. Sprinkle in a listener for Event.RESIZE and boom, it works like a champ.

This method works better than I expected because now it doesn't matter what size of the original image is relative to its container (larger or smaller), it will scale itself and all its layers (layer of canvas) together.

It seems that several times I'm looking for the right place for my solution (in the API), just at the wrong time (usually too early, before the properties I'm looking are defined).

Thank you very much for putting me on the right track.

The f

Tags: Flex

Similar Questions

  • Dynamically resize images on a webApp list page

    Hello world

    I used the following code to dynamically resize images for a webApp event list page:

    < img src = "{tag_image list_value}? Action = thumbnail & width = 384 & height = 253 & algorithm proportional ="/ >

    It works perfectly but when I click on the image, it is not a link to the event details page.

    Adding dynamic code I got the following only:

    list {tag_image}

    This made the image and when you click on it it went to the detail page, then is it possible to revise the dynamic code so that it renders an image which, when clicked, navigates to the page of detail?

    Would be very grateful for any advice.

    Thanks in advance.

    You encapsulate your image in an html anchor where the attribute href has the tag url for this layout in it.

  • Using sprite image with statusGreen class

    Hello

    I'm trying to replicate something that I found in the Bug tracker sample application - using the sprite images to display red/green/yellow orbs.

    Home page of the bug tracker uses the following to display in Orbe
    <img src="/i/f_spacer.gif" alt="" class="statusGreen">
    If I repeat that in my 25 theme Apex 4.2 request, it does not display the image of the orb.

    Inspect element generated through chrome, as I can see the class has been recognized and the sprite image has been found - but no image displayed on the page?

    Ideas?

    Scott

    Published by: scott - remember to change the subject

    If you have added only the img tab, then this is not enough.

    CSS is dependent on a class of detailedStatusList for the AMT, and then being inside a LI and the, it appears inside an A.
    Like this:

    
    

    If you replicate this structure, you will get the orbs.
    I was able to copy paste the HTML here in a brand new application with theme 25 and get enough green and yellow orbs.

    If you only want the orbs, then inspect the tags and copy the CSS so that you can apply it to your own structure of the element.
    I hope this helps.
    -Jorge

    Published by: jrimblas on April 4, 2013 23:01

  • dynamic resizing of columns too wide (javascript, CS5)

    Hey. I'm just starting to writing scripts for InDesign (and realize how I've been losing in recent years too much time). So far I managed to solve the minor issues myself, but this one I don't know enough to make round. I appreciate that what is needed for the solution is probably a pretty great piece of code, so I'm grateful for any advice you can give, just did he hint or nudge in the right direction.

    What I have is this little piece of code that comes if applies a style of cell for all tables in the selected block of text:

    var myTextFrame = app.selection [0];

    var myTables = myTextFrame.parentStory.tables.everyItem ();
    var myTableCells = myTextFrame.parentStory.tables.everyItem ().cells.everyItem ();

    myTableCells.appliedCellStyle = "NameOfCellStyle";

    What I have to do here is looking for one of the tables of myTables which:

    (1) are wider than myTextFrame (i.e., wider than the text block, they are in)

    (2) have exactly two columns

    (3) have a first column wider than the second column

    In these tables, the first column should be resized so that the table fits exactly inside myTextFrame.

    The best solution would be a dynamic resizing is not dependent on the specific numbers, because the size of myTextFrame may vary, but right now I'll settle for what it is, even if it means the creation of several scripts for text different widths of chassis.

    So there. After too many attempts failed, resulting in large part of me having very little evidence of what I'm doing, I'm about to give up. Any help or advice is greatly appreciated.

    Thank you

    Let's go top a step at a time.

    for (s=0; s
    

    If your tables have lines on the outer edge, zoom in! The right side of the resized table is inside the text frame, but his race is on the outside. If this is a problem, you probably have to subtract the thickness of the line of the available width as well. (I don't usually have this problem, because most of the time, my paintings is outline.)

  • Dynamic resize TextArea without scrollbars

    There is an example of a text box dynamic resizing without scrollbars on the link below, but it does not work with htmlText, only normal text.

    Any suggestions on what are the changes to the code to make it work with htmlText?

    It's link with the example:

    http://www.Adobe.com/cfusion/CommunityEngine/index.cfm?event=ShowDetails & postId = 13628 & Prod = 2 uctId

    Thank you.

    Maybe this:
    package components {}
    import flash.events.Event;
    Import mx.controls.TextArea;
     
    SerializableAttribute public class DynamicTextArea extends TextArea {}
    public void DynamicTextArea() {}
    Super();
    super.horizontalScrollPolicy = 'off ';
    super.verticalScrollPolicy = 'off ';
    this.addEventListener (Event.CHANGE, adjustHeightHandler);
    }
    private void adjustHeightHandler(event:Event):void {}
    trace ("textField.getLineMetrics (0) .height:" + textField.getLineMetrics (0) .height);
    If (height<= textfield.textheight="" +="">
    height = textField.textHeight;
    validateNow();
    }
    }
    override public function set htmlText(val:String):void {}
    textField.text = val;
    validateNow();
    height = textField.textHeight;
    validateNow();
    }
    override public function set height(value:Number):void {}
    if(TextField == null) {}
    If (height<=>
    Super.Height = value;
    }
    } else {}
    var currentHeight:uint = textField.textHeight + textField.getLineMetrics (0) .height;
    If (currentHeight<=>
    If (textField.textHeight! = textField.getLineMetrics (0) .height) {}
    Super.Height = currentHeight;
    }
    } else {}
    Super.Height = super.maxHeight;
    }
    }
    }
    override public function get htmlText (): String {}
    return textField.text;
    }
    override public function set maxHeight(value:Number):void {}
    super.maxHeight = value;
    }
    }
    }
  • support of dynamic resizing stamp

    We use dynamic stamps on the forms within our Organization.  However, how do you define preferences on stamps - size, color, etc.

    We do not want to resize and change color whenever they are used.

    Any help will be greatly appreciated

    Thank you

    The color parameter won't do anything because a stamp is an image.  You can set the opacity by right-clicking on the stamp, select 'Properties', defining the opacity and check "make properties default '.  If want a uniform initial size, you will need to re-create the stamp to the desired size.

  • Dynamic resizing of the cluster

    Is is possible to resize the cluster with buttons dynamically? I mean during run mode? If it's possible could you give me some suggestions?

    Kind regards

    Izabela

    Oh... Sorry... you may need to enable scripting.

    See here: http://decibel.ni.com/content/docs/DOC-4973

  • APEX 5: Show Images on a form (but dynamically change the number of images)

    Hello

    Developed a form to display the members of the team BLOB images stored in a custom table. I can create page items to display pictures, but any member of the team can be deleted or added, so that would not work. You are looking for something attached image, but should be dynamic in a table.

    Team_Members.PNG

    Any pointer can help.

    Thank you

    Ankit

    Ankit-K-Oracle wrote:

    I have received the term HTML, typed in the URL (f? p = & APP_ID.: 9: & APP_SESSION.: APPLICATION_PROCESS = GETIMAGE:FILE_ID: #EMPNO #)

    This report shows ENAME as title image does not appear, but when I click on ENAME, it shows the image.

    How can we see the picture by pressing the report?

    The examples above use declarative BLOB support to display images. You use a custom process application, so change the PHOTO column in the report accordingly, using the property Expression of HTML to generate an element of the image and the URL of the source:

    
    
  • Dynamic resizing of Textfield with HTML5 Canvas?

    Hello

    If my company is currently using Flash CS4 because all our AS2 code. I really want to move from the dark ages to Adobe animate CC. One of the main drivers is HTML5 Canvas and be able to support all mobile devices.

    So that this transition to work, I need to be able to do 2 things from the start:

    1. I need to get the variables passed in the ColdFusion page that is generated flash animation.

    2. I need to manipulate the data (like the formatting of phone number)

    3. I need to be able to keep the text fields in a defined width and mitigate the text to fit without distortion.

    EX: If I didn't do this in AS2 it would work. Did not understand how to do the same thing to animate:

    If (this ._width > 200) {}

    This ._width = 200;

    }

    This stuff is possible with Adobe animate CC? It is possible with HTML5 Canvas or should I publish with air?

    Is there a site that shows all the animated objects and properties that can be manipulated with Javascript for use with the Web?

    If possible, I'd love to be able to save an image to preview at run time and possibly make web-to-print

    In canvas mode, all audiovisual operations are managed by the library of CreateJS. There is a lot of documentation and examples for that flow. Very little of it is explicitly linked to the Flanimate IDE.

    You cannot directly set the width and height on the CreateJS objects. You can set the scaling factors X and Y, which should be sufficient if you are willing to do a little math.

    Width and height of determining dynamic objects can be difficult, because CreateJS is limited by what supports the HTML5 canvas API. There is a blog post, discuss the issue here:

    http://blog.createjs.com/update-width-height-in-Easeljs/

  • Resize the slide background image in responsive project

    I test the functionality of master slide in a sensitive project and I was wondering if it is possible to resize a background image for the mobile view. For example, I have a background at 1024 x 768 pixel image that works very well for the office and view tablet but I'd love to be able to resize or be able to move into the mobile display to position it better. Is it possible in the master slide view or would it be better to just the image in the timeline panel on each slide?

    The included themes are sensitive, if you start from such a theme, you will have three views of breakpoint as for master slides. Is not what you want?

  • links to images / hotspot

    Muse has any type of option of hyperlink "hotspot"? I have an image that I need a side to post a link to a site and the other for posting a link to another...

    Hello

    You can try the following workaround.

    • Create 2 transparent rectangle and place them above the image.
    • Select both rectangles, one by one, and wanted to add the hyperlink in the hyperlink Panel.

    Concerning

    Vivek

  • Dynamic PDF up to 200 images, the size of the pdf is greater, cannot save the data and images to the form

    Hi all

    My client would like to dynamic images up to 200 photos to my forms. It works very well. However, when I add images up to 35 images. I could not add images to shape more. Then I save data on the form. All the images and the data entered on the form are missing. I don't know why.

    If I add only 10 images - I can record data and images on the form. 15456 KB is the size of the pdf.  I was unable to add more photos or data on the form.

    There may be a problem the size of the pdf? How big can make a limited dynamic pdf?

    Can save us the information and images as much as we want?

    I spent two weeks to work and trying to figure out this problem. However, it is not successful.

    Help, please

    Cindy

    You must ensure that your users do not import large images.

    Therefore, you can use a script on the change event of an image field that checks the size of the data and warns the user if the file is too large.

    function formatNumber(number) {
        var num = number + '',
        x = num.split('.'),
        x1 = x[0],
        x2 = x.length > 1 ? '.' + x[1] : '',
        rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2 + "KB";
    }
    
    var sizeLimit = 200, //allow upto 200KB images
      thisSize = Math.round((this.value.oneOfChild.value.length * 3 / 4) / 1024);
    
    if (sizeLimit > 0) {
      if (thisSize > sizeLimit) {
      xfa.host.messageBox("Note: With " + formatNumber(thisSize) + " the size of the imported image is greater that the recommended maximum of " + formatNumber(sizeLimit) + ".\nLarge images can cause a insufficent performance.\n\nIf possible, use images with the following recommended specs:\nFormat:\t\tPNG or JPG\nColor depth:\t8 Bit (higher is not supported)\nColor space:\tRGB (CMYK is not supported)\nFile Size:\t\t" + formatNumber(sizeLimit), "Recommended image size exceeded", 3, 0);
      }
    }
    
  • Resize lasso would be image to position in collage?

    Hi, when I catch an image and cut and paste into another image, it is very small on the new image, even if when I catch if she had it was 6 "high. How can I get this piece which I cut and paste adjusted to the size I want. Thanks, JohnT

    There is also a global preference, that you can set to ensure that the image is resized when you use the set command:

  • How expand/resize single-layer multilayer image?

    I have a picture that I am wanting to use as a reference of size for a cartoon character.  I tried several methods to resize the layer, but all the resizing seems to be the entire image even when the layer is selected.  Is there a way to do this?  I use the latest version of CC in Windows 7.

    Thank you, Suzi

    Hi Suzi

    Select the layer, and then use ADSI > free transform or Ctrl (Cmd) t

  • [AS / CC] Resizing a box and image content

    Is there a method of resizing by percentage ro a box and the image inside?

    My code for this is:

    (first line of the box, second for the image)

      resize selection in inner coordinates from top left anchor by multiplying current dimensions by values {0.75, 0.75} with resize individually and considering ruler units
      resize image 1 of selection in parent coordinates from top left anchor by multiplying current dimensions by values {0.75, 0.75} with resize individually and considering ruler units
    

    But unfortunately, if the image is shifted, the result is not what we can expect: the image is resized, but misplaced.

    Any suggestion?

    And here is a PDF file on the use of with a transformationMatrix transform():

    indesigncs3_transform_tutorial_javascript.PDF

    http://wwwimages.Adobe.com/www.Adobe.com/content/dam/Adobe/en/products /indesign/pdfs/indesigncs3_transform_tutorial_javascript.pdf

    Uwe

Maybe you are looking for