Should I use GSAP for simply animated flash banners?

[dgbenner]

I just got my feet wet with Tweenlite, and created a simple 300x250 display banner. It has a single image and a few lines of type that tween in and out.

 

I was done and saw my file size was about 27kb. A typical banner that size I can get to about 12-15kb, but without the buttery motion GSAP has...

 

I ran an output report and pasted it below... It looks like the 16,000 AS bytes took up a big chunk of the swf. Since Im just doing basic banners, should I stick to Flash's native tweening instead?

 

I also pasted my Tweenlite code below the report, if there's something Im doing that could be bloating the file.

 

I get the possibilities of GSAP being powerful, but I am not at the level currently to use it as a go between between native/timeline tweens and GSAP code.

 

Any thoughts?

 

 

 

 

 

300x250 test.swf Movie Report
------------------------------

Metadata
--------
Bytes         Value
----------    -----
       939    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/"> <xmp:CreatorTool>Adobe Flash Professional CS6 - build 481</xmp:CreatorTool> <xmp:CreateDate>2014-11-03T09:50:24-05:00</xmp:CreateDate> <xmp:MetadataDate>2014-11-04T15:26:42-05:00</xmp:MetadataDate> <xmp:ModifyDate>2014-11-04T15:26:42-05:00</xmp:ModifyDate> </rdf:Description> <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:format>application/x-shockwave-flash</dc:format> </rdf:Description> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#"> <xmpMM:InstanceID>xmp.iid:EAB7B9250D2068118083F07BA108F061</xmpMM:InstanceID> <xmpMM:DocumentID>xmp.did:EAB7B9250D2068118083F07BA108F061</xmpMM:DocumentID> <xmpMM:OriginalDocumentID>xmp.did:F77F1174072068118083A353E50FFFFA</xmpMM:OriginalDocumentID> <xmpMM:DerivedFrom rdf:parseType="Resource"> <stRef:instanceID>xmp.iid:F77F1174072068118083F07BA108F061</stRef:instanceID> <stRef:documentID>xmp.did:F87F1174072068118083A353E50FFFFA</stRef:documentID> <stRef:originalDocumentID>xmp.did:F77F1174072068118083A353E50FFFFA</stRef:originalDocumentID> </xmpMM:DerivedFrom> </rdf:Description> </rdf:RDF>

Frame #    Frame Bytes    Total Bytes    Scene
-------    -----------    -----------    -----
      1          30026          30026    Scene 1 (AS 3.0 Classes Export Frame)

Scene      Shape Bytes    Text Bytes    ActionScript Bytes
-------    -----------    ----------    ------------------
Scene 1             38             0                 16116

Symbol           Shape Bytes    Text Bytes    ActionScript Bytes
-------------    -----------    ----------    ------------------
arrow_mc                   0             0                     0
background_mc              0             0                     0
base_mc                   28             0                     0
button_png_mc              0             0                     0
headline_1_mc              0           217                     0
headline_2_mc              0            84                     0
logo_mc                  494             0                     0
subhead_mc                 0           147                     0

Font Name           Bytes         Characters
----------------    ----------    ----------
TradeGothic-Bold          3541     .?ABCDEGHIJLNOPRSTUWYaceghiklnoprtuvwxy

ActionScript Bytes    Location
------------------    --------
             16116    Scene 1:Frame 1

Bitmap              Compressed    Original      Compression
----------------    ----------    ----------    -----------
background_a.jpg          5858        300000    Imported JPEG=102
Untitled-1.png             549         10212    Lossless
button(1).png             1411          4640    Lossless

 

 

 

 

 

 

 

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([FrameLabelPlugin, ColorTransformPlugin, TintPlugin]);
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.BlurFilterPlugin;
TweenPlugin.activate([blurFilterPlugin]);


//moves headlines off stage
TweenLite.to(headline1_white_mc, 1, {x:-250, y:137.2,  delay:6, ease:Sine.easeOut, blurFilter:{blurX:10, blurY:10} } );
TweenLite.to(headline1_bronze_mc, 1, {x:527, y:137.2,  tint:0x996007, delay:6, ease:Sine.easeOut, blurFilter:{blurX:10, blurY:10 }  } );

//moves final headline onto stage
TweenLite.to(headline2_white_mc, .75, {x:203.65, y:63.65, alpha:1, delay:7, ease:Sine.easeOut } );
TweenLite.to(headline2_bronze_mc, .75, {x:203.65, y:63.65, alpha:1, tint:0x996007, delay:7, ease:Sine.easeOut } );

//moves white base block and white arrow onto stage
TweenLite.to(base_mc, 1, {x:150, y:225, delay:8, ease:Sine.easeOut } );
TweenLite.to(arrow_mc, 1, {x:239, y:183.95, delay:9, ease:Sine.easeOut } );

//fades in final elements
TweenLite.from(logo_mc, 2, {x:239, y:208.55, alpha:0, delay:10, ease:Sine.easeOut } )
TweenLite.from(button_mc, 1.4, {alpha:0,  delay:9.75, ease:Sine.easeOut  } );
TweenLite.from(subhead_mc, 1, {alpha:0, delay:10, ease:Sine.easeOut } );
 

[Carl]

If you are concerned about file size I recommend 2 things

 

1. remove the dependency on plugins as each one adds a tiny bit, consider other effects 
2. go super lightweight and use TweenNano

 

I just did a test and TweenLite on its own only adds about 8kb, activating the plugins you are using comes in around 11kb total. 

 

I think for 11kb you are getting a lot of power and performance, I wouldn't recommend going back to timeline tweens but I might be a little biased

[dgbenner]

haha. ok, thanks Carl. Most of my projects Im not sure what file size to expect, so it's always a concern when doing professional work to meet IAB standards.

 

however, Im thinking I can use timeline tweens as well as GSAP initally until I get a better grasp.

 

thanks again

dan