Buttons and backgrounds texture generator

Doing scripting and coding is already a lot of work. But then, if you don't have a designer at the other side of your desk, you also have to do the imagery. So when you need a sketch you do it the easy way and search for free material on the internet. Just found an easy way of making sketches for buttons…..

http://www.grsites.com/

very nice for some fast menu productions in games….

Here an example of a background used for a flash blocking events example: (text added in photoshop)

this is a button i made for another blog:

this button is for a blog I maintain for a course on nds (nintendo ds) programming, interested? Be careful: this is for NERDS!

http://iepro.wordpress.com/2010/01/14/making-images-buttons-and-backgrounds/

FLASH: usefull links to start coding

We start with a bit of coding in the basic scripting window called Actions:

here is a textfile we use:

http://www.contrechoc.com/flash/flash-coding.txt

you can copy and paste it into the action window and look what happens. Try to understand or try to get used to the strange way the code is written.

The first example movies can be found here:http://www.contrechoc.com/flash/flash-basics.zip

(CS3 examples made in Flash CS3 also working in Flash CS4)

the basics:

a framelabel example, good for alternative presentations

a sound loading example

an image loading example

the scripts are small, and can be copied and pasted into other scripts, (be careful though!)

a sound folder and a banana are joining the party.

a great site for FLASH examples (tutorials, also photoshop things) is http://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/

Sounds: FLASH handles only .mp3 ,free sounds can be found at: http://www.freesound.org/

images/cartoons can be found everywhere, google images with the keyword “cartoon” and “rabbit” for instance, also this kind of site can be found easily: http://www.barrysclipart.com/barrysclipart.com/index.php

FLASH games? There are about three trillion to be found, but this is a great site: http://www.flash-game.net/

FLASH: dressup - dressoff

This is an example of a student project, which was made interactive using simple FLASH scripting: (pictures used and published with permission.)

http://www.contrechoc.com/flash/dressupoff/dressupoff.html

(move the mouse over the images and watch the movie go forwards and backwards and change the speed of showing the images)

so: this is a sequence of images which can be played forwards and backwards using the mouse.

the script can be found here: (only the movie for the script,the folder “images” has to be added…)

http://www.contrechoc.com/flash/dressupoff/dressupoff.zip

used:

a timer: (to get the images loaded)

var clickTimer:Timer = new Timer(200);
clickTimer.addEventListener(“timer”, functionToDoWhenTimerFires);
clickTimer.start();

a mouse event, (to change the speed of the timer, property timer delay and to change the timer frequency)

stage.addEventListener( MouseEvent.MOUSE_MOVE, changeTimerDelayAndDirection);

for the rest only loadImages is used….

FLASH: the mouse

I promised you the MouseEvent, here is a drawing movie illustrating the different event playing together.

http://www.contrechoc.com/flash/SimpleDraw.zip

The mouse is a very complex thing! All kinds of events are possible.

Here are several eventlisteners for the mouse:

• addEventListener(MouseEvent.CLICK, clickHandler);
• addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler);
• addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
• addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
• addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
• addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
• addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);

So a mouse is more complex than a key!

for instance the position, which can be found using the event like this:

function startDraw ( event:MouseEvent): void
{
var posX : Number = event.stageX;
var posY : Number = event.stageY;
}

used:

• for loop
• timer
• mouse event (in simpledraw)

FLASH: order and chaos

Order and Chaos this time! Nothing more beautiful for an artist. We work with the Math.random function to get random Numbers. And we work with a double for-loop to get order.

Loading a sequence of images in a for loop.

We learn how to put the timer to good use:
http://www.contrechoc.com/flash/orderANDchaos.zip

We need the timer for taking care of the order of the images which are coming in, being loaded.

FLASH, webcam and microphone activity

Today we will be fooling around with webcam and microphone. The webcam can trigger loading of images and playing of sounds etc, so can the microphone.

Later on we will discover how to load streaming movies. (needed flv format: use Media Encoder of Video Encoder

The examples can be found here:

http://www.contrechoc.com/flash/flash-fun.zip

To get some streaming movies we could try to download movies in flv format from youtube.

If nothing is playing or the mic does not respond, first verify if the computer has a mic or webcam, and then try clicking right in the flash window and look at the settings.

ways to download from youtube can be found here:

http://www.frankwatching.com/archive/2007/05/08/top-25-hoe-download-ik-een-youtube-video/

used:

• webcam activity: eventlistener
• microphone activity: eventlistener

FLASH: about the ripple effect

We will be busy doing the asignment during these weeks, but interesting things will be shown anyway:

http://www.contrechoc.com/flash/water.zip

This is the ripple effect, which can be put on a movieclip.Nice for water effects, but also for imagining dreams!

Remark:

Some of my students (Kevin Klein) in Leiden used this effect but got in troubles using the Full Screen Mode: the framerate was severely reduced: he found the solution:

in settings (right click on the movie) uncheck hardware acceleration : here the picture with the settings window…

Thx Kevin!

FLASH question time

Is it possible to get a webcam behind an image? (The idea is to have a png and to show the webcam behind the (transparent) holes in the image.

Yes, just do an addChild with a movieclip with a picture after adding the camera:

so we have:

var winkelWagenMovieClip1 : MovieClip = new MovieClip(); //some movieclip to put an image in
winkelWagenMovieClip1.x = 0;
addChild(winkelWagenMovieClip1);

then we load the webcam using the FLASH help example:
//bla bla bla like the flash help example….

if (camera != null) {
camera.addEventListener(ActivityEvent.ACTIVITY, activityHandler);
video = new Video(camera.width * 2, camera.height * 2);
video.attachCamera(camera);
addChild(video);
loadImage( winkelWagenMovieClip1, “1.jpg”, 40,0 ) //the method for loading a picture in the MovieClip
addChild(winkelWagenMovieClip1);

} else

////etcetera like the help example

and having this movieclip in front of the webcam image you can change or animate the things in this masking movieClip.



linux baby in front of the webcam

Flash scripting and sound, load, play, loop

Sound is very important in every app. On the other hand it is a layer which has not too much to do with scripting. So we just have to know how to load a sound (since we keep the media external), how to play a sound, and how to loop a sound.

Flash does not like .wav sounds! So .mp3 is needed.

This is a very nice link for scripting examples around using sound in FLASH:
http://www.republicofcode.com/tutorials/flash/as3sound/

it tells you how to load an external sound, using URLRequest,
how to make it stop and pause and play again
(using soundChannel and eventlisteners)

how to change the volume, using soundtransform

The only thing I don’t find on this page is how to loop a sound:
this is done using the parameters in the play() function:

mySound.play(0,int.MAX_VALUE);

which means start at position 0 but repeat it the maximum possible number of times! (Which is quite sufficient, thank you very much, for most of the looped sounds…)

This last trick is found here: http://board.flashkit.com/board/showthread.php?t=769120