I'm using Adobe Edge Animate and I'm really having trouble with all the different screen sizes and resolutions. I see that Adobe is coming out with new products which may address this issue. Basically all I'm tryng to do is have an image display (like a banner for example) that fills the width of the user's screen. I see the following questions, but answers are old and I know that there has been a lot of development in this area. Any ideas greatly apprciated.
Stackoverflow questions
From the splash screen. In the Properties tab change the switch next to the width to make it 100%. Select the Max W parameter and change this to too. All these tweaks will make the layout responsive. Next drag the image onto the stage and position in the top-left corner. In Properties click on Use Presets for Responsive Layout and choose the Center Background Image option, then Apply. This means the image will stay central whenever the stage morphs. Drag the bottom-right corner handle so the image fits over the entire background. Notice the image doesn’t scale or stretch but stays in the centre. In the Position and Size tab is an expand button; click this and add a Max W of (how many px your image is). Change the width to 100% and press Enter. It will jump right back to 75% but it has accepted the change. Click on the resize marker and drag to the left to see what happens when the stage is resized to a smaller layout. As you can see, the background is clipped but the image resizes to fit.
Here is a link to the tutorial I think this will better answer your question if you do this tutorial. http://www.webdesignermag.co.uk/tutorials/create-a-responsive-animation-with-adobe-edge-animate/
Related
I'm fiddling around with this 3D object viewer for my website, I want to embed the viewer in my website, but it pops up on the page way too big.. Can some one tell me how I change the scale of this div?
<div id="fyu_9y1p82ic59" class="fyu_container fyu_vertical fyu_nomax"></div><script src="https://fyu.se/embed?v=3.0"></script><script>FYU.add("9y1p82ic59", "fyu_9y1p82ic59", {autoplay:1});</script>
Now I tried changing the div height, but this doesn't change the size of the actual player, it just cuts off the entire bottom part of it. How do I fix this?
Click here for picture
Situation:
I created a full screen layover navigation for a html5 webpage including links displayed as images. I used images because of the special hover effect, which is not possible in code.
This means that my links such as Home, About, Portfolio, Contact are made out of images (and not text) and displayed in a list.
I created two images per link: 1 for normal state and 1 for hover state.
I used the replacing img technique shown here:
.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
Issue: The navigation works well on a large screen, but the trouble starts when scaling-down the viewport. The images controlled by max-width behave separate from each other and do not scale at a similar rate when scaling down the screen. Of course this relates to the biggest image (which hits the viewport border) to scale first and the smaller later. In my case: the Portfolio image will scale earlier than the Home image. This results in a strange looking navigation, as the images differ in size at some point.
Some other elements I considered:
I can make smaller images for smaller screens, but that would make a lot of images too load.
I can make all images the same size as the biggest image. But it means the smaller word will have empty spaces on the left and right of the word. This empty space will also activate the hover state, which makes it look strange (hover state activates while I'm not on the link itself (visually, not technically).
Question:
How can I use an image-based navigation and scale down the navigation links/images equally when scaling down the viewport?
I made a JSFiddle for testing: DEMO
Thanks in advance.
I've been looking at this for a while and I'm beginning to think this isn't possible. The root of the problem is that each image would need to be aware of the largest image, or at least each of the <li>s would need to be aware of the other ones' dynamic height, which isn't possible with some sort of DOM manipulation. Even with flexbox I'm unable to make this work.
My advice would be to create each image the same width, using PNG transparency, then simply use an image map to activate the hover state over only the button area of each image. It's a bit of work but I can't think of a better way. See this StackOverflow question for ways to make the image maps.
I'm going to try to explain what I want to do with screenshots.
This is how my website looks right now, screen size 1920x1080:
https://gyazo.com/95cc6f61a449f67fb00232a7619a58d7
This is how I want my website to look:
gyazo.com/c5cf33080a04f0d3d9b5b0252f013ba3
BUT! I don't want the logo to resize itself, I want it to remain the the relative position of the shape it's on after it got resized.
Practically, I want the shape to remain the same size regardless of resolution, how do I do this?
I tried editing the CSS and using the 100%/auto trick but it's not what I want to do.
http://www.templatemonster.com/demo/58241.html is what I'm trying to replicate in my example. (THIS IS ALL FOR LEARNING PURPOSES)
Try zooming in or out on that page and you'll see the shape is keeping it's form regardless of zoom level.
To keep the logo from resizing you need to set fixed width and height with a pixel value. Ex: 150px. That should keep it from resizing itself.
Keep in mind that to replicate that example, you need to involve the original logo with a responsive element.
I asked a question yesterday:
Fixed Menu at the Top of Webpage that Changes Size as Window Resizes
I've updated a few things, and now it's looking much closer to what I want it to be. B,ut I just have a few follow up questions that I hope someone can help me with.
Please see what I have now: http://jsfiddle.net/ovr8spfu/6/
I would like to set a minimum width to my #container. I tried min-width:950px in #container, but to no avail. I want to do this because if you minimize the window now, the menu items disappear, first "Home" disappears, and then on and on. I'd like a minimum width so that the green filler part all goes away, afer that, a scroll bar should appear at the bottom of the window to fit the 950px menu.
My flash file is 1300x500. I want it to always fit the width of my window, with no padding, no background visible. So for example if the window is 1500 in width, the flash file should scale and stretch to 1500x577. If the window becomes its minimum (950 from question #1), the flash file should scale down to 950x365. The flash file should also always be touching the menu, and #section should be directly beneath it.
Lastly, if my menu item has a lot of text, how do I set a max width and text wrap to it? I'd like to wrap the text on 2 lines with a narrower menu item.
Thank you very much!
Can anyone help me troubleshoot my website?
http://www.andrewstonyer.co.uk/test/
My problem:
On IE8/7 if you click on a thumbnail (only 'Pulse' and 'Time Within The Hour' are wired in right now) an overlay appears with detail of that piece.
What should happen, and does in Gecko/Webkit, is that the overlay contains a table with a heading, a scaled, centered image, and a nav menu. There is a toggle for text, which pushes up the image cell and makes the image smaller, keeping proportion. I know the overlay looks like ass right now- those are just placeholder colours :)
On IE, the image doesn't fit perfectly in the table cell, which means that everything is pushed down outside the window. I can't see the nav menu. It appears to render the image at actual pixel size (in the CSS, the img class element is set to 100% height).
The text cell is toggled with jquery, when toggled on in IE, it doesn't appear to 'squeeze' the above cell, which is what I want to happen.
Could any experts help?
Regards,
Jon
Adding width:100% to the ov-image class in your CSS fixes this. I guess the other browsers honor display:block even for image scaling, but on IE, you have to declare the width for it to scale.
Additionally remove height:100% from the same class.