ADOBE/ ActionScript

플래시 air 안드로이드 런처화면, 초기화면, splash image 관련

AlrepondTech 2020. 9. 20. 03:13
반응형

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

참고 사이트는  http://www.redherringlabs.com/how-to-create-a-native-splash-screen-for-an-air-application-on-android/

 

여기 설명을 참고 하였다. 그리고 요즘 AIR SDK 를 깔면 좀 다르게 하는 방법을 적겠다

 

최신 AIR SDK를 설치 한다. 요즘 나온버전 AIR SDK 22버전을 설치 하였다.

 

플래시 빌더에 AIR SDK를 설치한 부분에 

 

($AIR SDK ROOT 플래시빌더 안에 AIRSDK설치ROOT)\lib\android\lib\resources\app_entry\res\values\

 

styles.xml 파일이 있을것이다. (AIR SDK 22버전이 되어야 이렇게 파일이 되어있다. 꼭 22버전 아니어도 될 것 같지만 

높은버전은 좋으니 왠간하면 상위버전으로 해주자)

 

<resources>

    <style name="Theme.NoShadow" parent="android:style/Theme.NoTitleBar">

        <item name="android:windowContentOverlay">@null</item>

    </style>

</resources>

 

이렇게 바꾸어준다.

 

<resources>

    <style name="Theme.NoShadow" parent="android:style/Theme.NoTitleBar">

        <item name="android:windowContentOverlay">@null</item>

    <item name="android:windowNoTitle">true</item>

            <item name="android:windowFullscreen">true</item>

            <item name="android:windowBackground">@drawable/intro</item>

    </style>

</resources>

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

그리고 인트로 이미지부분

 

($AIR SDK ROOT 플래시빌더 안에 AIRSDK설치ROOT)\lib\android\lib\resources\captive_runtime\res\drawable\

 

여기에 위의 xml에 언급한 intro 부분 이미지를 

"intro.png"  를 위의 경로에 넣어준다~!!!

 

그래고 apk를 빌드 할때 아래와 같이 <android> ... </android> 부분을 보면 된다.

 

202psj_app_manifest.xml

 

<android>

<manifestAdditions><![CDATA[

<manifest android:installLocation="auto">

  <application android:enabled="true" android:theme="@style/Theme.NoShadow">

              <activity android:excludeFromRecents="false"> 

<intent-filter>

          <action android:name="android.intent.action.MAIN" />

  <category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

            

<intent-filter>

  <action android:name="android.intent.action.VIEW"/>

  <category android:name="android.intent.category.DEFAULT"/>

  <category android:name="android.intent.category.BROWSABLE" />

  <data android:scheme="app" android:host="mypsj" /> <!-- url 앱 실행 app://202psj -->

</intent-filter>

       </activity>

     </application>

 

  <uses-permission android:name="android.permission.INTERNET"/>

  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

          <uses-permission android:name="android.permission.UPDATE_DEVICE_STATS"/>

          <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>

  <uses-permission android:name="android.permission.READ_PHONE_STATE"/>

  </manifest>

]]></manifestAdditions>

</android>

 

 

여기서 중요한 점은

 <application android:enabled="true" android:theme="@style/Theme.NoShadow"> 이부분이다.

 

android:theme="@style/Theme.NoShadow"   이부분이 styles.xml 에서 가져온것이다. 이부분을 각자가 구성한 

안드로이드 매니패스트 부분에서 <application  android:theme="@style/Theme.NoShadow"   .... > 이런식으로 구성해주면

splash 화면 구성이 되어있을 것 이다.

 

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://www.redherringlabs.com/how-to-create-a-native-splash-screen-for-an-air-application-on-android/

 

This post will describe how to display a native custom splash screen on an Androiddevice that will be displayed between the point in time that the AIR runtime launches, and the point in time that the SWF takes control of the screen. While iOS provides out of the box tools to define a custom splash/loading screen, officially there’s no support for this on Android, so this is a workaround for this problem. No actionscript (as3 or as2) is needed for this. This will only affect how the AIR runtime launches, before the SWF takes over. Coupled with an SWF loader this should provide a smoother user experience.

This has been tested with the Flash IDE (version CS6, 12.0.0.481), and the AIR SDK (version 16.0.0.292), Android 4.4.2, using a Windows 7 PC.

 

Tools and resources you’ll need:

  • A text editor.
  • The AIR SDK.
  • A bitmap in PNG format that you want to use as a splash screen.

Step by step directions:

  • Locate the air SDK on your computer. I’m gonna call this location $AIR_ROOT. (Mine is at c:\Program Files\Adobe\AIR 16\)
  • Go to $AIR_ROOT\lib\android\lib\resources\app_entry\res\values\
  • Make a backup copy of the file styles.xml, just in case, and move the backup copy into another folder.
  • Open the file styles.xml in a text editor. (Launch the editor as admin if you don’t have the rights to write the folder $AIR ROOT.)
  • There should be a line similar to this:

<item name="android:windowContentOverlay">@null</item>

  • Replace the line above with this:

<item name="android:background">@drawable/my_splash</item>

Don’t use caps or any exotic characters.

The string my_splash is the name of the file you want to use as a splash screen, without the extension.

  • Save the file styles.xml.
  • Go to $AIR_ROOT\lib\android\lib\resources\captive_runtime\res\drawable\
  • Save the PNG you want to use as your splash screen into this folder, and rename it to my_splash.png. This time include the extension.
  • Build your APK, using captive runtime.
  • Install APK on android device.

Sit back, have a beer, and enjoy your native splash screen 

Notes:

  • I didn’t look further into this, but as far as I know the main intent that AIR launches is always in portrait (vertical) mode. If your app is landscape (horizontal), the view will rotate over to horizontal when the SWF gains control, and thus your splash screen will get stretched for the last few milliseconds. I’m not sure if there’s a way around this.
  • Also I don’t think there’s any way to take into account the screen aspect ratio of different devices. So for example if you optimize your bitmap to fit a 16:9 screen, it will get stretched a bit when run on a 4:3 screen, and vice versa. Maybe one workaround is to settle for a ratio somewhere inbetween, and avoid using circles and boxes on the loading screen that help give away the stretching.
  • This splash screen will be included in every APK you build so you’ll need to editstyles.xml on a per-project basis.
  • To go back to the black screen, just replace styles.xml with the backup you made and erase my_splash.png.
  • The custom splash will be displayed behind your SWF for the entirety of your app’s running time. So this only works if your app uses some kind of a background and is not transparent.
  • Also because of the image being present the whole time, the app’s size in the phone’s memory will increase by the amount that the image takes up. Consider if you want to sacrifice memory this way.

Let me know if this works for you.

 

 

 

 

 

=================================

=================================

=================================

 

 

 

출처: https://forums.adobe.com/thread/764981

 

Hi Guys

 

I've got a game where the final .apk file size is around 6MB and it was taking anywhere from 10 to 25 seconds to load after initial installation with the user seeing nothing but a blank screen. In fact Android sometimes complained that game was taking to long and asked if I want to force close it !

 

I've tried adding a very small splash .swf (less than 4KB !) which then loads the main swf and images but the loading time is still around 10 seconds ! (if the user has the game in memory it does load immediately so that's something!)

 

So my questions are

 

(A) Is the android Air runtime loading the whole .apk file before displaying anything onscreen ?

 

 

(B) Is it possible to get large (5 to 10 MB) AIr apps (AS3 not Flex) to load with a splash screen appearing immediately? if so what's the basic technique

 

(C) is it possible for one APK to call another apk

 

 

Thanks in advance guys

 

Opps - I should also say that the same game on the iPhone and on a PC has a splash appearing straight away

동일한 질문 있음 좋아요 0개 표시(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:

 

 

 

 

=================================

=================================

=================================

 

 

I need to add a preloader / splash screen to an Adobe Air application that I am building in IntelliJ Idea using pure Actionscript.
I have found many solutions, but they all assume a flex application. I am using the flex compiler, but the project is not written in flex so there are no mxml tags in order to use SparkMobileSplashScreen.mxml
Can a splash screen image be added to the air application xml file somehow?

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

Here's a basic setup for an embedded preloader. Your Document Class should look like this:

package {

  import flash.display.Sprite;

  [Frame(factoryClass='Preloader')] //class name of your preloader

  public class Main extends Sprite {

     public function Main() {
        //init
         }
      }
    }

 

Preloader Class:

package {

import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.events.ProgressEvent;
import flash.utils.getDefinitionByName;

public class Preloader extends MovieClip {

 public function Preloader()
 {
    //add preloader graphics 

    //check loading progress
    this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
 }
 private function onProgress(e:ProgressEvent):void 
 {
    var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
    if (percent == 100)
    {
      this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
      onLoaded();
    }
 }
 private function onLoaded():void
 {
   nextFrame(); //go to next frame
   var App:Class = getDefinitionByName("Main") as Class; //class of your app
   addChild(new App() as DisplayObject);
  }
 }
}

 

 

 

 

=================================

=================================

=================================

 

 

I've read all threads here already about this subject. For most AdobeAir projects for Android, no matter what size, it could take up to 20 sec to load the app, and while it loads, all you see is a black screen. As there's no support for a Default.png like there is for iPhone, we have to use a preloader.

I've only found one for Flex, which is no good to me as I'm using Flash Pro 5.5 (IDE). I've tried doing some simple preload-a-swf-preloader but it just loads it to 100% before showing anything anyway.

Anyone here that can share a script of a simple preloader for Flash CS5.5?

I know that to reduce the loading time and show a splash screen on android we need to make a very small swf that will contain the loading screen image, and that same swf will also preload the maingame.swf (but can that be done? Appstore don't like code in more than one swf) into it. My tries have failed.

Here's some quotes in case someone who reads this might be knowledgable enough to help me out:


Yes its possible to get a splash to appear straight away (well within one to 2 seconds which is close enough) but

(a) You have to create a small splash .SWF which loads your main .SWF (OK so that's fairly obvious but a "Default.PNG" splash screen facility as per the iPhone packager and FLEX projects is what you might expect)

(b) Your splash .SWF must embed the splash image. If you try to dynamically load an image nothing will appear until the whole of the APK file is loaded ( and presumably initialised). That was what I was doing wrong.

It takes 20 sec to load, it's all black before it's done loading and the runtime takes up 25mb!

(1) Yes that is a bit of a problem but seems to be the cost of compiling in the AIR runtime. I am sure that most mobile projects only use a subset of the entire AIR library - its a shame you can't just compile in the bits that you need and drop the rest.

(2) This is partly because of (1) and the fact it takes so long to get a big file up and running with AIR. You need to create a preloader that is very small and all it does is display a splashscreen and then loads in the main 25mb file that you embed in the assets of your preloader. The small preloader appears quickly and then gives you time to do your 'work' loading the main app with something onscreen. This gives an example / explanation and there are others out there :

http://www.mcbrearty.me.uk/index.php...splash-screen/

    1.  
    2. Reply With Quote
    3. October 31st, 2011, 04:14 PM#2 Registered User
    4.  
    5. 975 
    6. tbo
have you tried embedding the image in the preloading swf like you quoted at like (b)?
That works for me. Android should allow this, and its not needed on iOS
    1.  
    2. Reply With Quote
    3. October 31st, 2011, 04:18 PM#3 Registered User
    4.  
    5. 975 
    6. tbo
are you saying that when you download other peoples Air android applications they take that long to init as well? I don't know how most people do it on andriod, but i have never had an app take longer than a few seconds to show something... 20 seconds its not normal
    1.  
    2. Reply With Quote
    3. October 31st, 2011, 06:20 PM#4 Registered User
    4.  
    5. 20 
    6. tenchy

but i have never had an app take longer than a few seconds to show something... 20 seconds its not normal

For apps made with Adobe Air for Android, there's no Spash Screen, it's just a black screen that lasts for 18-20 sec. Those apps you've run that doesn't take that long are not made with Adobe Air.

have you tried embedding the image in the preloading swf like you quoted at like (b)?
That works for me. Android should allow this, and its not needed on iOS

No, as I don't know how to go about it because to load a swf into another swf, for the first swf to be loaded, it still needs to load the entire Adobe Air runetime, lasting 20 sec with a black screen, which defeats the purpose.

If you know how to do this and could post some code (I'm using Flash CS5.5 IDE btw so no Flex or Flash Builder) that would be great, because having this problem with a black screen for 20 secs is killing me.
    1.  
    2. Reply With Quote
    3. November 3rd, 2011, 11:43 AM#5 Registered User
    4.  
    5. 975 
    6. tbo
Yes i was referring to adobe air apps on android, i look for and download them often for observation purposes.
I had read that same thread on adobe forum where the person said you must embed the splash image in the preloading swf otherwise it will continue to load the whole apk.

I did it, it seemed to work so i kept doing it. However i have never seen any app show black screen for more than... maybe 5 seconds tops, and i doubt every air android author is using a custom method to load the swf. This leads me to believe perhaps your device is specific to this issue if your really seeing an absurd wait of 20 seconds. I remember someone had posted a thread on adobes site about 20 second wait time when the app was first installed then no wait after, your issue sounds related.
This does not happen on my device with or without captive runtime, so again i think it might be device specific.
As far as flex goes, I had asked if flex was able to show a splash screen faster than a pure as3 app, and the answer from joe ward was no, it does not. There still may be upwards of 2 seconds or so.

SO! My current splash swf document class has a lot going on. I just deleted some of the unnecessary stuff for a quick sloppy post. Hopefully this will help. On my phone It does speed up the loading time, the splash image loads in at least 2 seconds... not ideal compared to a native .apk, but I consider it acceptable at this time.


The idea is this

-Embed splash image
-addChild(slashImage)
-wait for Event.ADDED_TO_STAGE to fire .. your image is assumed visible now
-now load up the main swf and add to stage
-dispose/remove splash image

The only thing happening here is getting the splash image to show before taking the time to load the main swf. It still needs to load up the runtime or whatever. So if you create a simple test app with nothing but an image on stage... does that take 20 seconds? if so you should log a bug and this preloader will not help on your device. What is your device anyway?
I use a Motorola droidx


PHP Code:

not really php
ignore the extra imports
document class of preloading swf

package {
    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.display.StageAlign;
    import flash.desktop.NativeApplication;
    import flash.desktop.SystemIdleMode;
    import flash.net.URLRequest;
    import flash.display.Loader;
    import flash.events.Event;
    import flash.display.Bitmap;
    import flash.display.StageScaleMode;
    import flash.display.StageQuality;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import flash.display.MovieClip;
    import flash.display.*;
    import flash.text.TextField;


    public class Splash extends Sprite {

        //embed a png image which is located in the folder 'IntoAssets'
        //assign it a Class name of 'IntroGraphic'
        [Embed(source = 'IntroAssets/androidSplash.png')]
        var IntroGraphic:Class;

        var swfLoader:Loader = new Loader();
        var url:URLRequest;
        var intro:Bitmap;
        var mainSwf:MovieClip; // the main swf you want to load up


        public function Splash() {
            init();

        }
        function init() {

            intro= new IntroGraphic();
            intro.addEventListener(Event.ADDED_TO_STAGE, imageAdded);
            addChild(intro);
        }

        function imageAdded(e:Event) {
            //at this point, your inro graphic should be visible on stage
            intro.removeEventListener(Event.ADDED_TO_STAGE, imageAdded);


            //now load your main swf
            swfLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
            url = new URLRequest("MainGameFolder/MainGame.swf");
            swfLoader.load(url);
        }

        function onCompleteHandler(loadEvent:Event) {
            swfLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onCompleteHandler);
            swfLoader.addEventListener(Event.ADDED_TO_STAGE, mainSwfAddedToStage);
            addChildAt(swfLoader,0);
        }

        function mainSwfAddedToStage(e:Event) {
            
            //dispose of your intro stuff
            this.removeChild(intro);
            intro.bitmapData.dispose();
            intro = null;
            
            swfLoader.removeEventListener(Event.ADDED_TO_STAGE, mainSwfAddedToStage);
            this.mainSwf = e.currentTarget.content;
            mainSwf.init();
            //here i have decided to call the init method of the mains swfs document class for un specified reason
            //you can of course interact with it however you want

        }
    }
}  

    1.  
    2. Reply With Quote
    3. November 3rd, 2011, 11:57 AM#6 Registered User
    4.  
    5. 975 
    6. tbo
One other thing i like about this method is the export settings in flash IDE.

main swfs .fla export settings are for iOS, because there is no preloader
and preloader swf settings are for android, which loads up the swf created by the iOS publishing

so the app works on both but i never have to change the export settings.

also you can sneak some other stuff in there, such as checking the date if you want to have the 'test' app expire at some point... or other stuff not needed for iOS
  1.  

 

 

 

=================================

=================================

=================================

 

 

 

 

반응형
저작자표시

'ADOBE > ActionScript' 카테고리의 다른 글

[AS] adobe air moblie 액션스크립트 as3 Sqlite 다루기 관련  (0) 2020.09.20
adobe air android 개발 menu key, search key, back key 이벤트 핸들링 처리 관련  (0) 2020.09.20
adobe air 액션스크립트 as3 마우스 입력 캡처 드래그 앤 드롭 기능 관련  (0) 2020.09.20
ActionScript 3.0(Flash)에서 JSON 데이터 읽기.  (0) 2020.09.20
adobe air 액션스크립트 파일 쓰기 읽기, 파일탐색기 사용 관련  (0) 2020.09.20

'ADOBE/ ActionScript'의 다른글

  • 현재글플래시 air 안드로이드 런처화면, 초기화면, splash image 관련

관련글

티스토리툴바