Výplň pozadí aplikace

11.8.2011· Autor: Ondřej Brichta· Přidat komentář

Tématem dnešního článku je příprava pozadí, které se bude automaticky přizpůsobovat velikosti scény flashové aplikace.

Pozadí na celou plochu

V případech, kdy máme vytvořené flashové aplikace, které zabírají 100% velikosti plochy okna prohlížeče, potřebujeme vyplnit celou plochu nějakým pozadím. Pokud s tím nechceme mít žádnou práci, vytvoříme na pozadí dostatečně velký objekt(bitmapa, MovieClip), který pokryje většinu uvažovaných rozlišení(velikostí) plochy aplikace. Tímto se vyhneme jakémukoliv ActionScriptu a výsledný efekt je přijatelný.

Jinou cestou je využití ActionScriptu, ve kterém budeme kontrolovat aktuální velikost scény a podle ní měnit objekty - pozadí v aplikaci. Jednu ukázku, která reaguje na změnu velikosti scény máme zde: http://www.flash.cz/portal/clanek.aspx?id=965, my se ale budeme snažit o vytvoření objektu pozadí, který bude vyplňovat plochu scény.

 

Bitmapová výplň místo kopírování

Základním krokem k vytvoření takové funkcionality je detekce změny velikosti scény. Potřebujeme zajistit detekci události „resize" flashové scény:

this.stage.addEventListener(Event.RESIZE,onRes);
function onRes(e:Event):void {
 //....
}

Pokud chceme vytvořit jednolité pozadí, můžeme jej sestavit z množství objektů, které budeme vedle sebe kopírovat, je to ale zbytečně zdlouhavé řešení, které lze obejít přes bitmapovou výplň.

Princip celého efektu bude následující: máme na scéně objekt, kterému na základě změny velikosti scény měníme velikost bitmapové výplně. A protože bitmapová výplň umožňuje dlaždicové vyskládání pokud je velikost výplně větší než použitá bitmapa, nemusíme se už o nějaké další kopírování starat.

Příklad

Následující ActionScript nám pomůže sestavit funkcionalitu výplně pozadí:

import flash.display.Sprite;
import flash.events.Event;
import flash.display.Graphics;
import flash.display.BitmapData;
import flash.geom.Point;
var back:Sprite = new Sprite();
this.addChild(back);
function onRes(e:Event):void {
 redrawBackground();
}
this.stage.addEventListener(Event.RESIZE,onRes);
var originSize:Point = new Point(550,400);
function redrawBackground():void {
 var g:Graphics=back.graphics;
 g.clear();
 var bmp:BitmapData=new BitmapData(50,50);
 bmp.noise(10);
 g.beginBitmapFill(bmp);
 g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
 g.endFill();
 var newSize:Point = new Point(stage.stageWidth,stage.stageHeight);
 back.x = (originSize.x-newSize.x)/2;
 back.y = (originSize.y-newSize.y)/2;
}
redrawBackground();

 

 

Funkce „ redrawBackground" slouží pro překreslení bitmapové výplně objektu „back", který máme vložen na scéně. Samotná bitmapová výplň se nastaví pomocí metody „beginBitmapFill" jejímž prvním parametrem je objekt bitmapData, dalšímy nepovinnými pak například objekt třídy Matrix, díky kterému můžeme docílit nejrůznějších dodatečných transformací.

Bitmapu si v naší ukázce vytvoříme o velikosti 50px a aby v ní byla nějaká grafika, nastavíme jí drobný šum pomocí metody „noise".

Nezapomeneme posunout objekt „back" v x a y souřadnicích - toto se týká stavu, kdy máme flashovou scénu zarovnávanou na střed.

Ukázka: pozadi.swf

Převedení do třídy

Uvedené řešení si samozřejmě zaslouží komfortnějšího přístupu v podobě vlastní třídy, která může vypadat takto:

package {
 import flash.display.Sprite;
 import flash.display.BitmapData;
 import flash.events.Event;
 import flash.geom.Point;
 import flash.display.Graphics;
 public class BackCanvas extends Sprite {
 private var originSize:Point;
 private var fillBMP:BitmapData;
 public function BackCanvas(bmp:BitmapData) {
 fillBMP = bmp.clone();
 this.addEventListener(Event.ADDED,onReady); 
 }
 private function onReady(e:Event):void{
 this.removeEventListener(Event.ADDED,onReady); 
 this.stage.addEventListener(Event.RESIZE,onRes); 
 originSize = new Point(550,400);
 redrawBackground();
 }
 private function onRes(e:Event):void{
 redrawBackground();
 }
 private function redrawBackground():void {
 var g:Graphics=this.graphics;
 g.clear();
 g.beginBitmapFill(fillBMP);
 g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
 g.endFill();
 var newSize:Point = new Point(stage.stageWidth,stage.stageHeight);
 this.x = (originSize.x-newSize.x)/2;
 this.y = (originSize.y-newSize.y)/2;
 }
 }
}

 

Zde je nutné zajistit připojení listeneru k resize události až v okamžiku, kdy je objekt vložen na scénu (událost „added"), do té doby je totiž vlastnost „stage" stále „null" a nelze tak k ní nic připojit.

Pokud si v dokumentu exportujeme bitmapu:

export

 

 

Můžeme uvedenou třídu využít elegantněji:

var bmp:BitmapData=new icon();
var back:BackCanvas = new BackCanvas(bmp);
addChild(back);

 

Ukázka: pozadi2.swf

Ondřej Brichta Vývojář flashových a mobilních AIR aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server

E-mail: ob(zavinac)obria.cz | Web: http://www.obria.cz |

Motto: <°))))><

Komentáře k článku  

Přihlášení uživatele