I'm trying to edit an HTML that uses swfobject to load a flash file.
What I'm trying to do is to reduce the size of the SWF file.
I've tried editing the height and width parameter within the swfobject(), but that didn't work.
I tried reducing the width height in the HTML css, but that also didn't work..
How can I pass a 'width' or a 'height' parameter to the swfobject so it will actually load the swf in a smaller or 'zoomed out' way?
Thanks,
Depending on which version of swfobject, and which embed method you are using it may vary slightly, but in general a call to swfobject.embedSWF looks like this:
swfobject.embedSWF( "myMovie.swf",
"divIdToReplace",
"100%",
"900",
"9.0.0",
"expressInstall.swf",
flashvars, params, attributes
);
In this example I have set my width to 100% and my height to 900 pixels. If you are doing the embed in another way, post some code and perhaps I can help.
** NOTE **
Just because you can resize the container doesn't automatically mean you can "zoom out" on the swf. If the swf has "no scale" set, then instead of zooming out, you will just be cropping the swf.
** EDIT **
You can try setting the params object to include scale:"default", like this for example:
var params = {
menu: "false",
salign: "LT",
scale: "default",
quality: "high"
};
This is the params object you would pass into embedSWF like I have shown above.
You should create a container/wrapper for the SWF, set the width/height of the SWF to be 100%, then scale the container to whatever size you desire. This is covered in an older Stack Overflow post: Resize an SWF when loading it with SWFObject
Additional examples for using SWFObject and 100% scaling:
http://learnswfobject.com/advanced-topics/100-width-and-height-in-browser/
Related
I'm using a bootstrap 3 fluid grid to display thumbnails, and I love how the images scale in size as the browser is resized. The downside however, is a "big bang" effect when each page is loaded. That is, the grid begins collapsed then grows as images are added. I imagine a simple fix is to hardcode image sizes, but this would lose the scaling benefit I believe.
One attempt to fix this was to load a transparent placeholder image right before each thumbnail, which would of course be cashed on the first page of results and thus expand the grid faster. On callback for thumbnail loaded event, I remove the placeholder. This seems to help, but other times I still see the shifting as badly as before. In addition, with a slow connection you can actually for a moment see the real thumb below the placeholder.
<script type="text/javascript">
$(function(){
// For each thumbnail, insert a placeholder image.
// Once the thumb is loaded, remove the placeholder.
$("[id^=thumb-]").each(function(i, thumb) {
var $thumb = $(thumb)
var imgTag = "<img id='ph-" + (i + 1) +
"' class='placeholder' src='{% static "img/placeholder.png" %}'/>";
$thumb.parent().prepend(imgTag);
var $holder = $thumb.prev();
function loaded() {
$holder.remove();
}
if (thumb.complete) {
loaded();
} else {
$thumb.on('load', loaded);
$thumb.on('error', function() {
console.log('Error with thumbnail placeholders.');
});
}
});
});
</script>
Regarding compatibility, I'd like to at least have a usable site with older browsers, but it doesn't have to be perfect.
I'm not as interested in fixing my Javascript solution above as I am the best solution overall.
Please look at the live beta site here to help diagnose. I attempted a jsfiddle, but couldn't quite reproduce it. I will paste more context into the question once we understand what was wrong.
In this case, I would recommend adding the <img> tag to the plain HTML. Then set the src in your javascript function.
You'll also need to set height and width attributes on the <img> tags so their space is preserved, to prevent redrawing the page after the images are loaded. You could do this with a simple javascript function that determines the window.width and then sets the height and width attributes.
Something like this.
Hai am trying to add the height and width of swf dynamically but i cannot change stage.stageWidth and stage.stageHeight and also am tring with another method also.
[SWF( width="900", height="400")]
Its working fine but while adding the value dynamically it cannot change.
var hei:Number=500;
var wid:Number=300;
[SWF( width=wid, height=hei)]
The line
[SWF( width="900", height="400")]
is like telling the compiler to set properties for the SWF.
The variables you have written come into play only at runtime during which the compiler has no role to play. So basically, your code will be ignored.
You might want to have a look at this discussion here.
I'm new to AS3 and I'm doing some custom video player video project for AIR. While I was studying the simple examples (non-StageVideo) on how to play videos, I've encountered a unique situation where I got an awesome auto-scaling (stretch-to-fit) to window behavior from Flash.
Whenever I set the SWF directive's width and height equal to the width and height of the flash.media.Video object I'm creating. It does the auto-scaling, stretch-to-fit, resizable behavior. Like so:
// SWF directive placed before the class declaration of the main class
[SWF( width="1024", height="576", backgroundColor="000000", visible="true" )]
// somewhere in my initialization
myvid = new Video();
with( myvid )
{
x = 0;
y = 0;
width = 1024; // if I set this wxh equal to wxh in the SWF directive it auto-scales!
height = 576;
}
myvid.attachNetStream( myns );
addChild( myvid ); // must come after instancing of video and netstream, and attach to make the auto-scale work
myvid.play( "somevideo.flv" );
Even if I set the width to 16 and height to 9 on both it scales and fits perfectly on the size of my window. Can some explain me this behavior? None of what I read in the documentation mentioned this.
Don't get me wrong, I like this behavior! :) It made things easier for me. But code-wise I need to understand why is this happening as the code I set had nothing to do with auto-scaling.
Also, what the heck are directives for? Don't they just have pure ActionScript 3 equivalent? They look hackish to me.
I think the behavior you're describing is caused by the scale parameter in the HTML embed of the Flash. Generally this defaults to showAll, scaling the Flash up to fit the container.
There are two different sizes: the size of the container (the block in the HTML page) and the size of the Flash content (what you specify in the SWF tag). The scale mode decides the behavior when these sizes don't match. You can control this behavior either by tweaking that embed parameter, or from AS3 directly using stage.scaleMode:
import flash.display.StageScaleMode;
// scale the content to fit the container, maintaing aspect ratio
stage.scaleMode = StageScaleMode.SHOW_ALL;
// disable scaling
stage.scaleMode = StageScaleMode.NO_SCALE;
If you want to use the scale mode to your advantage, I would set the width of your Video to match the stage dimensions like so:
myvid.width = stage.stageWidth;
myvid.height = stage.stageHeight;
This way you avoid having to repeat the SWF width and height.
The directives mostly specify some metadata or instructions for the compiler. The SWF tag in particular specifies the info in the SWF header, such as desired width, height, framerate. Mostly these are just some suggestions to the player + container about how the file should be displayed. Some of them can be changed in code (stage.frameRate = 50;). Another metatag is Embed, which will bundle some assets into the SWF (particularly handy if you want to embed some binary data).
I am creating a site in flash that is reading in entries from a database. I want the swf to expand downward on the html page so the user can use the browser scroll bars to see all the content. I don't want to paginate everything into a 800 px high swf or something - I want the page to expand just like it would if it were html. Possible?
We do exactly that in a private project. We have a function that uses ExternalInterface.call (http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/external/ExternalInterface.html):
if (ExternalInterface.available) ExternalInterface.call('resizeScene', newHeight)
to call a javascript function which simply resizes the div element:
function resizeScene(newHeight)
{
document.getElementById('website').style.height = parseFloat(newHeight) + 'px';
}
You may also want to investigate
http://livedocs.adobe.com/flex/3/langref/flash/display/Stage.html#align
and
http://livedocs.adobe.com/flex/3/langref/flash/display/Stage.html#scaleMode
I have a table that is dynamically created using DIVs. Each row of the table has two images. I want to set the height for the div (that represents a particular row) to the height of image that is greater of the two images being displayed in that particular row. The images to displayed will always change, and they are from an external server.
How do I set the height for my div so that I can fit images?
If you are trying to dynamically resize a couple of divs in a row within a table, you maybe better off using a html table instead and having each image within a td tag. This will make tr tag resize accordingly for the image in each cell.
this.img = new Image();
this.img.src = url;
alert(this.img.width);
gives the width while
var img = new Image();
img.src = url;
alert(img.width);
doesnt..
dunno why.
You can:
Not specify the height of the div, and let it expand automatically
Once the image is loaded do:
document.getElementById("myDiv").height = document.getElementById("myImage").height
We'll need a little more info to be very useful. You can get the height & width of an image after the page loads via Javascript (info), then you could resize the height of the div after loading. Otherwise, you're really out of luck since HTML itself doesn't have anything.
If you're using PHP, there's getimagesize(), which you can use if you're building the site dynamically with PHP. There are similar functions for other languages, but we'd need a little more info.
If you want the browser to do layout based on the height of an image, before it fetches the image, you need to send that height to the browser somewhere. This will require something server-side. The fastest thing would be to insert in into the html directly. Slower but more elegant would be to fetch it image by image with <script src=> statements that get instructions from a special bit of javascript-generating cgi. (The speed difference comes from network round trips.)
If you're willing to resize after the data arrives, it's much simpler. Either slap an onload handler on the images or stick them in normal dom (e.g. an actual table, though you can do it with divs and css) and let the layout engine do the work.
This question has been answered in multiple ways, and you asked the additional question "Won't this make the UI look bad?"
The answer to that question is Yes. The best thing for you to do in most cases will be to set the height of your div to something that looks good, then scale the images down to fit. This will make the rendering faster, and the final product will look better and more professional.
But that's just my own opinion, though. I have no empirical data to back that up.
Pre-load them into javascript image objects then just reference the height and width.
Might take some clever devilry to work in all browsers...
function getSize(imgSrc){
var aImg = new Image();
aImg.src = imgSrc;
aHeight = newImg.height;
aWidth = newImg.width;
}