Flash Builder en Flash IDE

[tralala]

Ik weet dat er al veel over geschreven is in het verleden (misschien hier niet zo bijzonder veel :p). Eerst even mijn probleemstelling schetsen. Ik ontwikkel nogal vaak Flash apps in Flash CS3 en Flex Builder/Flash Builder, bijna uitsluitend OO. Ik gebruik Flash CS3 om de componenten te tekenen en hun class aan te duiden, evenals de document class. In Flex Builder maak ik een ActionScript project aan. Ik sla mijn .fla in de project folder op. Daarna script ik in Flex Builder, en keer terug naar Flash CS3 om te exporteren.

Nu is heel dat gedoe nogal omslachtig. De folders in flex die gegenereerd zijn laten zich niet zo simpel verwijderen, het opzetten van het project duurt nogal lang.

Nu ben ik net overgeschakeld op FlashBuilder (moet nog een tijdje wachten op CS4 -> werkgever deed eerst nogal kaka). Ik ben zeer nieuwsgierig naar de nieuwe mogelijkheden die FlashBuilder biedt in combinatie met Flash CS4. Zie ook dit artikel:
Flash Builder and Flash CS4 Professional

Many designers and developers use both Flash Builder 4 beta and Adobe Flash CS4 Professional to create applications, so we added a number of features to Flash Builder 4 beta to improve the experience of creating and editing Flash components. In the Components panel of Design view, you will see options to add a New Flash Component and a New Flash Container. You can drag either onto the design surface, resize it, and position it. Then, either double-click it or select Create in Adobe Flash from the Property inspector to launch Flash CS4 and create the content. When you’re finished, click Done in Flash CS4 to return to Flex Builder 4 beta. All of the plumbing (as well as the file and library linking) is handled for you automatically. You can also invoke Flash CS4 to edit previously created Flash components. This functionality replaces the Flex Component Kit for Flash, and enables a much smoother workflow between Flash Builder and Flash CS4.


Nu vroeg ik me af hoe jullie te werk gaan bij het maken van een flash project met veel as? Ik werk uitsluitend op Mac dus FD is geen optie... Ik vind het jammer dat er nog steeds niet echt veel mogelijkheid is om FlashBuilder te gebruiken als as editor voor een Flash project (tenzij je zoals in bovenstaand artikel in een flex project een flash component gebruikt, maar dat is toch niet helemaal hetzelfde...).

[mknol]

Goede vraag :) Zelf zoek ik bij elk project ook weer naar een andere werkwijze.

Momenteel vind ik het zelf erg fijn werken om flash te gebruiken om grafische assets te
maken, en evt. wat keyframe animatie. Ik hang aan alle nodige assets een classe, zodat ik deze makkelijk kan opnemen of extenden in actionscript. Ook geef ik alles netjes een instancename, voor zover dat nodig is. Dan compileer ik vanuit Flash alles als een assets.swc.

Vervolgens maak ik in FlashDevelop een AS3 project, voeg de assets.swc toe ('add to library'), zodat deze gebruikt kan worden voor een andere swf. Daardoor heb je code completion op je classes van Flash. Voordeel daarvan is dat je de opmaak en simpele animatie los hebt en los kan gaan met actionscript.
Vanaf dan compile ik alleen via FlashDevelop. In principe kun jij ook met Flexbuilder ook een losse compiler (Flex SDK) gebruiken en op ongeveer dezelfde manier werken. Zo hoef je nl. niet steeds terug te keren naar je Flash, alleen als je assets wilt wijzigen. Mocht je in een team werken is dit direct een pluspunt, gezien design + code bijna onafhankelijk zijn.

Momenteel vind ik het niet echt een probleem om op deze manier (dus met 2 separate applicaties) te werken, gezien ik van beide tools het beste pak en redelijk efficiënt aan de slag kan.

Overigens las ik dat je FD kan gebruiken op een Mac, maar volgens mij is dat wel een heel verhaal. http://www.flashdevelop.org/community/viewtopic.php?p=11315

[Ea.Z]

@Tralala: Kheb exact diezelfde workflow ook nog gehanteerd maar dat is best wel ***ten als je vb een textfield in een asset op de stage/library wilt aanspreken.

@Mark: wij werken blijkbaar een beetje gelijkaardig.
Voor de mensen die er wat meer info over willen (want volgens mij is dit tot nu de optimale workflow. Wellicht gaan Flash Builder en Flash Catalyst hier nog betere workflows voor toelaten :) )


Actionscript project aanmaken in Flex.
Daar een main as file aanduiden. Hier komt je 'document class' zogezegd instaan. Maak hiervan ook de default application
In je project maak je een map 'lib' aan. Deze voeg je toe aan het project als 'swc folder' (Project settings > build path > add swc folder)
Ga naar Flash. Maak een nieuwe fla aan, en sla deze op in de lib map in je flex project
In flash ga je naar 'file' > 'publish settings'. In de tab 'flash' vink je 'export swc' aan.


Nu heb je je project-setup klaarstaan. Als je dit voor het eerst moet doen lijkt dit veel werk, maar eens je dit gewoon bent gaat dit echt razendsnel. De workflow zelf is nog veel leuker! Hoe werkt dit nu?

Stel je wilt een Mannetje maken en dit interactief aansturen met AS.

In flash maak je de layout voor het mannetje.
Maak van het mannetje een MovieClip.
In het dialoog venter 'convert to symbol' vink je 'export for actionscript' aan. Vul bij de classname een passende naam in (vb: BasisMannetje)
In die movieclip geef je de verschillende onderdelen passende instance names (linkerBeen,RechterBeen,linkerArm,rechterArm, hoofd)
Als je mannetje er goed uitziet, en alles dat je wilt kunnen aansturen via actionscript een instance name heeft kun je CMD+ENTER / CTRL+ENTER induwen


Nu is de swc aangemaakt in je lib folder in het Flex project. Gezien die volledige lib folder gebruikt wordt (en dus alle swc's die erin zitten) kan flex nu aan die BasicManneetje class (omdat die mee geexporteerd is naar die swc)
In flex maak je nu een Actionscript class aan
public class Mannetje extends BasicMannetje
Aangezien je nu BasicMannetje extend kun je dus ook aan de instance names (met code completion!) die je een paar stappen hiervoor hebt ingesteld. Beter nog: In deze class heb je zogezegd die assets van dat mannetje vast, en voeg je er gedrag/interactie aan toe!

Als je daarmee klaar bent kun je in je main class zo tewerk gaan
var mannetje:Mannetje = Mannetje();
addChild(mannetje);
mannetje.loopNaarRechts();
//etc

Da's hoe ik Flash en Flex combineer en tot nu toe werkt dit best fijn!

[tralala]

@Mark: Bedankt voor je snelle reactie. Ik heb indertijd toen ik overschakelde van XP naar OSX ook zitten proberen om FD te draaien met Parallels maar dat is echt één grote soep! Dan was mijn huidige werkwijze toch nog heel wat beter :).

@Ea.Z: héél erg bedankt.. na de uitleg van Mark had ik ook wel zoiets uitgevogeld maar dat hoeft nu niet meer! Echt zalig, ik snap niet waarom die werkwijze (voor mij toch) niet te vinden was tot nog toe!

[jaspermuts]

Overigens las ik dat je FD kan gebruiken op een Mac, maar volgens mij is dat wel een heel verhaal. http://www.flashdevelop.org/community/viewtopic.php?p=11315
Gek dat het in die topic zo moeilijk wordt gemaakt.
Ik heb zelf Windows 7 (RC1) virtueel geinstalleerd,
dit is heel makkelijk, want Parallels heeft een wizard om een OS te installeren, en dan ook per soort (Win 98, Win XP, Win (experimental) (voor versies nieuwer dan Parallels), Linux, MS-DOS..).

Volg de wizard en selecteer de iso of schijf waar de installatie van Windows en je kunt direct beginnen met installatie en het gebruik van windows zelf
(in een venster, fullscreen of 'coherence' waarbij vensters, programma's en start menu integreren in mac osx), en dus ook FlashDevelop installeren

Daarna Parallels Tools installeren, dat is een knopje in het menu),
en je kunt in beide os-en elkaars schijven benaderen (afhankelijk van je instellingen, bij mij zijn het netwerkschijven van elkaar)

Als je al via Boot Camp een 'echte' windows schijf op je mac hebt, dan kun je deze op dezelfde manier in Parallels opstarten, alleen hoef je de schijf dan alleen nog maar te selecteren

De enige nadelen vind ik eigenlijk dat je windows moet opstarten om FlashDevelop te gebruiken en dat je windows en mac sneltoetsen door elkaar moet gebruiken (bij mij wordt de cmd-toets in windows gezien als de windows-toets, dus soms als ik wil cmd+tabben naar osx, opent het start menu)

Ik heb voor de lol zelfs al wat gratis os-en virtueel geinstalleerd omdat het zo makkelijk is..ik hoop ooit nog s Win 3.11 aan de praat te krijgen :P

[tralala]

(@Ea.Z)
1. Hoe kan je de eigenschappen van je flashmovie gaan instellen in een actionscript project (afmetingen, framesnelheid, achtergrondkleur e.d.)
2. Maak je in je project ook gebruik van swfobject2? Ik veronderstel dat je dan aanpassingen maakt aan je html-template folder?

[mknol]

1. Meestal kan dit in de IDE zelf. In FlashDevelop kun je dit gewoon instellen
http://wiki.whirled.com/images/8/86/Flash_Develop_Properties_Output.png
Maar het kan ook met code. Dit wordt door de compiler gebruikt als settings. Het werkt niet in een normaal Flash project.
[SWF(backgroundColor="#FFFFFF", frameRate="31", width="550", height ="400")]

2. Een FlashDevelop project heeft standaard swfobject erin zitten, dit wordt aangemaakt als je je project aanmaakt in je /bin/ folder, waar overigens ook je Flash standaard geplaatst word bij compilatie.

[jaspermuts]

En nou ben ik benieuwd naar het resultaat van reversi!
Eeuwen geleden ook eens geprobeerd..maar met nog veel foutjes;)

[mknol]

Stomme vraag misschien, maar wie heeft het over reversi?

[Bartj3]

haha jij zelf...
je voorbeeld compiled naar reversi.swf

[tralala]

@mknol: thx, maar ik gebruik geen FlashDevelop he :)

[jaspermuts]

1. Meestal kan dit in de IDE zelf. In FlashDevelop kun je dit gewoon instellen

Dat vetgedrukte is het antwoord op je vraag. Daarna is er een voorbeeld van hoe dat in bijvoorbeeld FlashDevelop gaat. En de SWF tag kun je sowieso gebruiken, in elke IDE behalve Flash (denk ik).

@mknol: Altijd opletten wat er eigenlijk in je screenshots staan he! Soms heb je niet door dat je meer informatie deelt dan de bedoeling is ;)

[Jan]

En de SWF tag kun je sowieso gebruiken, in elke IDE behalve Flash (denk ik).
Vanaf CS4 kan je daar ook [SWF, [Embed etc gebruiken:
[SWF(width=800, height=800, backgroundColor=0xff0000, frameRate=7)]
Kan zowel in een class als in een frame op de tijdlijn.

Groeten;
Jan

[mknol]

haha jij zelf...
je voorbeeld compiled naar reversi.swf
Haha! Ik heb de screenshot niet zelf gemaakt :) Altijd handig, Google Image Search.. 8)

Kan zowel in een class als in een frame op de tijdlijn.Huh .. dat wist ik helemaal niet. Goeie tip!

[maasdammer]

Ea.Z (http://flashfocus.nl/forum/member.php?u=29), geweldige tip!