Flash Player 10.2 og StageVideo

Kategori: Diverse | Kommentarer (0)
Gemt: 2010-12-9 9:40


I betaversionen af den kommende Flash Player 10.2 er der blandt andet komme en ny klasse der hedder StageVideo. Den giver mulighed for drastisk øget performance ved videoafspilning, da den altid vil være GPU accelereret.

Der er dog en lille pris, for måden den øgede performance er blevet mulig er ved at fjerne videoen fra den normale displaylist, i stedet, så vil en StageVideo alt være placeret under alt hvad man har af almindelige movieclips, sprites m.m. Det kan gøre det lidt tricky at udnytte den ekstra performance til deciderede multimediesites, men er projektet en mere regulær videoplayer, så burde det til gengæld være super nemt.

Lee Brimelow har lavet en glimrende tutorial der kommer ind på et par yderligere gotchas:
Introduction to StageVideo


Introduktion til 3D i Flash

Kategori: Diverse | Kommentarer (0)
Gemt: 2009-03-16 11:30


I Flash CS4 kom der nogle basale muligheder for at arbejde med 3D direkte i Flash, både IDE’et såvel som i ActionScript, og det vel at mærke uden at bruge eksterne biblioteker som PaperVision eller lignende.

Men, en ting er at man nu kan det, men…
…hvordan gør man det?
…hvad skal man egentlig være opmærksom på når man arbejder med 3D?
…hvilke begrænsninger er der i Flash’s implementation af 3D?

Lige præcis det har Kirupa netop lavet en ny tutorial om:
Introduction to 3D using AS3


Tags: , ,

Tutorial: Komplet site med dynamisk indhold og SwfAddress - del 2

Kategori: Tips og tricks | Kommentarer (2)
Gemt: 2008-06-3 14:18


Med introduktionen overstået er det nu tid til at dykke ned i selve koden af for vores site.

Hvad er det første man har brug for i en menu? I vores tilfælde er det en simpel knap, med en tekst som kan udskiftes alt efter hvilket menu punkt der er tale om.

Derfor har jeg lavet et movieclip med følgende struktur:
- Top-lag med et dynamisk tekstfelt kaldet Label_txt (husk at embedde de nødvendige tegn!).
- Bund-lag med et movieclip kaldet Background_mc, som indeholder en farvet kasse der er baggrund for teksten.

I mit library har jeg herefter sat den til at blive eksporteret til ActionScript med navnet SiteButton:

SiteButton - Properties

Ingen klasser og i Flash
For at gøre denne tutorial så nem at følge som muligt, så er al koden lavet direkte på første frame i Flash og uden brug af underklasser, men skal man igang med et større projekt, så er det naturligvis oplagt at dele det op samt at bruge en ekstern kode-editor som eksempelvis FlashDevelop.

Menuen genereres
Som første skridt i at generere menuen er her først en funktion som samler de nødvendige informationer i et lille objekt som tilføjes til et array, der kommer til at indeholde alle vores menupunkter:

var menuItems:Array = new Array();

function menuItemAdd(_label:String, _address:String, _file:String):void {
	var _temp:Object = new Object();
	_temp.label = _label;
	_temp.address = _address;
	_temp.file = _file;
	menuItems.push(_temp);
}

De værdier som man sender med til funktionen er:
Label: Det som der skal stå på menupunktet, eksempelvis “Forside”.
Address: Det der skal tilføjes til url’en og som bruges i forbindelse med SwfAddress, eksempelvis “forside”.
File: Den fil der skal loades når man klikker på menupunktet, eksempelvis “forside.swf”.

Angående address, så er det værd at bemærke at værdien skal være unik, og da den bruges som url, så er det også bedst at undgå mellemrum og specialtegn.
Et menupunkt som hedder “Vores øl” kan derfor med fordel have address-værdien “vores-oel”.

Det site som vi laver i denne tutorial har 4 menupunkter, og derfor kaldes funktionen 4 gange:

menuItemAdd("Forside","forside","forside.swf");
menuItemAdd("Produkter","produkter","produkter.swf");
menuItemAdd("Profil","profil","profil.swf");
menuItemAdd("Kontakt os","kontakt-os","kontakt.swf");

Menuen vises
Nu har vi et array med alle vores menupunkter, og ved hjælp af det er det nu tid til at lave og vise selve menuen.

For at gøre det simpelt at ændre placeringen på menuen, er der først et par konstanter:

const MENU_X:Number = 10;
const MENU_Y:Number = 10;
const MENU_PADDING:Number = 10;

X og Y er startplaceringen for det første menupunkt, mens padding er mellemrummet mellem de forskellige menupunkter.

Her så selve funktionen som laver menuen:

function menuCreate():void {
	for(var _i = 0; _i < menuItems.length; _i++) {
		var _temp:SiteButton = new SiteButton();
		_temp.Label_txt.text = menuItems[_i].label;
		_temp.menuid = _i;
		_temp.x = MENU_X + (_temp.width * _i) + (MENU_PADDING * _i);
		_temp.y = MENU_Y;
		_temp.mouseChildren = false;
		_temp.buttonMode = true;
		_temp.useHandCursor = true;
		_temp.addEventListener(MouseEvent.CLICK, menuClick);
		addChild(_temp);
	}
}

Den looper vores array igennem, og for hvert objekt, så indsætter den en ny SiteButton, hvor teksten på Label_txt sættes.
Menuid refererer til knappens position i arrayet, sådan så knappen senere kan finde tilbage til det objekt den er lavet udfra.

mouseChildren = false fortæller Flash at objekter inde i SiteButton ikke kan interagere med musen, mens buttomMode og useHandCursor fortæller Flash at menupunktet skal opføre sig som en knap og at hånden skal vises ved mouseOver.

Hvis du compiler koden nu, så kommer der en fejl, for i denne funktion tilføjer vi også en eventListener, der lytter efter hvornår der klikkes på menupunktet, men den funktion den refererer til er jo ikke defineret endnu.
Den kommer til gengæld her:

function menuClick(_e:Event):void {
	trace(_e.currentTarget.menuid);
}

I først omgang er alt som denne funktion gør, at trace menuid’et, så vi kan se hvilken knap der er blevet klikket på.

Hvis du nu kører al koden, og såfremt du er en ligeså god designer som mig *host*, så vil burde du ende med et resultat nogenlunde i stil med det her:

Step 2

Og den samlede kode, efter lidt restrukturering, kunne se sådan her ud:

//////////////// MENU
const MENU_X:Number = 10;
const MENU_Y:Number = 10;
const MENU_PADDING:Number = 10;

var menuItems:Array = new Array();

menuItemAdd("Forside","forside","forside.swf");
menuItemAdd("Produkter","produkter","produkter.swf");
menuItemAdd("Profil","profil","profil.swf");
menuItemAdd("Kontakt os","kontakt-os","kontakt.swf");

menuCreate();

function menuItemAdd(_label:String, _address:String, _file:String):void {
	var _temp:Object = new Object();
	_temp.label = _label;
	_temp.address = _address;
	_temp.file = _file;
	menuItems.push(_temp);
}

function menuCreate():void {
	for(var _i = 0; _i < menuItems.length; _i++) {
		var _temp:SiteButton = new SiteButton();
		_temp.Label_txt.text = menuItems[_i].label;
		_temp.menuid = _i;
		_temp.x = MENU_X + (_temp.width * _i) + (MENU_PADDING * _i);
		_temp.y = MENU_Y;
		_temp.mouseChildren = false;
		_temp.buttonMode = true;
		_temp.useHandCursor = true;
		_temp.addEventListener(MouseEvent.CLICK, menuClick);
		addChild(_temp);
	}
}

function menuClick(_e:Event):void {
	trace(_e.currentTarget.menuid);
}

Nu har vi noget der ligner en menu, som man endda kan klikke på!

I næste del får vi ting til at ske når der bliver klikket :-)


Tutorial: Komplet site med dynamisk indhold og SwfAddress - del 1

Kategori: Tips og tricks | Kommentarer (0)
Gemt: 2008-05-29 12:29


Som jeg skrev i forbindelse med lanceringen af den sidste version af Se mor! - Digital konceptudvikling og design, så ville jeg benytte erfaringerne med SwfAddress derfra til at lave en lille tutorial, og i dag kommer så første del af den.

Mål
Målet med tutorialen er at lave et komplet og dynamisk microsite, der kan konfigureres via xml og loader alt indhold ind særskilt.
Og, som det måske mest interessante, så integreres det med SwfObject og SwfAddress, sådan så man kan bookmarke og linke til sektioner på sitet.

SwfAddress != SEO
Som noget af det første vil jeg gerne starte med at slå en tyk streg igennem en stor misforståelse som jeg ser flere steder:
SwfAddress har i sig selv intet med SEO (Search Engine Optimisation) at gøre.

SwfAddress gør det muligt forholdsvis enkelt, at lave et site i Flash, hvor man kan linke til og bookmarke bestemte sider og sektioner, med alle de fordele som det nu engang giver.

SwfAddress gør IKKE et Flash-site mere søgevenligt, da Google og andre søgemaskiner stadig ikke kan indeksere dynamiske Flash-sites, og derfor har det altså ingen effekt på det.

Ønsker man er SEO-optimere sit Flash-site, så er det oplagt at bruge SwfAddress som en del af sådan en løsning, men derudover kræver det også en del ændringer server-side.

Bare så vi lige har det på plads :-)

Flow
Det adskiller sig i bund og grund ikke ret meget at lave et site med SwfAddress og et uden, men der kommer en lille ændring i flowet, som jeg har forsøgt at skitsere her:

SwfAddress - Flow

Med andre ord så er det der sker, at der er en speciel event i SwfAddress som bliver aktiveret når url’en ændrer sig, her modtager man så den nye url som en streng, og så kan man ellers begynde og parse den og finde ud af hvad det var som der blev klikket på.

Så, det var introduktionen til det hele, i næste del tager vi hul på koden.


Ny udgave af gotoAndLearn.com

Kategori: Diverse | Kommentarer (0)
Gemt: 2008-01-10 11:57


Til dem af jer der ikke har set det, så er gotoAndLearn.com for nyligt blev redesignet, sådan så det nu er endnu nemmere at få et overblik over de mange fede videotutorials som sitet byder på.

Skal ikke kunne sige om der er en sammenhæng med designskiftet, men der er inden for få dage også komme en række nye tutorials:
- Advanced Filter Effects
- Sound Spectrum Display
- ActionScript 3 Sound Basics

Har du ikke været der for nylig, så er det absolut et besøg værd.


IFBIN - Kææææmpe samling af Flex og Flash eksempler

Kategori: Diverse | Kommentarer (0)
Gemt: 2006-08-4 15:28


IFBIN logo
Hvis du ikke lige ved hvad du skal bruge weekenden til, eller har 10 minutter på arbejdet der skal fordrives, så gør dig selv en tjeneste og download IFBIN!

Læs resten af dette indlæg