AULIA HAMDI STMIK AMIKOM 3182013

Modul Multimedia

Aulia Hamdi, S.Kom

Nama Mata Kuliah

:

Multimedia

Kode Mata Kuliah

:

Bobot Mata Kuliah

:

2 SKS

Semester

:

2 (dua)

Mata Kuliah Prasyarat

:

-

Alokasi Waktu

:

100 menit

Sistem Penilaian

:

Tugas, Presensi, UTS, dan UAS

2013

Page

of

Multimedia 2D

Kemampuan akhir yang diharapkan :

Dapat menggunakan dan memahami ActionScript

A.

ActionScript

1.

ActionScript pada button

2.

ActionScript pada frame

on (release) { gotoAndPlay(1); }

atau

on (release) { gotoAndPlay("nama_frame"); }

fscommand("fullscreen", true);

stop();

Propertie objek Objek

Button ActionScript

Indikator bahwa ActionScript terletak pada Button

Properties objek ActionScript

Indikator bahwa ActionScript terletak pada Layer 1 Frame 1 Huruf “a” latin menunjukan bahwa didalam frame terdapat

Page

of

3.

ActionScript untuk menjalankan sebuah MovieClip yang dituju

4.

ActionScript untuk memberikan perintah dari dalam MovieClip ke Scene (root)

5.

Berikut ini sebuah contoh penggunaan ActionScript untuk membuat sebuah animasi.

import Particle3D;

const pi2:Number = Math.PI*2; var displayWidth:Number; var displayHeight:Number; var sampling:Number; var spread:Number;

var picURLString:String; var projCenterX;

var projCenterY; var theta:Number; var phi:Number; var dphi:Number; var dtheta:Number; var freq:Number; var amp:Number; var clip:Number; var fLen:Number; var recess:Number; var uMax:Number; var fadeZ:Number; var unityZ:Number; var fadeRate:Number; var minFade:Number; var minLum:Number; var tinc:Number; var lastTime:Number; var thisTime:Number; var dColor:uint; var f:Number; var cos:Number; var sin:Number; var angle:Number; var zFactor:Number; var intV:int;

var intW:int; var cost:Number; var sint:Number ; var cosp:Number; var sinp:Number; var p:Particle3D;

tellTarget ("tokoh")

{

gotoAndStop(1);

}

Page

of

var m:Number;

var zBuffer:Vector.<Number>; var particles:Array;

var numParticles:Number; var bgColor:uint;

var blur:BlurFilter; var origin:Point;

var darken:ColorTransform; var picHolder:Sprite;

var stageBitmapData:BitmapData; var stageBitmap:Bitmap;

var pic:Bitmap;

var picLoader:Loader; var picURL:URLRequest; var eraseColor:uint;

var firstParticle:Particle3D; var M11:Number;

var M12:Number; var M31:Number; var M32:Number; init();

function init():void { displayWidth = 550; displayHeight = 400; sampling = 1;

spread = 1;

picURLString="bird.jpg"; minLum = 8;

projCenterX = displayWidth/2; projCenterY = displayHeight/2; theta = 3*Math.PI/2;

phi = -Math.PI/4; dphi = Math.PI/260; dtheta = Math.PI/157; freq = 0.9/1000;

//script untuk memudarkan garis-garis fadeZ = -400;

unityZ = 0;

fadeRate = 1/(unityZ-fadeZ); minFade = 0.1;

zBuffer = new Vector.<Number>; //membuat zBuffer kosong:

for (var i:int = 0; i <= displayWidth*displayHeight-1; i++) { zBuffer.push(Number.NEGATIVE_INFINITY);

}

particles = new Array(); numParticles = 0;

Page

of

eraseColor = 0x8888aa; blur = new BlurFilter(4,4);

blur.quality = BitmapFilterQuality.MEDIUM; origin = new Point();

var darkenFactor:Number = 0.89;

darken = new

ColorTransform(darkenFactor,darkenFactor,darkenFactor); picHolder = new Sprite();

stageBitmapData = new

BitmapData(displayWidth,displayHeight,true,0x00FFFFFF);

stageBitmapData = new BitmapData(displayWidth, displayHeight, false, bgColor);

stageBitmap = new Bitmap(stageBitmapData); picHolder.addChild(stageBitmap);

stage.addChildAt(picHolder,0); picLoader = new Loader();

picURL = new URLRequest(picURLString); picLoader.load(picURL);

picLoader.contentLoaderInfo.addEventListener(Event.INIT, onPicLoaded);

}

function onPicLoaded(evt:Event):void { pic = Bitmap(picLoader.content); createParticles(pic);

txtNumParticles.text = String(numParticles) + " particles"; stage.addEventListener(Event.ENTER_FRAME, onEnter);

lastTime = getTimer(); }

function onEnter(evt:Event):void {

zFactor = amp*((1-clip)+(1+clip)*Math.cos(getTimer()*freq)); if (zFactor < 0) {

zFactor = 0; }

phi = (phi + dphi) % pi2;

theta = (theta + dtheta) % pi2; cost = Math.cos(theta);

sint = Math.sin(theta); cosp = Math.cos(phi); sinp = Math.sin(phi);

//untuk mengkalkulasi beberapa dari masukan rotasi acuan untuk menambahkan efek

M11 = cost*sinp; M12 = sint*sinp; M31 = -cost*cosp; M32 = -sint*cosp; p = firstParticle; do {

//update fixed coordinates

p.z = zFactor*(p.lum*p.lum)-recess; //update viewpoint relative coordinates p.u = M11*p.x + M12*p.y + cosp*p.z; p.v = -sint*p.x + cost*p.y;

Page

of

if (p.onScreen) { //reset buffer

zBuffer[int(p.projX) + displayWidth*int(p.projY)] = Number.NEGATIVE_INFINITY;

}

p = p.next; } while (p != null)

// script untuk menggambar ulang data bitmap stageBitmapData.lock();

stageBitmapData.colorTransform(stageBitmapData.rect,darken); stageBitmapData.applyFilter(stageBitmapData,

stageBitmapData.rect, origin, blur); p = firstParticle;

do {

m = fLen/(fLen - p.u);

p.projX = p.v*m + projCenterX; p.projY = p.w*m + projCenterY;

if ((p.projX >

displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(p. u>uMax)) {

p.onScreen = false; }

else {

p.onScreen = true; }

intV = int(p.projX); intW = int(p.projY); if (p.onScreen) {

if (!(p.u < zBuffer[intV + displayWidth*intW])) {

//position-based darkening f = fadeRate*(p.u - fadeZ); if (f<minFade) {

f = minFade; (f*p.blue);

stageBitmapData.setPixel(p.projX, p.projY,

dColor);

zBuffer[intV + displayWidth*intW] = p.u; }

}

p = p.next; } while (p != null)

stageBitmapData.unlock(); }

function createParticles(whichPic):void { var c:uint;

Page

of

var m:Number;

var lastParticle:Particle3D;

//separasi pixels gambar ke dalam layers

for (var i:Number=0; i<=whichPic.width-1; i = i + sampling) { for (var j:Number=0; j<=whichPic.height-1; j = j + sampling) {

//script untuk membaca pixel (i,j) c = whichPic.bitmapData.getPixel(i,j);

var thisParticle:Particle3D = new Particle3D(c); thisParticle.picX = spread*(i - whichPic.width/2); thisParticle.picY = spread*(j - whichPic.height/2);

thisParticle.x = thisParticle.picX; thisParticle.y = thisParticle.picY;

//atur projected coordinates disini. m = fLen/(fLen - thisParticle.z);

thisParticle.projX = i*m + projCenterX; thisParticle.projY = j*m + projCenterY;

if ((thisParticle.projX >

displayWidth)||(thisParticle.projX<0)||(thisParticle.projY<0)||(thisP article.projY>displayHeight)) {

thisParticle.onScreen = false; }

else {

thisParticle.onScreen = true; }

if (thisParticle.lum > minLum) { numParticles++;

//For linked list:

if (numParticles == 1) {

firstParticle = thisParticle; }

else {

lastParticle.next = thisParticle; }

lastParticle = thisParticle; }

} }

Page

of

B.

Penerapan

1.

Buatlah sebuah dokumen baru ActionScrip 3.0

2.

Klik frame 1, tekan F9 pada keyboard, ketikkan ActionScript berikut.

import Particle3D;

const pi2:Number = Math.PI*2; var displayWidth:Number; var displayHeight:Number; var sampling:Number; var spread:Number;

var picURLString:String; var projCenterX;

Page

of

var clip:Number; var fLen:Number; var recess:Number; var uMax:Number; var fadeZ:Number; var unityZ:Number; var fadeRate:Number; var minFade:Number; var minLum:Number; var tinc:Number; var lastTime:Number; var thisTime:Number; var dColor:uint; var f:Number; var cos:Number; var sin:Number; var angle:Number; var zFactor:Number; var intV:int;

var intW:int; var cost:Number; var sint:Number ; var cosp:Number; var sinp:Number; var p:Particle3D; var m:Number;

var zBuffer:Vector.<Number>; var particles:Array;

var numParticles:Number; var bgColor:uint;

var blur:BlurFilter; var origin:Point;

var darken:ColorTransform; var picHolder:Sprite;

var stageBitmapData:BitmapData; var stageBitmap:Bitmap;

var pic:Bitmap;

var picLoader:Loader; var picURL:URLRequest; var eraseColor:uint;

var firstParticle:Particle3D; var M11:Number;

var M12:Number; var M31:Number; var M32:Number; init();

function init():void { displayWidth = 550; displayHeight = 400; sampling = 1;

spread = 1;

Page

of

minLum = 8;

projCenterX = displayWidth/2; projCenterY = displayHeight/2; theta = 3*Math.PI/2;

phi = -Math.PI/4; dphi = Math.PI/260; dtheta = Math.PI/157; freq = 0.9/1000;

//script untuk memudarkan garis-garis fadeZ = -400;

unityZ = 0;

fadeRate = 1/(unityZ-fadeZ); minFade = 0.1;

zBuffer = new Vector.<Number>; //membuat zBuffer kosong:

for (var i:int = 0; i <= displayWidth*displayHeight-1; i++) { zBuffer.push(Number.NEGATIVE_INFINITY);

}

particles = new Array(); numParticles = 0;

bgColor = 0x000000; eraseColor = 0x8888aa; blur = new BlurFilter(4,4);

blur.quality = BitmapFilterQuality.MEDIUM; origin = new Point();

var darkenFactor:Number = 0.89; darken = new

ColorTransform(darkenFactor,darkenFactor,darkenFactor); picHolder = new Sprite();

stageBitmapData = new

BitmapData(displayWidth,displayHeight,true,0x00FFFFFF);

stageBitmapData = new BitmapData(displayWidth, displayHeight, false, bgColor);

stageBitmap = new Bitmap(stageBitmapData); picHolder.addChild(stageBitmap);

stage.addChildAt(picHolder,0); picLoader = new Loader();

picURL = new URLRequest(picURLString); picLoader.load(picURL);

picLoader.contentLoaderInfo.addEventListener(Event.INIT, onPicLoaded);

}

function onPicLoaded(evt:Event):void { pic = Bitmap(picLoader.content); createParticles(pic);

txtNumParticles.text = String(numParticles) + " particles"; stage.addEventListener(Event.ENTER_FRAME, onEnter);

Page

of

}

function onEnter(evt:Event):void {

zFactor = amp*((1-clip)+(1+clip)*Math.cos(getTimer()*freq)); if (zFactor < 0) {

zFactor = 0; }

phi = (phi + dphi) % pi2;

theta = (theta + dtheta) % pi2; cost = Math.cos(theta);

sint = Math.sin(theta); cosp = Math.cos(phi); sinp = Math.sin(phi);

//untuk mengkalkulasi beberapa dari masukan rotasi acuan untuk menambahkan efek

M11 = cost*sinp; M12 = sint*sinp; M31 = -cost*cosp; M32 = -sint*cosp; p = firstParticle; do {

//update fixed coordinates

p.z = zFactor*(p.lum*p.lum)-recess; //update viewpoint relative coordinates p.u = M11*p.x + M12*p.y + cosp*p.z; p.v = -sint*p.x + cost*p.y;

p.w = M31*p.x + M32*p.y + sinp*p.z;

if (p.onScreen) { //reset buffer

zBuffer[int(p.projX) + displayWidth*int(p.projY)] = Number.NEGATIVE_INFINITY;

}

p = p.next; } while (p != null)

// script untuk menggambar ulang data bitmap stageBitmapData.lock();

stageBitmapData.colorTransform(stageBitmapData.rect,darken); stageBitmapData.applyFilter(stageBitmapData,

stageBitmapData.rect, origin, blur); p = firstParticle;

do {

m = fLen/(fLen - p.u);

p.projX = p.v*m + projCenterX; p.projY = p.w*m + projCenterY; if ((p.projX >

displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(p. u>uMax)) {

p.onScreen = false; }

else {

p.onScreen = true; }

Page

of

intW = int(p.projY); if (p.onScreen) {

if (!(p.u < zBuffer[intV + displayWidth*intW])) {

//position-based darkening f = fadeRate*(p.u - fadeZ); if (f<minFade) {

f = minFade; (f*p.blue);

stageBitmapData.setPixel(p.projX, p.projY, dColor);

zBuffer[intV + displayWidth*intW] = p.u; }

}

p = p.next; } while (p != null)

stageBitmapData.unlock(); }

function createParticles(whichPic):void { var c:uint;

var thisLum:Number; var m:Number;

var lastParticle:Particle3D;

//separasi pixels gambar ke dalam layers

for (var i:Number=0; i<=whichPic.width-1; i = i + sampling) { for (var j:Number=0; j<=whichPic.height-1; j = j + sampling) {

//script untuk membaca pixel (i,j) c = whichPic.bitmapData.getPixel(i,j);

var thisParticle:Particle3D = new Particle3D(c); thisParticle.picX = spread*(i - whichPic.width/2); thisParticle.picY = spread*(j - whichPic.height/2);

thisParticle.x = thisParticle.picX; thisParticle.y = thisParticle.picY;

//atur projected coordinates disini. m = fLen/(fLen - thisParticle.z);

thisParticle.projX = i*m + projCenterX; thisParticle.projY = j*m + projCenterY;

if ((thisParticle.projX >

displayWidth)||(thisParticle.projX<0)||(thisParticle.projY<0)||(thisP article.projY>displayHeight)) {

Page

of

} else {

thisParticle.onScreen = true; }

if (thisParticle.lum > minLum) { numParticles++;

//For linked list:

if (numParticles == 1) {

firstParticle = thisParticle; }

else {

lastParticle.next = thisParticle; }

lastParticle = thisParticle; }

} }

}

3.

Simpan satu folder dengan gambar yang digunakan.

Page

of

5.

Ketikkan ActionScipt berikut

package {

import flash.display.Sprite; import flash.display.Bitmap; import flash.display.BitmapData;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.geom.Rectangle;

import flash.geom.Point;

import flash.geom.ColorTransform;

import fl.transitions.Tween;

import fl.transitions.TweenEvent;

import fl.transitions.easing.*;

public class ImageAccordion extends Sprite {

private var numSlices:int; private var imgData:BitmapData; private var sliceWidth:Number; private var sliceHeight:Number; private var picWidth:Number; private var picHeight:Number; private var sliceBmps:Array; private var container:Sprite; private var isMoving:Boolean; private var maxAng:Number; private var paramTween:Tween;

public var tweenDownDuration:Number; public var tweenUpDuration:Number; private var paramObj:Object;

private var isClosed:Boolean; private var isOpen:Boolean;

private var lightEdgeFactor:Number; private var darkEdgeFactor:Number;

public function ImageAccordion(bd:BitmapData,df:Number=0.5, lf:Number=0, sl:int=10) {

Page

of

}

private function createSlices():void {

var k:int;

var slices:Array=[]; sliceBmps=[];

for(k=0;k<numSlices;k++){ slices[k]=new

BitmapData(sliceWidth,sliceHeight);

slices[k].copyPixels(imgData,new

Rectangle(0,k*sliceHeight,sliceWidth,sliceHeight),new Point(0,0));

sliceBmps[k]=new Bitmap(slices[k]);

container.addChild(sliceBmps[k]);

sliceBmps[k].x=0;

sliceBmps[k].y=sliceHeight*k;

sliceBmps[k].z=0;

}

}

private function foldAccordion(deg:Number):void {

var k:int;

var evenFactor:Number; var oddFactor:Number;

evenFactor=(-darkEdgeFactor/maxAng)*deg+1; oddFactor=(lightEdgeFactor/maxAng)*deg+1;

var rad:Number=deg*Math.PI/180; for(k=0;k<numSlices;k++){

sliceBmps[k].rotationX=deg*Math.pow(-1,k);

if(k%2==1){

sliceBmps[k].z=sliceHeight*Math.sin(rad); sliceBmps[k].y=sliceHeight*Math.cos(rad)*k; sliceBmps[k].transform.colorTransform=new ColorTransform(oddFactor,oddFactor,oddFactor,1,0,0,0,0);

} else {

sliceBmps[k].z=0;

sliceBmps[k].y=sliceHeight*Math.cos(rad)*k; sliceBmps[k].transform.colorTransform=new ColorTransform(evenFactor,evenFactor,evenFactor,1,0,0,0,0);

} } }

private function setUpListeners():void {

container.addEventListener(MouseEvent.CLICK, onClick);

}

function onClick(e:MouseEvent):void { if(isMoving){

Page

of

}

if (isClosed) { isMoving=true;

paramTween = new Tween(paramObj, "t", Bounce.easeOut, maxAng, 0, tweenDownDuration);

paramTween.addEventListener(TweenEvent.MOTION_CHANGE, goDown);

paramTween.addEventListener(TweenEvent.MOTION_FINISH, goDownComplete);

}

if(isOpen){

isMoving=true;

paramTween = new Tween(paramObj, "t", Bounce.easeOut, 0, maxAng, tweenUpDuration);

paramTween.addEventListener(TweenEvent.MOTION_CHANGE, goUp);

paramTween.addEventListener(TweenEvent.MOTION_FINISH, goUpComplete);

} }

private function goDown(tevt:TweenEvent):void {

foldAccordion(paramObj.t); }

private function goDownComplete(tevt:TweenEvent):void {

isMoving=false; isClosed=false; isOpen=true;

paramTween.removeEventListener(TweenEvent.MOTION_CHANGE, goDown);

paramTween.removeEventListener(TweenEvent.MOTION_FINISH, goDownComplete);

}

private function goUp(tevt:TweenEvent):void {

foldAccordion(paramObj.t); }

private function goUpComplete(tevt:TweenEvent):void {

isMoving=false; isClosed=true; isOpen=false;

paramTween.removeEventListener(TweenEvent.MOTION_CHANGE, goUp);

Page

of

} }

}

6.

Simpan dengan nama "ImageAccordion”

7.

Pilih menu File New ActionScipt File

8.

Ketikkan ActionScript berikut

package {

import flash.display.*;

public class Particle3D extends Point3D {

//links, untuk membuat linked lists public var next:Particle3D;

public var prev:Particle3D;

public var onScreen:Boolean;

//kecepatan and akselerasi objek vector public var vel:Point3D = new Point3D(); public var accel:Point3D = new Point3D();

Page

of

public var lastY:Number; public var lastZ:Number;

//projected coordinates public var projX:Number; public var projY:Number;

//coords WRT viewpoint axes public var u:Number;

public var v:Number; public var w:Number;

//lokasi pada kode picture public var picX:Number; public var picY:Number;

//destination array public var dest:Array;

//attribute-attribute public var color:uint; public var red:Number; public var green:Number; public var blue:Number; public var lum:Number; public var alpha:Number;

public var initColor:uint; public var initRed:Number; public var initGreen:Number; public var initBlue:Number; public var initLum:Number;

public var destColor:uint; public var destRed:Number; public var destGreen:Number; public var destBlue:Number; public var destLum:Number;

public var colorChanging:Boolean;

function Particle3D(thisColor=0xFFFFFFFF):void { this.dest = [];

this.color = thisColor;

this.red = getRed(thisColor); this.green = getGreen(thisColor); this.blue = getBlue(thisColor); this.alpha = getAlpha(thisColor);

this.lum = 0.2126*this.red + 0.7152*this.green + 0.0722*this.blue;

this.colorChanging = false; this.onScreen = true;

}

public function setColor(thisColor):void { this.color = thisColor;

Page

of

this.lum = 0.2126*this.red + 0.7152*this.green + 0.0722*this.blue;

}

public function getAlpha(c):Number { return Number((c >> 24) & 0xFF); }

public function getRed(c):Number { return Number((c >> 16) & 0xFF); }

public function getGreen(c):Number { return Number((c >> 8) & 0xFF); }

public function getBlue(c):Number { return Number(c & 0xFF); }

} }

9.

Simpan dengan nama “Particle3D”

Page

of

11.

Ketikkan ActionScript berikut

package {

public class Point3D { public var x:Number; public var y:Number; public var z:Number;

private var outputPoint:Point3D;

public function Point3D(x1=0,y1=0,z1=0):void { this.x = x1;

this.y = y1; this.z = z1; }

public function clone():Point3D { outputPoint = new Point3D(); outputPoint.x = this.x; outputPoint.y = this.y; outputPoint.z = this.z; return outputPoint; }

} }

12.

Simpan dengan nama “Point3D”

Page

of