I'm not really sure how to go about it, but I'd like to have the swf get as big as possible for each user without requiring scrolling. Of course it would stick to a certain ratio, currently I'm using 2:1 but that could be changed (maybe I should use 16:9 since it is the standard widescreen ratio).
I am only using Actionscript 3 for code and MXMLC for compiling.
Simply display the SWF (inside of the html) with 100% width and 100% height. That way it will use all the available space.
Then make sure you are setting Stage.scaleMode to no StageScaleMode.NO_SCALE and make sure that your content is able to redraw its layout based on the actual available space. In MXML you can do that by using Boxes and percental sizing and/or absolute margin positioning (by setting top/right/bottom/left to a fixed value on at least two sizes). If you are constructing the layout using code, you can make use of Stage.stageWidth and Stage.stageHeight to calculate the correct sizes of your elements and use the Event.RESIZE event to get notified when the movie changes it size for whatever reason.
Related
I am using amp (Accelerated Mobile Pages Project) technology in a new project.
My concern is about amp-img tag for images. According to this documentation (https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) you can use the attribut layout='responsive' for responsive purpose and in conjonction you can use srcset,media,sizes attributs also for responsive purpose.
Likewise, the documentation says that the image will take the space of its parent container.
I don't understand this logic. Why should we size the container to have the proper size of the image. If it works this way, it is very heavy to use.
Thank you in advance for your answers
The tricky part is having responsive elements render on the page without adversely affecting performance metrics or user experience.
Yes, you can easily get images to fit the screen without width and height but there are performance hits. I think that is why AMP does not allow responsive layout without width and height.
The browser must download the image first to get the dimensions of the image, then resize the image appropriately for the screen size, and finally reflow and repaint the page.
In AMP, the rendering path is optimized so that first the page is laid out, setting aside placeholders for the images based on the dimensions provided in amp-img (using those numbers to establish aspect ratio), then the resources are downloaded, and the page is painted. No reflow is required.
For more information about Restricting width of responsive images Click Here
If I make several scripts with Paperscript coding drawings in a random scale, be it lines of 0.1 length or 1000 length (script var value!), then how do I proceed making these several scripts viewable in several canvases that have the same size?
(Envision for example a webpage that shows several drawings in a same size html-canvas-box, all having a different drawing, each more zoomed in on an object, all coded with the correct values in Paperscript.)
In my case the canvas is 100% by 57.7% set in a div. I want the drawings I make in whatever scale to show up there with as a maximum of extra in my paperscript maybe setting the view height and width, or adjusting the scale.
Right now I am having a hard time to not have my view behave strangely.
When I use data-paper-resize="true", resize="true" or nothing at all in the <canvas> as an attribute, then what I am showing in my view doesn't remain the same in different browser sizes.
Is it that I used percentage for the canvas? Should I define something in my paperscript? Can I do this outside of the drawing script with some jQuery?
EDIT
When I change my CSS for the canvas from % to em my drawing is solid, like the examples on the site of paperjs itself. But also like on the site of paperjs itself, they are not responsive. Meaning you can adjust your browsers size and the canvas takes up the same amount of pixels on the screen. Not sure how this will work for me in the long run, like say with mobile devices...
It does cut out the strange behavior. Any ideas on making a fully responsive paperscript canvas that behaves normal?
I'm developing a game using libGDX framework but I have some problems trying to adapt it to different resolutions. I'll give an example of the problems I'm having.
I use Scene2D to show a simple menu. That menu have some buttons with textures loaded from a texture atlas (button textures are 9patch). In desktop, with a resolution of 800x480 the buttons look nice (even the BitmapFont) but in Android, where I use setViewport to keep the width (800px) but scale the height keeping the aspect ratio, I get pixelated images. I think that this is because my mobile higher resolution. The whole stage must be scaled to fit so the images appear pixelated.
So, my question is, what is the best way to solve this? How can I support different resolutions without end with a pixel art look?
What resolution is the android device you tested it on? You said you've used 9-patch images. This should not produce pix-elated results unless your setting them to a size and then modifying their scale(difference between screen resolution and viewport size). If you don't want any scaling you should use your screens width or height for the viewport and calculate the other one by keeping your aspect ratio. This means that you'll have to build all your object's sizes at runtime based on your new viewport.
There isn't a one way fit all solution for such problems so you'll have to find which one suits your app. You can define your button sizes as % of screen's width or height; Or set them to a fixed value and adjust the spaces between them; or a combination of both(make an object partially bigger and modify the space between them).
I am working with box2d, and generating a few grounds of variable size (all rectangles). The image the grounds use is 500px by 200px, however, when I create and size my grounds, the background image stretches to fill the body. I am trying to have it aligned to top left and just tile with no resizing but am really unsure of how to control it.
I imported the image as a movieclip to my library, if it helps, and also have a basic empty class for it (EarthGround.as). I've been doing a little research but really haven't found anything definitive about manipulating the movieclips associated image.
You have to be specific with that. Maybe a screen shot would help.
Until then, possible causes could be:
Box2D uses real world values where 1 pixel = 1 meter. You have to
choose a scale factor.
Box2d uses the center of any object as its registration point. You
should always do the same with your flash sprite/movieclip, to keep
it simple.
I need your advice on how to organize a GUI in flash application. See image:
http://dl.dropbox.com/u/32811/Screen%20Shot%202012-04-25%20at%2015.40.31%20.png
Application is video player. I have buttons group that must be hidden when the mouse is out of the player. I added a Sprite, and all my buttons i have added as a child of this sprite. In this case i hide the parent, rather than each button individually.
There are several problems:
When parent Sprite resize occurred, all of his children resizes with him.
I would like to position children relative to their container, but it is very difficult, because i can not set width and height of parent sprite.
I would like to set the width and height of the parent Sprite, position buttons inside, and any resizing in it will occur automatically.
The question is: I am using the wrong tools, or use them somehow wrong? Are there any GUI frameworks that can help with building layout?
write this line at Creation Complete Event or any where at beginning of code
fscommand("allowscale","true");
it will maintain aspect ratio of application so all children of application will resize and scale properly
try this it will work