=================================
=================================
=================================
//플래시 빌더 프리로더~~~
플래시 빌더 프리로드 시: [Frame(factoryClass="psjproj.common.CPreloader")]
이런식으로 등록해준다는거 잊지 마세요~!
출처: http://pixelpaton.com/?p=4642
Simple preloader for AS3 Flash Builder projects
30NOV
Here’s a method for creating a preloader in Flash Builder. It uses ‘Frame Injection’ and I’ll be the first to admit I barely understand what it’s doing, so google it if you want more information. The beauty of this method is you can add a preloader to your swf with a simple line of code and a variable change.
It will display a simple bar in the top left of your swf, that looks like this:
Here’s a demo of it in action: http://pixelpaton.com/demo/preloaderExample/
Here’s the src files: http://pixelpaton.com/demo/preloaderExample/preloader.zip
If the class detects the movie is already loaded (because it’s cached) it will skip the preloading and jump straight to initialising the main document class. The also means you won’t see it working if you work with the file locally.
This is a VERY simple example, usually I make it a little more interesting. Adding in text to show the percentage and using graphics to spice things up. I’ve intentionally left this very minimal and simple.
I have setup a class name ‘Preloader’ which needs to be injected just before the constructor of the Main document class your wanting to preload. Here’s an example of my main document class with the frame injection in place.
| package { import flash.display.MovieClip; import flash.events.Event; // THIS NEXT LINE IS THE IMPORTANT ONE [Frame(factoryClass="preload.Preloader")] public class MyProject extends MovieClip { public function MyProject() { addEventListener(Event.ADDED_TO_STAGE,addedToStage) } private function addedToStage(event:Event):void{ removeEventListener(Event.ADDED_TO_STAGE,addedToStage) trace("Project is ready to go!") } } } |
Note with this, there is an ADDED_TO_STAGE event listener, which is important as the main document won’t have a reference to the stage until this point.
The preloader class currently sits in the main source directory, you probably want to refactor it elsewhere depending on your project setup.
VERY IMPORTANT … You need to put the name of your Main class into the variable ‘mainClassName’
In my main document class name is “MyProject”, so note on line 19 of Preloader, the name of the document class as a string. You will have to change this variable to match your main document class.
And here’s the code for the preloader itself:
| package { import flash.display.DisplayObject; import flash.display.MovieClip; import flash.display.Shape; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.utils.getDefinitionByName; public class Preloader extends MovieClip { public function Preloader() { trace("preloader") addEventListener(Event.ADDED_TO_STAGE, onAddedToStage); stop(); } public var mainClassName:String = "MyProject" private var _firstEnterFrame:Boolean; private var _preloaderBackground:Shape private var _preloaderPercent:Shape; public function start():void { _firstEnterFrame=true; addEventListener(Event.ENTER_FRAME, onEnterFrame); } private function onAddedToStage(event:Event):void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); stage.scaleMode=StageScaleMode.SHOW_ALL; stage.align=StageAlign.TOP_LEFT; start() } private function onEnterFrame(event:Event):void { if (_firstEnterFrame) { _firstEnterFrame=false; if (root.loaderInfo.bytesLoaded >= root.loaderInfo.bytesTotal) { dispose() run() } else { beginLoading(); } return; } //trace(root.loaderInfo.bytesLoaded + "/" + root.loaderInfo.bytesTotal) if (root.loaderInfo.bytesLoaded >= root.loaderInfo.bytesTotal) { dispose() run() } else { var percent:Number=root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal; updateLoading(percent); } } // this function may never be called if the load is instant private function updateLoading(a_percent:Number):void { _preloaderPercent.scaleX = a_percent } // this function may never be called if the load is instant private function beginLoading():void { trace("begin Loading") _preloaderBackground = new Shape() _preloaderBackground.graphics.beginFill(0x333333) _preloaderBackground.graphics.lineStyle(2,0x000000) _preloaderBackground.graphics.drawRect(0,0,200,20) _preloaderBackground.graphics.endFill() // _preloaderPercent = new Shape() _preloaderPercent.graphics.beginFill(0xFFFFFFF) _preloaderPercent.graphics.drawRect(0,0,200,20) _preloaderPercent.graphics.endFill() // addChild(_preloaderBackground) addChild(_preloaderPercent) _preloaderBackground.x = _preloaderBackground.y = 10 _preloaderPercent.x = _preloaderPercent.y = 10 _preloaderPercent.scaleX = 0 } private function dispose():void { trace("dispose preloader") removeEventListener(Event.ENTER_FRAME, onEnterFrame); if (_preloaderBackground){ removeChild(_preloaderBackground) } if (_preloaderPercent){ removeChild(_preloaderPercent) } _preloaderBackground = null _preloaderPercent = null } private function run():void { nextFrame(); var MainClass:Class=getDefinitionByName(mainClassName) as Class; if (MainClass == null) { throw new Error("AbstractPreloader:initialize. There was no class matching that name. Did you remember to override mainClassName?"); } var main:DisplayObject=new MainClass() as DisplayObject; if (main == null) { throw new Error("AbstractPreloader:initialize. Main class needs to inherit from Sprite or MovieClip."); } addChildAt(main, 0); } } } |
There may be better way of doing this, leave a comment to add your input.
public var mainClassName:String = "MyProject" // 이부분에 현자 자신의 메인클래스 이름을 넣으면 됩니다.
=================================
=================================
=================================
출처: (여기)
//위에 예제를 좀 고쳐서 수정해 보았습니다.
package btviewer.common
{
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.display.Shape;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.text.AntiAliasType;
import flash.text.TextField;
import flash.text.engine.TextLine;
import flash.utils.getDefinitionByName;
public class CPreloader extends MovieClip
{
public function CPreloader()
{
trace("preloader")
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
stop();
}
public var MODE_BAR:int = 0;
public var MODE_PER:int = 1;
public var _mode:int = MODE_PER;
public var mainClassName:String = "BTViewer"
private var _firstEnterFrame:Boolean;
private var _preloaderBackground:Shape;
private var _preloaderPercent:Shape;
private var _text:TextField = null;
public function start():void {
_firstEnterFrame=true;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onAddedToStage(event:Event):void {
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
stage.scaleMode=StageScaleMode.SHOW_ALL;
stage.align=StageAlign.TOP_LEFT;
start()
}
private function onEnterFrame(event:Event):void {
if (_firstEnterFrame) {
_firstEnterFrame=false;
if (root.loaderInfo.bytesLoaded >= root.loaderInfo.bytesTotal) {
dispose()
run()
} else {
beginLoading();
}
return;
}
//trace(root.loaderInfo.bytesLoaded + "/" + root.loaderInfo.bytesTotal)
if (root.loaderInfo.bytesLoaded >= root.loaderInfo.bytesTotal) {
dispose()
run()
} else {
var percent:Number=root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal;
updateLoading(percent);
}
}
// this function may never be called if the load is instant
private function updateLoading(a_percent:Number):void //이부분 수정 http://202psj.tistory.com/521
{
//_text.text = a_percent+"%";
var tmp:int = a_percent*100;
_text.htmlText = "<font size='25' color ='white'>"+(tmp)+"% Loading.."+"</font> ";
_preloaderPercent.scaleX = a_percent;
}
// this function may never be called if the load is instant
private function beginLoading():void {
trace("begin Loading")
_preloaderBackground = new Shape();
_preloaderBackground.graphics.beginFill(0x333333);
_preloaderBackground.graphics.lineStyle(2,0x000000);
_preloaderBackground.graphics.drawRect(0,0,200,20);
_preloaderBackground.graphics.endFill();
//
_preloaderPercent = new Shape();
_preloaderPercent.graphics.beginFill(0xFFFFFFF);
_preloaderPercent.graphics.drawRect(0,0,200,20);
_preloaderPercent.graphics.endFill();
//
addChild(_preloaderBackground);
addChild(_preloaderPercent);
_preloaderBackground.x = _preloaderBackground.y = 10;
_preloaderPercent.x = _preloaderPercent.y = 10;
_preloaderPercent.scaleX = 0;
_text = new TextField(); http://이부분 수정 . 202psj.tistory.com/521
_text.x = 215;
_text.y = 185;
_text.textColor = 0xFFFFFFFF;
_text.antiAliasType = AntiAliasType.ADVANCED;
_text.text = "";
addChild(_text);
}
private function dispose():void {
trace("dispose preloader")
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
if (_preloaderBackground){
removeChild(_preloaderBackground)
}
if (_text){
removeChild(_text);
}
if (_preloaderPercent){
removeChild(_preloaderPercent)
}
_preloaderBackground = null
_preloaderPercent = null
_text = null;
}
private function run():void {
nextFrame();
var MainClass:Class=getDefinitionByName(mainClassName) as Class;
if (MainClass == null) {
throw new Error("AbstractPreloader:initialize. There was no class matching that name. Did you remember to override mainClassName?");
}
var main:DisplayObject=new MainClass() as DisplayObject;
if (main == null) {
throw new Error("AbstractPreloader:initialize. Main class needs to inherit from Sprite or MovieClip.");
}
addChildAt(main, 0);
}
}
}
=================================
=================================
=================================
출처: http://blog.yoz.sk/2011/01/using-metadata-frame-for-preloader/
Using Metadata Frame for a Preloader
This article was sleeping in my drafts for a while, and I am happy I managed to finish it today. There are multiple ways to create preloader for your ActionScript applications with flex compiler. The easiest and my prefered way is to use Frame metadata.
This metadata is a hint to the compiler that the class containing the metadata would like to be bootstrapped by the cited factory. In other words, when you build an application based on mx.core.Application, that isn’t actually the “root” class of the SWF. The root class is actually a compiler-generated subclass of mx.managers.SystemManager (Modular Applications)
Using it as a preloader is very easy thing, because you can apply it on your existing projects without almost any intervention with the original code. Open you main application class and add Frame metadata before class definition:
| [Frame(factoryClass="sk.yoz.myapp.Preloader")] public class MyApp extends Sprite { public function MyApp(preloader:Preloader) { ... |
What it does is, that your class is not manufactured by default but it is waiting until factory class does it. In our case manufacture class is a preloader.
| package sk.yoz.myapp.preloader { import flash.display.Sprite; import flash.display.StageAlign; import flash.events.Event; import flash.events.ProgressEvent; import flash.utils.getDefinitionByName; public class Preloader extends Sprite { public function Preloader() { super(); stage.align = StageAlign.TOP_LEFT; updateProgress(); addEventListener(Event.ENTER_FRAME, updateProgress); stage.addEventListener(Event.RESIZE, updateProgress); loaderInfo.addEventListener(ProgressEvent.PROGRESS, updateProgress); loaderInfo.addEventListener(Event.COMPLETE, onComplete); } private function updateProgress(... rest):void { trace(loaderInfo.bytesLoaded / loaderInfo.bytesTotal); } private function onComplete(event:Event):void { removeEventListener(Event.ENTER_FRAME, updateProgress); stage.removeEventListener(Event.RESIZE, updateProgress); loaderInfo.removeEventListener(ProgressEvent.PROGRESS, updateProgress); loaderInfo.removeEventListener(Event.COMPLETE, onComplete); var app:Class = getDefinitionByName("MyApp") as Class; addChild(new app(this)); } } } |
Very important thing to notice here is, that your MainApp class instance does not have stage property available until its added on stage. So you can not access stage property directly in constructor but you have to define event handler for Event.ADDED_TO_STAGE.
Where to go from here:
- The Flex Non-Docs
- maashaack – ActionScript 3 framework, tools, libraries and utilities
- AS3 Metadata Tags
- Preloaders in AS3
=================================
=================================
=================================
출처: http://flashfriend.tistory.com/1057
조금 반대의 이야기를 하며 시작을 하겠습니다.
SWF는 본래 일반 동영상처럼 스트리밍방식으로 재생 할 수 있습니다.
100%다 다운로드 되지 않아도, 앞부분부터 다운로드해가며 다운로드 된만큼 재생 할 수 있다는 뜻 입니다.
하지만 특이한 점이 있는데, 그렇게 되지 않는 경우가 많다는 것이에요.
당신이 어떤 플래시를 만들어 왔느냐에 따라서 스트리밍처럼 보일 수도 있고, 전혀 아닌 것처럼 보일 수도 있습니다.
보통은
플래시로 순수 에니메이션을 만든 경우에는 스트리밍처럼 재생이 되고,
게임을 만든 경우에는 스트리밍이 아닌 것처럼 실행이 되었을 것입니다.
이제부터는 플래시라고 하면 후자의 경우만을 다룰 것입니다.
어느 정도 용량이 작은 경우에는 상관 없지만
플래시의 용량이 큰 경우, 플래시가 100% 다운로드 되기 전에는 웹페이지에 아무것도 뜨지 않는 것처럼 보입니다.
대략적으로, 용량이 5M정도라면 5초정도 기다려야 하는 경우도 있습니다.
개발자는 이러한 점이 마음에 들지 않는 경우 프리로더를 만듭니다.
여기서 프리로더란 플래시가 100%다운로드 되지 않아도,
먼저 화면에 표시 된 다음, 몇 %가 다운로드 되는지 유저에게 알려주는 것을 말합니다.
플래시게임 좀 해봤다면 많이 보았을 것입니다.
국내 아마츄어들이 만든 플래시게임에는 대부분 프리로더가 없지만, 하지만 외국인들이 만든 플래시게임에는 대부분 있습니다.
프리로더를 2가지로 구분해 보겠습니다.
첫번째는 용량이 작은 SWF 1개를 올린 다음, 다른 용량이 큰 SWF를 용량이 작은 SWF가 로드하는 것이고,
두번째는 그냥 용량이 큰 SWF 1개를 올리는 경우 입니다.
SWF가 다른 SWF를 로드하는 경우에는 Loader 클래스를 이용하여 어렵지 않게 구현 할 수 있습니다.
처음에는 contentLoaderInfo 를 사용하는 것이 어색할 수 있는데,
Loader 를 사용하시다보면 익숙해질 것 입니다.
두번째는 SWF 자기자신에게 progress 이벤트를 적용한 경우 입니다.
SWF도 사실 MovieClip 클래스이기 때문에 위의 코드를 만들 수는 있습니다.
그런데 실제로 실행해보면 잘 작동 하지 않습니다.
문제가 여기서 발생하는 것이죠.
( 액션 2.0에서는 위의 방식으로 만들 수 있었다고도 한 것 같은데, 여기선 3.0만 다루므로 중요하지 않습니다. )
이야기 했듯이 용량이 큰 SWF는 다운로드가 되지 않으면 웹페이지에 표시 되지 않았다가, 다운로드가 완료되면 나타납니다.
따라서 화면에 나타나지도 않는 SWF가 프리로더를 표시할 수 있을리 만무합니다.
대략적으로 80~100% 정도 다운로드 되었을때 SWF가 나타나는 데요,
이것을 보면 SWF가 100%다운로드되야 나타는건 아닌 것 같습니다. 뭔가 있겠죠?
프리로더를 만든 이유는 다운로드되는 것을 유저에게 보여주기 위해서인데, 이래서는 실패한 프리로더라고 할 수 있습니다.
해결 방법은 있습니다.
다음 강좌를 봐주세요.
출처: http://flashfriend.tistory.com/1058
자, 프리로더에 관한 두번째 강좌입니다.
이번 강좌에서는 괜찮은 기능을 하나 소개하겠습니다.
우리가 프리로더를 만들었는데, 이것이 작동하는지 볼려면 웹에 올려야 실험 해야 할 것 입니다.
하지만 '대역폭 프로파일러(Bandwidth Profiler)'를 사용하면 오프라인 상에서도 가상적으로 웹에 올려진 것처럼 실험 해 볼 수가 있습니다.
먼저 테스트 플레이를 해주세요.
그러면 실행창이 뜹니다.
View(보기)에서 Bandwidth Profiler(대역폭 프로파일러)를 클릭해 주시면 됩니다.
다운로드 되는 가상의 속도( 인터넷 속도) 를 설정해 줍니다.
프리로더를 느리게 보고 싶다면 수치값을 낮게 잡으면 되겠지요.
자신이 원하는 속도를 설정하면 되는데요,
저는 현재 SWF에 아무것도 없고 액션만 몇줄 있기 때문에 용량이 아주 적었습니다.
그래서 가장 낮은 속도인 14.4( 1.2KB/s )로 해야 다운로드 되는 과정을 몇초동안 볼 수 있었습니다.
그런 다음 Simulate Download( 그냥 테스트플레이하고 같습니다. )를 누르면 다운로드 되는 과정이 보이는 것이지요.
이것을 통해 웹에 SWF를 올리지 않고도, 프리로더를 실험해 볼 수 있게 되었습니다.
다음 강좌에서는 실제로 문제가 해결된 프리로더를 만들고, 이 프로파일러의 표를 통해서 다운로드 되는 과정을 보도록 합시다.
출처: http://flashfriend.tistory.com/1059
자, 이제 부터 본격적으로 만들어 보도록 합시다.
일단 당신은 어느정도 용량이 되는 소스( mp3 같은 것이 좋을 듯 하네요)를 라이브러리에 넣어 주세요.
액션은 현재는 이것이면 충분합니다.
프로파일러도 열어 주세요.
그리고 실행 하면...... 음 뭔가 이상하군요.
출력값이 바로 1 이 나와버렸네요.
여기서 1은 100%를 말합니다.
0% 부터 천천히 올라가야 하는데 말이지요?
다시 프로파일러를 봅시다.
저기서 저 막대기는 로드한 용량의 크기를 말합니다.
막대기 개수는 프레임 개수를 말합니다.
1프레임밖에 없으니 막대기가 1개인 것은 맞는데, mp3를 2개나 넣었는데 겨우 1KB 네요?
곰곰히 생각해 봤더니, export for ActionScript( 액션스크립트로 내보내기 ) 가 안되어 있었군요.
여기서 한가지 지식을 설명하겠습니다.
라이브러리에 등록되어 있더라도, 사용하지 않는 소스는 SWF용량에 포함되지 않는다. 는 것입니다.
하지만 Export for ActionScript 를 하면 순간 그 소스는 SWF용량에 포함이 됩니다.
그렇다면,
만약 Export for ActionScript 하지 않고, 그냥 프레임 속성에서 사운드를 사용한 경우는 어떻게 될까요?
무비클립도 마찬 가지 입니다.
무비클립을 Export for ActionScript 하지 않고 그냥 프레임에 배치한 경우에는 어떻게 될까요??
일단 사용이 한 것이므로, 용량에 당연히 포함되긴 하겠지요?
좀 더 생각해 봅시다.
제가 첫번째 강좌에
SWF로 순수 에니메이션을 만든 경우 스트리밍 방식이 잘 된다고 하였습니다.
그 이유가 바로 이것 입니다.
만약 무비클립을 3프레임에 배치 했다면,
그 무비클립은 SWF가 3프레임에 오기전까지는 로드가 되지 않습니다.
사운드도 마찬가지로 사운드가 5프레임부터 재생이 된다면, 5프레임이 되기 전까지는 SWF는 사운드를 로드 하지 않습니다.
그러므로 스트리밍이 될 수 있습니다.
하지만 Export for ActionScript 를 해버리면, 1프레임에 로드가 되어 버립니다.
게임을 만들면 스트리밍이 되지 않는 이유가 바로 이것이었던 것입니다.
1개만 더 설명합니다.
Export for ActionScrpit 아래에 있는 Export in frame 1 ( 1프레임으로 내보내기) 은 무엇을 이야기 하는 것일까요?
저 말은 바로
Export for ActionScript 를 하더라도, 1프레임에서 로드되지 않도록 할 수 있다는 뜻 입니다.
만약 Export in frame 1의 체크를 해제 할 경우.
1프레임에서 로드되지 않습니다.
그럼 체크 안하면 될 것 같은가요?
애석하게도 그럴 수 없습니다.
어디까지나 Export for ActionScript를 했으므로, 어느 프레임에서든지 액션으로 해당 클래스를 사용하게 됩니다.( new mp3... ),
그러면 설사 Export for frame 1에 체크를 해제했더라도, 1프레임에서 로드가 됩니다.
진짜 어처구니 없는 일이 아닐 수 없지요.
대체 저 체크박스는 왜 만들어 놓았단 말일까요?
mp3 2개를 모두 액션스크립트로 내보내기 하고, 1프레임으로 내보내기도 체크 합니다.
그런 다음 실행해보면 1프레임에서 로드하는 용량이 상당히 늘어 난 것을 확인 할 수 있습니다.
제 그래프에서는 약 1.5M 정도 되는 군요.
그리고 1프레임에 만들어 져있는 프리로더 액션은 여전히 1 만을 반환 합니다.
하지만 걱정 마세요.
이제 마지막 필살기를 사용하여 모든 것을 해결하여 봅시다.
publish setting (제작설정) 에서 액션스크립트 설정 패널로 들어 갑니다.
그냥 Properties 패널에서도 들어갈 수 있습니다. 아무쪽으로나 들어 가세요.
그러면 저기에 Export classes in frame 에 1 이라고 써진게 보입니다.
그러면 저기에 Export classes in frame 에 1 이라고 써진게 보입니다.
그러면 저기에 Export classes in frame 에 1 이라고 써진게 보입니다.
2로 바꾸면 되겠군요!!
3이나 4도 됩니다. 1만 아니면 되는 거에요.
그런 다음, 라이버르리의 사운드 심볼 속성에 들어가보면
Export in frame 1이
Export in frmae 2으로 바뀐 것이 보이실 것입니다.
두번째 프레임에 액션을 적어 주세요.
여기서 라이브러리의 소스들을 사용합니다.
그런 다음 실행을 해봅시다.
프로파일러에서 두번째 프레임으로 사운드의 용량들이 옮겨 간 것이 보이십니까?
그리고 프리로더의 액션이 정상적으로 작동된 것이 보이시나요?
( 화면이 길어서 잘렸는데 0.01 부터 천천히 올라간 수치 입니다. )
| [ 최종 정리 ] 1. 프레임에는 프리로더와 관계된 액션과 최소한의 소스만 남겨 둔다. 2. 나머지 소스는 모두 두번째 혹은 그 다음의 프레임 부터 배치및 사용되어야 한다. 3. 액션설정에서 Export classes in frame 의 값을 2 이상으로 한다. 4. 1 프레임 에서 stop 되어야 한다. 5. 1 프레임의 프리로더 액션에서 100% 다운이 완료되면 다음 프레임으로 gotoAndPlay 하면 된다. |
이렇게 SWF가 자기자신의 프리로더를 만드는 방법과, 라이브러리의 소스들을 어떻게 로드하는지를 알아 보았습니다.
=================================
=================================
=================================
출처: http://flashfriend.tistory.com/1060
*
로드 완료된 자료는 임시저장 폴더에 저장됩니다.
따라서 SWF의 프리로더액션은 처음에 한번 실행되고,
그 다음부터는 곧 바로 100% 넘어가게 됩니다.
특정 액션이나 동작은 ( 그것이 enterFrame과 연동된다 거나 )
처음에 0% 부터 로드되는 경우와 바로 100%로 넘어가는 경우에 다르게 작동할 수도 있으니 이 점을 유의해야 합니다.
*
Loader로 로드하는 자료 뿐 아니라,
URLLoader로 로드 하는 자료도 한번 로드한 자료는 임시저장 폴더에 저장 됩니다.
*
URLRequest 의 경로 뒤쪽에 ? 와 숫자를 1개 붙이면 임시저장폴더에 저장되어 있더라도 다시
처음부터 로드를 합니다.
이것은 사실 URLReqeust 에 변수를 붙여서 보내는 것인데요.
PHP등을 다루어 보셨다면 사용할 수 있습니다.
경로뒤에 ?3 을 붙여서 한번 로드를 하면, 처음엠 0%부터 로드하지만 그 다음부터 또 ?3으로 로드하면 임시저장폴더에서 불러 옵니다.
하지만 숫자를 ?4 로 바꾸면 다시 0% 부터 불러옵니다.
계속 실행할때마다 0% 부터 로드하게 하고 싶으면 랜덤으로 변수를 붙이도록 합시다.
*
TLF 텍스트가 포함되어 있다면 일부 소수의 유저들에게서 알수 없는 방식으로 로드가 작업에 오류가 날 수 있습니다.
*
메타 태그 Embed 로 포함되는 소스는 프리로딩 되게 할 수 없습니다.
어느 프레임에서 Embed 하든지 , 무조건 1프레임에서 로드 됩니다.
Embed하는 SWF에서 자체적으로 프리로더를 만들어도 그 프리로더는 작동하지 않습니다.
*
Embed 되거나 Loader로 불러오는 SWF의 배경색은 그 SWF를 불러온 SWF의 배경색을 따릅니다.
frameRate 도 마찬가지 입니다.
*
Loader로 불러오는 SWF는 처음에 실행될때 stage 값을 같지 못하여 오류가 날 수
있습니다.
그러한 경우 SWF를 로드하기 전에 먼저 Loader를 addChild 해놓으면 해결 됩니다.
=================================
=================================
=================================
출처 : http://cafe.daum.net/flASh/8ncT/17?docid=1Dtjj8ncT1720101116171338
contentLoaderInfo 속성은 다른 SWF파일이나 이미지파일을 불러올 때 사용되는 Loader클래스의 인스턴스 속성으로 사용되며 loaderInfo 속성은 DisplayObject(표시객체) 클래스의 인스턴스 속성으로 사용된다.
※ Loader클래스의 인스턴스 또한 표시객체이므로 loadInfo 속성을 사용할 수 있다. 하지만 표시객체의 속성으로 contentLoaderInfo 속성은 사용할 수 없다.
contentLoaderInfo는 Loader 인스턴스(예:myLoader)에 의해 로드되는 객체(다른 SWF파일이나 이미지 파일(예:image.jpg) 등)의 정보를 담고 있는 LoaderInfo 클래스의 객체를 반환한다. 따라서 trace(myLoader.contentLoaderInfo.content)라고 코딩하면, myLoader에 의해 로드되는 객체는 image.jpg이므로 '[object Bitmap]'이 출력된다.
loaderInfo는 자신(표시객체-예:빨간원)을 로드한 SWF파일(불러오는 SWF파일이 아님)의 정보를 담고 있는 LodaerInfo 클래스의 객체를 반환한다. 따라서 trace(빨간원.loaderInfo.content)라고 코딩하면, 빨간원을 로드한 SWF파일의 content이므로 '[object MainTimeline]'이 출력된다.
| flash.display 패키지에 있는 Loader 클래스의 속성 | |
| content | |
| contentLoaderInfo | 로드중인 객체(SWF나 이미지 등)의 정보를 담고 있는 LoaderInfo 객체를 반환 |
| flash.display 패키지에 있는 DisplayObject 클래스의 속성 | |
| alpha/cacheAsBitmap/heigth/width/heigth/mask 등등 | |
| loaderInfo | 표시객체가 속한 루트SWF파일의 로딩 정보가 포함된 LoaderInfo 객체를 반환 |
■ LoaderInfo 객체의 용도를 나타낸 다이어그램
flash.display 패키지에 있는 LoaderInfo 클래스는 로드된 SWF 파일 또는 로드된 이미지 파일에 대한 정보를 제공하는데, 로드 진행률, 로더의 URL 및 로드된 내용, 해당 미디어의 총 바이트 수, 미디어의 공칭 높이 폭이 포함된다.
■ LoaderInfo 클래스의 속성 몇 개
| Public 속성 | 설명 |
| bytesLoaded | 로드된 바이트 수 |
| bytesTotal | 전체 바이트 수 |
| content | 로드된 객체 |
| width | 로드된 내용의 너비 |
| height | 로드된 내용의 높이 |
| url | 로드 중인 미디어의 URL |
LoaderInfo 객체에 액세스하는 두 가지 방법은 앞서 언급한 것처럼, Loader 객체의 contentLoaderInfo 속성이나 표시객체의 loaderInfo 속성을 통해서이고 Loader 객체를 사용하여 SWF파일이나 비트맵 등의 표시 객체를 로드할 때 표시 객체의 loaderInfo 속성은 Loader객체의 contentLoaderInfo 속성과 같다.
trace(표시객체.loaderInfo) //출력: [object LoaderInfo]
trace(로더.contentLoaderInfo) //출력: [object LoaderInfo]
그리고 SWF파일의 기본 클래스 인스턴스에 Loader 객체가 없으므로 loaderInfo 속성이 SWF파일 기본 클래스 인스턴스의 LoadInfo에 액세스할 수 있는 유일한 방법이다.
또한 LoaderInfo 클래스의 상속관계는 LoaderInfo → EventDispatcher → Object 이므로 아래와 같이 EventDispatcher의 Public 메서드 중 하나인 addEventListener를 사용할 수 있다.
사진로더.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(evt:Event):void {
//
}
다음은 loaderInfo 속성과 contentLoaderInfo 속성을 사용한 예제이다. 스테이지에는 표시객체인 '빨간원'무비클립이 하나 놓여 있다. 주석처리한 부분을 참고.
다음은 LoaderInfo 객체의 속성들의 사용 예이다.
실행 결과는 아래와 같다.
############ 시작##########################
file:///E|/loaderInfo.swf
############### loaderInfo ###################
loaderInfo.url: file:///E|/loaderInfo.swf
loaderInfo.bytesLoaded: 1338
loaderInfo.bytesTotal: 1338
loaderInfo.content: [object MainTimeline]
loaderInfo.width: 800
loaderInfo.height: 600
############### contentLoaderInfo ###################
loaderInfo.url: file:///E/image.jpg
loaderInfo.bytesLoaded: 817220
loaderInfo.bytesTotal: 817220
loaderInfo.content: [object Bitmap]
loaderInfo.width: 1024
loaderInfo.height: 768
=================================
=================================
=================================
출처: http://donxu.tistory.com/49
플래시 파일의 용량이 클 경우에 웹에서 플래시를 조금씩 받아오게 된다. 그런데 다운로드 속도가 플레이 속도보다 느리다면 플래시 화면이 끊기거나 음성과 위치가 맞지 않는 등 많은 문제를 유발할 수 있다.
그래서 사용하는 것이 프리로더(preloader)이다.(플래시를 플레이하기 전에 미리 로딩을 다 해놓는 것이다.)
이번에 홈페이지를 하나 만들게 됐는데, 만들다보니 swf파일의 크기가 어느정도 크다고 판단되었기에 프리로더가 필요하게 되었다.
그런데 나는 as1.0 , as2.0으로는 예전에 프리로더를 만들어봤지만, as3.0으로 작업을 한 것은 이번이 처음이었다.
그래서 간단한 기능 하나를 하는데에도 약간씩 이해 못할 문제들이 발생하곤 했는데 그 중 하나가 프리로더였다.
먼저 플래시에서 장면(Scene)을 하나만 이용한다고하면 프리로더는 1프레임에 위치하게 된다. 프리로딩하는 시간동안 사용자가 지루해 할 것 같다면 가벼운 에니메이션을 1프레임에 무비클립을 이용해서 위치할 수도 있고, 얼마나 로딩했는지 퍼센트 또는 progress bar로 현재 로딩 상황을 보여줄 수도 있다.
이러한 부분은 약간 부가적이라고도 생각할 수 있는 부분이지만, 사용자가 로딩하는 시간이 지겨워서 웹 브라우저를 끄지 않도록 충분히 관심을 끌어야 한다.
그리고 또 중요한 것이 actionScript이다.
먼저 소스 코드를 살펴보도록 하자.
| stop(); /****************************************************************** ** 이벤트 핸들러 등록 ******************************************************************/ loaderInfo.addEventListener(ProgressEvent.PROGRESS, preloadingHandler); loaderInfo.addEventListener(Event.COMPLETE, preloadingCompleteHandler); /****************************************************************** ** 함수 정의 ******************************************************************/ function preloadingHandler(e : ProgressEvent) : void { var percent : int = int(e.bytesLoaded / e.bytesTotal * 100); loadedPercent.text = percent.toString() + "%"; if(e.bytesLoaded == e.bytesTotal) loaderInfo.removeEventListener(ProgressEvent.PROGRESS, preloadingHandler); } function preloadingCompleteHandler(e: Event) { loaderInfo.removeEventListener(Event.COMPLETE, preloadingCompleteHandler); gotoAndStop(2); } |
먼저 stop()을 이용해서 플래시 무비가 1프레임에서 멈추도록한다.(stop()을 하지 않으면 다음 프레임으로 넘어가서 프리로더가 제대로 동작하지 않을 것이다.)
그리고 loaderInfo라는 객체에 두개의 이벤트 리스너를 추가한다.
ProgressEvent.PROGRESS는 바이트를 로드할 때마다 호출되는 이벤트이다.
그래서 preloadingHandler()를 보면 로딩된 바이트를 퍼센트로 계산하여 loadedPercent라는 동적 텍스트에 값을 넣어준다. 그리고 종료 조건으로 로드된 바이트(e.bytesLoaded)와 전체 바이트(e.bytesTotal)가 같으면 현재 이벤트 리스너를 삭제한다.
Event.COMPLETE는 전체 바이트를 모두 로딩하면 호출된다.
그래서 여기에서는 자신의 이벤트 리스너를 삭제하고 2프레임으로 가서 play하도록 한다.
이렇게 하면 기본적인 프리로더가 만들어지는 것이다.
만약 더 화려한 프리로더를 만들고 싶다면 ProgressEvent.PROGRESS가 호출될때 등록한 이벤트 핸들러 함수에서 적절한 동작을 하도록 해주면 된다.
=================================
=================================
=================================
플래시 로딩화면이 왜 필요한거죠?? 저는 로딩화면 없이 보여지는 걸로 아는데~ 음.. 다른
홈페이지들을 보면 꼭 로딩화면이 있더라구요.. 로딩 화면이 꼭 필요하다면 그 로딩화면도
디자인해야 된다는 건데;.. 어떻게 하는건지.. 그리고 설정을 HTML에 옮길 때 하는건지..
이 로딩화면에 대한 궁굼증을 해결해 주십시오~~ ㅠㅜ
질문자 채택이 되지 않은 경우, 질문 최종 수정일 기준으로 15일 경과되어 추가 답변 등록이 불가합니다.
총 1개의 답변이 있습니다.
re: 플래시에서 로딩화면 있잖아요..
guss 답변채택률66.4% 2007.04.17 13:40
플래시에 로딩화면은 필수기능이 아닙니다.
플래시의 용량이 작은 경우는 필요없지만, 큰 사진이나 사운드 등 멀티미디어가 많이 들어간 플래시는 정상적으로 구동되기 위해서 로딩이 완료되야 하는데 (스트리밍 처럼 받으면서 구동이 안된다는 거죠) 이러한 로딩 시간을 사용자가 알 수 있도록 표시하는 것이 로딩화면이고 사용자를 배려한 기능으로 보시면 됩니다.
요즘은 인터넷속도라든가 컴퓨터의 성능이 좋아져서 SWF 파일을 받는데 오래 걸리지 않지만 예전에는 인터넷환경이 좋지 않았고 사용자 중엔 모뎀을 이용한 인터넷접속자도 많았습니다. 이런 사용자가 플래쉬를 다운받을 경우 로딩되기 전까지 빈 화면에서 기다리게 되는데 걸리는 시간도 모르고 혹시 사이트에 문제가 있는거 아니냐는 생각에 그냥 다른 곳으로 이동하는 일이 발생합니다. 이러면 그 사이트는 다시는 방문 안하죠 ^^;
플래시 로딩화면은 html에서 해주는 것은 아니고요~ 플래시 자체 action에서 preloading 기능을 이용합니다.
=================================
=================================
=================================
출처: http://blog.naver.com/darkcom7?Redirect=Log&logNo=140038679320
contentLoaderInfo
2.0 방식의 MovieClipLoader를 쓸떄 onLoadProgress 를 대체해서 찾다가
contentLoaderInfo 이넘을 알게 되었다.
이놈이 모냐하면 LoaderInfo라는 클래스 객체이다.
Loader객체에 속성으로 할당이 되어지는데 이놈이 로드하고있는놈의 모든 정보를
이쁘게 가지고 있다.
거기다가 ProgressEvent 클래스를 써서 로딩상황을 파악할수 있는것이다.
그래서 나온 3.0 코드는
import flash.net.URLRequest;
import flash.events.*
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("image1.jpg");
loader.load(url);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressH);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,Complet);
function progressH(e) {
var Load = e.bytesLoaded
var Total = e.bytesTotal
trace(int((Load/Total)*100));
}
function Complet(e) {
trace("완료");
this.addChild(loader);
}
[출처] contentLoaderInfo |작성자 우기
=================================
=================================
=================================
출처: http://blog.naver.com/ddandongne?Redirect=Log&logNo=90006381326
1. Loader 객체 소개
레퍼런스에 나오듯이요.
기존as 2.0에 사용했던 MovieClipLoader 객체 대신
as 3.0에서는
swf, jpg, png,gif와 같은 파일을 로딩하기 위한 객체로 알면 될것 같습니다.
2. 설명(prog_actionscript3.0.pdf 의 176 페이지에서)
휴.. 요거 이해하려고 래퍼런스를 수십번 본듯 ^^
import flash.display.*;
import flash.net.URLRequest;
import flash.events.Event;
// 객체 생성.
var objLoader:Loader = new Loader();
var strURL:String = "banana.jpg"
var objRequest:URLRequest = new URLRequest(strURL);
// 파일 로딩하기.
objLoader.load(pictURLReq);
// 이벤트 설정.
objLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
function imgLoaded(e:Event):void
{
....
}
먼저 예전 버젼에서는 로딩을 하려면 아래 처럼 타겟을 만든 후 했잔아요?
var objLoader:MovieClipLoader = new MovieClipLoader()
var movContent:MovieClip = createEmptyMovieClip("ins_Content", 100);
objLoader.loadClip(strURL, movContent)
objLoader.addListener(objListener);
비교할 부분은 타겟 객체를 만들지 않아도 된다는 점 ^^
음.. 이부분은 Loader를 사용하면 Loader가 미리 요 타겟을 내부에 미리
만들어 놓고 사용한다고 생각 하시면 될것 같구요.
미리 만들어논 객체이름이 바로 contentLoaderInfo 라는거 ^^
근데 contentLoaderInfo가 단순한 빈무비클립이 아니라
리스너 처리를 비롯해서 로딩하고 있는 요소에 대한 로딩 정보까지 얻을 수 있는
멋쮠 객체라는 거죠 ^^
3. loaderInfo, contentLoaderInfo ?
먼저 바로 아래 페이지에(177) 오타도 있더군요.
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
var ldr:Loader = new Loader();
var urlReq:URLRequest = new URLRequest("Circle.swf");
ldr.load(urlReq);
ldr.loadeeInfo.addEventListener(Event.COMPLETE, loaded);
addChild(ldr);
function loaded(event:Event):void {
var content:Sprite = event.target.content;
content.scaleX = 2;
}
여기에서 loadeeInfo -> loaderInfo인것 같아요.
근데 loaderInfo라 해도 아마 이걸 실행하시면
"TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다"
라는 에러가 날꺼에요.
이유는 loaderInfo는 Loader객체가 생성된 후에 바로 값이 설정되는게 아니라
로드하려는 파일이 로드가 된 후에 생성이 되는 거거든요.
그럼 에러가 나지 않도록 하려면? loaderInfo를 contentLoaderInfo로
수정을 하셔야 게죠
그리고 중요한 사실은
로딩이 완료되면
로드된 display object의 loaderInfo 프로퍼티는
Loader의 contentLoaderInfo 프로퍼티를 참조한다는거
즉,
dr.contentLoaderInfo == event.target.content.loaderInfo
(177 페이지에 있는 이미지의 뜻과 동일함)
요렇게 등식이 성립한다는 점 ^^
ㅋ 설명 해놓고 봐도.. 요상하네요.
이상입니다.
=================================
=================================
=================================
[출처] Loader객체와 loaderInfo, contentLoaderInfo와의 관계~|작성자 딴동네
_root.getBytesTotal() // 전체바이트 수
_root.getBytesLoaded() // 로딩된 바이트 수
_root.getBytesTotal() -_root.getBytesLoaded() // 남은 바이트 수
_root.m =_root.getBytesTotal()//전체바이트 수
this.onEnterFrame = function() {
_root.n =_root.getBytesLoaded()//로딩된 바이트 수
_root.b1= _root.m -_root.n//남은바이트수
_root.a1= Math.floor(_root.n/_root.m*100) //%
_root.bar._xscale=_root.a1
if(_root.a1==100)
gotoAndPlay("본무비",1);
}
출처: http://blog.daum.net/sdsphwg/6
as3.0 로딩바 만들기 (Root)
오늘은 루트 무비클립의 로딩바 만들기에 대해서 알아보겠습니다.
Now Loading...
로딩바 없으면 짜증나죠. 뭐, 그렇다고 1% 올라가는데 하염없는 시간을 필요로 하는것도 좀 거시기 하긴 하지만, 어쨌든 로딩바가 있기 때문에 보통의 하이퍼텍스트 미디어 보다는 당연히 용량이 클수밖에 없는 플래시를 사용자가 뜨길 기다리며 불안감에 휩쌓이지 않을수 있을겁니다.
프로그래밍은 숫자놀이 입니다.
로딩바 만들기 강좌를 볼 사람들이 액션스크립트 개발을 어느정도 하는 개발자일 리는 없으니깐, 원론적인 내용부터 살펴보도록 하죠.
일단 우리들이 바라보는 모니터 안의 그 모든것은 숫자로 구성되어 있습니다. 컴퓨터는 "숫자" 로 구성된다는 아주 당연한 말을 실제 프로그래밍에 익숙하지 않은 사람이 만들려 하다보면 잊어버리곤 하죠. 아주 어려운 게임이나 UI 를 만들던, 이런 아주 단순한 로딩바를 만들던 컴퓨터 프로그래밍은 "숫자놀이" 입니다.
그것을 증명할 수 있는 이야기를 하자면 우리가 바라보는 컴퓨터 안의 글자 역시 숫자입니다.
간단하고 재밌는 예제를 볼까요?
위의 예제는 영문자 "abcd" 의 문자 코드를 보고, 소문자를 대문자로 바꾸는 역할을 하는 코드입니다. 출력해보면 아래와 같은 결과가 나오죠.
이 코드를 만들어내기 위해선 플래시가 프로그래머에게 제공해줘야만 필수적인 기능이 있는데, 바로 "문자" 에 대한 "문자코드" 를 알려주는 기능입니다. F1 을 눌러서 String 에 관련된 메서드를 보면 되겠지만, 간단하게 설명을 하자면 charAt(f) 은 f번째에 해당하는 문자를 보여주는 역할을 하고, charCodeAt(f) 은 f번째에 해당하는 문자의 문자코드를 보여주는 역할을 합니다. a 같은 경우엔 97 이라는 문자코드를 가지고 있구요. 대문자 A 같은 경우엔 65 라는 문자코드를 가지고 있습니다.(이건 약속된 겁니다.) fromCharCode(n) 은 n에 해당하는 문자코드를 문자로 바꿔주죠.
이런 기능들을 통해서 프로그래머는 소문자->대문자 만들기를 만듭니다. 만일 문자코드가 정해져 있지 않다면, 그리고, charCodeAt() 이나 fromCharCode() 처럼 문자를 숫자로 만들거나, 숫자를 문자로 만드는 기능이 프로그래머에게 제공되지 않는다면 굉장히 복잡하게 되거나 심할 경우 만들기 불가능해지는 경우도 있겠죠.
즉… 프로그래밍을 해내가면서 잊지 말아야할 것은 플래시던 php 이던 프로그래밍은 기본적으로 숫자를 이용해서 무엇인가를 만드는 일이며, 그것을 만들수 있는 기능을 프로그래밍 도구는 제공해 준다는 것입니다.
숫자로 만들고, 도구는 숫자를 제공한다.
까막득하게 보이는 프로그래밍을 시작하면서 잊지 말아야 하는 절대적인 상식중에 하나입니다. 이것을 잊어버리면 프로그래밍은 아주 손쉽게 마법처럼 보여버리게 되죠. 인간이 하는 일중에서 초자연적인 마법은 없는데도 말이죠.
꽤 길게 이야기를 했는데, 이렇게 복잡한 이야기를 해야했던 이유를 차근히 알아나가도록 하죠.
로딩을 만들기 위해서 필요한 숫자
위에서도 말했듯 도구는 항상 프로그래머가 사용할 수 있는 숫자를 제공해 줍니다. (혹은, 숫자를 알아낼 수 있는 기본적인 기능을 가지고 있죠.) 그렇다면 로딩을 만들기 위해서 필요한 숫자는 무엇일까요?
일단 오늘 만들 로딩바는 "root" 즉, swf 자기 자신의 로딩을 만들기 위한 것이니 외부 무비클립이나 이미지 로딩에 대해서는 설명하지 않겠습니다.
로딩을 만들기 위해서 필요한 숫자는
1 . swf의 총 크기
2 . 로딩된 크기
가 되겠네요.
Swf 의 총 크기는 당연히 고정된 숫자여야 하겠죠. 로딩된 크기는 시간에 따라서 변해야만 하는 것이겠구요. 여기서 세번째 기능이 필요하겠네요.
3 . 변하는 시간에 따라서 코드를 반복실행 해줄 기능
일단 이 세가지 기능이 있다면 로딩만들기를 위한 기본적인 준비는 완료될 것 같네요.
이 세가지 기능은 당연히 플래시 라는 프로그래밍 도구가 제공을 해 줍니다. 제공을 안해준다면 플래시 개발자들이 로딩을 만들기 불편하겠죠. 플래시에서 F1 (도움말) 을 열어서 해당기능을 찾아볼까요? 레퍼런스 라는 것은 자신이 만들기 위한것을 위해서 도구가 어떤 기능을 제공해주는지 알아내기 위해서 항상 "자주!" 봐야 하는것입니다.
AS2.0 의 경우를 살펴보면
이렇게 getBytesTotal (총 용량) 과 getBytesLoaded (로드된 용량) 을 제공해주는 군요. 그리고, 시간별 반복을 위한 것으로는 예전 강좌중에서 onEnterFrame 이 있습니다. onEnterFrame 같은 경우엔 아래 링크에서 알아보도록 하세요.
http://log.ssen.name/entry/6-onEnterFrame…-시간을-지배하다
AS3.0 의 경우를 살펴볼까요? 저도 AS3.0 은 아직 익숙하지 않아서 좀 찾아봐야 할 것 같네요.
AS3.0 의 경우엔 좀 복잡하게 꼬여있네요.
MovieClip > stage:Stage > loaderInfo:LoaderInfo 에 bytesTotal 과 bytesLoaded 가 있군요.
시간이벤트의 경우엔 이번에 새로 생겼다는 Timer 를 사용해보도록 하겠습니다. AS2.0 의 경우엔 위에 적어놓은 onEnterFrame 에 대한 내용을 참고해주시고, AS3.0 의 Timer 같은 경우엔 따로 설명을 안할테니 알아서 공부해주세요. (뭐, 3.0 기본문법을 아시는 분이라면 사실 이 강좌를 볼 일도 없으시겠지만…;;;)
자… 플래시 프로그래밍 도구가 제공해주는 두가지 숫자와 시간이벤트를 알아냈으니 이제 요리를 시작해 볼까요?
기본 로딩 확인해 보기
일단은 AS2.0 으로 만들어보도록 하겠습니다. 일단은 로딩을 눈으로 확인하려면 용량이 어느정도 커야 하므로, 무비클립 안에 커다란 이미지를 넣도록 하죠. 제가 모니터 바탕화면으로 쓰려고 다운받아놓은 1920x1200 짜리 이미지를 한 10개 넣어두면 되지 않을까 싶습니다.
스테이지에 대빵 큰 그림을 잔뜩 넣었습니다.
라이브러리에 빵빵하게 들어가 있으니 시작해보도록 하죠.
일단은 간단하게 아래처럼 만들어보도록 하죠.
그러면
이런식으로 표시가 되게 되는데요. 우리가 만들고 있는것은 온라인에서 로딩되는것이 아니라서 loaded 의 변화를 눈으로 알수가 없습니다. 플래시에서 약간 조작을 해줘야 눈으로 확인이 가능합니다.
위처럼 다운로드 시뮬레이션을 눌러서 확인을 해볼까요.
이제 정상적으로 나오네요.
Percent 로 표시하기
로딩에 필요한 기능들을 추가해 보도록 할까요?
1 . 일단 숫자가 Percent 로 표시되게 해야겠죠. 기본적으로 로딩들은 100% 기준 숫자로 표현되니깐요.
2 . 로딩이 끝났을때 (100% 가 넘었을때) 어떠한 이벤트가 발생해야 합니다.
위와 같이 간단한 산수로 백분율을 만들어주고, if 조건문을 사용해서 percent 가 100 을 넘었을때 정지되는 이벤트를 만들어줬습니다. 컴파일 해보면…
이렇게 정상적으로 나오게 됩니다. (그림을 너무 많이 넣었나요… 한참 기다려야 했네요…;;;)
Display
자… 이제 로딩바를 만들기 위해서 필요한 기본적인 숫자는 모두 마련되었습니다. 그렇다면 이제 실제로 눈으로 볼 수 있도록 만들어봐야겠네요.
일단 기본적인 숫자를 모두 알아냈으니 Display style 은 여러가지로 만들수 있습니다. 뭐 아주 기본적인 막대기 스타일에서 부터, 원형스타일, 애니메이션 스타일 까지 다양한 스타일링이 가능하죠. 로딩바 만들기 백서를 만들것은 아니니 그냥 기본중에 기본인 막대기 스타일을 만들어보도록 하겠습니다.
무비클립을 조작할 수 있는 기능을 알아야 하겠습니다. 일단은 아주 간단한 _xscale 을 사용해보도록 하죠.
_xscale , _width 같이 무비클립의 크기조절을 위한 기능은 아래 링크에 설명이 되어있습니다.
http://log.ssen.name/entry/3-MovieClip-변화
일단은 스테이지에 간단하게 400px 짜리 무비클립을 만듭니다.
그리고, 링키지네임을 붙여줍니다. "load_mc" 라고 이름 붙여보도록 하죠
이렇게 무비클립을 만들었으니 이제 다시 코드로 돌아가보도록 할까요.
딱 두 줄 추가 했습니다. Load_mc 의 _xscale 속성에 기존의 percent 숫자를 연결시켰습니다.
영상이 아니라서 눈으로 확인할 순 없지만;;; 잘 돌아갑니다.
이제 저 로딩될때마다 변화하는 무비클립 위에다가 디자인을 입히면 기본적인 로딩바 만들기는 완료가 됩니다. _xscale 속성이 아닌 좀 더 스타일리쉬한 걸 만들기 위해서는 MovieClip 이나 여러가지 Display 관련 기능들을 사용해서 기존에 loaded , total , percent 숫자를 다르게 표현해야 하겠지만요… 어쨌든 기본적으로는 세가지 숫자만 있다면 로딩은 무엇이든 만들수가 있습니다.
프로그래밍은 숫자놀이 니까요…
숫자만 있다면 못만들건 없습니다.
AS3.0 버전 코드
ㅡ ㄴ ㅡ;;; 사실 AS3.0 을 사용하는 분한테 로딩바 만들기 코드를 보여주는것도 우습지만, 일단 적어놨으니 코드를 한번 짜보도록 하죠. AS3.0 은 기본적으로 프로그래밍 상의 효율성을 위해서 기능들이 굉장히 기능단위로 세분화 되어있습니다. 즉… 인간적인 코드는 아니죠. AS2.0 처럼 디자이너들이 사용하기 편하도록 인간중심의 코드가 아닌, 좀 더 기계에서 잘 돌아가고, 모듈화 시키기 편하도록 만들어진 언어이니 디자이너들 같이 프로그래밍에 대한 비중을 크게 느끼지 않는 파트라면 가능하면 2.0 을 사용하도록 하세요. 인간적인 언어를 사용하는게 편합니다.
근데… 사실 알고리즘이 어려운거지 이런 API 적인 문제는 50보 100보 차이일 뿐이라서 어짜피 AS2.0 이든 AS3.0 이든 별 차이 없습니다. 익숙해지는데 시간이 좀 차이가 나긴 하지만, 언어 익히는거야 거기서 거기죠. 어떻게 사용하는게 어려운거지...
저도 AS3.0 은 처음 짜보는 거라서 좀 버벅 거렸네요. Timer 에 사용된 새로운 이벤트 핸들링 방식은 좀 익숙하지 않아서 좀 헤맸군요. 내장된 플래시 플레이어에서 다운로드 시뮬레이션 할때
TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다.
at timer_fla::MainTimeline/timerHandler()
at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
at flash.utils::Timer/flash.utils:Timer::tick()
요런 에러가 뜨면서 timer 가 stop 이 안되던데 왜 그런건지는 잘 모르겠네요. 웹에 올리면 정상적으로 중지 되던데요. 이유 아시는 분 계시면 리포팅 좀 부탁드려요. ' ㅡ 'a
어쨌든 위의 코드는 AS2.0 버전 코드와 크게 다를게 없습니다. _xscale 이 scaleX 로 바뀌면서 0~100 의 숫자범위에서 0~1 의 숫자범위를 가지게 된거랑 enterFrame 대신 Timer 를 쓴거랑 bytesLoaded 같이 기존에 MovieClip 안에 있던 속성들이 세분화 되어서 분리된 것 빼고는 별게 없지요. 레퍼런스 찾느라고 잠깐 버벅이긴 했는데, 뭐 사용하는데 필요한 기능을 제공한다는 점에서는 AS2.0 이나 AS3.0 이나 같죠. 좀 위치랑 표현방식이 다를뿐...
마무리
어쨌든 간단한 내용을 굉장히 길게 써봤습니다. 프로그래밍을 해가는데 있어서 필요한 간단한 접근개념을 적었으니 다른것들도 이렇게 필요한 숫자를 제공하는 기능을 알기위해 레퍼런스를 조금씩 뒤져가면서 하다보면 예전보다는 좀 더 수월하게 작업하실 수 있을겁니다.
그럼 이만 백수는 물러갑니다… 할 일은 없고, 놀기도 지치고 하다보니 자꾸 강좌만 쓰게 되네요…
=================================
=================================
=================================
출처: http://ryofactory.tistory.com/25
| <embed ..........="" flashvars="title=Flash..." .....=""> |
플래시의 프리로더 역할을 하는 도큐먼트 클래스.
1. Maintimeline(this.root)에 ProgressEvent를 걸고 진행상황을 표시할 수 있다.
2. 플래시의 다운로드가 끝났을 경우 완료이벤트를 통해
HTML에서 입력된 flashVars 변수를 처리 할 수 있다.
추상클래스인 AFlashVarsLoader에는
| protected var flashVars:Object //flashVars 변수 정보를 저장하는 Object protected function update($rate:Number):void; // 다운로드 중일 때 다운로드 상황 업데이트 protected function init():void //다운로드 완료후 최초 실행 함수 |
와 같은 기본 속성과 메서드를 가지고 있다.
이걸 구상클래스에서 override하여 구현한다.
AFlashVarsLoader.as
코드 닫기
| /*----------------------------------------------------------------------------------- # Import Path: import scripts.AFlashVarsLoader; ------------------------------------------------------------------------------------- # Inheritance: AFlashVarsLoader -> Sprite # Implements: # Implementors: ------------------------------------------------------------------------------------- # Constructor: Abstract Class # Constant: # Element: # Method: # Event Constant: ------------------------------------------------------------------------------------- # Copyright : teatime2004@naver.com, blog.naver.com/teatime2004, teatime2.cafe24.com ------------------------------------------------------------------------------------- # UPDATE : 2010-04-16 ------------------------------------------------------------------------------------- # Created by myClass_as_v11.as Templetes (v1.0) -----------------------------------------------------------------------------------*/ package scripts { import flash.display.*; import flash.geom.*; import flash.events.*; import flash.utils.*; import flash.net.*; public class AFlashVarsLoader extends Sprite { //---------------------------- // Elements //---------------------------- // HTML에서 넘겨받은 변수&값 쌍의 정보 Object protected var flashVars:Object; //---------------------------- // Construnctor //---------------------------- /*** * Document Class 로만 사용된다. */ public function AFlashVarsLoader():void { super(); // MainTimeLine에 프로그레스 이벤트 등록한다. this.root.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler); // MainTimeLine에 완료 이벤트 등록한다. this.root.loaderInfo.addEventListener(Event.COMPLETE, completeHandler); } //---------------------------- // Method //---------------------------- /*** * */ //---------------------------- // Protected function //---------------------------- /*** * SWF가 로드 완료후 첫 호출 함수 */ protected function init():void { // 필요하면 오버라이드 코딩 return; } /*** * SWF가 로드중일 때 다운로드 상황($rate) 전달받아 업데이트 한다. * ($rate는 진행률을 0 ~ 1로 나타낸 값.) */ protected function update( $rate:Number=0.0 ):void { // 필요하면 오버라이드 코딩 return; } //---------------------------- // Private function //---------------------------- /*** * Progress Handler * 로딩 진행중일때 핸들러 */ private function progressHandler( $e:ProgressEvent ):void { var rate:Number = $e.bytesLoaded / $e.bytesTotal ; update(rate); } /*** * Complete Handler * 로딩완료 핸들러 */ private function completeHandler( $e:Event ):void { // HTML에서 넘겨진 falshVars 변수&쌍을 Object로 입력받는다. flashVars = LoaderInfo(this.root.loaderInfo).parameters; $e.target.removeEventListener($e.type, arguments.callee); this.root.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, progressHandler); init(); } //---------------------------- // Getter Setter //---------------------------- /*** * */ //---------------------------- // Event //---------------------------- /*** * 사용자 이벤트. */ } } |
코드 닫기
위 추상클래스를 상속받는 구상클래스 FlashVarsLoader에서는
update()메서드는 필요가 없어 override하지 않았다.
flashVars중 title속성을 텍스트에 뿌리고 tween을 실행하는 간단한 예제다.
본 블로그 타이틀 제목에 적용되었다.
FlashVarsLoader.as
코드 닫기
| /*----------------------------------------------------------------------------------- # Import Path: import scripts.FlashVarsLoader; ------------------------------------------------------------------------------------- # Inheritance: FlashVarsLoader -> AFlashVarsLoader -> Sprite # Implements: # Implementors: ------------------------------------------------------------------------------------- # Constructor: public class FlashVarsLoader extends AFlashVarsLoader # Constant: # Element: # Method: # Event Constant: ------------------------------------------------------------------------------------- # Copyright : teatime2004@naver.com, blog.naver.com/teatime2004, teatime2.cafe24.com ------------------------------------------------------------------------------------- # UPDATE : 2010-04-16 ------------------------------------------------------------------------------------- # Created by myClass_as_v11.as Templetes (v1.0) -----------------------------------------------------------------------------------*/ package scripts { import flash.display.Sprite; import flash.display.StageAlign; import flash.display.LoaderInfo; import flash.events.Event; import flash.text.TextField; import scripts.AFlashVarsLoader; import org.libspark.betweenas3.BetweenAS3; import org.libspark.betweenas3.easing.*; public class FlashVarsLoader extends AFlashVarsLoader { //---------------------------- // Elements //---------------------------- // Linkage MovieClip Class private var titMc:TitleText; // Linkage Class 내부에 있는 텍스트 인스턴스. private var titTxt:TextField; //---------------------------- // Construnctor //---------------------------- /*** * 생성자 */ public function FlashVarsLoader():void { super(); // 사용하지 않는 불필요한 마우스 이벤트는 끈다. 필요하면 제거 this.mouseChildren = this.mouseEnabled = false; stage.align = StageAlign.TOP_RIGHT; stage.frameRate = 60; } //---------------------------- // Method //---------------------------- /*** * */ //---------------------------- // Protected function //---------------------------- /*** * SWF가 로드 완료 될 때 */ override protected function init():void { // 오버라이드 코딩 titMc = new TitleText(); // Likage Class 생성 titTxt = titMc.titleTxt; // 내부에 있는 텍스트필드 titTxt.multiline = false; // Single라인 처리. // HTML FlashVars로 입력된 값을 읽는다. var titName:String; // flashVars의 title에 입력된 값이 없으면 기본값, 있으면 입력된 값으로 설정 titName = (flashVars.title == undefined) ? "ryo's Factory" : flashVars.title; // 텍스트에 입력된 문자열을 기록 setText(titName); addChild(titMc); // 추가 액션 doAction(); } public function setText($val:String):void { titTxt.htmlText = $val; var tw:int = titTxt.textWidth < 100 ? 100 : titTxt.textWidth + 8; stage.stageWidth = titTxt.width = tw; titMc.x = stage.stageWidth - tw; } public function doAction():void { // 스케일 트윈 BetweenAS3.tween(titTxt, // Target object {scaleX: 1.0}, // Parameter object (Destination value) {scaleX: 0.0}, // Parameter object (Source value) 1.0, // Duration Cubic.easeIn // Easing ).play(); } public function doAction2():void { // x좌표 트윈 BetweenAS3.tween(titTxt, // Target object {x: 0}, // Parameter object (Destination value) {x: -titTxt.x}, // Parameter object (Source value) 1.0, // Duration Cubic.easeOut // Easing ).play(); } //---------------------------- // Getter Setter //---------------------------- /*** * */ //---------------------------- // Event //---------------------------- /*** * 사용자 이벤트. */ } } |
코드 닫기
=================================
=================================
=================================
//기타관련 링크
=================================
=================================
=================================
'ADOBE > ActionScript' 카테고리의 다른 글
| 플래시 as3.0 보안과 플래시 리모팅 관련 (0) | 2020.09.21 |
|---|---|
| [AS3.0] Loader Class를 사용한 swf의 로드 (0) | 2020.09.21 |
| [AS] 플래시 as3.0 브라우져 액션스크립트 연동 관련 (자바스크립트 연동, asp, jsp, php 연동) (0) | 2020.09.21 |
| [AS] 플래시 AS3.0 SWC배포 하기 관련 (0) | 2020.09.21 |
| 플레시 액션 스크립트 정규식 표현 패턴 or (문자열 나누기) (0) | 2020.09.21 |
댓글 영역