Proportional Scaling external Image to stage
Sounds confusing I know but basically I want to place some images on the stage and I want every image, whether big or small, portrait or landscape, to be scaled to about a quarter of the stage size.
I have tried coding this myself and even tried many suggestions found on the web, but they all seem to do the same thing. The code either sizes every image to be equal in width and varying height, or scale every image to be equal in height with varying width.
Say you have some images all the same size, but some in landscape orientation and some in portrait orientation. Most of the code I found for "proportional scaling" would scale the landscape images okay, but make the portrait images the same height as the others, so they looked alot smaller. Or the reverse was true.
example:
image.width = stage.stageWidth;
image.height = stage.stageHeight;
( image.scaleX < image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;
This makes all the images fit on the stage all right, but they all have the same width. reversing the equality amkes all teh heights the same.
If two images did not have the same width before they are scaled down, they should not have the smae width afterwards in my opinion.
Sometimes I get some code that seems to work, then I change the stage size to check it and all the images did not scale to 1/4 of the stage new size when the FLA was run.
I bet this is simple, but I have been working on it too long, y mind is in a knot!
I loaded an array with a Loader and then used a random a variable to pick from the array using a variable that has the length of the array in it: here is the code, but the cut and paste does not wok that well.
import com.greensock.TweenLite;
var XMLURLLoader:URLLoader = new URLLoader();
XMLURLLoader.load(new URLRequest("link to picasa photo rss feed"));
XMLURLLoader.addEventListener(Event.COMPLETE, processXML);
var media:Namespace=new Namespace("http://search.yahoo.com/mrss/"); imagesArray:Array = new Array();
var imagesDateUploaded:Array = new Array();//The title properties of the XML File
//var imagesWidth:Array = new Array();
//var imagesHeight:Array = new Array();
var imagesLength:uint;
var imagesLoadedCount:int=0;//A counter, counts the images loaded
var formatFont:Myriad = new Myriad();//This is the embedded font
var textformat:TextFormat = new TextFormat();//A TextFormat Object
textformat.color=0xFFFFFF;
textformat.font=formatFont.fontName;
textformat.size=80;//Use the same size you used when embedding the font from the Library
var
function processXML(event:Event):void {
var XMLdata:XML=new XML(XMLURLLoader.data);
imagesLength=XMLdata.channel.item.length();
for (var i:uint=0; i < imagesLength; i++) {
var loader:Loader = new Loader();
loader.load(new URLRequest(String(XMLdata.channel.item[i].enclosure.@url)));
imagesArray.push(loader);
var imageDate:String=XMLdata.channel.item[i].pubDate.substr(6,10);
imagesDateUploaded.push(imageDate);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imagesLoaded);//A listener to the function that will be executed when an image is loaded
function imagesLoaded(event:Event):void {
imagesLoadedCount++;//Adds one to the imagesLoaded variable
if (imagesLength==imagesLoadedCount) {//When all images are loaded
prepareImages();//This function is explained in the next step
var maxSize:Number=stage.stageWidth/2;
function prepareImages():void {
//These actions will be applied to all the images loaded so we use a "for" and the "images" array to do that
var i:uint = Math.floor(Math.random()*imagesLength);
trace(i);
var container:Sprite = new Sprite();//A container that will store the image, frame, TextField, TextField background and shadow
var frame:Sprite = new Sprite();//The Frame Sprite
var infoArea:Sprite = new Sprite();//The TextField background
var infoField:TextField = new TextField();//The TextField
//build the frames
frame.graphics.beginFill(0xFFFFFF);
frame.graphics.drawRect(-20, -20, imagesArray[i].width + 40, imagesArray[i].height + 40);
frame.graphics.endFill();
//creates a black rectangle in the bottom part of the image, where the TextField will be.
infoArea.graphics.beginFill(0x111111, 0.5);//.5 is alpha
infoArea.graphics.drawRect(0, 0, imagesArray[i].width, 100);//100 = height
infoArea.graphics.endFill();
infoArea.y=imagesArray[i].height-100;
//The following code sets the TextField properties and adds its contents
infoField.defaultTextFormat=textformat;
infoField.embedFonts=true;//You have to add this to use the embedded font
infoField.antiAliasType=AntiAliasType.ADVANCED;//This property will display the text more clearly
infoField.width=imagesArray[i].width-5;
infoField.height=100;
infoField.text=imagesDateUploaded[i];//The content, obtained from the XML and stored in the Array
//The images will have a random position based on the center of the Stage area. We use Math for that.
//add a shadow filter
//Distance, angle, color, alpha, blur, strength, quality
var shadowFilter:BitmapFilter=new DropShadowFilter(3,90,0x252525,1,2,2,1,15);
var filterArray:Array=[shadowFilter];
container.filters=filterArray;//Apply the filter
//adding children to container
infoArea.addChild(infoField);//Adds the TextField to the TextField Background
container.addChild(frame);//Adds the Frame to the Container
var bd:BitmapData= new BitmapData(imagesArray[i].width, imagesArray[i].height);
var bmp:Bitmap = new Bitmap(bd);
bd.draw(imagesArray[i]);
container.addChild(bmp);
// using the loader from the array directly was causing problems like only showing once.
// container.addChild(imagesArray[i]);//Adds the Image on top of the Frame in the Container
infoArea.visible=true;//We set the image information to invisible by default
container.addChild(infoArea);//Adds the information area in top of everything
//resize the images to no more than 1/2 the image width or height compared to stage
if (container.width>container.height) {// horizontal asset
container.width=maxSize;
container.scaleY=container.scaleX;
} else {// vertical asset
container.height=maxSize;
container.scaleX=container.scaleY;
container.x = Math.floor(Math.random()*(1+stage.stageWidth - container.width-20))+20;
container.y = Math.floor(Math.random()*(1+stage.stageHeight - container.height-20))+20;
//the plus and minus 20 keeps the image in the stage boundary. something wrong with the container width calculations
this.addChild(container);//Lastly, we add the Container to the Stage
container.alpha = 0;
TweenLite.to(container,1,{alpha:1});
trace("Just added child");
var timer:Timer = new Timer(5000,1);
timer.addEventListener (TimerEvent.TIMER, initTimer);
timer.start();
function initTimer(event:TimerEvent):void{
trace("Timer started");
prepareImages();
timer.reset()
Similar Messages
-
I've noticed alot of people want the aspect ratio of their
images to remain when they scale their images, but i don't want to
keep the aspect ratio i want each image to scale to e.g.
200 x 200
regardless of the original size of the image.
i've tried:
but it doesnt work.
Any ideas how i can sort this?use _width, and _height instead
-
How to build proportionally scaled, full bleed background images correctly
How do I build full bleed proportionally scaled background images that proportionally scale to different sizes of browser windows and without leaving any blank spaces at the right or bottom? How do I make sure that the text also scales proportionally?
With CSS:
body {background: url(your_BGimage.jpg) repeat}
You need to use small, seemless images strips or tiles that are suitable for repeating across and down the page.
http://alt-web.com/Backgrounds.shtml
Large background images or photos do not resize in browser unless you build your site entirely in Flash.
Font-size is dependant upon the end user's browser settings. Viewport size doesn't effect text size.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/ -
Problems with animated masks and external images
I have an instance of a movieClip on the stage and I load an external JPG into the movieClip. The movieClip is masked by a layer that begins animating on a certain frame. As soon as I reach that frame my externally loaded JPG disappears. The movieClip doesn't mind being masked, but as soon as the mask animates the external image goes away. The mask animation is shapes drawn frame by frame.
It is interesting to note that if I create a Class and load the JPG into the movieClip (or do this in a constructor) I do not experience this problem - it is when the JPGs are loaded into an instance of the movieClip that lives on the stage that I encounter this. Unfortunately that is not an option in my project (since I have to get the path for the JPG from an xml file I am loading).
Could someone please help me with this?that's a flash bug.
-
Loading bitmapdata from external image?
Hi everyone,
I'm trying to retrieve the bitmapdata from an external image. In order to test my code, I convert the bitmapdata data a bitmap and I add it to the stage. Unfortunately I get a TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Bitmap@6b147e1 to mx.core.IUIComponent.
Do you see why this error occurs?
My code:
import flash.display.BitmapData;
import flash.display.Bitmap;
private var bitmapData:BitmapData;
private function init():void
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("Beach.jpg"));
var myImage:Bitmap = new Bitmap(bitmapData);
addChild(myImage);
private function onComplete (event:Event):void
bitmapData = Bitmap(LoaderInfo(event.target).content).bitmapData;
Thanks in advanceNow I want to convert the bitmapdata to a bitmap and display it. I get this error:
TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::BitmapData@727c629 to flash.display.Bitmap.
Can you explain how to convert bitmapdata to bitmap and display it properly?
My code:
private var bitmapData:BitmapData;
private var myImage:Bitmap;
private function init():void
var loader:Loader = new Loader();
loader.load(new URLRequest("Strand.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
private function onComplete (event:Event):void
myImage = Bitmap(LoaderInfo(event.target).content);
bitmapData = new BitmapData(320,240);
bitmapData = myImage.bitmapData;
//adding the image to a container ( sprite )
var container:Sprite = new Sprite();
container.addChild( Bitmap(bitmapData) );
// adding the container to a stage
this.rawChildren.addChild(container); -
Im wanting to make a photo gallery that I can update easy, I
thought if I could have a movieclip load external images for my
thumbnails it would be nice but Im not sure how to set it up. I
would make a file for my images and then another for my thumbnails,
then if or when I want to switch out pictures I'd just have to drop
new images into my folders and not even touch the FLA. Could anyone
point me in the right direction with the right action script to use
or a tutorial that explains how this is done..
And when I say load external I want it so I dont have to
click on the image for it to load, I want it to just load
automatically , I would put an invisible button or something to
that efect over the images for a animated effect.
Thanks for your help.I don't know if you are super enthusiastic about building it,
or if you just want the utility. If the later is the case, I just
purchased (cheap) a really great product that does all of what you
want, fairly automatically, including scaling large pictures down
to smaller size so that they load quickly.
I am not sure of the policy of recommending third-party
applicatons here. So, if you are interested, send an email (private
message) to me and I will show you the simple site I put together
using it and where to get it. -
Load external images and video in edge
Hi.
I am looking into edge instead of flash.
My question is how do you load external images and videos from an external server?
To clarify, I need to insert a link from where the images can load into the stage, so they don´t take up any of the final weight.
Thanks in advance.
Best,
Stig.The above solution I provided works if you already have the images in your composition and than if you want form load images from another server rather than the relative location to your html file.
Now if you want to load images dynamically into a rectagle containter you will have to code it.
below is a sample for that
Create a 'rectangle' with name 'Rectagle'.
Add the snippet in the compositon ready or on other user actiosn based on your requirement
var myImagetag = '<img src="http://wwwimages.adobe.com/include/style/default/SiteHeader/logo-2x.png">'
sym.$("Rectangle").append(myImagetag); -
hi
how can i do to align a external image?
every time i load a external image inside a movieclip
(mc.loadMovie("imglocation"))...
the image always start at 0,0 of the movieclip
there are no options to "align" this image to the movieclip
center? like
ctrl+k? align x,y position?
Gustavoyes...
here is what im doing:
''''interval''''{
total = mc_imagem2.getBytesTotal();
loaded = mc_imagem2.getBytesLoaded();
pct = (loaded/total)*100;
if(pct==100){
posLeft = _root.mcReference._x+ (_root.mcReference._width/2
_root.mc_imagem2._width/2);
posTop = _root.mcReference._y+(_root.mcReference._height/2 -
_root.mc_imagem2._width/2);
'''clearInterval''''
works fine... but. i have problems... few problems... i cant
prevent the
"100%" loaded function....
i want to this actions only if the image is already
loaded.... and.... the
swf works fine inside InternetExplorer... but inside firefox
and opera...
pfsss.... doesnt work....
in firefox or opera.... the action is being executed without
100% loaded
why?
there is another way to do that?
"SherwoodClark" <[email protected]> escreveu
na mensagem
news:eeuqf2$su$[email protected]..
> I'm not sure I understand what you're doing, but I
assume you're loading
> the
> image inside of a container (i.e. a movieclip) that then
can be positioned
> on
> the stage. Usingthe stage.width and stage.height
properties you can
> determine
> where the center of the stage is or if this mc is inside
of another mc use
> the
> _width and _height properties of the parent movie clip
to determine where
> the
> center of that mc is. Then set the _x and _y properties
of the container
> mc to
> position/align your image.
> -
Scaling of images in a table cell
Hi,
I have an issue aboute the scaling of images in a table cell. The table layout is fixed but the images can vary. I tried to transform the images but every time the transformation matrix has a scaling != 1.0 the function results in an error.
The following code is used.
PageItem pi = myCell.getNthChildPageItem(0);
TransformationMatrix[] matrix = pi.transformValuesOf(kCoordinateSpacesInnerCoordinates.value);
TransformationMatrix scalemat = matrix[0].scaleMatrix(OptArg.makeDouble(0.5), OptArg.makeDouble(0.5));
Unit[] matValues = UnitUtils.createDouble(scalemat.getMatrixValues());
pi.transform(
enums.kCoordinateSpacesInnerCoordinates.value,
VariableTypeUtils.createEnumeration(enums.kAnchorPointCenterAnchor.value),
VariableTypeUtils.createUnitList(matValues),
OptArg.makeVariableType(VariableTypeUtils.createEnumeration( enums.kMatrixContentScaleValues.value ) ),
OptArg.noBoolean()
Any suggestions?
Regards,
tomHi!
You may try to vary the settings for property "type"
navigation
function
reporting
result
If this does not help to solve your issue open a ticket at SAP Support.
There are several UIElements which show such a behaviour and you have no (documented) chance to change this.
Hope this helps.
Regards,
Volker -
AS3 Load external image and add multiple instances to mcs
Hi,
Is there any way to load an external image and add it to more than one movie clip?
Thanks,
Chris McLaughlinHi kglad,
I was loading a larger jpeg to which I was applying 20 different masks so using the bitmapdata class to create duplicates was the best solution.
It took me some time to wrap my head around it, but all is well.
Thanks for pointing me in the right direction.
Best regards,
Chris -
Loading external Images in MovieClips
Dear All,
I am trying to load the external images in Dynamically
created Movie Clips.
Can you please help me out from this.
I am trying something like this:
Container_mc.image_mc ( I want to load the Images inside the
imag_mc clip)
Regards,
Sridhar B
Container_mc.image_mc
imag_mcHi,
Following is my problem:
I am trying to trace the "idValue" property on runtime but it
is showing error. Can you please tellme how add Images and
properties runtime.
var loader:Loader = new Loader()
addChild(loader)
loader.load(new URLRequest("images/01.png"))
// Assigning a value to idValue property
mc_mainSWF.idValue = 40
mc_mainSWF.addChild(loader)
mc_mainSWF.addEventListener(MouseEvent.CLICK, checkID)
function checkID(event:MouseEvent)
// And i am geeting error here
trace(event.target.idValue)
Regards,
Sridhar B -
Including External Image in JSP
Hi all,
I need to be able to load a external image (image in a specific loaction on the server but not in the webapp location). Unfortunealty I cannot use servlets and have to code it in the JSP directly.
So far I have this code :
<%@ page import="java.io.*"%>
<%@ page import="javax.imageio.stream.*"%>
<%@ page import="br.gov.sc.tce.sco.view.framework.Constants"%>
<%
response.setContentType("image/gif");
String fileName = Constants.UPLOAD_FOTO_HOME + ( request.getParameter("fileName") == null ? "" : request.getParameter("fileName") );
FileInputStream fis = null;
OutputStream os = null;
try {
fis = new FileInputStream(fileName);
os = response.getOutputStream();
while ( fis.available() > 0 ) {
os.write(fis.read());
} catch (Exception e) {
e.printStackTrace();
} finally {
if (fis != null) {
try {fis.close();} catch (IOException e1) {} finally {fis = null;}
if (os != null) {
try {os.flush();os.close();} catch (IOException e1) {} finally {os = null;}
%>and in the pages that need to include pages I do something like the following :
<img src="<%=appName%>/include/jsp/showImage.jsp?fileName=<%=((Foto)fotoCad).getNomeArquivo()%>" width="60" height="60">This all seems to work ok , the images display , except that I get a stacktrace error afterwards of java.lang.IllegalStateException: getOutputStream() has already been called for this response
Any help would be appreciated
Regards
RobinIf you want to get rid of the exception, you have to remove all carriage returns between your JSP tags
Explanation:
If you put a carriage return in your code, the generated servlet generates: out.println("\r\n") (depending on your os)
In other words it has already got the output stream/writer in order to print out some characters to the stream. Hence the generated error message.
The following should generate without any exception raised.
See how carriage returns are eliminated?
Note this also includes no carriage return at the END of the file after the closing %>
<%@ page import="java.io.*"
%><%@ page import="javax.imageio.stream.*"
%><%@ page import="br.gov.sc.tce.sco.view.framework.Constants"
%><%@ page contentType="image/gif" %><%
String fileName = Constants.UPLOAD_FOTO_HOME + ( request.getParameter("fileName") == null ? "" : request.getParameter("fileName") );
FileInputStream fis = null;
OutputStream os = null;
try {
fis = new FileInputStream(fileName);
os = response.getOutputStream();
while ( fis.available() > 0 ) {
os.write(fis.read());
} catch (Exception e) {
e.printStackTrace(System.out);
} finally {
if (fis != null) {
try {fis.close();} catch (IOException e1) {} finally {fis = null;}
if (os != null) {
try {os.flush();os.close();} catch (IOException e1) {} finally {os = null;}
%> -
No external images in Outlook 2013 & no internet access in Internet Explorer 11
I use a an automatic configuration script http://XXXXukproxy.internal.XXXXXXXX.com/proxy.pac
I also use a combination of 2 VPNs through Avaya VPN Client or Cisco AnyConnect Secure Mobility Client.
When I'm connected to the VPN with the Avaya VPN Client I can't get ANY internet pages to load in Internet Explorer and I can't get ANY external images to load in Outlook 2013
I can use the exact same proxy settings in Chrome and Firefox with no problems what so ever.
If I remove the automatic configuration script I still get no internet access in Internet Explorer.
When I'm connected to the VPN with the Cisco AnyConnect Secure Mobility Client it's fine. It's also fie when I'm not using any of the VPN's
Anyone got any ideas? Can't be the proxy or the VPN as it's perfectly ok in Chrome and Firefox.
Thanks in advance.Hi,
First please run Outlook in Safe Mode:
Press Win + R and type “outlook.exe /safe” in the blank box, then press Enter.
If there’s no problem in Safe Mode, disable the suspicious add-ins to verify which add-ins caused this issue.
We may also try to change the Location of Temporary InternetExplorer Files in Internet Explorer to test the result (the steps below are for IE 10):
Internet Explorer -> Internet options -> General
tab -> Under Browsing history, click on Settings
button -> Temporary Internet Files tab -> Under Current location, click on
Move folder button -> Choose the new location, click
OK.
Regards.
Melon Chen
TechNet Community Support -
Loading External Images Causes Memory Leak
I have been working on an Actionscript 2.0 project that basically loads external images.
Everytime i load and unload a new image, memory increases to 1 or 2 MBs
If all the images are in cache, then it increased to 4 or 8 KBs
In the unloading of images, I have removed loader and the container of the image.
Any thoughts why it is behaving like that?
Please find the sample code snippet below.
btn_load.onRelease = function()
loadImage();
btn_unLoad.onRelease = function()
unLoadImage();
var mcListener:Object = new Object();
var container1:MovieClip;
var mcLoader:MovieClipLoader;
var loader_reference = this;
var n=0;
function loadImage(){
var image_arr = ["http://xyz.com/image1.png","http://xyz.com/image2.png","http://xyz.com/image3.png","http:/ /xyz.com/image4.png","http://xyz.com/image5.png"];
var image_url = image_arr[n];
if(n==image_arr.length-1) {
n=0;
}else{
n++;
container1 = loader_reference.createEmptyMovieClip("container1", loader_reference.getNextHighestDepth());
mcLoader = new MovieClipLoader();
mcLoader.removeListener(mcListener);
mcLoader.addListener(mcListener);
mcListener.onLoadComplete = function(target_mc:MovieClip, httpStatus:Number):Void {
mcListener.onLoadInit = function(target_mc:MovieClip):Void {
target_mc._x = 300;
target_mc._y = 200;
target_mc._width = 300;
target_mc._height = 250;
mcLoader.loadClip(image_url, container1);
function unLoadImage(){
mcLoader.unloadClip(container1);
mcLoader = null;
container1 = null;
removeMovieClip(loader_reference.container1);
Thanks in advance.that code should only execute once. fix that.
-
Hey, I've been having a niggly problem for a while now. I'm
using MovieClipLoader and a Listener to load in external images.
All the images load in fine, but often (not always) the onLoadInit
and onLoadComplete events don't seem to work on the last image I
load, so if I've got a dynamic text box that I want to disappear
when loading is complete, it doesn't, only on the last image of a
group, even tho the image itself loads correctly.
Anyone come across this before? You can see an example on the
index page of
this site.nice site, good job :) I would guess that if you are using
both events on the same call, one is getting triggered before the
other, since they both operate at a similar time. similar but not
the same, onLoadComplete happens when the load is complete,
onLoadInit happens when the first frame of the loaded timeline
plays. Therefore if your listening for both on the same load call,
one may happen before the other, and may override or change the
event sequence, occationally.
Just a guess though, I think you should consider using one or
the other, and firing all other functions from there.
Maybe you are looking for
-
Problem with Image Processor CS5
From Bridge I use tools/photoshop/image processor and convert raw with xmp files to jpegs after entering description and keywords in Bridge File Info. Suddenly, PS is not longer putting this information into the jpeg files. Why?
-
Query execute() API goes for inifinite wait (Hang)
Hi I am using BDB XML 2.4 in Fedora core-4. when I execute xquery update operation followed by FLWOR get query, the execute() API goes for infinite wait. We have tried setting NOWAIT flags to see if it waits for lock, but the program is in INFINITE w
-
Hi , System NW2004s ESS MSS mysap 1.0 I imported the ESS dev components into NWDS, but the issue is all the source code of lines in us/bank DC and US/W4 (infact most of the DCs) are shown as error. becuase of which i am not getting the context help
-
I'm using Photoshop CC with several plug-ins. Yesterday I have upgraded to CC2014 discovering that all plug-ins except two, seem to be reinstalled. What its strange that only two plug-ins, DXO FilmPack and DXO View Point, are "migrated" to new releas
-
Invalid heap space condition detected. Internal dump identifier (ID)
While the Working threads make JDBC CAll to the dtabase ... i'm getting this error in the JVM log ...can neone tell me what could be the reason