Biro Barna’s Personal WebLog

I know… It’s not really nice having a blog and forgetting to post stuff. Well, actually I didn’t forget about it just that I’ve been really busy lately and didn’t really have the time to post anything new. Better said, I didn’t find any new cool/or interesting stuff ( I’m sure that things have happened just that they passed right by me ).

Anyway, I’m writing this post mainly because I’d like to inform the few people who are visiting this blog ( and whom are hopefully finding some answers to their questions ) that I’ll be moving this blog to a different domain. The new address will be ( or already is if you’re reading this post really late ): http://blog.wisebisoft.com/

Like I said before, I’ve been busy lately and this tiny change is one of the things I’ve been doing the last couple of weeks. Hopefully the name isn’t hard to remember ( you could always bookmark it ).

I’ve been working on my OOP skills too so once the new blog is up and running then I’ll try to post more and more interesting stuff ( and maybe some not so interesting but certainly useful stuff too ).

PS: For those who don’t know yet: ActionScript 3.0 and OOP programming are the way to go with Flash. If you are still trying to learn ActionScript 2.0 then STOP, delete everything you’ve done so far and start learning ActionScript 3.0 ( my guess is that ActionScript 2.0 will go extinct in maximum 2-3 years from now… just like ActionScript 1.0 did once ActionScript 2.0 hit the scenes ).

All the best to you all and cya next time ( at a new “place” ).

Biro Barna

Although ActionScript 2.0 has been around for quite a few years, I still see many people asking for help when it comes to preloaders ( I can’t really understand why, because there are tons and tons of tutorials and articles all around the web that have completely covered all the preloader issues ).

This post is intended to be a tiny tutorial for everyone who is having a hard time creating a simple ActionScript 2.0 preloader. I won’t be wasting too much time with screenshots and stuff like that, instead, I’ll upload the working preloader ( the file is well commented < at least that’s what I’d like to believe > ) and focus more on explaining why it works ( the logics behind the whole process ):

1) Before starting, we need to define at least two variables that will hold two different things ( the first variable will hold the “total number of bytes that must be loaded” and the second variable will hold the “bytes that have already been loaded” ) but in real life we need at least three variables ( we wouldn’t be able to do too much with two variables, although only two variables are required to create a working preloader )… The first two that I already mentioned and one more that will hold ( after some simple calculations ) the “percentage done”. Let’s name our variables: total_bytes, loaded_bytes, percent_done. I’m sure that the names are intuitive enough.

2) After we have our variables then we can dive into calculating all the stuff that our variables will be holding. Let’s start with our first variable that will hold the total number of bytes that must be loaded. We have a simple function in AS 2.0 that does the exact thing for us, this function is called: getBytesTotal(); Simple enough right? Now that we know the name of the function that will get all those bytes for use, we just have to assign it to our variable: total_bytes = getBytesTotal();

Ok, now we have a variable that holds the number of total bytes that we’ll be loading. Next, we need to get the currently loaded bytes and assign the value to our second variable. Just like with getBytesTotal, we have a function here too that does the job for us, called: getBytesLoaded(); same steps as with tota_bytes but now we have this: loaded_bytes = getBytesLoaded();

Good, I know that this is getting quite boring but hopefully in the end, it will be worth the effort and time ( once you understand how a preloader works you’ll never have to ask for help again, instead, you’ll be the one helping others ).

So, one more variables left. The third variable will first transform the data gathered from the other two variables and calculate the percentage. All this is done with simple math: percent_done = Math.round((loaded_bytes / total_bytes) * 100); ( Math.round is used to round up the number that we’ll get after dividing loaded_bytes by total_bytes and multiplying all that with 100 ).

3) Ok, now we have our variables up and running and with the help of simple math we calculated the percentage ( that we can later display in a Dynamic TextField or wherever we’d like ). Before we’ll have a working preloader, we must do one more thing. We must trigger an onEnterFrame event that is responsible for updating out percentage. If you are not familiar with the onEnterFrame event then I’ll explain shortly what it does: essentially, it is an event ( function ) that is being triggered really fast ( depending on the movies frame rate ), if your movie has a frame rate of 30 fps then the onEnterFrame event will trigger 30 times every second ( theoretically ). Why is this important? Well, if we would have left our variables the way they were then once you start your Flash movie, all the calculations that we did would have been fired only ONCE, and that’s really bad… if they get triggered only once then how can we update the percentage? Here’s when onEnterFrame comes into play, if we place all the calculations that we must do inside the body of the onEnterFrame function then we’ll be having a function that executes all those calculations really really fast. Just download the file I uploaded after you read all this and see how the whole thing looks like ( works ).

4) Good, now we know what onEnterFrame does and we understood that in order to keep our percetange up to date ( and all the other calculations ) we’ll need to place all our calculations inside that onEnterFrame function so that it will recalculate ( update ) the percentage every time it’s triggered.

There’s one more thing we must do to have a working preloader. I said that onEnterFrame will trigger really fast ( depending on the frame rate ) and it will keep updating the percentage and the loaded_bytes, but when will it stop? Well, this is where something else comes into play, called: ifFrameLoaded(); This is a simple function that essentially checks if the frames that we specify are loaded or not. Since we are talking about a preloader, it would be normal to want to check if all the frames of the movie are loaded, this is done like this: ifFrameLoaded (_totalframes) { }; _totalframes is a function that returns the total number of frames of the current timeline it is defined on. So, we are telling Flash to “check if all the frames of the timeline are loaded”, if that’s true then it should do something. First of all, it should remove the onEnterFrame event so that it won’t continue on firing ( once we loaded everything, there’s no more need for an onEnterFrame event that would do sensless calculations ) and we should start playing our movie.

Huh, ok, this got longer than I expected. I hope that after reading all that you guys will understand the logics behind “the preloader”, why it works and what should it have in order to work properly. If you understood all the steps then you’ll only need to download the file I have uploaded and start playing around with it and most importantly reading up on the syntax that you don’t yet understand. I’ve commented the code in my file too so that it will guide you guys.

Hopefully everything is intuitive enough and I hope that I didn’t lose anyone on the road and sorry for the long but hopefully helpful and not too boring post.

The working example can be downloaded from here: Working Preloader Example
( I exported the file for Flash 8, hopefully the file will work for everyone ).

ATTENTION !!! The file that I uploaded covers all the stuff I talked about in this post and I added some additional features too. Beside the simple “display percentage in a text field” feature is has an animated progress bar too ( by using a mask and a shape tween ). I’m quite sure that no one will regret downloading my file and taking a look at it ( especially if you have problems with your AS 2.0 preloader ).

Biro Barna

Yeps, it’s all true. It seems that Adobe was alerted to what could be one of the first successful exploits of the Flash Player. “We’re still looking in to the exploit files, and will update everyone with further information as we get it, but for now, we strongly encourage everyone to download and install the latest Flash Player update, 9.0.124.0.”

It makes me wonder: “Who knows for how long have been certain people taking advantage of this security leak… Who knows how many accounts have been hacked because of this unfortunate exploit…” Still, it’s good to know that instead of hiding behind their fingers, the guys at Adobe took action to get this problem solved. So people, if you don’t have the latest version of Adobe Flash Player ( meaning version 9.0.124.0 ), then NOW is the time to update! ( You can download the latest version of Adobe Flash Player by clicking on the following link: Get Adobe Flash Player )

I’ve been waiting for something like this to happen but I never knew when will it be finally discovered and put under reflector lights.

The full article can be found here: Potential Flash Player issue

While I was playing around todays with some simple Math.sin(); and Math.cos(); I had an idea… I always was a big fan of fractals and dynamic animation ( or any type of code-driven animation ). I kept on seeing people do really crazy ( I mean COOL ) animations in Flash and I always wondered how on Earth did they do it. Well, you can imagine that my question had a simple answer: “by using math”.

Since I’m not a math guru, but I do like doing math, made me want to “explore the wonders of Dynamic Animation”… Better said, any type of animation that is controlled / generated by code. So, I thought that “Hey, why not create a simple shape generator?”. Well, I did, and here is what I came up with:

The source file can be downloaded from here: GenerateShape Example

As I said, it’s something really simple but still, quite interesting. It’s really cool to see what simple math can do. All the shapes are being generated with the help of Math.sin(); and Math.cos();

I didn’t bother organizing my code that badly, and because this is a really simple and small application, I’m quite sure that everyone will understand the “brain” behind the whole thing, mostly because it’s not that much about the code but about math. Essentially, this piece is responsible for “all the magic”:

// centerX and centerY are essentially the X and Y coordinates 
// of your future graphic ; radius in my example's case is by default: 150px , 
// but it's value can be changed manually from within the .fla ; a Timer object
// is responsible for drawing the whole shape and for updating the "angle"
// value each time it is being triggered ( in this example, every 10 milliseconds )
// ( angle += speed; ) ; "speed" being responsible for the speed 
// of the motion ( makes sense, right? ), the faster or slower the angle is 
// increasing, the faster or slower the return values from Math.sin(); and Math.cos();
 
function _onTimer(event:TimerEvent):void
{
	if (radius < 0 )
	{
		timer.stop(); // once the radius is less than 0, STOP
	}
	else
	{
		// calculate the new X and Y positions and update the angle
		xpos = centerX + Math.cos(angle) * radius;
		ypos = centerY + Math.sin(angle) * radius;
		graphics.lineTo(xpos, ypos); // draw a new line on each trigger
		angle += speed;
 
		if (cropSpeed == 0)
		{
			// if true then we won't be decrementing the angle
			// which means that we'll be drawing a circle shape
			if (angle > 10000)
			{
				// once the angle reaches a value that is higher than 10000
				// stop the animation ! Otherwise, the drawing process will never end.
				timer.stop();
			}
		}
		else
		{
			// else cropSpeed > 0, then keep on 
			// decrementing the radius variable
			radius -= cropSpeed;
		}
	}
}

There are two input fields in the example, you can play around with those ( try setting different values and push the “Generate Shape” button ). The top one is responsible for the “motion speed” and the one below it is responsible for decrementing the angle after each time the Timer object is triggered ( it essentially makes the whole thing smaller and smaller until the angle reaches a value that is less then 0 ; that’s when the whole thing stops ).

I hope that some of you people out there will find this useful ( or maybe it will inspire some to create an even cooler shape generator ) and sorry again for the messiness in my file.

PS: The whole application is far from “perfect” but it might be a good start for those who have just started learning Flash and would like to try out something less boring.

Hot news at Adobe Labs!

Adobe® Flash® Player 10, code-named “Astro,” introduces new expressive features and visual performance improvements that allow interactive designers and developers to build the richest and most immersive Web experiences. These new capabilities also empower the community to extend Flash Player and to take creativity and interactivity to a new level.

This public prerelease is an opportunity for developers and consumers to test and provide early feedback to Adobe on new features, enhancements, and compatibility with previously authored content. Once you’ve installed Flash Player 10 beta, you can view interactive demos. You can also help make Flash Player better by visiting all of your favorite sites, making sure they work the same or better than with the current player.

For more information please visit: Flash Player 10 - AKA “Astro”

Astro Sneak Peek: Watch Video ( MAX Chicago 2007 Keynote )

New doors keep on opening up every day…

Open talk.

Choose the subject and say what you have to say. Personally I’d be interested in what you guys thing about Silverlight? Some say that it’s the future, others say that although it just got released it will soon “go extinct”… Will Silverlight be able to start a new revolution in the design and dev. world? Will it grow to be the new titan that will try to take aways the “crown” from Flash?

In case some of you didn’t yet “discover” Silverlight, then visit the Silverlight Official Home Page and read up on it’s specs. So, what do you guys think, will Silverlight make a stand or will it fail miserably?

Hi everyone,

This is a simple and reusable scrollbar class I wrote in ActionScript 3.0 a few weeks ago that I thought I’ll share. Quite a lot of people have problems with scrollbars ( and forms ), especially when it comes to creating one. This is not a tutorial but a simple class that you can reuse from application to application ( still, if you have a basic understanding of ActionScript 3.0 then I’m quite sure you’ll figure out quite easily what’s going on in the class ).

Here’s a fast example of the file I attached for download ( drag the scrollbar ):

The upper example can be downloaded from here: Working ScrollBar Example

In order to make it work, simple copy-paste the block of code into a new .as file and save it with the following name: BScrollBar.as ( people familiar with AS 3.0 know that the class name and constructor method name must be the same in order to work properly ). Once that’s done, you simple have to Create the separate parts of the scrollbar in the Flash CS3 IDE, instantiate the class and pass all the 9 required arguments to it ( I’d recommend putting all the scrollbar components in a container… there’s a mathematic formula that won’t work well if all the piece are not on the same Y position ).

/**
   *   Author: Biro Barna
   *   Created on: 27th of April 2008
   *   File description: Reusable ScrollBar Class
   *
   *   Required arguments: (content, scrollTrack, scrollButton, contentMask, easing, scrollSpeed, buttonMode, mouseWheel, Stage)
   *   Example: new BScrollBar(content_mc, scrollTrack_mc, scrollButton_mc, contentMask_mc, .2, 10, true, true, stage);
   *
   */
 
package com.plenarycreation
{
	import flash.display.Stage;
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
 
	public class BScrollBar extends MovieClip 
	{
		private var _sMask:Sprite; // content mask
		private var _sTrack:Sprite; // scroll button's track
		private var _sContent:MovieClip; // content to be scrolled
		private var _sButton:MovieClip; // scroll button
		private var _sEasing:Number;
		private var _scrollSpeed:Number;
		private var _moveVal:Number;
		private var _speed:Number;
		private var _contentHeight:Number;
		private var _trackHeight:Number;
		private var _faceHeight:Number;
		private var _maskHeight:Number;
		private var _bButtonMode:Boolean;
		private var _mouseWheel:Boolean;
		private var _mStage:Stage;
 
		/**
		   *   Class constructor. Make sure that you pass all the 9 required arguments.
		   *
		   */
 
		public function BScrollBar(sContent:MovieClip, sTrack:Sprite, sButton:MovieClip, sMask:Sprite, sEasing:Number,
						     scrollSpeed:Number, bButtonMode:Boolean, mouseWheel:Boolean, mStage:Stage):void 
		{
			_sContent = sContent;
			_sTrack = sTrack;
			_sButton = sButton;
			_sMask = sMask;
			_sEasing = sEasing;
			_scrollSpeed = scrollSpeed;
			_mStage = mStage;
			_mouseWheel = mouseWheel;
			_bButtonMode = bButtonMode;
 
			_contentHeight = sContent.height;
			_trackHeight = sTrack.height;
			_faceHeight = sButton.height;
			_maskHeight = sMask.height;
 
			_repositionObjects();
			_setContentMask();
			_setButtonMode();
			_addListeners();
		}
 
		/**
		   *   Reposition all the objects passed to the constructor to ensure
		   *   that the speeds and distances calculated later on will
		   *   provide the correct result.
		   *
		   */
 
		private function _repositionObjects():void 
		{			
			_sButton.x = _sTrack.x;
			_sMask.x = _sContent.x;	
			_sContent.y = _sTrack.y = _sButton.y = _sMask.y = 0;
		}
 
		/**
		   *   Set the mask for your content.
		   *
		   */
 
		private function _setContentMask():void 
		{
			_sContent.mask = _sMask;	
		}
 
		/**
		   *   Enable or disbale the hand cursor for your scroll button
		   *   if the argument bButtonMode is set to "true" then enable the
		   *   buttonMode, otherwise, disable the ButtonMode ).
		   *
		   */
 
		private function _setButtonMode():void 
		{
			_sButton.buttonMode = _bButtonMode;
		}
 
		/**
		   *	If the content's height is less then the mask's height,
		   *	that means that the content can't be scrolled and we should
		   *	hide the scroll button's track and the scroll button;
		   *	Otherwise, add all the event listeners that will handle the scrolling.
		   *
		   */
 
		private function _addListeners():void 
		{
			if (_contentHeight < _maskHeight) 
			{
				_sTrack.visible = false;
				_sButton.visible = false;
				_sButton.buttonMode = false;				
			} 
			else
			{
				/**
				   *	If mouseWheele is enabled then add the MOUSE_WHEEL listener,
				   *	else, don't add it ( disabling the MOUSE_WHEEL scroll function )
				   *
				   */
 
				if ( _mouseWheel == true )
				{
					_sContent.addEventListener(MouseEvent.MOUSE_WHEEL, _onMouseWheel);
				}				
 
				_sButton.addEventListener(MouseEvent.MOUSE_DOWN, _sDrag);
				_sButton.addEventListener(MouseEvent.MOUSE_UP, _sStopDrag);			
				_sContent.addEventListener(Event.ENTER_FRAME, _moveContent);			
				_mStage.addEventListener(MouseEvent.MOUSE_UP, _sStopDrag);
			}
		}
 
		/**
		   *	Calculate easing speed and update the content's Y position.
		   *
		   */
 
		private function _moveContent(event:Event):void 
		{
			_moveVal = (_contentHeight - _maskHeight) / (_trackHeight - _faceHeight);
			_speed = ((_sButton.y * ( -_moveVal )) - _sContent.y) * _sEasing;
			_sContent.y += Math.round(_speed);
		}
 
		/**
		   *  Check for the current position of your scroll button, if it's
		   *  more then 0 then reposition it, otherwise, keep it on 0.
		   *
		   */
 
		private function _onMouseWheel(event:MouseEvent):void 
		{
			_sButton.y += ((event.delta) * ( -_scrollSpeed ));
 
			if (_sButton.y <= 0) 
			{
				_sButton.y = 0;
			}
			else if ( _sButton.y > (_sTrack.height - _sButton.height)) 
			{
				_sButton.y = _sTrack.height - _sButton.height;
			}
		}
 
		/**
		   *   Set the bounds of your scroll button, start dragging it.
		   *
		   */
 
		private function _sDrag(event:MouseEvent):void 
		{
			_sButton.startDrag(false, new Rectangle(_sTrack.x, _sTrack.y, 0, (_sTrack.height - _sButton.height)));
		}
 
		/**
		   *   Stop dragging the scroll button.
		   *
		   */
 
		private function _sStopDrag(event:MouseEvent):void 
		{
			_sButton.stopDrag();
		}
 
	} // end of class
} // end of package

I hope it’s helpful, I tried making it as dynamic as possible and keeping things simple at the same time. It might not fit all the possible applications but it might be a huge help when creating a Flash web site that needs a lot of scrolling ( maybe even make a scrolling web site ).

Kind regards,
Biro Barna

Hi everyone,

My name is Biro Barna and I’m writing from Romania, this is my first WebLog ( ever ) and I can say that I’m really excited. I’m starting this blog not only to publish stuff that I consider “worth posting” but to publish some of my own applications ( code snippets and other stuff and I do / like doing ), maybe even write a few tutorials on different topics. Most of my “personal posts” will be covering Flash, Flex and ActionScript 3.0 but I’ll happily start posting about Photoshop, Illustrator, After Effects or any other software if any of you guys is interested in such technologies or just have a random debates on whatever you guys consider interesting.

Hopefully, this will be a fun place and a place where people can find solutions for their problems and maybe ask for help and of course a place where we can discuss all kind of topics. I’m looking forward to hearing from you guys/girls and I’ll try to be as helpful as possible.

Please keep the discussions civilized.

Kind regards,
Biro Barna