Create A Screensaver With Swishmax 4 & InstantStorm

download: Clouds Screensaver (560.64KB) added: 01/04/2011 clicks: 92 description: Made with swishmax 4 and packaged using Instant Storm download and install at your own risk.

First Of All:

Open Swishmax 4 and set the movie properties to the following – Width = 556 – Height = 408 and a frame rate of 25, set the background to a sky blue colour #5BCCEC.

Step.1

using the Pencil Tool (N)  have a line selected with the stroke fill of solid white, see below.

 

On the stage scribble out a basic cloud shape.

add the following filter settings to the shape you have just scribbled.

test in player, your scribble should now resemble a cloud.

Group the cloud shape as a movieclip and name it Cloud

add the following code to the cloud movieclip

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

onFrame (1) { speed=randomRange(1,3); scale=randomRange(90,150); this._y=random(Stage.height); } onSelfEvent (enterFrame) { this._x-=speed; if(this._x<-200){ this._x=Stage.width+300; this._xscale=scale; this._yscale=this._xscale; this._alpha=randomRange(80,100); gotoAndPlay(1); } } onFrame (2) { stop(); }

this code will place the cloud at random loacations on the stage no matter of width and height, scale randomly and give random speed of the cloud.

now add the following code to Scene_1 of the movie.

1 2 3 4 5 6 7 8 9

onSelfEvent (load) { fscommand("fullscreen", true); amount=15; } onFrame (1) { for (puffy=0; puffy<amount; puffy++) { duplicateMovieClip(_root.cloud, "cloud"+puffy, puffy); } }

thats it for the swish part, your screensaver is ready for packaging. if you wish to see how its going to look press Ctrl+T now.

press the Escape key to exit full screen. save and export to swf6.

Step.2

InstantStorm is a powerful freeware Flash screensaver creator that turns your Adobe Flash files (SWF) into professional screensavers in no time.

if you wish to proceed click on the logo above download and install at your own risk.

When ready open InstantStorm click create new blank project.

under the general tab, click the browse button and find your clouds.swf

you can customize the installer for your screensvaer under the installer tab. add icons and installer images etc.

and finaly when you have finished customising your installer you can publish your screensaver for friends and family etc.

once exported install your screensaver, save your project file if you wish to update it at any time. and enjoy making your new screensavers.

Read more »

Scripted Grass For Banners / Games etc. Swishmax 4

Here is a simple way of generating random grass for banners etc using swishmax 4.

First Of All.

Open swishmax 4 and set you movie properties to the following, width = 553 height = 156 and frame rate to 25, background colour = whatever you want.

download the following grass *.emf vector

and import into swishmax 4 using the import Vector. 

download: Grass vector (1.40KB) added: 02/04/2011 clicks: 69 description: Grass clump vector for swishmax 4 *.emf format.

Step.1

Once you have imported the grass vector into swishmax 4, group it as a movieclip and name it grass_2, add the following script to the movieclip, make sure the transofrm point is bottom center 

1 2 3 4

onFrame (1) { this._yscale=randomRange(60,140); this._y=Stage.height; }

On Scene_1 add the following code.

1 2 3 4 5 6 7

onFrame (1) { amount=Stage.width/30; for (blade=0; blade<amount; blade++) { duplicateMovieClip(_root.grass_2, "grass_2"+blade, blade); grass_2._x=30*blade; } }

thats all their is to it. press Ctrl+t to test in player

export as swf 6 onwards.

Read more »

Realistic Wall Of fire Swishmax 4 Tutorial

originaly done for Adobe Flash by External Link converted for use with swishmax 4 by me.

Step.1

Open swishmax 4, for the purpose of this tutorial set your movies width and height as 300 x 200, set the background colour as Solid Black (#000000) and the frame rate to 25 fps.

Step.2

Using the Rectangle Tool (R)  

draw a rectangle width 300 pixels x 200 pixels with a gradient colour fill  

this will make up the flames colour, group the shape as a movieclip and name it gradient_mc

the colours i have used in the gradient are as follows  left to right (FFFFCC), (F4D055), (F06B1C), 6F0100)

see the image below.

your rectangle shape once the gradient has been applied should look like the one shown in the image below.

now add the following script to Scene_1 of the movie

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

onFrame (1) { import flash.filters.*; import flash.display.*; var Back_mc = new BitmapData(300, 300, true, 0xFFFFFF); //width & height of rectangle & colour of background you may wish to change gradient_mc.start_offset = [5];// number of pixels to offset change look of fire gradient_mc.finish_offset = [2];// number of pixels to offset change look of fire var c = 0; while (c<4) { gradient_mc.start_offset[c] = {x:0, y:0}; gradient_mc.finish_offset[c] = {x:Math.random()*4-2, y:Math.random()*3+4}; c++; } gradient_mc.onEnterFrame = function() { var c = 0; while (c<4) { this.start_offset[c].x += this.finish_offset[c].x; this.start_offset[c].y += this.finish_offset[c].y; c++; } Back_mc.perlinNoise(16, 50, 3, 5, false, false, 1, true, this.start_offset); var fire = new DisplacementMapFilter(Back_mc, new flash.geom.Point(0, 0), 1, 1, 10, 200, "clamp"); this.filters = [fire]; }; }thats it, press Ctrl+T to see your movie in action, hopefully it will look like the one shown in the example.

Read more »

Swishmax 4 Peel Sticker Tutorial

Click on the background to change the colour, click on the button to read more about Northern Soul.

First Of All:

Open Swishmax 4, set your movie height and width to fit your button, set frame rate to 25.

Step.1

Using the Ellipse Tool (E) 

drag out your circle and colour, name it mask1

copy and paste in place and rename to mask2 and using the subselection tool   flatten the top edge of themask2 ellipse.

Group mask1 and mask2 together as a movieclip, name it as mask place the following coe on the maskmovieclip

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

onFrame (1) { stop(); } onFrame (15) { stop(); } onFrame (8) { stop(); } onFrame (2) { setLabel("over"); } onFrame (9) { setLabel("out"); }

on the mask1 shape in the timeline between “over” place a fade out effect, for mask 2 in the “over” place a fade ineffect, then in the “out” for mask 1 place a fade in effect andd for mask 2 a fade out effect.

Step.2

now its time to import your sticker image or create your sticker image, make sure its the same dimension of themask1 ellipse.

the name of the object is not important, so name it to identify it.

Step.3

create a smaller ellipse with the following gradient settings  and name the shape peel.

place the peel shape  top right of the button image.

place the following code on Scene_1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

onFrame (1) { action.useHandCursor=false; stop(); } onFrame (8) { stop(); } onFrame (15) { stop(); } onFrame (2) { setLabel("over"); mask.gotoAndPlay("over"); } onFrame (9) { setLabel("out"); mask.gotoAndPlay("out"); }

on the “over” label place a move action and move the peel shape down over the sticker shape, then in the “out”  label place another move action moving the peel shape back away (top right) of the sticker shape.

Step.4

using the ellipse tool create a circle same dimensions of the sticker shape, make it transparent colour and group as a button, name the button action.add the following code to the button.

1 2 3 4 5 6 7 8 9 10

on (rollOver) { gotoAndPlay("over"); } on (rollOut) { gotoAndPlay("out"); } on (press) {   getURL("`URL`", "`Target Frame`"); }

group everything together as a movieclip and name peel_button

press Ctrl+T to test your button, it should work like the one in the example at the start.

here is how your layout tree should look.

Read more »

Swishmax 4 Analog Clock

Graphics made in swishmax 4 using the vector tools, exported to png for use below. right click, save as.

Plate:

Hands:

First Of All:

Open swishmax 4 and set the movie properties to 390 x 375 frame rate 25.

Step.1

import the clock.png into your movie (File | Import To Stage | Image) or by clicking the  import image icon 

next split the hands.png into two seperate images using photoshop , fireworks, Ms Paint etc. save the fork asfork.png and the knife as knife.png

import both images to the stage. rotate the fork and knife images so they are facing 12 ‘o’ clock

Step.2

click on the clock.png and set the transformation point to center. see image below.

using the rulers drag out the vertical and horizontal rulers to cross through the center of the plate transformation point.

ignore all the blue lines in my image, remember mine is the vector version of the plate your wont have all the lines making it easier to see the transformation point. concentrate on the rulers in the image crossing the tranformation point of the plate image.

Step.3

click on the fork image and rename it fork rather than fork.png and make it a target.

make the transformation point of the fork to bottom center and place the image so the image transformation point is center on the rulers.

now do the same for the knife, rename to knife instead of knife.png make the transformation point to bottom center and make it a target, place the image transformation point central to the rulers.

Using the Rectangle Tool (R) create a seconds hand like in the example at the top of the page. name the shapeseconds_hand mark as a target and transformation point to bottom center. place the transformation point central to the rulers.

Step.4

Using the Text tool (T) create a dynamic text box mark it as a target and name it date_text, place the text box near the bottom of the plate.

now add the following code to Scene_1 of the movie.

1 2 3 4 5 6 7 8 9 10 11 12

onSelfEvent (enterFrame) { var currentTime:Date = new Date(); var month:Array = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var dayOfWeek:Array = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); date_text.text = dayOfWeek[currentTime.getDay()] + " " + currentTime.getDate() + " " + month[currentTime.getMonth()] + " " + currentTime.getFullYear(); var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); var hours = currentTime.getHours() * 30 + currentTime.getMinutes() / 2; seconds_hand._rotation = seconds * 6; knife._rotation = minutes * 6; fork._rotation = hours; }

download: Swishmax 4 AS3 Analog Clock (59.61KB) added: 02/01/2011 clicks: 96 description: swishmax 4 actionscript 3 analog clock source file *.swi Build Date 2010.11.02

thats all, press Ctrl+T to test your movie, hopefully you will have something similar to my example at the start of the tutorial.

Read more »

picture to Pencil Drawing Swishmax 4 filters

First Of All:

open swishmax 4, set your movie width and height to fit your image, movie frame rate doesnt matter if their is no animation.

Step.1

Import your image to the stage (not library)  , if you do not have one feel free to download subzero.emf  below and import to stage using the import vector tool 

download: Sub Zero *.emf (183.33KB) added: 27/01/2011 clicks: 127 description: Tutorial File picture to pencil. Sub Zero Vector *.emf

Step.2

click on the sub zero image, click the filter tab or (ctrl+shift+F9), click on Invert Colors | InvertRGB see below.

press Ctrl+T to test in player and your image should now look like the image below.

click on the filter tab again, this time click Image Manipulation | edgeDetect see below.

once aplied your image should look like the one shown below when played.

Click the filter tab again this time click the Greyscale and add the greyscale filter see below.

when played your image should look like the one below, basic line art.

add a drop shadow filter and a glow filter, see glow filter settings below.

when set and run in player, you should have a more defined line art image, see below.

Step.3

now for building up the shading. using the pen tool  and the blur filter on the drawn images.

so using the pen tool lets start to fill in the image. see below for an examles.

and here is that image with the blure filter set.

play around with the tint Shift+F9 change the alpha to custom and set to 50 etc until you are happy with the result.

continue to use this technique until you have an end result that you are happy with, export image as png.

Final Result.

Read more »