Tweening Dynamic Text

this is another ActionScript 3.0 or Flash CS 3 tips.

What really stopped me from creating contents today was the dynamic text.. it is an amazing thing but this thing drove me crazy.

i basically had one button that is associated with a class and on rollover, rollout, click, etc tween starts so that it will animate according to an MouseEvent.

Problem I had was i was trying to tween alpha and it didn't kick in. trace shows that it's changing alpha.. i checked my tween also by trying the same tween with other properties like x and it totally works...

i had another regular button that doesn't associate with this button class and that one also was working fine.

only the one i have created through class... didn't do alpha tweens.. (just that didn't show result on screen...)

I really tried bunch of things like loading them into another MovieClip and applying tween to that MovieClip etc...

Then i went to check the differences between the buttons that does alpha tweens and don't.. i noticed one slight difference..
The one that worked had static text for labels and the one that didn't work had dynamic text.

so i went to research "dynamic text alpha" well Bingo.

in order to apply alpha tween to an dynamic text you need to Embed and font.

well first didn't make sense at all but i looked into property inspector for the text and on the right hand side i saw "Embed.." button. and ah huh! i clicked on the button and set it up.

Command + Enter to test movie and it works!!! now i can tween dynamic texts.

if you choose both all upper case and all lower case letters, you should be able to change label dynamically. and now i have a button that plays fancy animation. not like and HTML/CSS simple roll over but a button that does something and that's totally customizable. great.

took me too long to figure out this simple things but i'm sure you won't need to.

SoundChannel issue? mp3 issue? Event.SOUND_COMPLETE

I was making audio player that plays a random song after the song finishes.. and found out some weird issue.

well it drove me nuts because even though i had soundchannel object listen for Event.SOUND_COMPLETE, it didn't trigger the SOUND_COMPLETE when song finshed playing..

after bunch of errors and browsing through web, found out that... if you use mp3 it doesn't trigger...

or mp3 doesn't have end info? or i guess some sort of weird thing is going on with the format so flash cannot trigger SOUND_COMPLETE...

The moment I read this i tried the same function without any kind of re-write but replacing it with .aif file.

BINGO! it totally works! played random song.. ...I spent almost a day on this....
and now i guess i have to write extra code for checking the position and triggering that event manually.

Controlling Sound in ActionScript 3.0

I was trying to make an audio player for a web site in flash cs 3 or actionscript 3.0 today and it was more than confusing..

i was reading the references and took me a while before i realized that you had to have bunch of other objects to perform tasks like stopping,..

yes.. stopping sound seems easy but not really in actionscript 3.0..but once you get it you won't forget it.

to make an audio or mp3 player in as3 you need three objects.

Sound() - for loading sounds
SoundChannel() - to control playback, stopping
SoundTransform() - to control volume and panning(Left, right stereo stuff)

SoundChannel has .soundTransfor where you can assign SoundTransform() object


var sound:Sound = new Sound();
var sControl:SoundChannel = new SoundChannel();
var vControl:SoundTransform = new SoundTransform();


so now you have 3 objects. let take a look at how they interrelate


sound.load(new URLRequest("yourSong.mp3"); // get the sound clip
sound.addEventListener(Event.COMPLETE, soundLoaded); // triggers a function soundLoaded on load complete
btnStop.addEventListener(MouseEvent.CLICK, stopSound); // create button with inst name of btnStop on stage for it to work
btnVolumeUp.addEventListener(MouseEvent.CLICK, changeVolume);

function soundLoaded(e:Event):void
{
sControl = sound.play(); // this is the hard part...
}

function stopSound(e:MouseEvent):void
{
sControl.stop(); // sound.stop() won't work for some reason.. or for a good reason..
}

function changeVolume(e:MouseEvent):void
{
vControl.volume += .1; // since volume property's range is 0 to 1
sControl.soundTransform = vControl; // assign that info to control
}


well this should blow up your speaker since it only goes up. try it at your own risk and i didn't tell you to do it. so you can't sue me. you should spend your time in other things like try implementing decreasing volume or much more flexible way of controling volume, etc.

Super Collider AU

I was using Logic to create some meaningful tutorial and i just noticed one extra item in the plug-in menu saying "SuperColliderAU"

This looks familiar but never knew that SuperCollider could actually create an AU plug-in... it totally works on logic. Controls are regular GarageBand like simple sliders and no unique GUI but now you know.. SuperCollider can actually be a great thing to learn if you want to create something different.

Processing: Shape Primitives

I've written about lines and how to animate but there are a lot more you can do just by learning their built-in functions. Beside lines and points, Processing is also equipped with functions to draw various shapes.

In order to draw a shape you will need to define a parameter called "fill." If you are graphics person you already know but this describes the color that fills the shape. In other words kind of like Interior color. Borders will be colored with stroke() color like lines or points. so yes you can have two separate colors.

but is that necessary? if you don't need stroke color you just do
noStroke();
This will eliminate stroke from the shapes you draw that point on.

so now how do you draw shapes? easy.. functions you use are "triangle", "rect", "quad", "ellipse" and you know what they do..


size(400, 400);
smooth();
background(0);

noStroke();
fill(120);

type this in for set up and followed by:


triangle(30, 100, 100, 100, 50, 50); // x1, y1, x2, y2, x3, y3

Play with this for a while and get grasp of how it works.
Then you can move on to which ever ones you like but try one by one since they all are a little different from each other.

For triangles, you will notice that for some combination, Processing won't draw a triangle. This is because Processing interprets vertices in a clockwise order. so basically if x3 is larger than x2, y3 needs to be smaller than y2, etc there are many condition that coodinates you put in don't become a triangle shape. (well just figure it out yourself as it is alot faster that way than reading and trying to visualize.)


rect(10, 10, 60, 70); // x, y, width, height


ellipse will draw ellipse but it will draw a circle when the width and height values are the same

ellipse( 100, 80, 30, 30); // center x, center y, width height


This is one of the less obvious ones but this will draw a quadrilateral or a shape that has four vertices. Corners won't be right angle.

quad(10, 10, 30, 10, 70, 100, 10, 100);


quad() also draws vertices in clockwise order but this one is much more playable. This is true especially when you have fill property set (like i've done above) you can draw shapes that has four sides but not quads and still look good. try it for yourself.

Processing for begineers 3: Functions

And!!! you can declare your own functions.

this feature really help clean up the code and also make mass duplication of one thing possible without re-writing bunch of codes that contains same info.


void myFunction(int x, int y, int a, int b)
{
// put code inside using those arguments(int x and stuff)
}



The syntax or grammar of proccessing is really like that of java code i think. well C probably is the closest though. so if you know console stupid C then you can use this to generate something that's alot more meaningful without much knowledge on include libraries, etc.

There is one book that comes into my mind to help you with this. Which is flash math creativity. I guess you could buy processing book also but this flash book is rather a collection of codes that are created by flash people. All codes represents some kind of math/physics/animation model using squares, circles, lines, some of them are like flags, elastic stuff, wave stuff, and so on. Purely that. I think reproducing all those in Processing will be like a fun challenge for a beginner Processing enthusiasts.

Processing for beginners 2

I knew that processing could do animation but wasn't sure how until now...It was extremely easy... well at least for simple computer graphics demo animation.

The code looks alot like an applet.
First thing you need to know is how to you use reserved functions(whatever the correct term for this is) and what kind of reserved functions are available...

setup() will initialize values
draw() will draw things each frame

so yes you need to determine how fast it draws each frame/time it stops before drawing next frame - easier if i just say determine a frame rate and you do this inside setup() function.


void setup() // don't forget void here
{
size(400, 400); // canvas size 400 by 400
background(0); // black back ground
framerate(30); // frame rate 30fps
}




Yeah, really, that's all it takes. piece of cake. and then you decide what you want to draw inside draw() function.

So basically setup() and draw() are like functions made ready by whoever making this to help you do graphics only. It's really amazing because on java you'd have to write a class, system.out, blah blah and other stuff that you don't really need to know if you just want to do graphics or create something with code or just want to jump into it..Of course Java can do all this can do and a lot more and maybe more efficient but do you really need that much feature if you are not programming some hardcore web apps?

anyways, besides setup() and draw() there are mousePressed() and other functions that adds interactivity to it also. If you learn enough of these you can do alot more with it.

Processing for beginners

I don't know if there is a tutorial on the subject but processing is also a language that's fun to play with. I think flash is interesting too for this matter but you do have to buy it. so you go to processing. I'm still new to this so i don't really know how interactive this is. or if you can collaborate somehow with programs like Max/MSP/Jitter, Reaktor(prob not..), other VJ and sound software.

anyways, I just wanted to state how easy it is to get started.
you download, install, launch program, start coding. that's it...

Download Processing

so what do you type in?
please take a look at the code below.

(you can omit comments or what's after // and do not type stuff like drawing at the beginning of the line as it won't run. All lines start with words like size, background, stroke, point, line, rectangle and you type until ; semi colon which is like a period in English.)

size(200, 200); // this is the size of your screen or canvas
background(0); // background color 0 is black, 255 is white in between will be grays.

stroke(255); // get a white stroke - required step before drawing
point(20, 20); // put point at coordinate (x=20, y=20)
point(width/2, height/2); // put point at center of the canvas

stroke(100); // make it darker now.
line(0, 20, width, 40); // draw a line (x1, y1, x2, y2) draws from xy 1 to xy 2
rectangle(100, 200, 20, 44); // draw a rectangle (x, y, width, height)


and just Command(apple) + R to run it(or ctrl+r on win i guess..)
too simple and boring but this should get you started also. it did for me.
you should be able to animate fairly easy. and i think if you know java you can do some more interesting things because this is Java based language.

anyways, have fun. and any comments or links to your arts or whatever would be great. thanks for reading.

Super Collider Day 1

I just found this funky programming language for sound designing or synthesis or whatever it's for...

SuperCollider Official

SuperCollider Japan

great thing is that this is completely free and open source. you basically type in codes into their text editors and you hear the sound or you do whatever the things you wanna do with it if your codes successfully compile.

Tons of tutorials are available so i guess you could be looking at them but i would like to point out one thing.

you do Command or Apple + .(period) to stop the sound. It freaked me out for a while enough to force quit the server(not like internet server.. its just way the app calls your computer) since i didn't know nothing.

I started with very first tutorial and after a while i managed to generate Stereo sound.

it's got stuff like:
functions - declared like f = {}; very math like...f is a function name and i could only do one letter.. i need to figure out why and how to name meaning ful names.

variables - declared by the keyword 'var'

argument - use 'arg' and type in letters. this is like function nameYourFunction(var a, var b) {}


looking at the manual there is a class to and reserved word SinOsc seems like it's a class. so this may actually be Object Oriented!! wow... although it seems only procedural right now..


and other interesting things...

here are code that i used to generate stereo sound from Super Collider for the first time.. (after that lame detuned sine wave..)


(
{
var ampOsc;
var pitchOsc;
ampOsc = SinOsc.kr(5, 2pi, 2, 2);
pitchOsc = SinOsc.ar(800, 2pi, 440, 200);
[SinOsc.ar(440, 0, 0.2), SinOsc.ar(pitchOsc, 0, ampOsc)]
}.play;
)


it generates:
440, 0.2 amplitude on the LEFT channel and
a Sine wave with pitch and amp oscillating (LFO) on the RIGHT channel

yes. super dissonant. and it changes pitch. very freaky. try at your on risk. it will be painful especially if you have a perfect picth.

Wiki page

I just started looking deep into reaktor to see how deep you can go with this program. Seems endless and its daunting almost but there are clues. you can go into core cells directly or just try to grasp a big picture. Learning how instruments, effects work, thinking of what you can achieve. They are all part of the journey.

Here i've found another resouce building up and it's WIKI...

WIKIPEDIA Reaktor page

finally something other than manuals. I would love to contribute to it once I get my chops ready. right now what i have are C/C++/ActionScript programming skills and ways to look into reaktor. i think that's enough to start with.

if you go in you can actually see what each corecells do. i think i can start building compressors, weird delays, i thought were impossible to have otherwise. controlling characteristics, making noises unheard of... with help of knowledge in sound design i think you can do something that's really out there.

i hope to look into max/msp/jitter in near future also. i think finally the artistic collaboration between sound and vision is possible.

also.. check out Raster Noton i went to their Japan Tour event and yes they did this collaboration really well. Maybe too math matical but i think this is sort of a thing i want to do. i would incorporate more of a real image though..