Webanimatie@ikdoeict

Actionscript en Adobe PixelBender

Wed, 30 May 2012 16:30:01 +0200

Je gebruikt onbewust al de pixel Bender in flash. De pixel Bender is standaard geïmplementeerd in flash en photoshop. Deze verzorgt de filters in photoshop en shaders en blends in flash. Deze kan je dus uitbreiden met je zelf gemaakte filters.

Wat je met depixelbender toolkit kan doen, is zelf filters op maat schrijven en deze dan toevoegen in Flash. Dit heeft als voordeel dat je zonder teveel programmatie kennis toch verrassend goede filters kan maken.

Voor een volledig verslag en voorbeeld :

http://armandomeersseman.ikdoeict.be/tutorial_Actionscript_en_Adobe_PixelBender/Actionscript%20en%20Adobe%20PixelBender.pdf

http://armandomeersseman.ikdoeict.be/tutorial_Actionscript_en_Adobe_PixelBender/voorbeeld/pixel_bender_voorbeeld.zip

[Tutorial]Google Interactive Media Ads in Flash

Wed, 30 May 2012 16:17:13 +0200

In volgende tutorial kan je via de “Google IMA SDK” ads in flash afspelen.

Tutorial links:

* https://www.dropbox.com/sh/bl9jpzjyao9pyy4/np2yBsG8MI/Tutorial

* https://rapidshare.com/files/204652658/Google_IMA_SDK_Flash_Tutorial.zip

ActionScript en de Facebook API

Wed, 30 May 2012 16:10:45 +0200

Facebook stelt een aantal API’s en tools ter beschikking die ontwikkelaars toelaten om te integreren met hun diensten, met in het bijzonder het Open Graph Protocol. Facebook ontwikkelde dit protocol onafhankelijk van het W3C om haar eigen systeem interlinkbaar te maken met het wereldwijde web.

De Adobe ActionScript 3 SDK for Facebook Platform maakt het mogelijk voor flash om te communiceren met Facebook’s OpenGraph API. Een voorbeeld hiervan is Zynga Poker: gebruikers kunnen op facebook een Flash-game spelen waarbij de namen (en afbeeldingen) van hun vrienden worden gebruikt, die via de API worden opgehaald. Een ander voorbeeld is dat sites bij het registratieproces de gebruiker kunnen toelaten om in te loggen via Facebook, waarna privégegevens worden opgehaald en het registratieproces sneller voltooid kan worden.

Met behulp van de SDK kunnen drie types applicaties gebouwd worden: desktop applicaties, web applicaties en mobiele applicaties. Elk met hun bijhoorde swc-bestand.

De tutorial kan gevonden worden op:
http://cedricvanbockhaven.ikdoeict.be/tutorial.pdf

Voorbeeld en bronbestanden kunnen gevonden worden op:
http://cedricvanbockhaven.ikdoeict.be/FBApiExample.zip

Desktop application met Adobe AIR

Wed, 30 May 2012 16:03:15 +0200

In mijn tutorial onderzoek ik wat Adobe AIR is en onderzocht diens voor- en nadelen a.d.h.v. een oefening waarin ik een Desktop applicatie maak waarin een SQLite database en diens tabellen kunnen ingeladen, weergegeven en aangepast worden.

Onderstaande link wijst naar een dropbox-folder waarin je de pdf met mijn bevindingen en walkthrough van mijn oefening vindt en een zip met het Flash Builder project.

https://www.dropbox.com/sh/ktom13qajfrfc90/fsJyt_QP8m

"Actionscript en de Facebook API" door Stef Goemaere

Wed, 30 May 2012 15:59:46 +0200

Via deze tutorial maak je kennis met de API (Application Programming Interface) voor ActionScript die Facebook aanbiedt. Door middel van een klein ActionScript project ga je jezelf inloggen en een bericht op Facebook plaatsen.

Met de API die Facebook ontwikkelt heeft en beschikbaar stelt, kan je nagenoeg alles doen wat er in het algemeen te doen valt met Facebook, maar dan wel via ActionScript. En dit gaat zeker en vast veel verder dan gewoon een eenvoudig bericht te plaatsen. Zo kan je een lijst van je vrienden op vragen, dit eventueel met een filter erbij zoals bijvoorbeeld het geslacht. Verder kan je ook je profielafbeelding opvragen, verschillende media (afbeeldingen, video’s) uploaden, …

Facebook is in een enorm korte tijd uitgegroeid tot een van de populairste media op sociaal vlak, het is dus vast en zeker de moeite waard om dit te gaan integreren in de applicaties die je in de toekomst zal schrijven.

Tutorial: http://dl.dropbox.com/u/75190732/Actionscript%20en%20de%20Facebook%20API.pdf

Bronbestanden: http://dl.dropbox.com/u/75190732/Actionscript%20en%20de%20Facebook%20API.zip

amfPHP gebruiken met actionscript

Tue, 15 May 2012 15:21:16 +0200

In deze tutorial zal je leren hoe je amfPHP kan toepassen in je project en hoe het werkt.

AmfPHP werkt als een entry point voor je client. Je client stuurt een aanvraag (request) naar een php script op je server waarop amfPHP is geladen. AmfPHP parses de request, laad de request service, roept het aan en geeft het antwoord terug.

om de werking ervan beter te begrijpen, maken we een oefening met een login waarbij de login gegevens opgehaald worden via amfPHP uit een database. dit gebeurt allemaal vanuit actionscript.

de volledige tutorial kunt u vinden op : http://dl.dropbox.com/u/69122112/2ICT3_Ruben.De.Backere_Tutorial.pdf

bronnen:

http://www.silexlabs.org/amfphp/

http://www.flashenabledblog.com/2008/07/31/tutorials-as3-and-amfphp-roundup/

http://cookbooks.adobe.com/post_Starting_with_AMFPHP-11947.html

http://www.sephiroth.it/tutorials.php

http://www.sephiroth.it/tutorials/flashPHP/flashcomm_AMFPHP/index.php

Text Layout Framework

Tue, 15 May 2012 14:41:43 +0200

Deze korte tutorial geeft een basis voorstelling en uitleg over de mogelijkheden met deze library. Voor meer info bekijk deze presentatie, en probeer gerust zelf maar wat uit met allerhande tekstvakken.

Veel plezier.

http://pdfcast.org/pdf/text-layout-framework-flash

Tutorial - Starling Framework

Mon, 14 May 2012 14:59:10 +0200

In deze tutorial gaan we het Starling Framework gebruiken om van een sprite sheet een animatie te maken. Het Starling Framework is een Actionscript3 2D framework dat ontwikkeld is bovenop de Stage3D API’s.

De volledige tutorial:
http://robinvannieuwenhui.ikdoeict.be/StarlingFramework.pdf

Het eindresultaat ziet er als volgt uit:
http://robinvannieuwenhui.ikdoeict.be/demo/StarlingTut.html

Source Code:
http://dl.dropbox.com/u/9173737/TutorialStarling.zip

Text Layout Framework van Flash

Mon, 14 May 2012 14:41:48 +0200

Het TLF (Text Layout Framework) verschaft geavanceerde functies voor typografie en tekstlay-out voor innovatieve typografie op het web.

Eén van de vele voordelen is dat men dankzij TLF lettergrootte groter dan 127 kan gebruiken, en de beschikbaarheid om tekst verticaal te centreren. Dit is niet mogelijk in de classic TextField.

Men kan TLF voor verschillende doelen gebruiken, waarvan er enkele worden besproken: verticale tekst, ligaturen, typografisch hoofdlettergebruik, cijfertype, cijferbreedte en vreemde talen waaronder Arabisch, Hebreeuws, Chinees, Japans, Koreaans, Thais, Lao, Vietnamees, enz.

De link naar de volledige tutorial: http://www.mediafire.com/?v5b5k5xoph44nr2

Introductie over Papervision3D

Mon, 14 May 2012 12:30:15 +0200

Papervision3D is een soort 3D engine voor Adobe Flash die je in staat stelt mooie 3D filmpjes, figuren alsook games te creëren.. Vooral in de laatste jaren wordt dit pakket door steeds meer Flash-developers gebruikt. Het resultaat wat je met dit pakket kan bereiken is in sommige gevallen adembenemend.

In volgende tutorial wordt een 3D-model van een papierenvliegtuigje gemaakt aan de hand van de library Papervision3D.

Link tutorial (verslag): http://jarnoverreyt.ikdoeict.be/Papervision3D.pdf

Link code + verslag: http://jarnoverreyt.ikdoeict.be/TutorialPapervision3D_JarnoVerreyt.zip

Papervision 3D in Flash

Sun, 13 May 2012 15:22:05 +0200

In deze tutorial zal meer uitleg gegeven worden over het gebruik van Papervision 3D in Adobe Flash.

Papervision 3D is een open source 3D-engine gebouwd met Actionscript. Deze engine laat toe om geavanceerde drie dimensionale objecten aan te maken en deze in real-time weer te geven in de browser. Hierdoor kan de web ervaring een pak indrukwekkender zijn.

Papervision bestaat uit vele Actionscript class bestanden, die ontwikkelaars kunnen gebruiken om objecten, scenes en zelfs games aan te maken in een 3D omgeving. Om objecten te maken, gebruiken 3D applicaties over het algemeen kleinere objecten. Papervision past deze techniek ook toe en gebruikt kleine driehoeken als bouwstenen voor grotere objecten op de scene. Hoe meer driehoeken er gebruikt worden, des te beter de kwaliteit van de objecten, maar dit zorgt natuurlijk voor een grotere belasting van de processor.

Een van de belangrijkste redenen waarom voor Papervision 3D wordt gekozen is omdat het op grote schaal ondersteund wordt in de Flash community.

De volledige tutorial in PDF formaat is te vinden op onderstaand adres:

Google docs: Webanimatie tutorial - Papervision 3D.pdf

robotlegs tutorial

Sun, 13 May 2012 14:41:38 +0200

zoals de titel al suggereert gaat deze tutorial over robotlegs.

Ik heb om te tonen wat robotlegs precies inhoud een zeer kleine applicatie geschreven die een list met 2 video fragmenten bevat die wanneer er op geklikt wordt een speler openen die het geklikte fragment afspeelt.

robotlegs is een micro framework dat volgende functies bevat:

- Betere communicatie tussen objecten (niet via eventlisteners, maar via mediators en mapping).
- Een MVCS werk omgeving (model, view, controller)
(sneller werken, grote flexibiliteit, uitwisseling van onderdelen bv, andere gui zonder logische klassen te wijzigen).
- werking op flex en flash projecten

source link en pdf

Papervision 3D tutorial

Sat, 12 May 2012 15:06:39 +0200

Papervision3D is een open-source class library, die gebruikt kan worden bij het creëren van een 3D Flash programma met Actionscript. Het voordeel van deze library is dat de programmeur zich niet meer hoeft bezig te houden met de puur technische kant van 3D (wat vooral veel wiskunde is), maar door middel van klassen in de library gemakkelijk objecten en functies uit de 3D wereld kan toepassen in zijn programma. Door de architectuur van de library kan de programmeur gemakkelijk class-extensions (uitbreidingen) schrijven. Er zijn tal van mogelijkheden met Papervision3D, en in deze tutorial zal uitgelegd worden hoe je een 3D-omgeving kan creëren door een skybox te bouwen, waar particles in zullen zitten, en waar je in rond kan ‘vliegen’. In deze tutorial wordt gewerkt met FlashBuilder.

tutorial (in zip)

Tutorial Gaia framework

Sat, 12 May 2012 14:26:24 +0200

Deze Tutorial beschrijft het Gaia framework: wat het is, waarvoor het gebruikt wordt en hoe het te implementeren is.

Het Gaia framework is geschreven door Steven Sacks en is een open-source extensie voor Adobe Flash. Het voornamelijkste doel van dit framework is het ontwikkelen van Flash websites voor zowel beginners als gevorderden op het gebied van actionscript. Het gebruik van Gaia verkort de ontwikkeltijd van websites in Flash en maakt het eenvoudiger voor de programmeur.

Het Gaia framework voorziet o.a.:

• Navigatie

• Transities

• (Pre)loading

• Asset Management

• Zoekmachine optimalisatie

Dit framework stelt ook een handig panel ter beschikking waar je alle fla’s terug kan vinden, alsook het testen van je website, properties aanpassen,… . Zelf zal je ook geen mappenstructuur meer moeten voorzien, het Gaia framework zal deze zelf gaan aanmaken. Elke pagina zal automatisch voorzien zijn met een in/out transition, deeplinking,… .

Na deze korte inleiding zullen we beginnen met het Gaia framework te installeren. Onderstaande link verwijst naar de zip met daarin de volledige tutorial en de code van mijn oefening.

http://www.filefactory.com/file/6ybln1u0wbh/n/Tutorial_MatthiasDeBr_e_2ICT3.zip

Kinematics

Fri, 11 May 2012 15:18:00 +0200

Kinematics in flash ofwel Inverse Kinematics, is het animeren van flash objecten met behulp van de Bone Tool. Met deze tool creëert men een “beenderen” structuur in de objecten die jij zelf wilt. Met deze beenderen structuur kan je heel realistische animaties maken en animeren. Dit wordt dan ook zeer vaak gebruikt in de games van tegenwoordig gemaakt in flash, omdat men bewegingen en animaties kan maken die zeer realistisch zijn en “smooth” aanvoelen.

http://dl.dropbox.com/u/71420819/Dries_Cauwels_2ICT_Tutorial_Kinematics.zip

amfPHP: server side PHP oproepen met actionscript

Fri, 11 May 2012 14:32:19 +0200

Deze tutorial legt via een eenvoudige case study uit hoe je amfPHP kan gebruiken in jouw projecten om server side PHP scripts op te roepen. AmfPHP is open-source software die een abstractielaag vormt tussen Flex/Flash/Javascript front-end applicaties en PHP scripts die op een centrale server of in de cloud draaien. Hierdoor moet je zelf geen tijd besteden aan het schrijven van een logische laag tussen de twee en bovendien is amfPHP compatibel met meerdere types programma’s waardoor het voor de front-end programmeur ook gemakkelijker is om de data beschikbaar te maken op verschillende platformen.

De tutorial zelf start met ‘Hello World’ applicatie waarop verder gebouwt wordt zodat we uiteindelijk een Flash programma bekomen dat via PHP data ophaalt uit een SQL databank.

http://geoffreyvanlandegh.ikdoeict.be/Flash_amfPHP/

Augmented reality

Fri, 11 May 2012 14:21:04 +0200

Augmented reality is een begrip dat gebruikt wordt om de combinatie van een virtuele 3D wereld en de reële wereld aan te duiden. Zo kan men 3D objecten “toevoegen” aan de reële wereld.

Een zeer bekende toepassing hiervan is die van in de sportwereld: bepaalde lijnen die op het scherm worden getekend om te kijken of het wel of geen offside was of om te zien wie de snelste zwemmer is.

In deze tutorial gaan we gebruik maken van een webcam die een bepaalde afbeelding zoekt en hierop een 3D model tekent.

Tutorial: http://jonasdebleser.ikdoeict.be/flash/augmented_reality.pdf

Code: http://jonasdebleser.ikdoeict.be/flash/tutorial.zip

Werken met de RED5 server.

Fri, 11 May 2012 14:15:20 +0200

De RED5 server is net zoals de Flash Media Server een flash server. Echter FMS is een product van Adobe systems, RED5 is daarentegen opensourcesoftware. De opensource flash server RED5 is geschreven in Java. De server maakt gebruik van RMTP (Real time messaging protocol) om de streaming van audio, video en data over het internet tussen een Flash player en een server mogelijk te maken.

In deze tutorial wordt een eenvoudige applicatie aangemaakt op de server.

Officiële pagina van Red5.

http://www.red5.org/

Wiki van Red5.

http://red5wiki.com/wiki/Main_Page

Tutorials over installeren van Red5 en bijhorende software.

http://red5guide.com/

Text Layout Framework (TLF)

Fri, 11 May 2012 14:15:10 +0200

Het ‘Text Layout Framework’ is een uitbreidbare ActionScript-bibliotheek. Het TLF is gebaseerd op de text engine in Flash Player 10 en Adobe AIR 1.5. Het TLF verschaft geavanceerde functies voor typografie en tekstlay-out voor innovatieve typografie op het web. Je kunt het framework gebruiken met Adobe Flex of Adobe Flash Professional. Ontwikkelaars kunnen bestaande componenten gebruiken of uitbreiden, maar kunnen het framework ook gebruiken om hun eigen tekstcomponenten te maken.

Tutorial: http://www.glenncoppens.com/files/tutorial.pdf
Sources: http://www.glenncoppens.com/files/code-sources-tutorial.zip

Robotlegs Framework

Fri, 11 May 2012 14:12:25 +0200

Robotlegs is een framework om niet visuele objecten met elkaar te laten communiceren. Dit gebeurt via een MVC+S implementatie (Model, View, Controlelr + Service). Het is een framework dat je gemakkelijk en snel kan toepassen en achteraf streng kan debuggen.

http://www.developria.com/2010/06/an-introduction-to-robotlegs-a.html

http://www.developria.com/2010/06/an-introduction-to-robotlegs-a-1.html

http://www.developria.com/2010/06/an-introduction-to-robotlegs-a-2.html

Deze 3 links zijn tutorials die de basis principes uitleggen van het Rbotlegs Framework. De 1ste link legt je Context en Mediators uit (het hoofdbestand en de bestanden die event opvangen). De 2de link verdiept zich op het Model aspect van Robotlegs en de 3de link op de Service kant (naar de buitenwereld op).