Spara bandbredd när man visar Flash videos på hemsidan

Det är enkelt att lägga in videos på en hemsida. Man väljer Arkiv -> Importera -> Importera video och sedan blir man guidad av Flash steg för steg. Videon konverteras automatiskt från olika filtyper till formatet FLV som Flash Player har stöd för. Flash har inbyggda sk skins med videoliknande kontroller som paus, play, volymreglage etc.

Även om man kan välja att ändra autoPlay-parametern till False så filmen inte börjar spela upp sig direkt så kommer filmen ändå att laddas och - stjäla bandbredd. Men varför ska man ta bandbredd om besökaren kanske ändå väljer att inte starta filmen?
För att förhindra detta kan man lägga en osynlig knapp i Frame 1 som, när man klickar på den, anger vilken video som ska spelas. Videon laddas alltså inte in i playern förrän besökaren klickar på knappen.

För ActionScript 2.0

- Låt spelaren gå över två frames.

- Namnge knappen til exempelvis btnStart.

- Skapa ett nytt lager och lägg in följande ActionScript (frame 1):

stop();

btnStart.onRelease = function():Void {

nextFrame();

spelare.contentPath = “videon.flv”;

spelare.play();

this.enabled = false;

this._visible = false;

}

Vill du visa "filmen" direkt så ta en skärmdump på den och spara som en jpg. Döp till t ex video.jpg. I Flash så välj Windows -> Components, och dra in Loader på scenen. Ställ in placering och storlek så den matchar ditt foto.

Skriv istället följande ActionScript:

stop();

startfoto.contentPath = "video.jpg";

btnStart.onRelease = function():Void {

nextFrame();

spelare.contentPath = “videon.flv”;

spelare.play();

this.enabled = false;

this._visible = false;

}

Macromedia Flash spelare till din film på webben

Flash har flera färdiga skins med spelarfunktioner vilket gör det lätt att lägga ut filmer på webben.

Skapa ett nytt Flash-dokument. Ställ in dokumentets storlek. Välj i menyn: File -> Import -> Import Video... Nu dyker en guide upp som hjälper till att importera videon och lägga på en spelare.

Vill du sedan ändra parametrarna för videon/spelaren så markera spelaren (ex FLVPlayback) och välj i menyn: Window -> component inspector (Ctl+F7).

Flera filmer i samma storlek (höjd bredd)
Om du ska ha flera filmer i samma storlek på samma sida kan du hämta filmen via en variabel. Du slipper då skapa en swf-fil för varje film.

Markera spelaren. Gå in i component Inspector (Ctl+F7) och sudda ut texten på raden contentPath.

Öppna Properties och ge spelaren ett instansnamn, ex spelare.

Gör ett nytt lager och döp till Actions. Ställ markören på frame 1 och välj i menyn Window -> Actions (F9). Skriv in:

var passed:String=film;
spelare.contentPath=film;

I HTML-koden lägger man till variabelnamnet efter filmens filnamn. Ex minfilm.swf?film=film1.flv

Andvänd t ex swfobject för att lägga in filmen på hemsidan:
<div id="filmkontainer"></div>
<script type="text/javascript">
var so = new SWFObject('video.swf?film=1.flv','mpl','640','480','8');
so.write('filmkontainer');
</script>

Skakig text i Flash motion tween

Om du har problem med att din animerade text i din Flash "skakar" så markera texten och välj Anti-alias for animation i Properties-menyn så flyter texten jämnt.

Snygg mjuk landning med studs i Flash

Vill man att t ex en bild ska ramla ner uppifrån ner på scenen och stanna så blir det snyggare och ser mer naturligt ut om objektet landar mjukt.

1. Gör om din bild till en symbol.
2. Placera din bild ovanför scenen.
3. Markera frame 20 och klicka F6 för att lägga in en keyframe.
4. Flytta ner din bild på scenen.
5. Högerklicka någonstans på den grå listen i ditt lager på tidslinjen och 6. välj Create Motion Tween. Om en heldragen linje/pil visas så har du gjort rätt.
7. Markera frame 1. I Properties-menyn ändrar du Ease till -65. Detta gör att bilden rör sig snabbare desto närmare "landningsstället" den kommer.
8. Markera frame 25 och klicka F6 för att lägga in en keyframe.
9. Flytta upp din bild 20 pixlar upp på scenen.
10. Högerklicka mellan den andra och tredje keyframen och välj Create Motion Tween.
11. Markera frame 20. I Properties-menyn ändrar du Ease till 25.
12. Markera frame 25.
13. Flytta ner din bild 20 pixlar.

Fortsätt skapa några till keyframes med motion tween mellan. Flytta tillbaka bilden exakt lika många pixlar du flyttade upp den. Ha färre frames mellan varje keyframe och minska även på easen till -5 respektive 0 på sista framen så att det ser ut som bilden saktar ner tills den stannar helt.

Om du låter bilden studsa två gånger och sedan stanna så blir det sex keyframes där du kan sätta ease (från första keyframe räknat): -60, 20, -10, 10, -5, 0.

Transparent Flash

Här kan du ladda ner skriptet swfobject.js som fixar en hel del problem med Flash och olika webbläsare.

Lägg in i head-sektionen följande länk till skriptet:

<script type="text/javascript" src="image/swfobject.js"></script>

Där du vill att din Flash ska hamna lägger du följande kod:

<div id="flash">
<p>Din webbläsare har inte stöd för Flash. <a href="http://www.macromedia.com/go/getflashplayer/">Hämta Macromedia Flash.</a></p>
</div>
<script type="text/javascript">
var fl_1 = new SWFObject("image/min_flash.swf", "Titel", "278", "361", "9", "#FFFFFF");
fl_1.addParam("wmode", "transparent");
fl_1.write("flash");
</script>

Vill du ha flera flash-filer på din hemsida så döp variablen fl_1 till t ex fl_2 och lägg in koden.

Flashbildspel till din hemsida eller Wordpress-blogg

SimpleViewer är ett gratis flashbildspelsprogram som är mycket enkelt att installera. Du kan själv ställa in höjd, bredd, bakgrundsfärg, lägga till en bakgrundsbild mm. Om du vill lägga upp fler än 50 foton så är det bäst att skapa flera gallerier i olika mappar.

Man kan lägga till bilder på olika sätt: automatiskt via något serverscript som PHP eller ASP mfl, via PhotoShop, Picasa och andra bildprogram, via Flickr eller manuellt.

Du kan också intregrera SimpleViewer i din Wordpress-blogg.

Ladda hem SimpleViewer gratis på http://www.airtightinteractive.com/simpleviewer/