Solved

Deciding Image default size

Posted on 2011-03-18
15
507 Views
Last Modified: 2012-05-11
Hi All,

I am developing product i.e air desktop application....
My application consists of many images in button mode.....
MY problem is deciding on image default size.....

Sizing application as to fit in all screen resolution...how to handle image sizes....
so that it doesnot look distorted...
Can the image size change wrt screen resolution....How should i approach since there are many images with...

width="98 pixels"
height="41 pixels"
Horizontal Resolution=96dpi
Vertical Resolution=96dpi
Bit Depth=24
Frame count=1

Pls let me know how to deal with this problem...
1. Whether we should use width and height in image tag.. but how to decide on ..since this application is opened in different devices...
2. Maintaining the aspect ratio is also quite important if we use maintainAspectRatio = false image looks distorted...
 
Let me know what all concepts should be kept in mind while designing the page with so many images in button mode....
Also how do we consider font size...if it is big screen the font size should be big...

so how to consider all this issues while designing the page and also while making images....

0
Comment
Question by:SreeramojuPradeep
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
15 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 35170329
I think you can scale you image using formula

 var maxHeight:Number = stage.height;

if (this.imageHeight < maxHeight)
{
      var scale:Number;
      scale = maxHeight / this.imageHeight;
      if (scale > 2)
      {
          scale = 2;
      }

      var newHeight:Number = (this.imageHeight * scale);
      target._y = (Stage.height - newHeight) / 2;

      var newWidth:Number = (this.imageWidth * scale);
      target._x = (Stage.width - newWidth) / 2;

      target._xscale = target._yscale = scale * 100;
}
0
 

Author Comment

by:SreeramojuPradeep
ID: 35170403
But how about the default size of the image...

If the default image size is small once we adjust the width and height will it not be distorted...
should we scale each and every image.....
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35170409
yes, using the scale you have full control on your images. You can always the limit size or bring on fullscreen.
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

Author Comment

by:SreeramojuPradeep
ID: 35170456
I have many images in button mode in each and every mxml page....
I have the code snippet in the following way...
Where it is was developed wrt on device...
 
<s:HGroup width="1003" height="45" gap="2">
			<mx:Image id="acts1" width="98" minHeight="10" click="this.createMenu('acts1',acts1XMLTag);" buttonMode="true" 
					  maxHeight="350" maxWidth="250" height="41" source="{skins.ImageCls.ReferenceImgWrapper.acts1ImgCls}" left="0"/>
			
			<mx:Image id="commission" width="98" minHeight="10" click='Alert.show("Sorry")' buttonMode="true"
					  maxHeight="350" maxWidth="250" height="41" source="{skins.ImageCls.ReferenceImgWrapper.acts1ImgCls}" left="0"/>
			
			<mx:Image id="acts3" width="98" minHeight="10" click="this.createMenu('acts3',acts3XMLTag)" buttonMode="true" 
					  maxHeight="350" maxWidth="250" height="41" source="{skins.ImageCls.ReferenceImgWrapper.acts3ImgCls}" left="0"/>
			
			<mx:Image id="acts4" width="98" minHeight="10" click="this.createMenu('acts4',acts4XMLTag)" buttonMode="true" 
					  maxHeight="350"  maxWidth="250" height="41" source="{skins.ImageCls.ReferenceImgWrapper.acts4ImgCls}" left="0"/>
			
			<mx:Image id="acts5Img" width="98" minHeight="10" source="{skins.ImageCls.ReferenceImgWrapper.acts5ImgCls}" 
					  click="currentState = 'InternationalLaw';" buttonMode="true"  maxHeight="350"  maxWidth="250" height="41"/>
			
		</s:HGroup>

Open in new window


Is scaling is done at the intialisation of the page...how to work with it...pls let me know since i am new to
flex
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35170625
You can assign an event listener

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	
	<fx:Script>
		<![CDATA[
			private const MAX_HEIGHT:uint = 350;

			private function resize(event:Event):void{
				var maxHeight:Number = 100;
				var target:Image = event.target as Image;

				if (target.height < target.maxHeight)
				{
					var scale:Number;
					scale = target.maxHeight / target.height;
					target.height = (target.height * scale);
					target.width = (target.width * scale);
				} 
			}
		]]>
	</fx:Script>
	<s:HGroup width="1003" height="45" gap="2">
		<mx:Image id="acts1" width="98" minHeight="10" buttonMode="true" 
				  maxHeight="{MAX_HEIGHT}" height="41" source="http://discountcarspoilersdirect.com/images/custom/1-acura.png" left="0" complete="resize(event)"/>
		
		<mx:Image id="commission" width="98" minHeight="10" buttonMode="true"
				  maxHeight="{MAX_HEIGHT}" height="41" source="http://discountcarspoilersdirect.com/images/custom/28-toyota.png" left="0" complete="resize(event)"/>
		
		<mx:Image id="acts3" width="98" minHeight="10" buttonMode="true" 
				  maxHeight="{MAX_HEIGHT}" height="41" source="http://discountcarspoilersdirect.com/images/custom/13-honda.png" left="0" complete="resize(event)"/>
		
		<mx:Image id="acts4" width="98" minHeight="10" buttonMode="true" 
				  maxHeight="{MAX_HEIGHT}" height="41" source="http://discountcarspoilersdirect.com/images/custom/3-bmw.png" left="0" complete="resize(event)"/>
		
		<mx:Image id="acts5Img" width="98" minHeight="10" buttonMode="true" 
				  maxHeight="{MAX_HEIGHT}" source="http://discountcarspoilersdirect.com/images/custom/31-volvo.png"  height="41" complete="resize(event)"/>
		
	</s:HGroup> 

</s:Application> 

Open in new window

0
 
LVL 29

Expert Comment

by:dgofman
ID: 35170800
Clean a resize function

private function resize(event:Event):void{
      var target:Image = event.target as Image;
      if (target.height < target.maxHeight)
      {
            var scale:Number = target.maxHeight / target.height;
            target.height = (target.height * scale);
            target.width = (target.width * scale);
      }
}
0
 

Author Comment

by:SreeramojuPradeep
ID: 35171074
Thanks for ur solution...

 resizing.htm

The same output i got in desktop i.e i am developing a desktop application....

Only two images r visible out of 5 images...
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35171106
try to change width to 41 (same as height) in my example and run again.

But in the future you have to include a Scroll Bar compoennt
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35171115
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	
	<fx:Script>
		<![CDATA[
			private const MAX_HEIGHT:uint = 350;
			private const WIDTH:uint = 50;
			private const HEIGHT:uint = 41;

			private function resize(event:Event):void{
				var target:Image = event.target as Image;
				if (target.height < target.maxHeight)
				{
					var scale:Number = target.maxHeight / target.height;
					target.height = (target.height * scale);
					target.width = (target.width * scale);
				} 
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:HGroup id="group" width="1003" gap="2">
		<mx:Image width="{WIDTH}" height="{HEIGHT}" maxHeight="{MAX_HEIGHT}"
				  source="http://discountcarspoilersdirect.com/images/custom/1-acura.png" complete="resize(event)"/>
		
		<mx:Image width="{WIDTH}" height="{HEIGHT}" maxHeight="{MAX_HEIGHT}"
				  source="http://discountcarspoilersdirect.com/images/custom/28-toyota.png" complete="resize(event)"/>
		
		<mx:Image width="{WIDTH}" height="{HEIGHT}" maxHeight="{MAX_HEIGHT}"
				  source="http://discountcarspoilersdirect.com/images/custom/13-honda.png" complete="resize(event)"/>
		
		<mx:Image width="{WIDTH}" height="{HEIGHT}" maxHeight="{MAX_HEIGHT}"
				  source="http://discountcarspoilersdirect.com/images/custom/3-bmw.png" complete="resize(event)"/>
		
		<mx:Image width="{WIDTH}" height="{HEIGHT}" maxHeight="{MAX_HEIGHT}"
				  source="http://discountcarspoilersdirect.com/images/custom/31-volvo.png" complete="resize(event)"/>
		
	</s:HGroup> 
	<s:HScrollBar viewport="{group}" width="100%"/>

</s:Application> 

Open in new window

0
 

Author Comment

by:SreeramojuPradeep
ID: 35171257
I am thankful to u...

But all my images are in button mode......
how can i make all images to be visible no matter what the screen size is ...no image should be missing........
In standard mode the images are missing...and also i dont want the scroll bar to be used because our is the product and also horizontalScrollPolicy and verticalScrollPolicy is set to off....
in first Hgroup..i have 10 images
in second HGroup...i have 10 images
2 Images are missing...i below file
 This o/p is when minwidth is fixed to 955 and minheight to 600 for a desktop appNo images is missed ...but i want the all the images to be visible no matter what the screen size is....
 This is when i maximised to full screen
0
 

Author Comment

by:SreeramojuPradeep
ID: 35171262
And also can the images fit within screen proportionately since without more whitespace at the end.........
Like in image2.png pls let me know...i am thinking how to design...
0
 
LVL 29

Accepted Solution

by:
dgofman earned 500 total points
ID: 35171265
Hi SreeramojuPradeep,
I answered on your original question. For layout images you can use other options, for example using Tile component.

http://livedocs.adobe.com/flex/3/html/help.html?content=layouts_11.html

If you need help for layout images, please open another ticket.

Don't forget to reducing gaps between images in my example you need just change a image width.

Good luck!
David
0
 

Author Comment

by:SreeramojuPradeep
ID: 35171279
Thanks for ur input...

I am not using this images as thumbnails....
As per  ur input i will try by using layout containers...
Is there any thing else that i should keep in mind while designing...
If the below screen is maximised then all the images should fit in proportionately..
 These images should fit in screen if minimised or maximized proportionately
0
 

Author Closing Comment

by:SreeramojuPradeep
ID: 35171282
Good suggestions....
0
 
LVL 29

Expert Comment

by:dgofman
ID: 35171315
I don't know your business idea. I will recomend to open a new answer.
But if you want to handle image size base on window width you can you example like this

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" resize="resize()">
	<fx:Script>
		<![CDATA[
			private const totalImages:uint = 5;
			private const WIDTH:uint = 40;
			private const HEIGHT:uint = 40;

			[Bindable]
			private var _scale:uint = 1;

			private function resize():void{
				if(stage != null)
					_scale = stage.stageWidth / (totalImages * WIDTH);
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:HGroup id="group" width="1003" gap="2">
		<mx:Image width="{WIDTH * _scale}" height="{HEIGHT * _scale}"
				  source="http://discountcarspoilersdirect.com/images/custom/1-acura.png"/>
		
		<mx:Image width="{WIDTH * _scale}" height="{HEIGHT * _scale}"
				  source="http://discountcarspoilersdirect.com/images/custom/28-toyota.png"/>
		
		<mx:Image width="{WIDTH * _scale}" height="{HEIGHT * _scale}"
				  source="http://discountcarspoilersdirect.com/images/custom/13-honda.png"/>
		
		<mx:Image width="{WIDTH * _scale}" height="{HEIGHT * _scale}"
				  source="http://discountcarspoilersdirect.com/images/custom/3-bmw.png"/>
		
		<mx:Image width="{WIDTH * _scale}" height="{HEIGHT * _scale}"
				  source="http://discountcarspoilersdirect.com/images/custom/31-volvo.png"/>
		
	</s:HGroup> 
</s:WindowedApplication>

Open in new window

0

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question