[FLASH] Video als menu

[Rogier.V]

Hallo allemaal,

Ik had een leuk ideetje in mijn hoofd over een website die ik wil gaan maken.
Het plan was een menu bovenaan te maken, waar een flash video in geladen wordt. Vervolgens moet de video 'stil komen te staan', en moet je op de links kunnen klikken die zijn verschenen in het video fragment.
Ik mis misschien de juiste termen, of de juiste kennis om meteen te kunnen vinden hoe dit precies moet, maar ik kom er iig. niet echt uit.

Mijn eerste vraag is hoe ik dit het beste kan aanpakken. Ik heb al een video gemaakt, en geimporteerd in Flash, en dat werkt allemaal goed. Nu loop ik alleen een beetje vast op het punt dat de video stil moet komen te staan (de laatste frame moet dus in beeld blijven, zonder dat de video door loopt), en je vervolgens individuele elementen uit de video klikbaar kan maken.

Het gaat mij er nu dus vooral om dat de video uberhaupt stil komt te staan, en dat je bepaalde dingen in de video kan aanklikken. Dit moet uiteindelijk gepaard gaan met rollovers en dergelijke, maar daar is genoeg info over te vinden lijkt mij.

Ik hoop dat het een beetje duidelijk was.

Alvast bedankt,

Rogier

[Bozozo]

Maak een screenshot van het laatste frame van de video. Zet deze in een nieuw frame achter de video, en zet in het Script van dat frame "stop();"

[Rogier.V]

Bedankt voor je reactie .

Ik had dat eigenlijk zelf ook al bedacht, maar ik zat met het probleem dat ik niet precies wist wanneer mijn video was afgelopen. Nadat ik mijn video importeer, zie je niet in de timeline wanneer de video start of stopt. Hoe weet ik precies wanneer mijn video is afgelopen, om daar vervolgens op de juiste plek het plaatje in te zetten?
Of, bedenk ik mij nu, is het gewoon kijken hoe lang de video duurt, en dan kijken naar het aantal frames?
Is het niet mogelijk je video frame per frame te spreiden over je timeline? Dat maakt het denk ik makkelijker om ook dingen toe te voegen op het moment dat de video aan het spelen is.

[Bozozo]

Als je File -> Import Video doet, dan kun je hem naar de timeline importen. In Flash CS3 tenminste.

Ik heb het net even geprobeerd

[Rogier.V]

Dat werkt inderdaad perfect. Bedankt .
Er staat bij dat het de file size van je SWF een stuk groter maakt. Dat is natuurlijk geen probleem, maar wordt de laadtijd die het kost om het flash menu te laden op je webpagina ook groter? Of maakt het in principe niet uit of hij de frames achter elkaar zet omdat hij dat toch sowieso al doet?

[ocdaan]

Een video importeren is niet de meest handige manier. Kan wel maar maak dan een preloader zodat de gebruiker niet 20 sec ofzo naar een zwart scherm zit te turen.

Beter is om de video gewoon extern te houden. met ns.play("file.flv") laadt die de video van dezelfde plek als waar je swf staat. Om het pause probleem op te lossen zou ik de laatste frame van je video als een plaaatje opslaan. als je dan de status doorkrijgt dat de video is afgelopen toon je het plaatje. Kijk maar ff bij de netstream status waardes. Dat plaatje kan je er al bovenop leggen om het jezelf makkelijk te maken en dan switchen dmv de .visible porperty

succes!

// ohhw - ik zie in je voorbeeld dat het wel een heeeele kleine video is dan maakt het weinig uit natuurlijk als je geen preloader gebruikt.

[ Voor 10% gewijzigd door ocdaan op 17-05-2008 20:51 ]

[Bozozo]

Bij een grotere file is het inderdaad beter om een stream te gebruiken en netjes een laadbalkje oid te laten lopen. Ik heb dat zelf nog nooit gebruikt maar in de Help staat het netjes uitgelegd.

Verder zou het best kunnen dat de filesize van een swf-met-filmpje-in-timeline groter is dan swf-met-extern-filmpje, maar dat zou je moeten uitproberen. Ik heb zelf een AVI geïmporteerd (die werd uiteindelijk kleiner) maar ik gok dat ie die heeft omgezet naar FLV formaat dus dat valt niet te vergelijken.

[Rogier.V]

Het is inderdaad maar een héél kleine video, maar 2 sec. ofzo (ik wil de mensen niet al te lang laten wachten, al helemaal omdat het menu op elke pagina is.)

ocdaan schreef op zaterdag 17 mei 2008 @ 20:44:
Kijk maar ff bij de netstream status waardes. Dat plaatje kan je er al bovenop leggen om het jezelf makkelijk te maken en dan switchen dmv de .visible porperty

Ik heb nu op één layer de video, met achter het laatste frame een stop action.
Daarnaast heb het plaatje die het menu moet worden in verschillende selecties op andere layers staan (elk item in het menu op een aparte layer).
Nu wil ik dus op elk van deze layers die het menu vormen zorgen dat het pas tevoorschijn komt als de video klaar is met spelen.

Volgens jouw reactie moet dat dus kunnen, maar ik snap niet helemaal wat je zegt in de bovenstaande zin. Kun je iets meer toelichten wat je bedoeld, en waar ik de actions precies kan vinden?
Alvast bedankt!

EDIT: Ik zat denk ik weer eens veel te moeilijk te denken, of misschien heeft het ook wel voordelen wat je zegt, maar ik kon het natuurlijk ook gewoon normaal achter het filmpje plakken .
Of heeft het toch een reden dat het naar jouw mening makkelijker is om het al meteen neer te zetten en het dan pas visible te maken als het filmpje is afgelopen?

[ Voor 15% gewijzigd door Rogier.V op 17-05-2008 23:38 ]

[Dark Blue]

Rogier.V schreef op zaterdag 17 mei 2008 @ 22:58:
...en waar ik de actions precies kan vinden?

Just my 2 cents (en 2 seconds reading): leen een boek over Flash bij de bieb of ga wat tutorials doorpluizen!

En dat stukje met dat screenshot: als je filmpje bijv. vectorvormen toont en je laat dat eensklaps overgaan in een still image die géén vectoren heeft, dan is die overgang misschien te zien. Kan storend zijn

[Rogier.V]

Dark Blue schreef op zaterdag 17 mei 2008 @ 23:23:
[...]


Just my 2 cents (en 2 seconds reading): leen een boek over Flash bij de bieb of ga wat tutorials doorpluizen!

En dat stukje met dat screenshot: als je filmpje bijv. vectorvormen toont en je laat dat eensklaps overgaan in een still image die géén vectoren heeft, dan is die overgang misschien te zien. Kan storend zijn

Het ging hier natuurlijk niet over actions over het algemeen, maar over de actions die hij noemde. Ik ging er tenminste vanuit dat het actions waren die hij daar zegt.
Of bedoel jij dit ook?

[ocdaan]

Welke Flash versie gebruik je eingelijk?

Een boek is nooit verkeerd natuurlijk maar op internet is echt alle info te vinden die je nodig hebt, probleem is meestal dat je niet eens weet waarop je moet zoeken

hier een tutorial: op pagina 2 staat alles wat je nodig hebt om een fimpje af te spelen lijkt me

http://www.pixel2life.com...ideo_player_part_1/page2/

dit is de officiele online help van adobe: staat ook voorbeeld code in

http://livedocs.adobe.com...X_2004&file=00001596.html

om ff duidelijk te maken wat ik bedoel, ff voorbeeldje, gebruik deze code niet direct, heb het zo ff neergezet zonder te testen en hangt ook van de gebruikte flash-versie af. Maar duidelijk is dat als de video stopt dat je dus die status afvangt en er dan actie op kan ondernemen

code:

ns.onStatus = function(info:Object) {
    if (info.code == "NetStream.Play.Stop"){
        // menu._visible = true
    }
}

ik weet niet als ik je goed gegrijp maar de actions in Flash zitten onder F9

Tevens is tweakers niet echt de plek om vragen over flash te stellen, ik zou zeggen registreer je ff bij flashfocus.nl, daar heb je enkel flash-freaks rondlopen die altijd bereid zijn je te helpen

Succes!

// ohhw nog een ding uit een vorige post

als je filmpje bijv. vectorvormen toont

met alle respect dit is onzin natuurlijk - een fimpje kan vectoren tonen maar een fimpje is geen vector natuurlijk dus als je van je laatste frame een screenshot zou nemen en die er op de pixel naukeurig er overheen legt zie je geen verschil natuurlijk!

// nog ff wat.

quick and dirty

Je kan prima het fimpje gebruiken als menu - volgens mij blijft het laatste frame wel staan. mss wel beter in eerste instantie. het is niet netjes programmeren want normaal zou ik zeggen: als dje geen video wilt tonen haal het dan uit het geheugen maar in jouwn situatie maakt het niet zoveel uit.

Ik zou dus gewoon die video op de stage zetten. en gooi er een aantal invisible buttons bovenop

om een invisible button te maken:

ctrl-F8 (create new symbol), selecteer button

dan heb je 4 states - up, over, down en hit - (in de timeline he) klik op het eerste frame, druk 4x op f5 zodat je in alle states lege keyframes hebt. dan teken je een gevult-vierkantje in de hitstate.

terug naar main time line - sleep de nieuwe button op de stage en je zal zien dat je een invisible button hebt gemaakt - kan je zien aan het doorzichtige blauw. die kan je resizen en op de video leggen in een hogere layer.

[ Voor 37% gewijzigd door ocdaan op 18-05-2008 00:09 ]

[Rogier.V]

ocdaan schreef op zaterdag 17 mei 2008 @ 23:45:
Welke Flash versie gebruik je eingelijk?

Een boek is nooit verkeerd natuurlijk maar op internet is echt alle info te vinden die je nodig hebt, probleem is meestal dat je niet eens weet waarop je moet zoeken


......
.......
.

Misschien begrijp ik jullie verkeerd, of jullie mij verkeerd, maar het enige wat ik wil is een video die ik geimporteerd heb ik flash (het was een avi opgenomen met mijn camera) laten ophouden met spelen, en tegelijkertijd de laatste frame laten staan zodat ik er een menu'tje van kan maken met rollovers enzo (in het filmpje verschijnen links 'in real life', dus vandaar).
Dat is nu gelukt door het filmpje te importeren als frames op de timeline, en dan het plaatje van de laatste frame er achter te zetten.

Wat is jouw code dan precies, en wat kan ik er mee doen?
In iedergeval wel erg bedankt voor de hulp.


Maar goed, het menu dat ik wou maken is in zijn ruwe vorm af (ik heb eerst gekeken of alles wel werkt, later ga ik bijv. de rollovers nog veranderen enzo).
Dan kunnen jullie even zien waar het nou precies over ging

http://www.rogiervogels.nl.tt

[ Voor 4% gewijzigd door Rogier.V op 18-05-2008 10:35 ]

[Bozozo]

Hij begint hier al te spelen voordat hij geladen is, wat een schokkerig effect geeft (ik zit hier wel te downloaden, dus zie het maar als een trage-verbinding-simulatie ). Kijk even naar zo'n NetStatus object, en doe de juiste dingen op het juiste moment.

[ocdaan]

hahaha erg grappig.

Jij gooid de film in je time-line. Dit werkt natuurlijk wel maar is nu niet echt de meest ideale manier van werken... verre van zelfs, iedere flasher krijgt tranen in z'n ogen van zo'n oplossing.

Maargoed, het is een begin iig

Wat ik dus voorstel, is de wat gangbaardere manier. Converteer ff die video naar flv en laadt deze extern in op de manier zoals ik beschreven heb.

Maar op jouwn manier kan ook wel werken, dat zou je nog kunnen combineren met de invisible buttons zoals ik heb uitgelegd.

maargoed, je moet maar kijken wat je doet - ik heb m'n best gedaan hahaha

[Bozozo]

Hmm, het kostte toch even wat werk om uit te zoeken hoe het 'netjes' werkt. demo van externe methode

Als je er niet uitkomt dan post ik mn code wel


edit: ook nog een vraagje van mij. Momenteel begin ik zo met laden, zonder te beginnen met spelen:

Flash ActionScript 3:

//ns is de NetStream

ns.play("heads.flv");
ns.pause();

//ns.resume() als resterende laadtijd <= video lengte

Dat play -> pause is een beetje lomp. Is er een 'echte' functie om te beginnen met streamen zonder te beginnen met afspelen?

[ Voor 54% gewijzigd door Bozozo op 18-05-2008 19:13 ]

[Rogier.V]

Ik gebruik nu zoals je/jullie aanbevolen een preloader voor het korte videofragmentje, en in de file van de video die er na komt is alles weer gewoon in de eerste frame volgens, als ik het goed begreep, het 'one frame in main timeline' pricipe.

Nu moet ik dus een script aan de video doen dat het de buttons moet laten zien als het klaar is met spelen. Nu kun je denk ik bij een video van meerdere frames makkelijk gebruik maken van .visible, iets in de richting van

code:

buttons._visible = false

en in de laatste frame

code:

stop()
buttons._visible = true

^{denk ik}

Maar dat gaat denk ik niet op als je een video van één frame hebt. Of denk ik nu weer (zoals altijd) krom?

Is er een eenvoudige manier om als script mee te geven aan de video/buttons dat de buttons pas tevoorschijn komen na het spelen van de video?

[ocdaan]

een video met 1 frame noem ik meestal een image

lees mijn grote post nog eens - bij de onStatus van de netstream kan je de stop status opvangen en daar je actie aan hangen om het menu/buttons te laten zien

//edit - je bedoelt denk ik Flash-fames en geen video-frames de juiste termen gebruiken kan handig zijn hahaha

maargoed alles staat netjes in mijn vorige (grote) post uitgelegd. En als je die tutorial doorneemt moet je wel kunnen begrijpen wat de bedoeling is.

[ Voor 38% gewijzigd door ocdaan op 18-05-2008 23:16 ]

[ocdaan]

Bozozo schreef op zondag 18 mei 2008 @ 18:20:
Hmm, het kostte toch even wat werk om uit te zoeken hoe het 'netjes' werkt. demo van externe methode

Als je er niet uitkomt dan post ik mn code wel


edit: ook nog een vraagje van mij. Momenteel begin ik zo met laden, zonder te beginnen met spelen:

Flash ActionScript 3:

//ns is de NetStream

ns.play("heads.flv");
ns.pause();

//ns.resume() als resterende laadtijd <= video lengte

Dat play -> pause is een beetje lomp. Is er een 'echte' functie om te beginnen met streamen zonder te beginnen met afspelen?

hmmm gloof het niet - als de buffer vol is begint'ie te spelen. Dus zo lomp is dit niet - tis ook een beetje vreemde situatie natuurlijk dus een vreemde oplossing is niet erg mits het goed werkt natuurlijk. Ik programmeer zelf eingelijk altijd tegen een streaming server. Dit is dus progressive, dat gedraagd zich altijd een beetje anders. Normaal zeg je start als je wilt beginnen te spelen. Dus het normale gedrag .... ehhmm weet niet zeker - wat je mss zou kunnen proberen is de buffer net zo hoog zetten dan als de video lang is. dan buffert'ie eerst de volledige video - zeg 5 sec ofzo en dan begint'ie te spelen - je zou het eens kunnen proberen

[Rogier.V]

Ik bedoel inderdaad flash frames

Ik ga morgen nog goed uitzoeken wat nu precies Netstream enzo is. Ik heb eigenlijk geen idee namelijk. Ik dacht na de links die jij poste begrepen te hebben dat het iets was dat je video extern laadt, van je hardeschijf bijvoorbeeld?
Nu snap ik als flash beginner eerlijkgezegd niet zoveel wat ik hier mee aan moet: in mijn ogen als noob zeggen de bronnen die jij linkt iets heel anders dan wat ik wil.

Nu snap ik natuurlijk wel dat het aan mijn gebrekkige kennis ligt, en dat ik misschien op dit moment wat te veel hooi op de vork neem, maar toch.

Zou jij misschien in je eigen woorden wat kunnen vertellen over de NetStreams en dergelijke, en hoe je daarmee precies mijn probleem kan oplossen?
Als jij het niet erg vind wil ik anders ook best even de bestandjes opsturen of iets dergelijks, zodat je misschien even kan kijken wat ik nu precies heb, en wat jij daar aan zou doen om het werkend te krijgen. Een voorbeeldje dus.

[ocdaan]

ja tuurlijk, alle begin is moelijk

ik denk dat het enige probleem dat je 'echt' hebt is om je video ff naar flv te converten. als je dat al niet hebt gedaan, dan heb ik niets gezegt.

je hebt nu de video intern in flash geladen. nu voel ik me een beetje een noob ik heb dat zo nog nooit gebruikt namelijk.

maar bij flash heb je toch ook een convert programma? zo niet, zet anders even de video online - converteer ik'em even voor je. Dan kan je'm idd exern laden. Dit is toch echt wel de juiste manier en heeft vele voordelen. nu merk je dat mss nog niet maar zodra je wat geavanceerder bezig gaat zal je al snel tegen allerij problemen/lastigheden aanlopen (als je de video intern hebt dus). Doe/leer het gelijk goed zou ik zeggen

wat je eerder zei, de one-frame-in-the-time-line is idd de beste manier om flash te proggen/maken

die tutotial waar ik naartoe linkte is echt een goede naslag... kijk daar echt even na ! (pagina 2 vooral)

wat je dus doet is: op je eerste keyframe - zet je een video-object neer (op de stage). noem deze bv "myVideo"

dan open je de actions-window (F9)

en zet je de volgende code neer

code:

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.setBufferTime(5);

ns.onStatus = function(info:Object) {
    if (info.code == "NetStream.Play.Stop"){
    trace("de video is gestop")
        // menu._visible = true
    }
}

myVideo.attachVideo(ns);
ns.play("filmpje.flv");

en op de plek van menu_visible kan je dus de actie maken dat je buttons actief worden

Netconnect - gebruik je eingelijk voor een verbinding naar een video-streaming-server. maar aangezien je nu progressive draaid, dus de video van een webserver laadt, connect je dus naar (null)

NetStream - dit object regeld alles wat met je video te maken heeft. ns dus, ns.play(), ns.stop() enz zoek in de help maar eens naar het netstream object en zie wat er allemaal mee mogelijk is. per onderdeel staat er meestal ook voorbeeld code bij hoe te gebruiken.

de code hierboven is voor flash8, movieclip._visible = true/false. als je flash9 gebruikt laat de de underscore weg, movieclip.visible = true/false

hoop dat het zo iets duidelijk is

// gloof trouwens dat flash9 wel meer verschillen heeft ...

[XangadiX]

// gloof trouwens dat flash9 wel meer verschillen heeft ...

dat is nogal een understatement, als je doelt op het verschil tussen As2 en As3

[ocdaan]

XangadiX schreef op dinsdag 20 mei 2008 @ 20:49:
[...]


dat is nogal een understatement, als je doelt op het verschil tussen As2 en As3

hahaha lol - idd ja ik zit in zoveel verschillende talen te proggen dat ik ook af en toe de weg kwijt raak - maar idd - flash9/as3 is wezelijk verschillend kwa syntax maar kwa structuur is bovenstaand voorbeeld hetzelfde. gloof trouwens dat het ook allemaal wat overwhelming is voor de topicstarter, begrijpelijk

[Rogier.V]

Sorry voor de wat late reactie, maar de video oproepen via het bovenstaande scriptje gaat perfect.

Nu nog het laten verschijnen van de button als het filmpje stopt..

code:

    trace("de video is gestopt")

Ik heb het even opgezocht, en dit dient dus eigenlijk voor de dingen buiten de foutmeldingen om die in het output venster komen. Andere mensen zeiden ook dat ik bijvoorbeeld een stukje tekst uit een dynamisch tekstveld kon laten weergeven door hier iets mee te doen. Dit is mij echter nog niet gelukt. Is dit mogelijk? En is dit wat jij bedoeld?...

code:

// menu._visible = true [small]

... Of bedoel jij dat ik het hier in moet zetten? Nu ga ik maar wat zeggen: maar kun je bijv. een button maken, en dan de name daarvan voor dat .visible = true zetten? Dus bijv: button.visible = true? Het is mij nog niet gelukt, dus misschien is dat hélemaal niet de bedoeling er van.

Jullie zijn bijna van mij af hoor.

[Bozozo]

1. Teken je menu in een MovieClip (new Symbol aanmaken in je library) met de naam "myMenu"
2. Rechtermuisknop op "myMenu" in je library --> Properties
3. Export for Actionscript aanzetten. Actionscript heeft nu 'toegang' tot dit symbool, en je kunt er met code instances van maken (dus zeg maar op de stage slepen, maar dan via script).

Zet vervolgens bij het stukje dat wordt uitgevoerd als de movieclip klaar is:

Flash ActionScript 3:

var myMenuInstance = new myMenu();
stage.addChild(myMenuInstance);

Oftewel, maak een nieuwe instance van het myMenu object, en zet die op de stage. Je kunt nog andere properties van je myMenuInstance instellen (alle properties van het MovieClip object, om precies te zijn). Voorbeelden zijn:

myMenuInstance.x = ...;
myMenuInstance.y = ...;
myMenuInstance.visible = ...;
myMenuInstance.alpha = ...;
etc etc.

Er zijn ook 23 andere manieren om dit te doen trouwens.

[Rogier.V]

Bedankt voor je uitleg.

Ik heb het misschien op een van de andere manieren gedaan als jij zei, maar ik heb het nu toch voor elkaar gekregen via de volgende code:

code:

var Tekst:String = ""

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.setBufferTime(5);

ns.onStatus = function(info:Object) {
    if (info.code == "NetStream.Play.Stop"){
           Tekst = "video is gestopt"
    }
}

myVideo.attachVideo(ns);
ns.play("Produce_0.flv");

"Tekst" is dus het tekstveld dat tevoorschijn moet komen. En Produce_0.flv is natuurlijk de video.

Ontzettend bedankt voor de hulp allemaal.

[ocdaan]

Toppertje zolang het maar werkt zoals je verwacht nietwaar!

Mocht je nog vragen hebben mag je altijd een dm sturen.

nog ff 1 dingetje, de buffertijd staat nu op 5 seconden he.. mss dat je dat nog wilt aanpassen.