Our project is a MMORPG, using scaleform to render UI. Now we use Flash CS5 to create UI panels with scaleform CLIK. With the development of this project, we encountered some problems:
CLIK is not skinned, we have to create separate symbols for each component with different disappearance, so we have PushButton1, PushButton2, RadioButton1, RadioButton2...
Flash CS5 is not a What You See is What You Get tool. For instance, we have a shared component named Window, it has a close button as it's child. In a fla, we first pull a Window on the stage, and modify its size, the close button will be scaled in the stage.
We can constrain the close button in as code, but artists have to see the right result in Gfx Player on runtime.
We have some common components fla like common_button.fla with most of button components in it. Common components are runtime shared in different fla. In a UI fla (e.g. friendpanel.fla), when we need a common component, we copy it from common_xxx.fla and paste it in the new fla library. If a panel is complex, it's library will be confused and not easily managed. If the common one is not satisfying requirement, we will double-click the pasted component and modify it in the local fla, and this caused more resource management troubles.
So I consider if we should create a skinned UI component lib and an UI editor to handle this problems. Does any one has similar experience?
These are common workflow problems reported by many Flash IDE users unfortunately. Certainly, creating your own tool to solve these problems is a good option, but a costly one. The Scaleform team is investigating possible solutions to these types of issues for future versions of the SDK. In the meantime, there's not much that can be done to remedy these issues that I am aware of.
Related
I'm a relatively new developer in AS3 using Flash Builder. My objective is to create a quick/fast loading small SWF preloader for a larger (30mg) SWF application. I can't include the larger SWF inside the preloader, but I can use external interface calls to get jquery to tell me what the speed of internet the users are using and figure out how long it should take to load based on the size of the larger SWF.
Right now, we have a large web application that takes around 5 mins to load if the client has a slow internet connection. So, we wanted to use a small SWF preloader that will display a loading circle or loading bar, and display options if the SWF takes longer than 5 mins to load. Kind of like error handling. For instance, for Safari, sometimes the player actually has to click the SWF in order for it to load. Is it possible to have a button on the SWF that will make it start loading?... Is it easier to create the preloader in jQuery? I'm just wondering if it's just going to create more issues using a SWF to load a SWF. Any ideas?...
Any ideas on how to tackle this beast? I've read almost every article about preloaders but there is nothing that references preloaders created in Flash Builder.
I can't use Flash Professional or timeline. It has to be in Flash Builder.
So I tried to use the below tutorial and I wasn't able to actually get anything to appear when I test it. I'm getting an error at the "run()" function:
Error: Error #2136: The SWF file http://local.myproj.com/MyProject.swf contains invalid data.
at Preloader/run()[/Development/MyProject/src/Preloader.as:109]
at Preloader/onEnterFrame()[/Development/MyProject/src/Preloader.as:46]
References:
http://fortheloss.org/how-to-preloader-in-flash-builder-4-7/
I worked until two years ago with a lot of these things and I know I have a few good scripts in my databases, but you are talking about Preloaded & activated loading were as in a preloader it is out of the hands of say a visitor what he or she can or cannot do, and in using a button (possible of course) the visitor has a choice to download or not! From memory there was never really a lot published yet over years of using Flex Builder I have collected some good AS3 scripts and modified them (including a progress-bar - but without time Indicator) to download in web Apps. or FLEX AIR etc. with AS3.
The small problem would only be to adapt any of it from mx to fx depending on what FLEX Builder you use!
I used my scripts mainly to download high resolution Images, Calendars, SWFs etc. with up to compressed 22 mB! Anyway, if Interested I have to look up my FLEX databases & Application to get it to you! rgs Aktell
I want to create a re-usable Flash MovieClip (component maybe?) that can be dragged and dropped from the library onto the Flash IDE stage (for an example, a "stop all movieclips timer component").
I've created some attractive vector icon graphics for visual reference, so that when it's dragged onto the stage, the developer can visually see the component on the stage, similar to what Google does with it's DoubleClick components. It's not important for these icon graphics to be seen at runtime however, and I'd like their visual portions to not be compiled at runtime to save on filesize.
I'm often asked to create visually rich Flash units in extremely small file sizes. So basically I want my movieclip icon components to not add to filesize (except for the code portion), not compile and render visually but still have the code within them run.
How can I achieve this? Would creating them as components do anything for my issue? Is this even do-able?
Components are definitely the best way to achieve visually represented imported code, however it would be much easier, more compatible and more reliable to just use an imported code library...
Make a seperate .as file, put it in com/mycompany/animation in your swf folder (or use a global classpath), and add this code:
package com.mycompany.animation {
class MyTimerUtils {
public static function stopAllClipsAfterTime(ms){
setInterval(MyTimerUtils.stopAllClips, ms);
}
public static function stopAllClips(){
//etc
}
}
}
Then when you want to use it in a project, just put this code on frame 1 of your main timeline:
import code.mycompany.animation.MyTimerUtils;
MyTimerUtils.stopAllClipsAfterTime(3000); // 3 seconds
What could be easier? If another developer wants to know if a piece of code is implemented they need only look at the first few lines of code.
I am currently working on a rather large, UI-heavy Flash game. Our team has been working on this for about 9 months now. None of us had any previous experience with Flash, so we have continually improved our workflows during this time. However, we still feel that what we are doing now is not optimal, especially the interface between coders and artists, so I am wondering how other teams are working.
The ideal workflow should satisfy the following requirements:
1. Reused UI elements are defined only once
This means, if we want to change a font or a button style, we do not want to go trough all of our menus and change them manually. We want them defined in one central place and only referenced from there. Bonus points if the assets are shared not only at edit time but also at runtime, i.e. they are downloaded only once.
2. Everything is loaded on demand
Currently, we have two different loading steps: First, we load the menu libraries. When this is done, the players can already interact with all the menus. Then, we start loading the actual gameplay data. The initial loading time is still too long, though, and causes us to lose many potential players. What we really want to do is to load only the bare minimum required for the main menu and then load everything else only when the player tries to actually open the respective menus. Zuma Blitz does this really well.
3. Artists can perform minor changes without help from coders
If a menu should be re-designed without changing the actual functionality, it should be possible for artists to do that on their own in Flash CS6. This requires a clear interface between art and code, and it should also be possible for artists to test and debug their changes before sending them to the coders.
-
Our current workflow looks like this: The artist build the screens as MovieClips in Flash CS6 and export them as SWFs. On the code side, load the MovieClips from the screen SWFs and use them as the View classes in our PureMVC-based system. The Mediators access the elements like text fields in the Views by their instance names.
This is error-prone because there is no central place to define the interface (i.e. the instance names). A lot of communication overhead between coder and artist is required. Also, it creates a dependency between the code and the internal structure of the movieclip. The artists cannot attach the text field to a different sub-movieclip when they want to apply some effects to it.
We are experimenting with an event-based interface that requires the artist to add a few lines of code to the movieclip. This is less error-prone and interdependent than before, but it still does not completely satisfy (3) unless we write additional tools for testing and debugging. This must be a common problem and I can hardly imagine that there is no easier way.
For (2), we also started building a home-brewed solution but again, this is such a common task, there has to be something out there already that we can use.
So, how do experienced Flash developers manage such large projects?
I have some thoughts, but they are based on my coding style, which is unique to me.
1. Reused UI elements are defined only once
Depending on what you're reusing, this can be as simple as defining a library symbol and just using it. Fonts can be replaced without digging with a search and replace, and you can also simply swap out the font in the Font Embedding menu.
For sharing across xfl's, you can use a Flash Pro Project. Keep in mind that there's a certain amount of time overhead involved in this (files will want to update when you open them or save them, Flash crashes more with Projects, and it can be a bad idea to try to work on two files from the same project at once).
Some people use swcs, but doing so requires that you instantiate things in it in code, which might not work for your workflow. I use them for audio only, and I find that the objects in it have to be compiled on or before the frame you designate as the AS compile frame, or the sound can't be properly instantiated. I suspect this is going to be the case for anything instantiated from a swc.
2. Everything is loaded on demand
One of the best-kept secrets of Flash is that this is trivially easy to accomplish using the timeline and educated use of the complier. Here's how it works:
If your ActionScript compile frame is a frame greater than 1, then here is how things will compile:
Before Frame 1:
Any visual assets and embedded sounds used on frame 1
Your main Document Class, plus any Classes directly referenced from the Document Class (which is a good reason to code to Interfaces)
Before your AS compile frame (N):
Your AS Classes (the code, not necessarily the visual/audio assets)
The visual and audio assets for any library symbols set to Export for AS in frame N (even if they are not used in the swf)
Before the frame where the asset is first used on the timeline:
The visual/audio assets in all library symbols where Export for AS in frame N is not checked.
If you put a spinner loading graphic on frame 1 and you have selected frame 10 as your export frame, then if you just let the movie play until it hits frame 10, here is how it will load:
If you have any heavy assets in your spinner or directly referenced in your main Document Class, users will see a blank screen while this stuff downloads
The spinner will become visible and spin
Once your AS Classes have loaded, along with the Library Symbols set to Export in Frame 10 and the assets that are actually on Frame 10, you'll see those assets, and everything you need to use them will be ready.
The rest of the swf will continue to load in the background, updating framesLoaded.
I actually use a combination of a setter for the object that's on frame 10, plus an ENTER_FRAME handler to check to see if we're on frame 10 yet. There are certain things that I have to do that are easier based on one and others that work better to do the other way.
3. Artists can perform minor changes without help from coders
If the code is all in the Base Class for the library symbol, artists don't need to understand it, as long as they don't remove or change a needed instance name. I try to minimize dependence on instance names by watching ADDED_TO_STAGE (capture phase) and watching for Display Objects by type. Once I have a reference to an object of the appropriate type, it's easy enough to watch for REMOVED_FROM_STAGE on that object to dereference it. This is similar to how frameworks such as RobotLegs and Swiz work.
Further, I use a concept I call "Semantic Flash," where I do a lot based on labels. I have a base Class, FrameLabelCip, which has built-in nextLabel() and previousLabel() functionality, as well as dispatching FRAME_LABEL_CONSTRUCTED events. It's really easy to go from storyboard event name to Flash label name and just build out the graphics bang-bang-bang.
I make heavy use of Graphic Symbols for synchronizing graphics across multiple labels (for example, bulleted lists), instead of relying on code. This animator's trick makes these things both robust and approachable to less-technical teammates.
I'm currently working on an Adobe AIR project to pump out my level editor but I'm running into an issue. I basically need to implement an interactive movie editor. My question is how would you recommend I get the timeline editing started? Functionality wise it needs to be able to set tween key frames for position, scale, and alpha. Any ideas?
I've also been trying to look into pulling tween data from a swf. I'm not entirely sure how applicable this would be.
I'm not sure what you mean by movie editor - movie as in a sequence of images(bitmaps) or movie as in flash MovieClip ?
If it's the later, you could use a tweening engine like TweenLite to do the hard lifting and then it's up to you how you organize the scrollable GUI for the timeline (plenty of examples out there, starting with Flash/After Effectts/Blender/etc.) Feedback from your designer/animator is crucial I presume.
Pulling data from Flash could also be possible. If you'd like to parse the swf you can try Claus Wahlers' awesome as3swf library. Be sure to check some of his posts:
SWF Timeline Reconstruction with as3swf
Flash IDE Inspired Flex 4 Timeline Component
Another option would be to use jsfl (JavaScript scripting in the Flash IDE) and parse the tweens your designer/animator creates. It should be a matter of parsing a XML for the tween(be it old/classic or new/motion). If you go the JSFL route, you might also find the xJSFL project useful.
Also, for inspiration on game/animation tools check out Spriter
I have two ActionScript 3 projects, game(.swf) and minigame(.swf). At runtime the main game loads the minigame via Loader. I also have a shared library (SWC) of event classes, included by both, which minigame will need to dispatch and game will need to listen to.
First: Is this possible this way?
Second: What will happen if I compile the minigame, then change the event classes so they're incompatible, then compile the main game. Will Flash crash when trying to load the minigame SWF? (I hope so)
Third: And what will happen if I change the event classes, but in a way that preserves interface-level compatibility?
If you have classes named the same but not sharing the same functionality just use a different class path for each (i.e com.game.* com.minigame.*), this will avoid all conflicts.
Basically if a class named the same in several SWFs only the one loaded first will be used.
On the other hand if you really want to share the same classes between both of the SWFs, make sure you only include them in the main SWF (you can choose include/exclude in the publish settings of Flash IDE or in the compiler settings of Flex SDK). This will make the whole loading process a bit lighter and you will avoid weird conflict related bugs.