CLOSE

Categories

Archives

30APR10

Gradient Slider V1

10 years ago

Today I decided to redo my gradient slider as a reusable class. But first I had to learn better OOP so after watching a quick tutorial over at GotoAndLearn I started moving all the code into separate class files. The main thing I wanted to do was to have the slider dispatch a custom event, and be able to instantiate the slider from ActionScript. Now I have completed the main re-organising and you can down load the class files below. You can see it in action above as well. I have included most of the documentation on how to use it in the ‘gradientSlider.as’ file. But I will also put it here.

EVENTS:

Only 1 event… dispatched whenever anything is changed (colour, position, add or remove colour)

1
gradientSliderEvent.GRADIENT_CHANGE

Returns(?) arrays for gradient Colours, Alphas and Ratios:

colours:Array
positions:Array
alphas:Array

Which can be used for custom stuff (See my ParticlePlayground AIR app)

Or use the following Method…

METHODS:

1
setGradient(mcToApplyTo:MovieClip);

USAGE:

-first copy the customColourPicker folder from the supplied gradientSlider FLA and add to your library. The following code provides an example of how to add sliders and use them:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import com.nemenvisual.ui.gradientSlider.gradientSlider;
import com.nemenvisual.ui.gradientSlider.gradientSliderEvent;
   
var slider:gradientSlider = new gradientSlider(141,17);
   
slider.x = 40;
slider.y = 130;
   
addChild(slider);
   
slider.addEventListener(gradientSliderEvent.GRADIENT_CHANGE, onChange);
   
slider.setGradient(sample);  //sample is a MovieClip on the stage called 'sample'
   
function onChange(e:gradientSliderEvent):void
{
    slider.setGradient(sample);
}

The gradientSlider is by no means perfect but I do plan to update and improve it soon. Feel free to use it where ever.

[DOWNLOAD]

Get Adobe Flash player
29APR10

Particular 2 tests.

10 years ago

Below are a couple test video I made using Particular 2. I was experimenting with the settings to see what kind of smoke effects I could achieve.

27APR10

Photo Painter App

10 years ago

Here is my latest experiment in Flash… this time its an app that takes a source image (jpg) and paints it giving it a very painterly look. You can tweak some of the settings such as brush size and blur. The image above was created using this. You can download the Air installer or source files below to have a play around with it. More examples below also!

[DOWNLOAD AIR] [SOURCE]

more examples:

21APR10

ParticlePlayground Air App

10 years ago

Over the last week or two I have been playing around with particle systems and creating my own to learn all the maths equations behind them. Why? I was playing with Trapcode Particular and started wondering what all the maths behind it was. So I started creating my own particle system in Flash from the ground up – writing my own equations to move the particles. While they may not be the most efficient… they work pretty well and you can get some pretty cool results. The FLVs will save to the desktop as myParticles1.flv, myParticles2.flv etc.

Then I thought… man it would be cool if you could export the particle designs as videos, so I had a look around and found a FLV Recording class at http://code.google.com/p/flvrecorder/. For this this to work I had to be using Air, so I quickly moved it from Flash Player across to Air and incorporated the FLV recording. It might seem like it slows down and take while to save… but hell you can be waiting hours for AfterEffects to render.

This particle app was the reason I created the gradient slider (shown in the previous blog post). I wanted to be able to adjust the colour and alpha over time like in Trapcode Particular.  After creating the Gradient slider, my next issue was actually getting the particles to fade in the correct order and time. This was solved by using Greensocks TimelineLite and TweenLite.

Issues etc:

  • The real-time render button currently does nothing except turn the quailty switch on or off, which also doesn’t work since Air currently only supports high quality (flash player supports low and medium quality as well)
  • Currently FLVs won’t save with transparency (i think)
  • the particles/sec slider is dodgey
  • currently you can only export 1 swf per session ( i had problems with the FLVs playing back after saving more than one)
  • no help screen

I could probly say more stuff but I shall end the post here. Click below to download the Air app and all the source files.

[DOWNLOAD]

examples:

17APR10

AS3 Gradient Slider

10 years ago

Recently I starting working on a little project in Flash ( I will post on this later when I am ready to show it) which required some kind gradient slider like what you would see in the Flash IDE and Illustrator etc, where you can move colours around and add or remove them form the gradient. After a short search I couldn’t find any decent Flash examples, Avairy had a pretty good one although not quite what is was after and I would not be able to find out how it was done. So instead I learnt how to use the ‘beginGradientFill’ method of the drawing API and implemented my own version. I think I’ve come up with a pretty good solution, though not the easiest to incorporate into another project – but it can be done! You can download the source and have a go below.

Get Adobe Flash player

Source: [DOWNLOAD]

Ben

09APR10

Playing with Scriptographer

10 years ago

While at work today I didn’t have anything to do so I decided to learn how to use the Illustrator plug-in called Scriptographer. Scriptographer is a pulg-in which enables you to write custom brushes, filters or generative stuff using Javascript. The above image shows my first attempt at creating a generative brush. Basically it draws a thick branch when you drag the mouse with smaller branches randomly branching out. Some of the smaller branches have lollipop looking things on the end and some don’t. I’ve included the code below. You can edit the scale of the effect and the colours of the circles and branches. Feel free to use it anywhere or modify it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
///////////////////////////////////////////////////////////////
/////////////////////////EDIT THESE////////////////////////////
///////////////////////////////////////////////////////////////

var circleColours = ['#CD00FF','#7400EF','#0666FF'];  //colour of the repeating circles
var rootLineColour = '#FF0000';  //colour of the main line
var branchColour = '#CCCCCC';
var effectScale = 30;  //size of the pattern

///////////////////////////////////////////////////////////////
/////////////////////DON'T EDIT BELOW//////////////////////////
///////////////////////////////////////////////////////////////

var rootPath;

function onMouseDown(event) {
    rootPath = new Path();
    rootPath.strokeWidth = (effectScale/11);
    rootPath.stokeColor = rootLineColour;
    rootPath.add(event.point);
}

function onMouseDrag(event) {

    rootPath.add(event.point);

    var rootToCircle = new Path();
    var circlePosition = (event.point+Point.random() * (effectScale*4))-(effectScale*2);
    var circleSize = Math.random() * (effectScale/3*2);

    rootToCircle.stokeColor = branchColour;

    rootToCircle.add(circlePosition);
    rootToCircle.add(event.point);

    var openBranch = new Path();
    openBranch.stokeColor = branchColour;
    var openBranchEnd = (event.point+Point.random() * (effectScale*4))-(effectScale*2);
    var openBranchStart = (event.point+Point.random() * (effectScale/3))-(effectScale/7);

    openBranch.add(openBranchEnd);
    openBranch.add(openBranchStart);

    var circle = new Path.Circle(circlePosition, circleSize);

    for (var i=0;i<circleColours.length;i++)
    {
         circleSize -= (effectScale/6);
         var repeatCircle = new Path.Circle(circlePosition, circleSize);
         repeatCircle.strokeColor = circleColours[i];
    }
}
06APR10

Forlorn Gaze Short Film

10 years ago

Recently I have completed some motion graphic work for a short film called Forlorn Gaze. I worked with the creator at Nancy Vaudeville and graphic director at Symphonic Pixels to composite graphics and effects onto stop motion pieces for the intro title sequence, three logo idents throughout the film, and a news report intro. The film is to be shown at the Cannes Film Festival in May.  For more information on Forlorn Gaze see here.