PredWeb 3D Viewer - Joomla 1.5, 1.7 & 2.5 Module

PredWeb Joomla! 1.5, 1.7 & 2.5 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

Оразмеряване на флаш в html документа, в зависимост от размера на браузъра, чрез JavaScript

Обикновено оразмеряването на флаш приложения и сайтове се осъществява във флаш файлът чрез позициониране на елементите спрямо stage.stageWidth и stage.stageHeight. В някои случаи обаче се налага приложението да се ембедне така, че под определен размер на браузъра оразмеряването да спре и да се покажат скролбаровете, както и над определен размер, флашът да се фиксира на максимално допустим размер. Единият вариант е това да стане вътре в самия флаш като се направи контейнер със скролбарове, но това често е свързано с доста проблеми и изисква време и не малко код. Това обаче може да се случи и само с няколко реда JavaScript код, който да проверява размера на браузъра и да оразмерява <div> контейнера, който съдържа флашът, до желания размер.
Нека разгледаме пример, при който имаме флаш, ембеднат на размер 100%, в <div> контейнер с id='swfHolder'. В този случай искаме флашът да бъде винаги на 100% от размера на браузъра, но ако браузърът е с размери по-малки от 950x650px или по-големи от 1200x900px флашът да спре да се оразмерява и да запази тези размери.
Ето ембед-кодът за нашия примерен флаш:

<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>

Ако оставим нещата на този етап, флашът ще се оразмерява винаги до 100% от размера на браузъра.
За да постигнем целта си трябва да добавим следния JavaScript в <head></head> секцията на html документа:
<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>

Нека разгледаме скрипта:
Този ред ще извика функцията за оразмеряване при първото зареждане на страницата.
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;

Тове е <div> контейнерът, който съдържа флаша
var holder = document.getElementById("swfHolder");

Следващите if-else ще проверят какъв е текущия размер на браузъра спрямо зададените минимални и максимални размери. Ако той е по-малък от желания минимален размер, контейнерът ще бъде оразмерен до минималния размер, ако е по-голяма от желания максимален размер, контейнерът ще бъде оразмерен до максималния размер. Във всички останали случаи, контейнерът ще бъде оразмерен до 100% от размерите на браузъра.
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%';
}
}
Ако желаете оразмеряване само по минимален размер, без максимално допустим размер за флаша, то задайте следните стойности за maxWidth и maxHeight:
var maxWidth = currW;
var maxHeight = currH;
Ако желаете да ограничите само максималния размер, без минимално допустим размер за флаша, то задайте следните стойности за minWidth и minHeight:
var minWidth = currW;
var minHeight = currH;

Кодът е тестван на повечето браузъри и операционни системи и работи без проблем.
Между другото, този подход може да бъде използван за всеки <div> контейнер, не само за съдържащите флаш, но предполагам вече сте се досетили за това :-)

 

Флаш, вектори и натовареност на процесора.

Тези дни, работейки върху Флаш приложение, се сблъсках с проблем, който ми отне известно време докато го реша. За това реших да публикувам тази статия и евентуално да спестя няколко часа на някой, който би се сблъскал с подобен проблем.
Тъкмо бях приключил нова версия на приложето за визуализация на фирмената структура, когато получих мейл от клиента, че при добавяне на повече звена към чарта се получава над 50% натовареност на процесора, като на моменти натовареността стига до над 80%. И това без приложението да извършва каквото и да било дествие. Направих тестове и видях, че кога приложението е просто на фокус се получава над 10% натовареност, а само като се движи курсура на мишката натовареността скача до и над 50%. Изгубих няколко часа в ровене из кода за стандартните проблеми в такива ситуации - EnterFrame функции, безкрайни цикли и т.н., но не открих какъвто и да било нередно, още повече че при тази версия кода вече беше минал сериозна оптимизация.
Оказа се, че проблема всъщност не е проблем, а просто на флаш плеър са му нужни сериозни ресурси, за да се справи с такова количество векторна графика /всики графики в приложението са векторни/, дори да не извършва никакво дествие с тях, а просто да ги визуализира. Решението на проблема е cacheAsBitmap. Резултата беше значителен - натоварването на процесора в моментите, когато преди това достигаше 50%, сега варираше между 2%-8%, а като цяло приложението не превишаваше 12-15% натовареност в най-пиковите моменти.
/Тук да уточня, че тези резултати са от машина с: Pentium4 двуядрен процесор на 3,4GHz, RAM - 1GB, NVIDIA GForce7300LE видеокарта/.
Ако генерирате графиките с код, в клипа, който ги съдържа просто добавете този ред:
myMovieClip.cacheAsBitmap = true;
Ако клипа ви е направен в графичната среда на Флаш, в панела Properties -> Display трябвада сложите отметка пред Cache as bitmap.
Надявам се да съм ви бил полезен с тази статия.