PredWeb 3D Viewer - Joomla 1.5, 1.7 Module

PredWeb Joomla! 1.5, 1.7 Photo Editor

PredWeb Joomla! Photo Editor

PredWeb 3D Viewer - Stand Alone - Flash-XML-PHP Edition

PredWeb 3D Viewe - Stand Alone - Flash - XML - PHP

PredWeb Flash Blog

Sizing the flash movie from the html document, depending of the browser size, using JavaScript

Usually sizing of flash sites and applications is done in the flash file itself by positioning of elements depending the stage.stageWidth and stage.stageHeight. In some cases, however, we have to embed the application so that on a certain amount of sizing browser to stop and show the scrollbars and over a certain size, the flash to be fixed on the maximum allowable size. One option is to make it inside the flash itself by making a container with scrollbars, but this is often associated with many problems and requires time and a lot of code. However, this can be done with just a few lines of JavaScript code to verify the size of the browser and dimension <div> container that contains the flash to the desired size.
Let's look at an example where we have flash embeded on 100% in <div> container with id = 'swfHolder'. In this case, we want the flash to always be 100% of the browser, but if the browser size is smaller than 950x650px or greater than 1200x900px the flash resize to stop and dimensioned to maintain these rates.
Here is the embed code for our sample flash:
<div id='swfHolder' style='width:100%; height:100%;'>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="100%" id="sampleSwf" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="sampleSwf.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="/sampleSwf.swf" menu="false" quality="high" bgcolor="#ffffff" width="100%" height="100%" name="sampleSwf" align="middle" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</div>

If we leave things at this stage, the flash will always be dimensioned to 100% of the browser.
To achieve our goal we must add the following JavaScript in <head> </head> section of the html document:
<script language="JavaScript" type="text/javascript">
<!--
window.onload=resizeHolder;
window.onresize = function(event) {
resizeHolder();
}
function resizeHolder(){
var currH = document.body.clientHeight;
var currW = document.body.clientWidth;

var minHeight = 650;
var minWidth = 950;

var maxWidth = 1200;
var maxHeight = 900;

var holder = document.getElementById("swfHolder");
if(currH < minHeight){
holder.style.height = minHeight+'px';
}else if(currH > maxHeight){
holder.style.height = maxHeight+'px';
}else{
holder.style.height = '100%';
}

if(currW < minWidth){
holder.style.width = minWidth+'px';
}else if(currW > maxWidth){
holder.style.width = maxWidth+'px';
}else{
holder.style.width = '100%';
}
}
// -->
</script>
Let's look at the script:
This line will call the resizeHolder function to resize the container on the first page load.
window.onload=resizeHolder;
With this lines we add event listener that will call our resizeHolder function on each browser resize
window.onresize = function(event) {
resizeHolder();
} Here is the resizeHolder function itself: function resizeHolder(){ In these two variables we store the new size of the browser after resizing - respectively the height and width in pixels. var currH = document.body.clientHeight;
var currW = document.body.clientWidth; In these two variables we store the desired minimum size in which we want to show the flash - respectively height and width in pixels var minHeight = 650;
var minWidth = 950; In these two variables we store the desired maximum size in which we want to show the flash - respectively width and height in pixels var maxWidth = 1200;
var maxHeight = 900; This is the <div> container that holds our flash movie var holder = document.getElementById("swfHolder"); In the next if-else statements we check the current browser size respectively to the minimum and the maximum size we want. If the browser size is smaller than the desired minimum size, than the container will be resized to the minHeight and minWidth. If the browser size is bigger than the desired maximum size, than the container will be resized to the maxHeight and maxWidth. In all other cases the container will be on 100% of the browser size. if(currH < minHeight){
holder.style.height = minHeight+'px';
}else if(currH > maxHeight){
holder.style.height = maxHeight+'px';
}else{
holder.style.height = '100%';
}

if(currW < minWidth){
holder.style.width = minWidth+'px';
}else if(currW > maxWidth){
holder.style.width = maxWidth+'px';
}else{
holder.style.width = '100%';
}
} If you want sizing only for the minimum dimension, without maximum allowable size for the flash, then set the following values for the maxWidth and maxHeight: var maxWidth = currW;
var maxHeight = currH; If you want sizing only for the maximum dimension, without minimum allowable size for the flash, then set the following values for the minWidth and minHeight: var minWidth = currW;
var minHeight = currH; The code is tested on the most used browsers and Operating Systems and works fine.
By the way, this approach might be used for any <div> container, not only containing flash movies, but I'm sure you already guessed this :-)

Comments (1)
 

Flash, Vectors and CPU load

These days, working on a Flash application, I face a problem that took me several hours to solve. That is why I decide to publish this article and probably save you couple of hours.
I was just finished a new version of the Company Chart application when I recieve an e-mail from the client that when the chart have more items he get more than 50% CPU load and it rises above 80% on some points. This happens even without any interaction with the application - when you just keep the cursor in the application window CPU load in over 10%, if you move the cursor the load rise to over 50%. I lost several hour to look at the common issues in such situations - EnterFrame`s, neverending cycles and so on, but I didn`t find any, moreover in this version the whole code was passed an optimisation procedure.
It turned out that the problem actually is not a problem, just Flash Player takes serious resources to handle large quantitys of vector graphics /all of the graphics are vector in the application/, even if it dont do anything with them, but simply visualize.
The solution is cacheAsBitmap. The result was significant - CPU usage at times when previously reached 50%, now ranged between 2%-8%, and overall application did not exceed 12-15% workload at peak times.
/ Here to make it clear, those results are on machine: Pentium4 Dual Core Processor on 3.4 GHz, RAM - 1GB, NVIDIA GForce7300LE graphic card./
If you generate graphs with a code, for the MovieClip that contains them just add this line:
myMovieClip.cacheAsBitmap = true;
If you made the MovieClips in the Flash graphic environment, in the panel Properties -> Display you have to select the checkbox - Cache as bitmap.
I hope this info is helpful.
Add new comment
   

Cart

VirtueMart
Your Cart is currently empty.