Webdevils

Talking about web design

16
May
2007

ImageViewer 2 Update

admin

After having someone ask about ways to hide the ImageViewer I decided to added a few new methods. The ImageViewer2 now supports a fadeOut() and fadeIn() method. These animate the _alpha of the ImageViewer container clip. Use fadeOut() to make an ImageViewer fade out to transparent and fade in to make an ImageView fade in to full opacity. If the ImageViewer is faded out calling loadImage() will cause it fade in automatically.

I updated the original post for ImageViewer2.

No comment

Make_3d Class Examples

admin

Here is a class I created at extends movie clip. It adds properties that allow you to position movie clips in 3d space. The class is pretty simple with just a few properties and methods. If you’re looking for a featured 3d class that generates solid objects take a look at Sandy or PaperVision.

The Make_3d class might be good for creating simple animated effects for interface elements. The class is really more of a 2.5D. It allows you to create the illustion of depth by scaling and positioning movie clips on the stage.

Make_3d Class

[kml_flashembed movie="http://webdevils.com/examples/Make3d/3D_04.swf" height="400" width="300" /]

Make3d provides properties to set the X, Y and Z position of a clip. Make_3d can rotate clips around the origin. Make_3d can also change the brightness of a clip as it moves back in space. This can enhance the illusion of depth. Clips can get brighter or darker and range of the effect can be set. Make_3d also provides a setting to simulate camera angle which can be used to create more less extreme perspective effects.

Using Make_3d

Make_3d Extends the movie clip class. The Make3d Class must be set as the AS 2.0 Class in the Linkage Properties dialog box for any clip will use it. Just right click a symbol in the library and choose Linkage. Then select the Export for Actionscript option and type the name Make_3d into the AS 2.0 Class field.

The Make_3d class adds three new properties, myX, myY, myZ, to movie clips that use this class. The properties set the x y and z positin of an object. To redraw a clip on the stage in 3d space call render point after setting myX, myY or myZ.

Rendering a clip in 3d space sets that clip’s _x, _y, _xscale and _yscale, this makes the clip look like it has been moved in 3d space. Do not set these properties yourself (_x, _y, _xscale and _yscale). Rendering a clip in 3d space also uses swapdepths to set the stacking of clips. Do not use swapDepths() on a 3d clip or it will not stack correctly with other 3d clips.

setOrigin( origin_x:Number, origin_y:Number )

Use setOrigin() to set the location of the vanishing point in your scene. This will usually be in the center of the stage. Setting the X and Y values to half the width and half the height of your Flash project will get the best results. If your 3d elements will be nested within another Movie Clip, you can set the origin to 0, 0 and place the host Movie Clip’s registration point at the origin.

For example if your Movie had a width of 400 and a height of 300 you would want to set the origin to 200, 150:

mc.setOrigin( 200, 150 )

translate_3d( x:Number, y:Number, z:Number )
This method moves an object in 3d. Pass it x, y and z values of the distance you want to the object to move. The values passed to translate_3d are added to the object’s current x, y and z values. For example the following would move an object 100 units in the x, 0 in the y and 400 in the z.
mc.translate_3d( 100, 0, 400 )

position_3d( x:Number, y:Number, z:Number )
This method positions an object at a location in 3d space. Pass position_3d() the x, y and z values and the clip will move to this position. For example to move a clip to the origin you could use the following:
mc.position_3d( 0, 0, 0 )

rotate_3d( x:Number, y:Number, z:Number )
This method rotates an object around the origin. For example to rotate an object 2 degrees around the x axis, 5 degrees around the y axis and 0 degrees around the z axis you could use the following:
mc.rotate_3d( 0, 0, 0 )

renderPoint()
This method renders he clip in 3d by positioning and scaling the object based on it’s x, y and z coordinates. You should call renderPoint() after setting the myX, myY or myZ properties. If you set myX, myY and myZ in the same frame you need call renderPoint() only once to update the position of your clip. If you translate_3d(), position_3d() or rotate_3d() you do not need to call renderPoint(). These methods call renderPoint() themselves.

mc.renderPoint( 0, 0, 0 )

3 comments
11
May
2007

Simple ScrollBar class update

admin

I updated the simple Scrollbar class with a few new features.

It now has a horizontal scroll option. Setting this option allows the scrollbar to scroll horizontally.

You can now set the position of the scroll bar using the setValue() method.

It also has an enabled property. The property when set to true enables the scrollbar. Setting enabled to false disables the scrollbar. If the scroll bar is disabled you can still cal it’s setValue() method. These could be used in combination to create a progress bar or other element that would move on it’s own with being dragged. It’s also useful at times when you need to disable the scrollbar.

The new features are documented in the original post here.

No comment
10
May
2007

SineWave and DrawSine Classes

admin

These two classes create a wave form made up of one or more sine waves. The waves are all added together and dawn as a single composite wave.

DrawSine Class

The example below shows one SineWave. Clicking the mouse on the example adds another. Notice how the wave changes with each click. The effect is caused by adding waves. This is similar to audio waves or water.

[kml_flashembed movie="http://webdevils.com/examples/SinWave/DrawSine_Example.swf" height="200" width="400" /]

The two classes are SineWave and DrawSine.

The SineWave class defines a sine wave. The class defines properties of a single sine wave. The SineWave class has properties for phase, cycles, radius and increment.

To make a new SineWave use the following syntax:

my_sine = new SineWave( phase:Number, cycles:Number, radius:Number, increment:Number );

Sinwave defines the following properties:

  • phase:Determines where along the cycle the wave begins.
  • cycles: Sets the number complete Sine waves that are drawn within the width.
  • radius: Sets the height of the wave in pixels. The wave extends this amount above and below it’s center.
  • inc: Use this value to increment the phase of a wave.

The second Class is the DrawSine class. This class draws a composite wave form made of any number of SineWaves. The constructor defines the width and height of the wave and the number points used to draw the wave. It also has a draw_waves() method that takes an array of SineWaves as a parameter. DrawSine draws a single wave form made from a composite of all the SineWave objects in the array. DrawSine can draw a filled shape or only a stroke.

Use the following syntax to make a new DrawSine object:

draw_sine = new DrawSine( _mc:MovieClip, width:Number, height:Number, steps:Number )

  • _mc: Set the movie clip instance the wave will be drawn in.
  • width: Set the width of the drawn wave.
  • height: Set the height of the wave.
  • steps: Set the number of points used to draw the wave.

The following would create new DrawSine object that will draw it’s wave in the movie clip sin_mc. The wave would be 550 pixels wide and have a height of 400. The wave would be drawn using 200 points.

var wave = new DrawSine( sin_mc, 550, 400, 200 );

set_stroke( stroke_weight:Number, stroke_color:Number )

The set_stroke method sets the stroke weight and color that is used to draw the wave. Setting stroke weight to 0 will cause DrawSine to NOT draw the stroke. The following would set the stroke to 3 pixels and give it a color of medium green.

wave.set_stroke( 3, 0x006600 );

The following would turn off the stroke by setting the weight to 0;

wave.set_stroke( 0, 0x006600 );

set_fill( show_fill:Boolean, fill_color:Number, fill_alpha:Number )

The set_fill() method turns the fill on or off and sets the fill color and alpha of the fill. Setting show_fill to true causes the DrawSine object to draw a box to the height set in the constructor. The following line would draw a dark green 100% alpha fill.

wave.set_fill( true, 0x009900, 100 );

Turn the fill off like this:

wave.set_fill( false, 0x009900, 100 );

draw_waves( wave_array:Array )

Use the draw_waves method to draw a composite wave made up of any number of SineWaves. Pass an array of SineWave objects. For example the following defines three new SineWave objects and then draws them.


// Make three sine waves SineWave( phase, cyclse height, inc )
var sin_0 = new SineWave( 0, 3, 20, 0 );
var sin_1 = new SineWave( 0, 1, 20, 0 );
var sin_2 = new SineWave( 0, 6, 20, 0 );

// Draw a composite wave made of the three SineWaves
wave.draw_waves( [ sin_0, sin_1, sin_2 ] );
To animate the waves call draw_waves periodically, with onEnterFrame for example. The following code defines three waves and animates them.


// Make and animate three SinWaves
var sin_array = new Array();
sin_array.push( new SineWave( 0, 3, 20, .1 ) );
sin_array.push( new SineWave( 0, 1, 20, .1 ) );
sin_array.push( new SineWave( 0, 6, 20, .1 ) );

// Animate the waves
this.onEnterFrame = function() {
for ( p in sin_array ) {
sin_array[p].phase += sin_array[p].inc;
}
wave.draw_waves( sin_array );
}
The following example defines 12 waves each with random properties. Then it animates all 12 waves. In this example the wave is drawn with a fill and stroke.

// 6 SineWaves with random properties
var sin_array = new Array();
for ( var i = 0; i < 12; i ++ ) {
sin_array.push( new SineWave( Math.random() * Math.PI * 2, Math.random() * 36, ( Math.random() * 20 ) + 1, Math.random() - .5 ) );
}

// Set stroke weight and fill
wave.set_stroke( 3, 0×006600 );
// Set a fill, fill color ad fill alpha.
wave.set_fill( true, 0×009900, 100 );

// Animate the waves
this.onEnterFrame = function() {
for ( p in sin_array ) {
sin_array[p].phase += sin_array[p].inc;
}
wave.draw_waves( sin_array );
}

No comment
05
May
2007

SinWave Class Update

admin

I updated the SinWave class with a few new methods and added some minor improvements. You can now set the number of cycles for the wave. I also added the option to render the SinWave with a fill.

See the description for SinWave.

No comment
04
May
2007

AS 3.0

admin

AS 3 is looking to be pretty different from AS 2. I found this excellent article on Getting Started with AS 3. Recommended reading for anyone that want to get an idea of what’s new and different between AS 2 and 3.

2 comments
28
Apr
2007

ImageStreak Class

admin

Here is a class that loads an image and then draws it onto the stage as horizontal streaks. This borrows some from the ImageViewer. This example makes use the BitmapData class for pixel manipulation.

ImageStreak Class

[kml_flashembed movie="examples/ImageStreak/ImageStreak1.swf" height="300" width="400" /]

The ImageStreak class supports the following methods:

ImageStreak( _mc:MovieClip, depth:Number, w:Number, h:Number, backgroundColor:Number )

  • _mc sets the host clip that will hold the ImageStreak.
  • depth, ImageStreak makes a new movie movie clip within it’s host at this depth.
  • w, sets the width of the image.
  • h, sets the height of the image.
  • backgrounColor, sets the background color the image will be drawn over.

Call this constructor function to build a new instance of ImageStreak. For example the following creates a new instance of the ImageStreak class named my_is. The image will drawn in test_mc at depth 1, and be 213 pixels width by 213 pixels tall with a black background.

var my_is = new ImageStreak( test_mc, 1, 213, 213, 0x000000 )

load_image( url:String )
This method loads a new image file into the ImageStreak instance. ImageStreak will display a message showing % loaded. When the image is loaded the transition begins. For example the following loads a new image into my_is from the folder images.

my_is.load_image( "images/IMG_0698.jpg" )

setSpeed( milsecs:Number )
This method sets the speed of the transition. The transition draws each pixel in each vertical column from left to right. The value passed here as milsecs sets the number of milliseconds spent drawing each row. In practice there seems to be limit to how fast Flash can draw each row. For example, the following sets the speed of each column to 1/10th of a second, meaning ImageStreak would draw 10 columns per second at this setting.

my_is.setSpeed( 100 )

set_border( stroke_weight:Number, stroke_color:Number )
This funciton draws a border around the ImageStreak instance.
Stroke_weight sets the line thickness of the stroke and stroke_color sets the color. For example, the following sets a 6 pixel white stroke stroke. Note: colors are set as hex colors, use 0x in place of #. So, #FF0000 (red) becomes 0xFF0000.

my_is.set_border( 6, 0xFFFFFF )

setStep( pixels:Number )

Sets the number of horizontal pixels drawn with each pass. The following would set a 10 pixel step.

my_is.setStep( 10 );

Use this method along with setSpeed() to control the speed of the transition.

3 comments
27
Apr
2007

ImageViewer 2

admin

I’m trying to get caught up in my understanding of AS 2.0. With AS 3.0 here already I thought it would be good if I was only one version behind instead of two.

I got out my copy of Essential Actionscript 2.0 by Colin Moock. And started working on the ImageViewer class. This is a pretty good example with some practical uses.

I used the base ImageViewer and added some extra features of own.

ImageViewer 2 Class example

[kml_flashembed movie="examples/ImageViewer/ImageViewer_031.swf" height="300" width="400" /]

I recently updated the ImageViewer2 so it now uses the mx.Tween class to contr it’s animated features. This now allows you to set the type of easing used for the resizing and alpha motion.

The ImageViewer2 Class uses the Following methods:

new ImageViewer2 ( target:MovieClip,
depth:Number,
x:Number,
y:Number,
width:Number,
height:Number,
borderThickness:Number,
borderColor:Number,
background:Boolean )

Use the constructor function to make a new instance of the ImageViewer2. For example the following make a new instance named my_iv with the following parameters:

  • Host movie clip image_mc
  • Depth of 1
  • X position 0
  • Y position 0
  • Width 200
  • Height 120
  • Border 6 pixels
  • Border color White
  • Solid background

var my_iv = new ImageViewer2 ( image_mc, 1, 0, 0, 200, 120, 6, 0xFFFFFF, true );

Setting background true provides a background in the viewer. If background is false the viewer is transparent.

loadImage ( URL:String )

Load an image into the view. Pass the URL to the image file. For example the following line loads the image house.jpg into the vewier my_iv:

my_iv.loadImage( "house.jpg" )

setShowFullImage( showFullImage:Boolean )

The ImageViewer can show show at a fixed size or resize to fit the current image. By default the ImageViewer does not resize. Calling this function and passing true will tell the ImageViewer to resize to fit the currently loaded image. For example:

my_iv.setShowFullImage( true )

When showFullImage is false the imageViewer does not resize as a new image is loaded.

set_center_align( align:Boolean )

The viewer can scale from the upper left or center. By default the ImageViewer resizes from the upper left corner. Calling set_center_align() and passing true tells the viewer to align from the center. For example:

my_iv.set_center_align( true )

setPosition( x:Number, y:Number )
This method sets the position of the image within the viewer. Setting the size of the viewer smaller than the size of the image and moving the images allows you to crop an area of the image. Passing 0 x and 0 y to setPosition aligns the image with the upper left corner of the viewer. For example the following code moves the image 50 pixels to the left and 20 pixels up:

my_iv.setPosition( -50, -20 )

setSize( w:Number, h:Number )
This method sets the visible area of the viewer. For example the following sets the size of the viewer to 100 wide by 200 pixels tall:

my_iv.setSize( 100, 200 )

The setSize() method uses the mx.Tween class to animate the size of th ImageViewer. The default is:

mx.transitions.easing.Elastic.easeOut

This is an elastic ease out. You can set the easing method using the size_ease_type().

scaleViewerToImage()
This function makes the viewer resize to the size of the image that is currently loaded. For example:

my_iv.scaleViewerToImage()

fadeOut()

The fadeOut() method fades the imageViewer to an _alpha of 0. It sues the speed set in the set_alpha_speed() method see below. If the ImageViewer is faded to 0 _alpha you can fade it up to 100 _alpha by calling fadeIn() or by loading an image with loadImage().

fadeIn()

Fades the ImageViewer up to 100 _alpha.

Both the fadeIn() and fadeOut() methods use the mx.Tween class. The default easing is set to:

mx.transitions.easing.None.easeNone

None provides a linear ease. You can set the easing for the alpha fade using the alpha_ease_type( ease ) method.

set_fade_time( seconds )

Pass this methed the length of alpha fade in second. This sets the time for both fadeIn() and fadeOut(), the time it takes for an image to fade in after it’s finished loading. You can pass fractions of a second using a decimal value. For example you can set the time to one and half seconds with:

set_fade_time( 1.5 )

set_size_time( seconds )

Pass this method the number of seconds the resizing animation will take. For example the following would set the resizing animation to 2.25 seconds:

set_size_time( 2.25 )

alpha_ease_type( mx.transitions.easing )

Pass this method any of the mx.transition.easing ease types. For example the following sets the alpha ease to a ease out Bounce:

alpha_ease_type( mx.transitions.easing.Bounce.easeOut )

size_ease_type( mx.transitions.easing )

Pass this method any of the mx.transitions.easing.ease types. For example the following sets the resizing animation to a strong ease out:

size_ease_type( mx.transitions.easing.Strong.easeOut )

destroy()

This method cleans th ImageViewer and deletes it. Note this doesn’t delete the movieclips created by the ImageVeiwer or it’s host clip. Best practice would be to call imageViewer.destroy() then delete the host clip or leave the frame where the host exists.

set_background_color( color )

Sets the color of the background fill. The following would set the background to a dark red:

set_background_color( 0×660000 )

Note the colors are set as a hex value. Replace the # with 0x. For example #FF0000 (red) becomes 0xFF0000.

6 comments
26
Apr
2007

Sliding Drawers

admin

Here is an example that creates a series of movie clip buttons that slide to the left revealing content. I have included several variations on the idea in the example files.

In the first example the content images are kept within the movie. In the second and third the images are loaded with the MovieClipLoader. The third example uses an XML file to set the images being loaded.

Sliding Drawers

[kml_flashembed movie="examples/drawers/Drawers_01.swf" width="413" height="217" /]

No comment
25
Apr
2007

SinWave Class

admin

SinWave Class

I have been trying to get caught up with AS 2.0, so I have been trying to make up some simple classes to practice with. Nothing too complex just something to get a better handle on using classes.

the SinWave class draws a sin wave on a movie clip. More accurately you pass it the instance name of a movie clip SinWave creates a new empty clip within that clip where it draws the sine wave.

The SinWave includes a phase property and a inc_phase() function to change the phase of the wave. Calling inc_phase() redraws the wave at the new phase. This can be used to animate the wave.

SinWave always draws the wave at _y of 0. So half the wave will above 0 and half will be below it. You’ll need to position the host clip at the vertical center point where the wave should appear. The height of he wave determines how far above and below 0 the wave will be drawn.

SinWave uses lineTo() to draw so the wave is drawn as a series of straight lines. The Steps parameter determines how many line segments are used to draw the whole wave. Setting steps to a low number creates a jagged and irregular wave. Larger numbers will create a smoother wave.

Create a new instance of SinWave with:
SinWave( _mc:MovieClip, steps:Number, width:Number, height:Number, phase:Number, cycles:Number, stroke_weight:Number, stroke_color:Number )

_mc: The instance name of the host clip.
steps: Sets the number of points to be used along the length of the wave.
width: Sets the width of the wave to be drawn.
height: Sets the height the wave above and below 0.
phase: Sets where along the sin cycle the wave begins.
cycles: Sets the number of cycles. 1 would produce a single sine wave peak to peak.

You might use the SinWave like this. Below I have created a new empty movie clip named sin_mc. And then used SinWave to draw a wave in it with a width of 550, height of 50 and 300 steps. 4 Cycles creates 4 waves peak to peak. With a 2 pixel red stroke.

this.createEmptyMovieClip( "sin_mc", 1 );
sin_mc._y = 200;

var my_sin = new SinWave( sin_mc, 300, 550, 50, 0, 4, 2, 0xFF0000 )

SinWave.inc_phase( n:Number )
This method adds n to the phase value of the SinWave. This sets where the wave begins drawing itself. You can use this to animate the wave. For example:

SinWave.set_height( n:Number )
This method allows the height of the wave to be changed. Remember the wave will be twice this value, appearing n number of pixels above and below 0 in the host clip. For example to change the height of a SinWave to 100 pixels you might use:
SinWave.set_height( 50 )

SinWave.set_fill( onOff:Boolean, color:Number, height:Number, alpha:Number )
This method assigns a fill and fill color to the SinWave. The SinWave class draws the fill to the height set here. The effect is a rectangle with the top edge showing the wave. If the height is negative the rectangle is drawn above with the wave on the bottom edge. Setting onOff to true turns the fill on. Setting onOff to false turns the fill off. The alpha value sets the transparency of the fill. The following example creates adds a 100 pixel tall, red, 50% transparent fill:

Calling set_fill() once turns on the fill until further notice. To turn off the fill call set_fill with false as the first paramter, for example:
SinWave.set_fill( false, 0xFF0000, 100, 50 )

[kml_flashembed movie="/examples/SinWave/Draw_Wave_012.swf" height="200" width="350" /]

7 comments

Template design by webdevils.com © Webdevils RSS2