Arkiv for kategorien 'Tips og tricks'

AntiAliasType.ADVANCED + Filter = Trouble

torsdag, 27. januar 2011

Bare et hurtigt lille tip:
Hvis du bruger AntiAliasType.ADVANCED + et eller anden filter, eksempelvis DropShadowFilter, på dine tekstfelter, så vil du med stor sandsynlighed rende ind i et problem hvor noget af teksten kan hoppe vertikalt.
Hvis tekstfeltet yderligere også er sat til autosize, så er der også en risiko for at det sidste bogstav på en linie bliver beskåret.

Netop de problemer har drillet mig den sidste uges tid, men med hjælp fra en blog (som jeg desværre ikke kan huske hvad hedder) fandt jeg ud af, at det at stille værdien rightMargin umiddelbart ser ud til at kunne løse begge problemer.

Her et eksempel som jeg i hvert fald ikke har fået til at fejle endnu:

var _shadow:DropShadowFilter = new DropShadowFilter(1,
						95,
						0x000000,
						1,
						0,
						0,
						0.5,
						BitmapFilterQuality.HIGH
						);

var _tf:TextFormat = new TextFormat();
_tf.rightMargin = 3;
_tf.size = 15;
_tf.align = TextFormatAlign.LEFT;

var _txt:TextField = new TextField();
_txt.text = "En eller anden tekst";
_txt.embedFonts = true;
_txt.multiline = false;
_txt.autoSize = TextFieldAutoSize.LEFT;
_txt.antiAliasType = AntiAliasType.ADVANCED;
_txt.defaultTextFormat = _tf;
_txt.setTextFormat(_tf);
_txt.filters = [_shadow];
addChild(_txt);

clickTag i ActionScript 3

torsdag, 25. februar 2010

Startede sidste sommer et projekt op, hvor tanken var, at jeg ville lave en clickTag ActionScript 3 klasse, som alle i Danmark kunne bruge - købte i den sammenhæng også domænet clicktag.dk.
Men, som det ofte er med den slags projekter, så kniber det altid med at komme de sidste 5% i mål, de få procent der gør at man rent faktisk har lyst til at dele det med nogen.

Sandt at sige, så at jeg ikke kommet videre, men inspireret af denne tråd på FlashForum, så tænkte jeg at jeg lige så godt kunne se at få det jeg har udover rampen.

AS3 clickTag
Kort fortalt er der tale om en klasse der hedder clickTag, som aktiveres på en af disse måder:

import clickTag;

//Måde 1
var _cT:clickTag = new clickTag(root);
_cT.init(click_btn);

//Måde 2
var _cT:clickTag = new clickTag(root, click_btn);

Der er et par ting ved clickTag-klassen, som er gode at vide:
- Virker med ALLE versioner af clickTag, clickTAG, ClickTag m.fl.
- Bliver ikke fanget af popup-blockere, noget der nogen gange kan drille lidt i AS3, se den medfølgende UrlNavigator-klasse.
- Er gennemtestet, har selv brugt den i mere end et halvt år helt uden problemer.

Særligt det sidste er værd at bide mærke i, for hvis du sender et banner der bruger denne clickTag-kode til et medie eller et mediebureau, så kan du sagtens få en mail retur, hvori der står, at clickTag ikke er korrekt implementeret.

Hvis det sker, så start altid med at spørge, om de har sat banneret op og konstateret at det ikke virker når de klikker på det, eller om det er deres “advalidator” der siger at det ikke virker.

Modsat de gamle AS2 clickTags, hvor medierne har været vant til, at de blot har kunnet søge på om en ganske bestemt kodestreng var tilstede, så er den metode ikke længere særligt anvendelig i ActionScript 3.
Det skyldes flere ting, men primært at koden er længere og mere kompliceret i ActionScript 3, hvilket gør at den kan se meget forskellig ud fra et banner til et andet, og stadig virke fint.

Så derfor, så bed dem altid om at teste banneret ved at sætte det op og efterfølgende klikke på det.

Download
Zip med både klasser og eksempel fla:
clickTag.zip

Feedback
I er allesammen meget velkomne til at komme med feedback på klassen, og hvis interessen viser sig at være der for det, så kan det det godt være at vi i fællesskab kan få projektet helt i mål og få skabt en fælles, dansk AS3 clickTag standard.

WebcamHelper - Nemmere adgang til webcam i ActionScript 3

tirsdag, 17. november 2009

I forbindelse med Hit the Bitch, som vi lancerede i sidste uge, var en af de ting der drillede mig, at få webcam-integrationen til at virke gnidningsløst.
Her tænker jeg ikke på selve motion-detection tingen, men den basale funktionalitet med at finde ud af om man har adgang til brugerens webcam og hvis ikke, så at spørge om den.

Og, hvad nu hvis brugeren har givet en adgang til webcammet, men senere fjerner muligheden igen, eller ikke giver tilladelsen fra start og efetrfølgende slår det til?

Der er en lang række if’er, som gjorde det enormt besværligt at bygge det smidigt ind i den kode som jeg havde i forvejen, så derfor blev resultatet en lille WebcamHelper-klasse.

Med denne klasse, så foregår adgang til webcammet på denne måde:

public function CamTest():void {
	webcamHelper = new WebcamHelper();
	webcamHelper.addEventListener(StatusEvent.STATUS, webcamAvailable);
	webcamHelper.getWebcam();
}

public function webcamAvailable(_e:StatusEvent):void {
	trace("isAvailable: " + webcamHelper.isAvailable);
	if (webcamHelper.isAvailable && myVideo == null) {
		myVideo = new Video(320, 240);
		myVideo.attachCamera(webcamHelper.camera);
		addChild(myVideo);
	}
}

Det der gør det lidt interessant er, at der kommer en StatusEvent fra klassen hver gang at adgangen til webcammet ændrer sig, hvilket gør det nemt at lave noget kode som tager højde for hvad der så skal ske (ikke en del af eksemplet).

Hvis du synes det lyder interessant, så kan klassen og eksemplet downloades her:
WebcamHelper.zip

Hurtigt tip: Autojustering af tekstfelt

fredag, 25. september 2009

Et super hurtigt tip som jeg lige har fået af min designer-kollega Janus:
Hvis man i Flash-editoren ønsker at autojustere et tekstfelt til at have præcis samme størrelse som teksten der står i det, så kan man i stedet for at trække i det, blot dobbelt-klikke på firkanten i hjørnet - og voila.

AS3 - afrunding af tal, en lille gotcha

onsdag, 9. september 2009

I min jagt efter en måde nemt at afrunde et tal til 2 decimaler, f.eks. fra 8,75469 og til 8,75, er jeg mange gange gået forgæves, for mystisk nok, så modtager Math.round() funktionen ingen argumenter, den afrunder altid til et helt tal.

Men, der findes rent faktisk en indbygget løsning, problemet for mig har bare været at jeg har haft stirret mig blind på Math.round() og Math-klassen generelt, for svaret findes i virkeligheden på Number og Int klassen.
De har nemlig begge to funktionen toFixed, som netop kan afrunde:

var num:Number = 8.45132;
var dec:String = num.toFixed(2);
trace(dec) //8.45

var danish:String = dec.split(".").join(",");
trace(danish) // 8,45

Som bonus har jeg også lige vist en simpel måde at ændre punktummet til et komma, hvis man har behov for at vise det til en dansk bruger.

Det her er en af de ting, hvor hvis man ved det, så er det helt åbenlyst, men gør man ikke, så er det nemt at stirre sig blind på Math klassen som jeg gjorde :-)

Flash CS4 quicktip: Brug matematik når du ændrer værdier

mandag, 6. april 2009

Flash CS4 propertiesEt super hurtigt lille tip:
Hvis du i Flash CS4 skal rette en værdi, eksempelvis ved at lægge 10 til x, så kan du undgå hovedregning ved at lade CS4 gøre arbejdet for dig.

Hvis vi siger at den nuværende værdi er 120 og du ønsker at lægge 10 til, så indtaster du bare +10 bagefter, sådan så der står:
120+10

I det øjeblik du trykker Enter, så laver Flash det selv om til 130.

Virker for både +, -, * og /

Tak til min kollega Janus for tippet - ligger du inde med andre små guldkorn, så smid endelig en mail.

PictureSender = URLLoader med upload progress

onsdag, 11. februar 2009

I den Facebook applikation som vi er igang med i øjeblikket kan brugerne manipulere et billede, som vi tager et “screenshot” af og encoder med den glimrende PNGEncoder fra as3corelib - så langt, så godt.

Men, når det herefter skal sendes til serveren med URLLoader, så er det knapt så godt.

For det første, så har URLLoader ganske vidst en Event.PROGRESS som man kan lytte på, men den har kun med download af data af gøre og ikke upload, som det principielt er når vi sender billedet til serveren.
Det betyder så, at vi ikke har mulighed for at give nyttig feedback til brugeren i form af “10% uploaded”, og når der er tale om filer af en hvis størrelse, så kan der dermed sagtens gå både 5, 10 og 15 sekunder uden ordentligt feedback.

For det andet, så har der været et mærkeligt problem på brugere som har brugt en kombination af Mac+Safari, hvor der ganske enkelt engang imellem aldrig er kommet noget svar tilbage fra serveren, og det på trods af at jeg lytter på alle potentielle events, både IOError, HttpStatus, Open m.fl. - ingenting!
Og når jeg har haft kigget i serverloggen er det som om at den side der gemmer aldrig er blevet kaldt, som om at requesten simpelthen er forsvundet i den blå luft.
Med andre ord, så sidder brugeren bare og venter i en uendelighed uden at der sker noget, hvilket er meget langt fra optimalt.

Jeg har haft prøvet alle mulige forskellige måder at sende requesten på - binary, base64 encoded, GET, POST og meget andet - men altsammen med samme resultat, nogen gange fejler det bare på Mac+Safari når der sendes mange data.

Så, for at slå to fluer med et smæk, har jeg lavet min egen klasse, som både er i stand til at give feedback undervejs såvel som at eliminere problemet med Mac+Safari.
Ganske enkelt gør klassen det, at den deler billedet op i mange små bidder, som den sender én af gangen, og for hver sendt bid sender den en event, så man kan lave en nydelig upload progress.

På serveren er der så et php-script som laver en midlertidig fil, hvor den løbende gemmer de enkelte bidder, og når den sidste bid er modtaget, slettes den midlertidige fil og en rigtig billedfil, i dette tilfælde png, genereres.

Alt i alt, betyder det at billedet kan sendes med denne smule kode:

var pngStream:ByteArray = PNGEncoder.encode(pngSource);

var url:String = "http://www.server,dj/save_picture.php";
var filename:String = "mitbillede";
var steps:int = 20; //Antallet af bidder som billedet deles op i

var pictureSender:PictureSender = new PictureSender(url, filename, pngStream, steps);
pictureSender.addEventListener(pictureSender.UPLOAD_PROGRESS, uploadProgress);
pictureSender.addEventListener(Event.COMPLETE, loaderComplete);
pictureSender.send();

public function uploadProgress(_e:ProgressEvent) {
	trace("Upload " + String(Math.round((_e.bytesLoaded / steps) * 100)) + "%");
}

public function loaderComplete(_e:Event):void {
	trace("upload complete");
}

Jeg har samlet det nødvendige, både ActionScript og php, i en zip-fil som alle er velkomne til at downloade og bruge som de har lyst:
PictureSender.zip

Værd at bemærke er dog, at det er noget jeg hurtigt har bikset sammen til mig selv, så det kan helt sikkert både struktureres og dokumenteres bedre, men håber det kan bruges alligevel.

Note: Normalt bruger man FileReference når der tales om upload af filer, men da der i dette tilfælde er tale om data som Flash har genereret, frem for en fysisk fil fra brugerens harddisk, så kan den ikke bruges.

Facebook aplikationer og Flash - navigateToUrl drilleri

torsdag, 29. januar 2009

Vi er i øjeblikket i fuld gang med at lave en Facebook aplikation der i høj grad benytter sig af Flash (mere om den senere), og i den forbindelse er jeg stødt på et par mindre besværligheder.

Den første og største var, at Facebook når man bruger FBML (fb:swf) automatisk sætter alle Flash-objekter til at kører med allowScriptAccess=never.

Det er en sikkerhedsbegrænsning de har sat på, for at alle vi udviklere ikke uhæmmet skal kunne kalde en masse javascript-funktioner og dermed få adgang til data som vi ikke skal have adgang til.
Problemet med det er så, at det også sætter en række begrænsninger for funktioner som man ikke nødvendigvis ved bruger javascript, eksempelvis navigateToUrl, som pludselig er begrænset til kun at kunne bruge _blank, og det er jo helt umuligt at lave en lækker aplikation i Flash, hvis alle sider åbner i nye vinduer.

Det ved Facebook også godt og derfor er der en metode til at komme uden om problemet, nemlig ved at bruge en Flash-fil som Facebook har lavet som en bro.
Lyder det indviklet? Det er det også lidt og det tog mig noget tid at lure, så derfor kommer opskriften her.

Før skal man indsætte den Facebook-bro som man senere skal tilgå via LocalConnection:

<fb:fbjs-bridge/>
<fb:swf swfbgcolor="FFFFFF"
	swfsrc='http://www.dinurl.dk/din.swf'
	width='760'
	height='600'
	/>
<script> <!-- --></script>

Dernæst, så skal man bruge en funktion som tilgår broen og som kan bruges som erstatning for navigateToUrl, selv lavede jeg denne lille klasse, men det kan gøres på mange måder:

import flash.net.LocalConnection;
import flash.display.LoaderInfo;

public class FacebookUtil {
	private var connection:LocalConnection;
	private var connectionName:String;
	private var baseUrl:String = "http://apps.facebook.com/dinaplikation/";

	public function init(_loaderInfo:LoaderInfo):void {
		connection = new LocalConnection();
		connectionName = _loaderInfo.parameters.fb_local_connection;
	}

	function go(_url:String):void {
		if (connectionName) {
			connection.send(connectionName,
			"callFBJS",
			"document.setLocation",
			[baseUrl + _url]
			);
		} else {
			trace("FacebookUtil.go: No connection");
		}
	}
}

Som du kan se, så har den en init funktion, og det er fordi at Facebook som standard sender nogle værdier med til alle fb:swf objekter, og nogle af dem har vi brug for, så derfor skal klassen klargøres inden man kan kalde funktionen go, som det hele drejer sig om:

var Facebook:FacebookUtil = new FacebookUtil();

Facebook.init(LoaderInfo(this.root.loaderInfo));

Facebook.go("minside.php");

I den klasse jeg lige har lavet er der ikke mulighed for at sætte target, da jeg kun havde brug for _self, men det kan den sagtens udvides med.

Håber det kan gøre vejen til din første Facebook aplikation i Flash lidt nemmere :-)

Offline hjælp i Flash CS4

tirsdag, 6. januar 2009

Noget af det som jeg og andre har brokket os en del over i Flash CS4 er, at det indbyggede hjælpepanel, der kom frem på F1 i CS3, er lavet om til at en browser åbner op og går til en relativt langsom online-version.

Det er desværre ikke muligt at få det gamle panel tilbage, men til gengæld kan man få Flash til at vise en lokal version af hjælpen, hvilket gør at det hele går meget hurtigere.

For at få det til at ske, så skal du gør følgende:

1. Gå ind i Window -> Extensions -> Connections, og i det vindue der kommer frem skal du klikke på pilen i øverste højre hjørne og herefter vælge “Offline options”:
Flash CS4 Offline hjælp - step 1

2. I det nye vindue der kommer, skal man så sætte hak ud for “Keep me offline” og trykke Ok:
Flash CS4 Offline hjælp - step 2

3. Når du næste gang trykker F1, vil hjælpen åbne fra din egen harddisk.

Selvom det ikke er nær så godt som det gamle hjælpepanel, så er det i hvert fald en kraftig forbedring.

Demo af de nye standard-cursorer i Flash Player 10

tirsdag, 4. november 2008

I Flash Player 10 har man nu fået mulighed for at vælge hvilken af en række default cursors der skal vises, uden at man skal hen og lave sin egen kode, som gemmer musepilen og viser et stykke grafik i stedet.

Her er en demo af de forskellige muligheder, bare bevæg musen henover knapperne for at se dem:

(Kræver Flash Player 10 og husk at klikke en enkelt gang, så swf’en bliver aktiv)

Auto svarer i øvrigt nærmest til en reset, som gør at den viser den cursor som den selv mener passer, altså hand over button og ibeam over tekst osv.

CS4 fla med kode kan downloades her:
Cursor_hand.fla

Umiddelbart virker det fint og nemt, men havde været fedt om udvalget havde været breddere dækkende, hvor er eksempelvis krydset (drag) eller den med de to pile (scale).
Alternativt kunne det være fedt hvis man bare kunne sige at den skulle bruge en bestemt klasse fra librariet i stedet.

Men hey, lidt er bedre end intet.