Archive

Posts Tagged ‘Flash’

Create Fireworks in Flash

July 3rd, 2009 No comments

This article was submitted by Enric Godes, project manager at Vasava, a design studio. Godes and Vasava were commissioned by Adobe Software to create this tutorial.

Today we’re going to develop a virtual fireworks display in Flash.

To follow along, you’ll need:

How to Proceed

Step 1: Change the Flash movie to 800×600 and 65 fps.

today1

Step 2: Draw a 4 px circle and transform it on symbol by pushing F8.

Step 3: Edit the MovieClip and animate it from left to right on a straight line. These are the sparks eminating from the center of the individual fireworks.

We used a shape interpolation for this. Later, you can also try varying animation types and change the timing to create different results. Insert a stop on the last frame.

today

Step 4: Find the MovieClip on the library and right click to open the properties window on the class field and change it to “Particle"

today2

Step 5: Make a new symbol and put it on the scene. On the properties window, change it to "nightSky." This is where we will put the fireworks.

Step 6: And now the coding. First, import the classes we are going to use

import caurina.transitions.Tweener;
import flash.events.*;

Step 7: Next, define the movie vars.

var fwParticlesCount:uint=200; // particles in each explosion
var fwTimer:uint=2000; // time between explosions
var timer:Timer = new Timer(fwTimer);
// this adds a timer, in each step of the timer it will call fire() function
timer.addEventListener(TimerEvent.TIMER, fire);
timer.start();

Step 8: We want to use a lot of random numbers, so we created the following function to save some time.

function randRange(min:Number, max:Number):Number {var randomNum:Number = Math.random() * (max – min + 1) + min;    return randomNum;}

Step 9: And now the main function, which is putting the particles in a circle, animating them and setting their opacity and position.

function fire(event:TimerEvent){

    // the origin coordinate for the firework
    var x0:uint=randRange(100,700);
    var y0:uint=randRange(100,500);
    // now i’m going to create and define the properties of each particle in the firework
    for(var i:uint=0;i<fw Particles Count;i++){
           var tempParticle:Particle=new Particle();
           tempParticle.x=x0;
           tempParticle.y=y0;
           tempParticle.rotation=randRange(0,360)
           tempParticle.scaleX=tempParticle.scaleY=randRange(.3,1)
           //add to the stage
           nightSky.addChild(tempParticle)
           //the particle is going to start with the animation you prepared on the Movie Clip
           //then with a little delay the Tweener animates the y an opacity,
           //onComplete remove the mc from stage and deletes the particle
    Tweener.addTween(tempParticle,{y:y0+200+randRange(50,50),alpha:0,delay:1,time:2,transition:"easeInSine",onComplete:function(){nightSky.remove Child(this);delete this}});

                                  
  today3

That’s all you need to do. Now just sit back and enjoy the show!

  Enric Godes is a project manager at Vasava. Started in Barcelona in 1997, Vasava is a   communication studio with 18 young designers who specialize in cross-media projects: print, web, motion, 3D animation, and video. To unleash creativity and meet the deadline-driven demands of clients, Vasava relies on the integrated, cross-discipline tools found in Adobe Creative Suite Master Collection software.

Web Design Inspiration from 35 Korean Flash Websites

May 16th, 2009 No comments

The Design Inspiration has published an article of Top 35 Inspirational Korean Websites. As a web designer, we would like to design something that really standout. By doing that, we need to widen our eyes by looking at different kind of design style, so that we can get infinity and variety of inspiration.

Oriental websites and European websites are so different, because the designers have different culture and experience. You should be very familiar with US and European design style by now. It is a good idea to get some inspiration from Korean style websites as well.

inspirational-websites

Multiple File Upload Plugin with jQuery and Flash

March 22nd, 2009 No comments

 

Uploadify is a jQuery multiple file upload plugin which allows you to change any element with an ID on your page into a single or multiple file upload tool. The plugin uses a mix of JQuery, Flash, and a backend upload script of your choice to send files from your local computer to your website server. It has been tested on IE7, FireFox 3, Safari 3 and Opera 9.

 

flash-upload